diff --git a/frameworks/keyed/ko-jsx/package.json b/frameworks/keyed/ko-jsx/package.json index cc0494997..a246a170a 100644 --- a/frameworks/keyed/ko-jsx/package.json +++ b/frameworks/keyed/ko-jsx/package.json @@ -1,32 +1,32 @@ -{ - "name": "js-framework-benchmark-ko-jsx", - "version": "0.8.1", - "main": "index.js", - "js-framework-benchmark": { - "frameworkVersionFromPackage": "ko-jsx" - }, - "scripts": { - "build-dev": "rollup -c", - "build-prod": "rollup -c --environment production" - }, - "author": "Ryan Carniato", - "license": "Apache-2.0", - "homepage": "https://github.com/krausest/js-framework-benchmark", - "repository": { - "type": "git", - "url": "https://github.com/krausest/js-framework-benchmark.git" - }, - "dependencies": { - "babel-plugin-jsx-dom-expressions": "0.11.2", - "knockout": "3.5.0", - "ko-jsx": "0.8.1" - }, - "devDependencies": { - "@babel/core": "7.5.5", - "rollup": "1.17.0", - "rollup-plugin-babel": "4.3.3", - "rollup-plugin-commonjs": "9.2.0", - "rollup-plugin-node-resolve": "5.2.0", - "rollup-plugin-terser": "5.1.1" - } -} +{ + "name": "js-framework-benchmark-ko-jsx", + "version": "0.10.0", + "main": "index.js", + "js-framework-benchmark": { + "frameworkVersionFromPackage": "ko-jsx" + }, + "scripts": { + "build-dev": "rollup -c", + "build-prod": "rollup -c --environment production" + }, + "author": "Ryan Carniato", + "license": "Apache-2.0", + "homepage": "https://github.com/krausest/js-framework-benchmark", + "repository": { + "type": "git", + "url": "https://github.com/krausest/js-framework-benchmark.git" + }, + "dependencies": { + "babel-plugin-jsx-dom-expressions": "0.14.0", + "knockout": "3.5.0", + "ko-jsx": "0.10.0" + }, + "devDependencies": { + "@babel/core": "7.6.4", + "rollup": "1.26.0", + "rollup-plugin-babel": "4.3.3", + "rollup-plugin-commonjs": "9.2.0", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-terser": "5.1.2" + } +} diff --git a/frameworks/keyed/ko-jsx/src/template.jsx b/frameworks/keyed/ko-jsx/src/template.jsx index ddd297ff2..b5441b08a 100644 --- a/frameworks/keyed/ko-jsx/src/template.jsx +++ b/frameworks/keyed/ko-jsx/src/template.jsx @@ -1,44 +1,48 @@ -import { computed } from 'knockout'; - -const Button = ({id, text, fn}) => -
- -
- -const selectRow = (selected, rows) => { - let tr; - const cached = computed(rows); - computed(() => { - const s = selected(); - if (tr) tr.className = ''; - if (tr = s && cached().find(tr => tr.model === s)) tr.className = 'danger'; - }); - return cached; -} - -export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) { - return
-
-

KnockoutJSX-keyed

-
-
-
- { - selectRow(selected, data.memoMap(row => - - - - - )) - }
- {row.label} -
-
+import { computed } from 'knockout'; + +const Button = ({id, text, fn}) => +
+ +
+ +const selectRow = (selected, rows) => { + let tr; + const cached = computed(rows); + computed(() => { + const s = selected(); + if (tr) tr.className = ''; + if (tr = s && cached().find(tr => tr.model === s)) tr.className = 'danger'; + }); + return cached; +} + +export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) { + let rowId; + const items = selectRow(selected, data.memoMap(row => ( + rowId = row.id, + + + + + + + ))); + + return
+
+

KnockoutJSX-keyed

+
+
+
+ { + items + }
+
} \ No newline at end of file diff --git a/frameworks/keyed/mobx-jsx/package.json b/frameworks/keyed/mobx-jsx/package.json index 0b1a62e65..9529eca72 100644 --- a/frameworks/keyed/mobx-jsx/package.json +++ b/frameworks/keyed/mobx-jsx/package.json @@ -1,34 +1,34 @@ -{ - "name": "js-framework-benchmark-mobx-jsx", - "version": "0.6.3", - "main": "dist/main.js", - "js-framework-benchmark": { - "frameworkVersionFromPackage": "mobx-jsx" - }, - "scripts": { - "build-dev": "rollup -c", - "build-prod": "rollup -c --environment production" - }, - "author": "Ryan Carniato", - "license": "Apache-2.0", - "homepage": "https://github.com/krausest/js-framework-benchmark", - "repository": { - "type": "git", - "url": "https://github.com/krausest/js-framework-benchmark.git" - }, - "dependencies": { - "babel-plugin-jsx-dom-expressions": "0.11.2", - "mobx": "5.13.0", - "mobx-jsx": "0.6.3" - }, - "devDependencies": { - "@babel/core": "7.5.5", - "@babel/plugin-proposal-decorators": "7.4.4", - "@babel/plugin-proposal-class-properties": "7.5.5", - "rollup": "1.17.0", - "rollup-plugin-babel": "4.3.2", - "rollup-plugin-node-resolve": "5.2.0", - "rollup-plugin-replace": "^2.2.0", - "rollup-plugin-terser": "5.1.1" - } -} +{ + "name": "js-framework-benchmark-mobx-jsx", + "version": "0.8.0", + "main": "dist/main.js", + "js-framework-benchmark": { + "frameworkVersionFromPackage": "mobx-jsx" + }, + "scripts": { + "build-dev": "rollup -c", + "build-prod": "rollup -c --environment production" + }, + "author": "Ryan Carniato", + "license": "Apache-2.0", + "homepage": "https://github.com/krausest/js-framework-benchmark", + "repository": { + "type": "git", + "url": "https://github.com/krausest/js-framework-benchmark.git" + }, + "dependencies": { + "babel-plugin-jsx-dom-expressions": "0.14.0", + "mobx": "5.13.0", + "mobx-jsx": "0.8.0" + }, + "devDependencies": { + "@babel/core": "7.6.4", + "@babel/plugin-proposal-decorators": "7.6.0", + "@babel/plugin-proposal-class-properties": "7.5.5", + "rollup": "1.26.0", + "rollup-plugin-babel": "4.3.3", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-replace": "^2.2.0", + "rollup-plugin-terser": "5.1.2" + } +} diff --git a/frameworks/keyed/mobx-jsx/src/main.jsx b/frameworks/keyed/mobx-jsx/src/main.jsx index 876ffc1fa..0074adb79 100644 --- a/frameworks/keyed/mobx-jsx/src/main.jsx +++ b/frameworks/keyed/mobx-jsx/src/main.jsx @@ -1,100 +1,105 @@ -import { observable, action, autorun, computed } from 'mobx'; -import { Component, map, render } from 'mobx-jsx'; - -function _random (max) { return Math.round(Math.random() * 1000) % max; }; - -let idCounter = 1; -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"], - colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], - nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; - -function buildData(count) { - let data = new Array(count); - for (let i = 0; i < count; i++) { - data[i] = { - id: idCounter++, - label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] - } - } - return data; -} - -const Button = ({ id, text, fn }) => -
- -
- -class App extends Component { - @observable data = []; - @observable selected = null; - remove = (e, item) => action(() => this.data.remove(item))(); - select = (e, item) => action(() => this.selected = item)(); - - @action.bound run(e) { - this.data.replace(buildData(1000)); - this.selected = null; - }; - @action.bound runLots(e) { - this.data.replace(buildData(10000)); - this.selected = null; - }; - @action.bound add(e) { this.data.spliceWithArray(this.data.length, 0, buildData(1000)); }; - @action.bound update(e) { - let index = 0; - while (index < this.data.length) { - this.data[index].label += ' !!!'; - index += 10; - } - } - @action.bound swapRows(e) { - if (this.data.length > 998) { - let a = this.data[1]; - this.data[1] = this.data[998]; - this.data[998] = a; - } - } - @action.bound clear(e) { - this.data.clear(); - this.selected = null; - } - selectRow(rows) { - let tr; - const b = observable.box(); - autorun(() => b.set(rows())); - autorun(() => { - const s = this.selected; - if (tr) tr.className = ''; - if (tr = s && b.get().find(tr => tr.model === s)) tr.className = 'danger'; - }); - return () => b.get(); - } - - render() { - return
-
-

MobX-JSX Keyed

-
-
-
- { - this.selectRow(map(this.data, row => - - - - - )) - }
- {( row.label )} -
-
- } -} - -render(() => , document.getElementById("main")); +import { observable, action, autorun } from 'mobx'; +import { Component, map, render } from 'mobx-jsx'; + +function _random (max) { return Math.round(Math.random() * 1000) % max; }; + +let idCounter = 1; +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"], + colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], + nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; + +function buildData(count) { + let data = new Array(count); + for (let i = 0; i < count; i++) { + data[i] = { + id: idCounter++, + label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] + } + } + return data; +} + +const Button = ({ id, text, fn }) => +
+ +
+ +class App extends Component { + @observable data = []; + @observable selected = null; + remove = (e, item) => action(() => this.data.remove(item))(); + select = (e, item) => action(() => this.selected = item)(); + + @action.bound run(e) { + this.data.replace(buildData(1000)); + this.selected = null; + }; + @action.bound runLots(e) { + this.data.replace(buildData(10000)); + this.selected = null; + }; + @action.bound add(e) { this.data.spliceWithArray(this.data.length, 0, buildData(1000)); }; + @action.bound update(e) { + let index = 0; + while (index < this.data.length) { + this.data[index].label += ' !!!'; + index += 10; + } + } + @action.bound swapRows(e) { + if (this.data.length > 998) { + let a = this.data[1]; + this.data[1] = this.data[998]; + this.data[998] = a; + } + } + @action.bound clear(e) { + this.data.clear(); + this.selected = null; + } + selectRow(rows) { + let tr; + const b = observable.box(); + autorun(() => b.set(rows())); + autorun(() => { + const s = this.selected; + if (tr) tr.className = ''; + if (tr = s && b.get().find(tr => tr.model === s)) tr.className = 'danger'; + }); + return () => b.get(); + } + + render() { + let rowId; + const { run, runLots, add, update, clear, swapRows, select, remove } = this, + items = this.selectRow(map(this.data, row => ( + rowId = row.id, + + + + + + + ))); + + return
+
+

MobX-JSX Keyed

+
+
+
+ { + items + }
+
+ } +} + +render(() => , document.getElementById("main")); diff --git a/frameworks/keyed/solid-signals/package.json b/frameworks/keyed/solid-signals/package.json index 922b5060e..18d52b13f 100644 --- a/frameworks/keyed/solid-signals/package.json +++ b/frameworks/keyed/solid-signals/package.json @@ -1,30 +1,30 @@ -{ - "name": "js-framework-benchmark-solid", - "version": "0.9.3", - "main": "dist/main.js", - "js-framework-benchmark": { - "frameworkVersionFromPackage": "solid-js" - }, - "scripts": { - "build-dev": "rollup -c -w", - "build-prod": "rollup -c --environment production" - }, - "author": "Ryan Carniato", - "license": "Apache-2.0", - "homepage": "https://github.com/krausest/js-framework-benchmark", - "repository": { - "type": "git", - "url": "https://github.com/krausest/js-framework-benchmark.git" - }, - "dependencies": { - "solid-js": "0.9.3" - }, - "devDependencies": { - "@babel/core": "7.5.5", - "babel-preset-solid": "0.1.0", - "rollup": "1.17.0", - "rollup-plugin-babel": "4.3.3", - "rollup-plugin-node-resolve": "5.2.0", - "rollup-plugin-terser": "5.1.1" - } -} +{ + "name": "js-framework-benchmark-solid", + "version": "0.13.0", + "main": "dist/main.js", + "js-framework-benchmark": { + "frameworkVersionFromPackage": "solid-js" + }, + "scripts": { + "build-dev": "rollup -c -w", + "build-prod": "rollup -c --environment production" + }, + "author": "Ryan Carniato", + "license": "Apache-2.0", + "homepage": "https://github.com/krausest/js-framework-benchmark", + "repository": { + "type": "git", + "url": "https://github.com/krausest/js-framework-benchmark.git" + }, + "dependencies": { + "solid-js": "0.13.0" + }, + "devDependencies": { + "@babel/core": "7.6.4", + "babel-preset-solid": "0.2.1", + "rollup": "1.26.0", + "rollup-plugin-babel": "4.3.3", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-terser": "5.1.2" + } +} diff --git a/frameworks/keyed/solid-signals/src/main.jsx b/frameworks/keyed/solid-signals/src/main.jsx index 26b611f30..3fb761083 100644 --- a/frameworks/keyed/solid-signals/src/main.jsx +++ b/frameworks/keyed/solid-signals/src/main.jsx @@ -1,109 +1,113 @@ -import { createRoot, createSignal, freeze, selectWhen } from 'solid-js' - -let idCounter = 1; -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"], - colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], - nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; - -function _random (max) { return Math.round(Math.random() * 1000) % max; }; - -function buildData(count) { - let data = new Array(count); - for (let i = 0; i < count; i++) { - const [label, setLabel] = createSignal(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`); - data[i] = { - id: idCounter++, - label, setLabel - } - } - return data; -} - -const Button = ({ id, text, fn }) => -
- -
- -const App = () => { - const [data, setData] = createSignal([]), - [selected, setSelected] = createSignal(null, (a, b) => a === b); - - return
-
-

SolidJS Keyed

-
-
-
- - { row => - - - - - } -
- { row.label } -
-
- - function select(e, id) { setSelected(id); } - - function remove(e, id) { - const d = data(); - d.splice(d.findIndex(d => d.id === id), 1); - setData(d); - } - - function run() { - freeze(() => { - setData(buildData(1000)); - setSelected(null); - }); - } - - function runLots() { - freeze(() => { - setData(buildData(10000)); - setSelected(null); - }); - } - - function add() { setData(data().concat(buildData(1000))); } - - function update() { - freeze(() => { - const d = data(); - let index = 0; - while (index < d.length) { - d[index].setLabel(d[index].label() + ' !!!'); - index += 10; - } - }); - } - - function swapRows() { - const d = data(); - if (d.length > 998) { - let tmp = d[1]; - d[1] = d[998]; - d[998] = tmp; - setData(d); - } - } - - function clear() { - freeze(() => { - setData([]); - setSelected(null); - }); - } -} - -createRoot(() => document.getElementById("main").appendChild()) +import { createSignal, freeze } from 'solid-js'; +import { render, selectWhen } from 'solid-js/dom'; + +let idCounter = 1; +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"], + colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], + nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; + +function _random (max) { return Math.round(Math.random() * 1000) % max; }; + +function buildData(count) { + let data = new Array(count); + for (let i = 0; i < count; i++) { + const [label, setLabel] = createSignal(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`); + data[i] = { + id: idCounter++, + label, setLabel + } + } + return data; +} + +const Button = ({ id, text, fn }) => +
+ +
+ +const App = () => { + let rowId; + const [data, setData] = createSignal([]), + [selected, setSelected] = createSignal(null, (a, b) => a === b), + applySelection = selectWhen(selected, 'danger'); + + return
+
+

SolidJS Keyed

+
+
+
+ + { row => ( + rowId = row.id, + + + + + )} +
+ +
+
+ + function select(e, id) { setSelected(id); } + + function remove(e, id) { + const d = data(); + d.splice(d.findIndex(d => d.id === id), 1); + setData(d); + } + + function run() { + freeze(() => { + setData(buildData(1000)); + setSelected(null); + }); + } + + function runLots() { + freeze(() => { + setData(buildData(10000)); + setSelected(null); + }); + } + + function add() { setData(data().concat(buildData(1000))); } + + function update() { + freeze(() => { + const d = data(); + let index = 0; + while (index < d.length) { + d[index].setLabel(d[index].label() + ' !!!'); + index += 10; + } + }); + } + + function swapRows() { + const d = data(); + if (d.length > 998) { + let tmp = d[1]; + d[1] = d[998]; + d[998] = tmp; + setData(d); + } + } + + function clear() { + freeze(() => { + setData([]); + setSelected(null); + }); + } +} + +render(App, document.getElementById("main")); diff --git a/frameworks/keyed/solid/package.json b/frameworks/keyed/solid/package.json index 922b5060e..18d52b13f 100644 --- a/frameworks/keyed/solid/package.json +++ b/frameworks/keyed/solid/package.json @@ -1,30 +1,30 @@ -{ - "name": "js-framework-benchmark-solid", - "version": "0.9.3", - "main": "dist/main.js", - "js-framework-benchmark": { - "frameworkVersionFromPackage": "solid-js" - }, - "scripts": { - "build-dev": "rollup -c -w", - "build-prod": "rollup -c --environment production" - }, - "author": "Ryan Carniato", - "license": "Apache-2.0", - "homepage": "https://github.com/krausest/js-framework-benchmark", - "repository": { - "type": "git", - "url": "https://github.com/krausest/js-framework-benchmark.git" - }, - "dependencies": { - "solid-js": "0.9.3" - }, - "devDependencies": { - "@babel/core": "7.5.5", - "babel-preset-solid": "0.1.0", - "rollup": "1.17.0", - "rollup-plugin-babel": "4.3.3", - "rollup-plugin-node-resolve": "5.2.0", - "rollup-plugin-terser": "5.1.1" - } -} +{ + "name": "js-framework-benchmark-solid", + "version": "0.13.0", + "main": "dist/main.js", + "js-framework-benchmark": { + "frameworkVersionFromPackage": "solid-js" + }, + "scripts": { + "build-dev": "rollup -c -w", + "build-prod": "rollup -c --environment production" + }, + "author": "Ryan Carniato", + "license": "Apache-2.0", + "homepage": "https://github.com/krausest/js-framework-benchmark", + "repository": { + "type": "git", + "url": "https://github.com/krausest/js-framework-benchmark.git" + }, + "dependencies": { + "solid-js": "0.13.0" + }, + "devDependencies": { + "@babel/core": "7.6.4", + "babel-preset-solid": "0.2.1", + "rollup": "1.26.0", + "rollup-plugin-babel": "4.3.3", + "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-terser": "5.1.2" + } +} diff --git a/frameworks/keyed/solid/src/main.jsx b/frameworks/keyed/solid/src/main.jsx index d8824b322..0d358b493 100644 --- a/frameworks/keyed/solid/src/main.jsx +++ b/frameworks/keyed/solid/src/main.jsx @@ -1,66 +1,70 @@ -import { createRoot, createState, selectWhen } from 'solid-js'; - -let idCounter = 1; -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"], - colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], - nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; - -function _random (max) { return Math.round(Math.random() * 1000) % max; }; - -function buildData(count) { - let data = new Array(count); - for (let i = 0; i < count; i++) { - data[i] = { - id: idCounter++, - label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` - } - } - return data; -} - -const Button = ({ id, text, fn }) => -
- -
- -const App = () => { - const [ state, setState ] = createState({ data: [], selected: null }), - run = () => setState({ data: buildData(1000), selected: null }), - runLots = () => setState({ data: buildData(10000), selected: null }), - add = () => setState('data', d => [...d, ...buildData(1000)]), - update = () => setState('data', { by: 10 }, 'label', l => l + ' !!!'), - swapRows = () => setState('data', d => d.length > 998 ? { 1: d[998], 998: d[1] } : d), - clear = () => setState({ data: [], selected: null }), - select = (e, id) => setState('selected', id), - remove = (e, id) => setState('data', d => { - const idx = d.findIndex(d => d.id === id); - return [...d.slice(0, idx), ...d.slice(idx + 1)]; - }); - - return
-
-

SolidJS Keyed

-
-
-
- - state.selected, 'danger') }>{ row => - - - - - } -
- {( row.label )} -
-
-} - -createRoot(() => document.getElementById("main").appendChild()) +import { createState } from 'solid-js'; +import { render, selectWhen } from 'solid-js/dom'; + +let idCounter = 1; +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"], + colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"], + nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"]; + +function _random (max) { return Math.round(Math.random() * 1000) % max; }; + +function buildData(count) { + let data = new Array(count); + for (let i = 0; i < count; i++) { + data[i] = { + id: idCounter++, + label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` + } + } + return data; +} + +const Button = ({ id, text, fn }) => +
+ +
+ +const App = () => { + let rowId; + const [ state, setState ] = createState({ data: [], selected: null }), + run = () => setState({ data: buildData(1000), selected: null }), + runLots = () => setState({ data: buildData(10000), selected: null }), + add = () => setState('data', d => [...d, ...buildData(1000)]), + update = () => setState('data', { by: 10 }, 'label', l => l + ' !!!'), + swapRows = () => setState('data', d => d.length > 998 ? { 1: d[998], 998: d[1] } : d), + clear = () => setState({ data: [], selected: null }), + select = (e, id) => setState('selected', id), + remove = (e, id) => setState('data', d => { + const idx = d.findIndex(d => d.id === id); + return [...d.slice(0, idx), ...d.slice(idx + 1)]; + }), + applySelection = selectWhen(() => state.selected, 'danger'); + + return
+
+

SolidJS Keyed

+
+
+
+ + { row => ( + rowId = row.id, + + + + + )} +
+ +
+
+} + +render(App, document.getElementById("main"));