Skip to content

Commit 73c9686

Browse files
ryansolidryansolid
committed
Solid Signals(no proxy)
1 parent d1e3121 commit 73c9686

File tree

5 files changed

+178
-3
lines changed

5 files changed

+178
-3
lines changed

‎frameworks/keyed/solid-signals/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Solid-keyed</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/solid-signals/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "js-framework-benchmark-solid",
3+
"version": "0.8.6",
4+
"main": "dist/main.js",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "solid-js"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c -w",
10+
"build-prod": "rollup -c --environment production"
11+
},
12+
"author": "Ryan Carniato",
13+
"license": "Apache-2.0",
14+
"homepage": "https://github.com/krausest/js-framework-benchmark",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/krausest/js-framework-benchmark.git"
18+
},
19+
"dependencies": {
20+
"babel-plugin-jsx-dom-expressions": "0.10.1",
21+
"solid-js": "0.8.6"
22+
},
23+
"devDependencies": {
24+
"@babel/core": "7.4.5",
25+
"rollup": "1.15.6",
26+
"rollup-plugin-babel": "4.3.2",
27+
"rollup-plugin-node-resolve": "5.0.2",
28+
"rollup-plugin-terser": "5.0.0"
29+
}
30+
}

‎frameworks/keyed/solid-signals/rollup.config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import babel from 'rollup-plugin-babel';
3+
import { terser } from 'rollup-plugin-terser';
4+
5+
const plugins = [
6+
babel({
7+
exclude: 'node_modules/**',
8+
plugins: [["jsx-dom-expressions", {moduleName: 'solid-js/dom'}]]
9+
}),
10+
resolve({ extensions: ['.js', '.jsx'] })
11+
];
12+
13+
if (process.env.production) {
14+
plugins.push(terser());
15+
}
16+
17+
export default {
18+
input: 'src/main.jsx',
19+
output: {
20+
file: 'dist/main.js',
21+
format: 'iife'
22+
},
23+
plugins
24+
};

‎frameworks/keyed/solid-signals/src/main.jsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { createRoot, createSignal, freeze, selectWhen } from 'solid-js'
2+
3+
let idCounter = 1;
4+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"],
5+
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
6+
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
7+
8+
function _random (max) { return Math.round(Math.random() * 1000) % max; };
9+
10+
function buildData(count) {
11+
let data = new Array(count);
12+
for (let i = 0; i < count; i++) {
13+
const [label, setLabel] = createSignal(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
14+
data[i] = {
15+
id: idCounter++,
16+
label, setLabel
17+
}
18+
}
19+
return data;
20+
}
21+
22+
const Button = ({ id, text, fn }) =>
23+
<div class='col-sm-6 smallpad'>
24+
<button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
25+
</div>
26+
27+
const App = () => {
28+
const [data, setData] = createSignal([]),
29+
[selected, setSelected] = createSignal(null, (a, b) => a === b);
30+
31+
return <div class='container'>
32+
<div class='jumbotron'><div class='row'>
33+
<div class='col-md-6'><h1>SolidJS Keyed</h1></div>
34+
<div class='col-md-6'><div class='row'>
35+
<Button id='run' text='Create 1,000 rows' fn={ run } />
36+
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
37+
<Button id='add' text='Append 1,000 rows' fn={ add } />
38+
<Button id='update' text='Update every 10th row' fn={ update } />
39+
<Button id='clear' text='Clear' fn={ clear } />
40+
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
41+
</div></div>
42+
</div></div>
43+
<table class='table table-hover table-striped test-data'><tbody>
44+
<$ each={ data() } afterRender={ selectWhen(selected, 'danger') }>{ row =>
45+
<tr model={ row.id }>
46+
<td class='col-md-1' textContent={ row.id } />
47+
<td class='col-md-4'><a onClick={ select }>{ row.label }</a></td>
48+
<td class='col-md-1'><a onClick={ remove }><span class='glyphicon glyphicon-remove' /></a></td>
49+
<td class='col-md-6'/>
50+
</tr>
51+
}</$>
52+
</tbody></table>
53+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
54+
</div>
55+
56+
function select(e, id) { setSelected(id); }
57+
58+
function remove(e, id) {
59+
const d = data();
60+
d.splice(d.findIndex(d => d.id === id), 1);
61+
setData(d);
62+
}
63+
64+
function run() {
65+
freeze(() => {
66+
setData(buildData(1000));
67+
setSelected(null);
68+
});
69+
}
70+
71+
function runLots() {
72+
freeze(() => {
73+
setData(buildData(10000));
74+
setSelected(null);
75+
});
76+
}
77+
78+
function add() { setData(data().concat(buildData(1000))); }
79+
80+
function update() {
81+
freeze(() => {
82+
const d = data();
83+
let index = 0;
84+
while (index < d.length) {
85+
d[index].setLabel(d[index].label() + ' !!!');
86+
index += 10;
87+
}
88+
});
89+
}
90+
91+
function swapRows() {
92+
const d = data();
93+
if (d.length > 998) {
94+
let tmp = d[1];
95+
d[1] = d[998];
96+
d[998] = tmp;
97+
setData(d);
98+
}
99+
}
100+
101+
function clear() {
102+
freeze(() => {
103+
setData([]);
104+
setSelected(null);
105+
});
106+
}
107+
}
108+
109+
createRoot(() => document.getElementById("main").appendChild(<App />))

‎frameworks/keyed/solid/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-solid",
3-
"version": "0.6.4",
3+
"version": "0.8.6",
44
"main": "dist/main.js",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "solid-js"
@@ -17,8 +17,8 @@
1717
"url": "https://github.com/krausest/js-framework-benchmark.git"
1818
},
1919
"dependencies": {
20-
"babel-plugin-jsx-dom-expressions": "0.10.0",
21-
"solid-js": "0.8.0"
20+
"babel-plugin-jsx-dom-expressions": "0.10.1",
21+
"solid-js": "0.8.6"
2222
},
2323
"devDependencies": {
2424
"@babel/core": "7.4.5",

0 commit comments

Comments
 (0)