Skip to content

Commit 8de4854

Browse files
krausestkrausest
committed
Merge branch 'qeleb-master'
2 parents 1a6c6c5 + 6353bdf commit 8de4854

File tree

4 files changed

+193
-163
lines changed

4 files changed

+193
-163
lines changed

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
import resolve from "@rollup/plugin-node-resolve";
2-
import babel from "@rollup/plugin-babel";
3-
import terser from "@rollup/plugin-terser";
2+
import { babel } from "@rollup/plugin-babel";
3+
import terser from "@rollup/plugin-terser";
44

5-
const plugins = [
6-
babel({
7-
babelHelpers: "bundled",
8-
exclude: "node_modules/**",
9-
presets: ["solid"],
10-
}),
11-
resolve({ extensions: [".js", ".jsx"] }),
12-
];
13-
14-
if (process.env.production) {
15-
plugins.push(terser());
16-
}
5+
const TERSER_OPTIONS = {
6+
module: true,
7+
compress: { passes: 3 },
8+
mangle: true,
9+
};
1710

1811
export default {
1912
input: "src/main.jsx",
20-
output: {
21-
file: "dist/main.js",
22-
format: "iife",
23-
},
24-
plugins,
13+
output: { file: "dist/main.js", format: "iife" },
14+
plugins: [
15+
babel({
16+
babelHelpers: "bundled",
17+
exclude: "node_modules/**",
18+
presets: [["solid", { omitNestedClosingTags: true }]],
19+
}),
20+
resolve({ extensions: [".js", ".jsx"] }),
21+
process.env.production && terser(TERSER_OPTIONS),
22+
].filter(Boolean),
2523
};

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

Lines changed: 74 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,87 @@
1-
import { createSelector } from 'solid-js';
2-
import { render } from 'solid-js/web';
3-
import { createStore } from 'solid-js/store'
1+
import { createSelector } from "solid-js";
2+
import { render } from "solid-js/web";
3+
import { createStore } from "solid-js/store";
44

5-
let idCounter = 1;
6-
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"],
7-
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
8-
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
5+
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"]; // prettier-ignore
6+
const colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]; // prettier-ignore
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; // prettier-ignore
98

10-
function _random (max) { return Math.round(Math.random() * 1000) % max; };
9+
const random = (max) => Math.round(Math.random() * 1000) % max;
1110

12-
function buildData(count) {
11+
let nextId = 1;
12+
13+
const buildData = (count) => {
1314
let data = new Array(count);
1415
for (let i = 0; i < count; i++) {
1516
data[i] = {
16-
id: idCounter++,
17-
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
17+
id: nextId++,
18+
label: `${adjectives[random(adjectives.length)]} ${colors[random(colors.length)]} ${nouns[random(nouns.length)]}`
1819
}
1920
}
2021
return data;
21-
}
22+
};
2223

23-
const Button = ({ id, text, fn }) =>
24-
<div class='col-sm-6 smallpad'>
25-
<button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
24+
const Button = ([id, text, fn]) => (
25+
<div class="col-sm-6 smallpad">
26+
<button prop:id={id} class="btn btn-primary btn-block" type="button" onClick={fn}>
27+
{text}
28+
</button>
2629
</div>
30+
);
2731

28-
const App = () => {
29-
const [state, setState] = createStore({ data: [], selected: null }),
30-
run = () => setState({ data: buildData(1000) }),
31-
runLots = () => setState({ data: buildData(10000) }),
32-
add = () => setState('data', d => [...d, ...buildData(1000)]),
33-
update = () => setState('data', { by: 10 }, 'label', l => l + ' !!!'),
34-
swapRows = () => setState('data', d => d.length > 998 ? { 1: d[998], 998: d[1] } : d),
35-
clear = () => setState({ data: [] }),
36-
select = id => setState('selected', id),
37-
remove = id => setState('data', d => {
38-
const idx = d.findIndex(d => d.id === id);
39-
return [...d.slice(0, idx), ...d.slice(idx + 1)];
40-
}),
41-
isSelected = createSelector(() => state.selected);
42-
43-
return <div class='container'>
44-
<div class='jumbotron'><div class='row'>
45-
<div class='col-md-6'><h1>SolidJS Store Keyed</h1></div>
46-
<div class='col-md-6'><div class='row'>
47-
<Button id='run' text='Create 1,000 rows' fn={ run } />
48-
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
49-
<Button id='add' text='Append 1,000 rows' fn={ add } />
50-
<Button id='update' text='Update every 10th row' fn={ update } />
51-
<Button id='clear' text='Clear' fn={ clear } />
52-
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
53-
</div></div>
54-
</div></div>
55-
<table class='table table-hover table-striped test-data'><tbody>
56-
<For each={ state.data }>{ row => {
57-
const rowId = row.id;
58-
return <tr class={isSelected(rowId) ? "danger": ""}>
59-
<td class='col-md-1' textContent={ rowId } />
60-
<td class='col-md-4'><a onClick={[select, rowId]} textContent={ row.label } /></td>
61-
<td class='col-md-1'><a onClick={[remove, rowId]}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
62-
<td class='col-md-6'/>
63-
</tr>
64-
}}</For>
65-
</tbody></table>
66-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
67-
</div>;
68-
}
32+
render(() => {
33+
const [state, setState] = createStore({ data: [], selected: null });
34+
const run = () => setState({ data: buildData(1_000) });
35+
const runLots = () => setState({ data: buildData(10_000) });
36+
const add = () => setState("data", (d) => [...d, ...buildData(1_000)]);
37+
const update = () => setState("data", { by: 10 }, "label", (l) => l + " !!!");
38+
const swapRows = () => setState("data", (d) => (d.length > 998 ? { 1: d[998], 998: d[1] } : d));
39+
const clear = () => setState({ data: [] });
40+
const isSelected = createSelector(() => state.selected);
6941

70-
render(App, document.getElementById("main"));
42+
return (
43+
<div class="container">
44+
<div class="jumbotron">
45+
<div class="row">
46+
<div class="col-md-6">
47+
<h1>Solid Store</h1>
48+
</div>
49+
<div class="col-md-6">
50+
<div class="row">
51+
<Button {...["run", "Create 1,000 rows", run]} />
52+
<Button {...["runlots", "Create 10,000 rows", runLots]} />
53+
<Button {...["add", "Append 1,000 rows", add]} />
54+
<Button {...["update", "Update every 10th row", update]} />
55+
<Button {...["clear", "Clear", clear]} />
56+
<Button {...["swaprows", "Swap Rows", swapRows]} />
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<table class="table table-hover table-striped test-data">
62+
<tbody>
63+
<For each={state.data}>
64+
{(row) => {
65+
const rowId = row.id;
66+
return (
67+
<tr class={isSelected(rowId) ? "danger" : ""}>
68+
<td class="col-md-1" textContent={rowId} />
69+
<td class="col-md-4">
70+
<a onClick={() => setState("selected", rowId)} textContent={row.label} />
71+
</td>
72+
<td class="col-md-1">
73+
<a onClick={() => setState("data", (d) => d.toSpliced(d.findIndex((d) => d.id === rowId), 1))}>
74+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
75+
</a>
76+
</td>
77+
<td class="col-md-6" />
78+
</tr>
79+
); //prettier-ignore
80+
}}
81+
</For>
82+
</tbody>
83+
</table>
84+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
85+
</div>
86+
);
87+
}, document.getElementById("main"));

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

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,22 @@ import resolve from "@rollup/plugin-node-resolve";
22
import { babel } from "@rollup/plugin-babel";
33
import terser from "@rollup/plugin-terser";
44

5-
const plugins = [
6-
babel({
7-
babelHelpers: "bundled",
8-
exclude: "node_modules/**",
9-
presets: ["solid"],
10-
}),
11-
resolve({ extensions: [".js", ".jsx"] }),
12-
];
13-
14-
if (process.env.production) {
15-
plugins.push(terser());
16-
}
5+
const TERSER_OPTIONS = {
6+
module: true,
7+
compress: { passes: 3 },
8+
mangle: true,
9+
};
1710

1811
export default {
1912
input: "src/main.jsx",
20-
output: {
21-
file: "dist/main.js",
22-
format: "iife",
23-
},
24-
plugins,
13+
output: { file: "dist/main.js", format: "iife" },
14+
plugins: [
15+
babel({
16+
babelHelpers: "bundled",
17+
exclude: "node_modules/**",
18+
presets: [["solid", { omitNestedClosingTags: true }]],
19+
}),
20+
resolve({ extensions: [".js", ".jsx"] }),
21+
process.env.production && terser(TERSER_OPTIONS),
22+
].filter(Boolean),
2523
};

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

Lines changed: 87 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,98 @@
1-
import { createSignal, createSelector, batch } from 'solid-js';
2-
import { render } from 'solid-js/web';
1+
import { createSignal, createSelector, batch } from "solid-js";
2+
import { render } from "solid-js/web";
33

4-
let idCounter = 1;
5-
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"],
6-
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
7-
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
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"]; // prettier-ignore
5+
const colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"]; // prettier-ignore
6+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; // prettier-ignore
87

9-
function _random (max) { return Math.round(Math.random() * 1000) % max; };
8+
const random = (max) => Math.round(Math.random() * 1000) % max;
109

11-
function buildData(count) {
10+
let nextId = 1;
11+
12+
const buildData = (count) => {
1213
let data = new Array(count);
1314
for (let i = 0; i < count; i++) {
14-
const [label, setLabel] = createSignal(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
15-
data[i] = {
16-
id: idCounter++,
17-
label, setLabel
18-
}
15+
const [label, setLabel] = createSignal(
16+
`${adjectives[random(adjectives.length)]} ${colors[random(colors.length)]} ${nouns[random(nouns.length)]}`
17+
);
18+
data[i] = { id: nextId++, label, setLabel };
1919
}
2020
return data;
21-
}
21+
};
2222

23-
const Button = ({ id, text, fn }) =>
24-
<div class='col-sm-6 smallpad'>
25-
<button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
23+
const Button = ([id, text, fn]) => (
24+
<div class="col-sm-6 smallpad">
25+
<button prop:id={id} class="btn btn-primary btn-block" type="button" onClick={fn}>
26+
{text}
27+
</button>
2628
</div>
29+
);
2730

28-
const App = () => {
29-
const [data, setData] = createSignal([]),
30-
[selected, setSelected] = createSignal(null),
31-
run = () => setData(buildData(1000)),
32-
runLots = () => setData(buildData(10000)),
33-
add = () => setData(d => [...d, ...buildData(1000)]),
34-
update = () => batch(() => {
35-
for(let i = 0, d = data(), len = d.length; i < len; i += 10)
36-
d[i].setLabel(l => l + ' !!!');
37-
}),
38-
swapRows = () => {
39-
const d = data().slice();
40-
if (d.length > 998) {
41-
let tmp = d[1];
42-
d[1] = d[998];
43-
d[998] = tmp;
44-
setData(d);
45-
}
46-
},
47-
clear = () => setData([]),
48-
remove = id => setData(d => {
49-
const idx = d.findIndex(d => d.id === id);
50-
return [...d.slice(0, idx), ...d.slice(idx + 1)];
51-
}),
52-
isSelected = createSelector(selected);
53-
54-
return <div class='container'>
55-
<div class='jumbotron'><div class='row'>
56-
<div class='col-md-6'><h1>SolidJS Keyed</h1></div>
57-
<div class='col-md-6'><div class='row'>
58-
<Button id='run' text='Create 1,000 rows' fn={ run } />
59-
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
60-
<Button id='add' text='Append 1,000 rows' fn={ add } />
61-
<Button id='update' text='Update every 10th row' fn={ update } />
62-
<Button id='clear' text='Clear' fn={ clear } />
63-
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
64-
</div></div>
65-
</div></div>
66-
<table class='table table-hover table-striped test-data'><tbody>
67-
<For each={ data() }>{ row => {
68-
let rowId = row.id;
69-
return <tr class={isSelected(rowId) ? "danger": ""}>
70-
<td class='col-md-1' textContent={ rowId } />
71-
<td class='col-md-4'><a onClick={[setSelected, rowId]} textContent={ row.label() } /></td>
72-
<td class='col-md-1'><a onClick={[remove, rowId]}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
73-
<td class='col-md-6'/>
74-
</tr>
75-
}}</For>
76-
</tbody></table>
77-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
78-
</div>;
79-
}
31+
render(() => {
32+
const [data, setData] = createSignal([]);
33+
const [selected, setSelected] = createSignal(null);
34+
const run = () => setData(buildData(1_000));
35+
const runLots = () => setData(buildData(10_000));
36+
const add = () => setData((d) => [...d, ...buildData(1_000)]);
37+
const update = () =>
38+
batch(() => {
39+
for (let i = 0, d = data(), len = d.length; i < len; i += 10) d[i].setLabel((l) => l + " !!!");
40+
});
41+
const clear = () => setData([]);
42+
const swapRows = () => {
43+
const list = data().slice();
44+
if (list.length > 998) {
45+
let item = list[1];
46+
list[1] = list[998];
47+
list[998] = item;
48+
setData(list);
49+
}
50+
};
51+
const isSelected = createSelector(selected);
8052

81-
render(App, document.getElementById("main"));
53+
return (
54+
<div class="container">
55+
<div class="jumbotron">
56+
<div class="row">
57+
<div class="col-md-6">
58+
<h1>Solid</h1>
59+
</div>
60+
<div class="col-md-6">
61+
<div class="row">
62+
<Button {...["run", "Create 1,000 rows", run]} />
63+
<Button {...["runlots", "Create 10,000 rows", runLots]} />
64+
<Button {...["add", "Append 1,000 rows", add]} />
65+
<Button {...["update", "Update every 10th row", update]} />
66+
<Button {...["clear", "Clear", clear]} />
67+
<Button {...["swaprows", "Swap Rows", swapRows]} />
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
<table class="table table-hover table-striped test-data">
73+
<tbody>
74+
<For each={data()}>
75+
{(row) => {
76+
let rowId = row.id;
77+
return (
78+
<tr class={isSelected(rowId) ? "danger" : ""}>
79+
<td class="col-md-1" textContent={rowId} />
80+
<td class="col-md-4">
81+
<a onClick={() => setSelected(rowId)} textContent={row.label()} />
82+
</td>
83+
<td class="col-md-1">
84+
<a onClick={() => setData((d) => d.toSpliced(d.findIndex((d) => d.id === rowId), 1))}>
85+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
86+
</a>
87+
</td>
88+
<td class="col-md-6" />
89+
</tr>
90+
); // prettier-ignore
91+
}}
92+
</For>
93+
</tbody>
94+
</table>
95+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
96+
</div>
97+
);
98+
}, document.getElementById("main"));

0 commit comments

Comments
 (0)