Skip to content

Commit 1addb60

Browse files
krausestkrausest
committed
Merge branch 'ryansolid-dom-expressions'
2 parents 5c7bb19 + c94f4e5 commit 1addb60

File tree

8 files changed

+461
-444
lines changed

8 files changed

+461
-444
lines changed

‎frameworks/keyed/ko-jsx/package.json

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
{
2-
"name": "js-framework-benchmark-ko-jsx",
3-
"version": "0.8.1",
4-
"main": "index.js",
5-
"js-framework-benchmark": {
6-
"frameworkVersionFromPackage": "ko-jsx"
7-
},
8-
"scripts": {
9-
"build-dev": "rollup -c",
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.11.2",
21-
"knockout": "3.5.0",
22-
"ko-jsx": "0.8.1"
23-
},
24-
"devDependencies": {
25-
"@babel/core": "7.5.5",
26-
"rollup": "1.17.0",
27-
"rollup-plugin-babel": "4.3.3",
28-
"rollup-plugin-commonjs": "9.2.0",
29-
"rollup-plugin-node-resolve": "5.2.0",
30-
"rollup-plugin-terser": "5.1.1"
31-
}
32-
}
1+
{
2+
"name": "js-framework-benchmark-ko-jsx",
3+
"version": "0.10.0",
4+
"main": "index.js",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "ko-jsx"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c",
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.14.0",
21+
"knockout": "3.5.0",
22+
"ko-jsx": "0.10.0"
23+
},
24+
"devDependencies": {
25+
"@babel/core": "7.6.4",
26+
"rollup": "1.26.0",
27+
"rollup-plugin-babel": "4.3.3",
28+
"rollup-plugin-commonjs": "9.2.0",
29+
"rollup-plugin-node-resolve": "5.2.0",
30+
"rollup-plugin-terser": "5.1.2"
31+
}
32+
}

‎frameworks/keyed/ko-jsx/src/template.jsx

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,48 @@
1-
import { computed } from 'knockout';
2-
3-
const Button = ({id, text, fn}) =>
4-
<div class='col-sm-6 smallpad'>
5-
<button id={id} class='btn btn-primary btn-block' type='button' onClick={fn}>{text}</button>
6-
</div>
7-
8-
const selectRow = (selected, rows) => {
9-
let tr;
10-
const cached = computed(rows);
11-
computed(() => {
12-
const s = selected();
13-
if (tr) tr.className = '';
14-
if (tr = s && cached().find(tr => tr.model === s)) tr.className = 'danger';
15-
});
16-
return cached;
17-
}
18-
19-
export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) {
20-
return <div class='container'>
21-
<div class='jumbotron'><div class='row'>
22-
<div class='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
23-
<div class='col-md-6'><div class='row'>
24-
<Button id='run' text='Create 1,000 rows' fn={run} />
25-
<Button id='runlots' text='Create 10,000 rows' fn={runLots} />
26-
<Button id='add' text='Append 1,000 rows' fn={add} />
27-
<Button id='update' text='Update every 10th row' fn={update} />
28-
<Button id='clear' text='Clear' fn={clear} />
29-
<Button id='swaprows' text='Swap Rows' fn={swapRows} />
30-
</div></div>
31-
</div></div>
32-
<table class='table table-hover table-striped test-data'><tbody>{
33-
selectRow(selected, data.memoMap(row =>
34-
<tr model={row.id}>
35-
<td class='col-md-1' textContent={row.id} />
36-
<td class='col-md-4'><a onClick={select}>{row.label}</a></td>
37-
<td class='col-md-1'><a onClick={remove}><span class='glyphicon glyphicon-remove' aria-hidden='true' /></a></td>
38-
<td class='col-md-6'/>
39-
</tr>
40-
))
41-
}</tbody></table>
42-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
43-
</div>
1+
import { computed } from 'knockout';
2+
3+
const Button = ({id, text, fn}) =>
4+
<div class='col-sm-6 smallpad'>
5+
<button id={id} class='btn btn-primary btn-block' type='button' onClick={fn}>{text}</button>
6+
</div>
7+
8+
const selectRow = (selected, rows) => {
9+
let tr;
10+
const cached = computed(rows);
11+
computed(() => {
12+
const s = selected();
13+
if (tr) tr.className = '';
14+
if (tr = s && cached().find(tr => tr.model === s)) tr.className = 'danger';
15+
});
16+
return cached;
17+
}
18+
19+
export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) {
20+
let rowId;
21+
const items = selectRow(selected, data.memoMap(row => (
22+
rowId = row.id,
23+
<tr model={rowId}>
24+
<td class='col-md-1' textContent={rowId} />
25+
<td class='col-md-4'><a onClick={select} textContent={row.label()} /></td>
26+
<td class='col-md-1'><a onClick={remove}><span class='glyphicon glyphicon-remove' aria-hidden='true' /></a></td>
27+
<td class='col-md-6'/>
28+
</tr>
29+
)));
30+
31+
return <div class='container'>
32+
<div class='jumbotron'><div class='row'>
33+
<div class='col-md-6'><h1>KnockoutJSX-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+
items
45+
}</tbody></table>
46+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
47+
</div>
4448
}

‎frameworks/keyed/mobx-jsx/package.json

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
{
2-
"name": "js-framework-benchmark-mobx-jsx",
3-
"version": "0.6.3",
4-
"main": "dist/main.js",
5-
"js-framework-benchmark": {
6-
"frameworkVersionFromPackage": "mobx-jsx"
7-
},
8-
"scripts": {
9-
"build-dev": "rollup -c",
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.11.2",
21-
"mobx": "5.13.0",
22-
"mobx-jsx": "0.6.3"
23-
},
24-
"devDependencies": {
25-
"@babel/core": "7.5.5",
26-
"@babel/plugin-proposal-decorators": "7.4.4",
27-
"@babel/plugin-proposal-class-properties": "7.5.5",
28-
"rollup": "1.17.0",
29-
"rollup-plugin-babel": "4.3.2",
30-
"rollup-plugin-node-resolve": "5.2.0",
31-
"rollup-plugin-replace": "^2.2.0",
32-
"rollup-plugin-terser": "5.1.1"
33-
}
34-
}
1+
{
2+
"name": "js-framework-benchmark-mobx-jsx",
3+
"version": "0.8.0",
4+
"main": "dist/main.js",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "mobx-jsx"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c",
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.14.0",
21+
"mobx": "5.13.0",
22+
"mobx-jsx": "0.8.0"
23+
},
24+
"devDependencies": {
25+
"@babel/core": "7.6.4",
26+
"@babel/plugin-proposal-decorators": "7.6.0",
27+
"@babel/plugin-proposal-class-properties": "7.5.5",
28+
"rollup": "1.26.0",
29+
"rollup-plugin-babel": "4.3.3",
30+
"rollup-plugin-node-resolve": "5.2.0",
31+
"rollup-plugin-replace": "^2.2.0",
32+
"rollup-plugin-terser": "5.1.2"
33+
}
34+
}

0 commit comments

Comments
 (0)