Skip to content

Commit 76f0355

Browse files
krausestkrausest
committed
Merge branch 'ryansolid-dom-expressions'
2 parents 21b0dd1 + 45b6382 commit 76f0355

File tree

15 files changed

+368
-340
lines changed

15 files changed

+368
-340
lines changed

‎frameworks/keyed/angular-ng/src/css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎frameworks/keyed/angular-ng/src/css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../../../css/

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-ko-jsx",
3-
"version": "0.10.0",
3+
"version": "0.12.0",
44
"main": "index.js",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "ko-jsx"
@@ -17,16 +17,16 @@
1717
"url": "https://github.com/krausest/js-framework-benchmark.git"
1818
},
1919
"dependencies": {
20-
"babel-plugin-jsx-dom-expressions": "0.14.0",
21-
"knockout": "3.5.0",
22-
"ko-jsx": "0.10.0"
20+
"babel-plugin-jsx-dom-expressions": "0.17.0",
21+
"knockout": "3.5.1",
22+
"ko-jsx": "0.12.0"
2323
},
2424
"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"
25+
"@babel/core": "7.9.0",
26+
"rollup": "2.1.0",
27+
"rollup-plugin-babel": "4.4.0",
28+
"@rollup/plugin-commonjs": "11.0.2",
29+
"@rollup/plugin-node-resolve": "7.1.1",
30+
"rollup-plugin-terser": "5.3.0"
3131
}
3232
}

‎frameworks/keyed/ko-jsx/rollup.config.js

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import resolve from 'rollup-plugin-node-resolve';
2-
import commonjs from 'rollup-plugin-commonjs';
3-
import babel from 'rollup-plugin-babel';
4-
import { terser } from 'rollup-plugin-terser';
5-
6-
const plugins = [
7-
babel({
8-
exclude: 'node_modules/**',
9-
plugins: [["jsx-dom-expressions", {moduleName: 'ko-jsx'}]]
10-
}),
11-
resolve({ extensions: ['.js', '.jsx'] }),
12-
commonjs({
13-
include: 'node_modules/**',
14-
namedExports: {
15-
'node_modules/knockout/build/output/knockout-latest.js': [
16-
'ignoreDependencies', 'observable', 'observableArray',
17-
'computed', 'subscribable'
18-
]
19-
}
20-
})
21-
];
22-
23-
if (process.env.production) {
24-
plugins.push(terser());
25-
}
26-
27-
export default {
28-
input: 'src/Main.js',
29-
output: {
30-
file: 'dist/main.js',
31-
format: 'iife'
32-
},
33-
plugins
1+
import resolve from '@rollup/plugin-node-resolve';
2+
import commonjs from '@rollup/plugin-commonjs';
3+
import babel from 'rollup-plugin-babel';
4+
import { terser } from 'rollup-plugin-terser';
5+
6+
const plugins = [
7+
babel({
8+
exclude: 'node_modules/**',
9+
plugins: [["jsx-dom-expressions", {moduleName: 'ko-jsx'}]]
10+
}),
11+
resolve({ extensions: ['.js', '.jsx'] }),
12+
commonjs({
13+
include: 'node_modules/**',
14+
namedExports: {
15+
'node_modules/knockout/build/output/knockout-latest.js': [
16+
'ignoreDependencies', 'observable', 'observableArray',
17+
'computed', 'subscribable'
18+
]
19+
}
20+
})
21+
];
22+
23+
if (process.env.production) {
24+
plugins.push(terser());
25+
}
26+
27+
export default {
28+
input: 'src/Main.js',
29+
output: {
30+
file: 'dist/main.js',
31+
format: 'iife'
32+
},
33+
plugins
3434
};

‎frameworks/keyed/ko-jsx/src/Main.js

Lines changed: 67 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,68 @@
1-
import { render } from 'ko-jsx';
2-
import { observable, observableArray } from 'knockout';
3-
import template from './template';
4-
5-
function _random(max) { return Math.round(Math.random() * 1000) % max; }
6-
7-
var rowId = 1;
8-
var 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"];
9-
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
10-
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
11-
12-
function buildData(count) {
13-
var data = [];
14-
for (var i = 0; i < count; i++) {
15-
data.push({
16-
id: rowId++,
17-
label: observable(adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)])
18-
});
19-
}
20-
return data;
21-
}
22-
23-
var HomeViewModel = function () {
24-
const selected = observable(null),
25-
data = observableArray();
26-
27-
return {
28-
data,
29-
selected,
30-
run () {
31-
data(buildData(1000));
32-
selected(null);
33-
},
34-
runLots () {
35-
data(buildData(10000));
36-
selected(null);
37-
},
38-
add () {
39-
data.push.apply(data, buildData(1000));
40-
},
41-
update () {
42-
var tmp = data();
43-
for (let i = 0; i < tmp.length; i += 10) {
44-
tmp[i].label(tmp[i].label() + ' !!!');
45-
}
46-
},
47-
clear () {
48-
data.removeAll();
49-
selected(null);
50-
},
51-
swapRows () {
52-
var tmp = data();
53-
if (tmp.length > 998) {
54-
var a = tmp[1];
55-
tmp[1] = tmp[998];
56-
tmp[998] = a;
57-
data(tmp);
58-
}
59-
},
60-
select(e, id) { selected(id); },
61-
remove(e, id) {
62-
var tmp = data();
63-
const idx = tmp.findIndex(d => d.id === id);
64-
data.splice(idx, 1);
65-
}
66-
}
67-
};
68-
1+
import { render } from 'ko-jsx';
2+
import { observable, observableArray } from 'knockout';
3+
import template from './template';
4+
5+
function _random(max) { return Math.round(Math.random() * 1000) % max; }
6+
7+
var rowId = 1;
8+
var 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"];
9+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
10+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
11+
12+
function buildData(count) {
13+
var data = [];
14+
for (var i = 0; i < count; i++) {
15+
data.push({
16+
id: rowId++,
17+
label: observable(adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)])
18+
});
19+
}
20+
return data;
21+
}
22+
23+
var HomeViewModel = function () {
24+
const selected = observable(null),
25+
data = observableArray();
26+
27+
return {
28+
data,
29+
selected,
30+
run () {
31+
data(buildData(1000));
32+
selected(null);
33+
},
34+
runLots () {
35+
data(buildData(10000));
36+
selected(null);
37+
},
38+
add () {
39+
data.push.apply(data, buildData(1000));
40+
},
41+
update () {
42+
var tmp = data();
43+
for (let i = 0; i < tmp.length; i += 10) {
44+
tmp[i].label(tmp[i].label() + ' !!!');
45+
}
46+
},
47+
clear () {
48+
data.removeAll();
49+
selected(null);
50+
},
51+
swapRows () {
52+
var tmp = data();
53+
if (tmp.length > 998) {
54+
var a = tmp[1];
55+
tmp[1] = tmp[998];
56+
tmp[998] = a;
57+
data(tmp);
58+
}
59+
},
60+
remove(id) {
61+
var tmp = data();
62+
const idx = tmp.findIndex(d => d.id === id);
63+
data.splice(idx, 1);
64+
}
65+
}
66+
};
67+
6968
render(() => template(new HomeViewModel()), document.getElementById('main'))

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

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
1-
import { computed } from 'knockout';
1+
import { ignoreDependencies, computed } from "knockout";
2+
import { wrap } from "ko-jsx";
23

34
const Button = ({id, text, fn}) =>
45
<div class='col-sm-6 smallpad'>
56
<button id={id} class='btn btn-primary btn-block' type='button' onClick={fn}>{text}</button>
67
</div>
78

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';
9+
const List = props => {
10+
const mapped = computed(props.each.memoMap(props.children));
11+
wrap(tr => {
12+
let i, s = props.selected();
13+
ignoreDependencies(() => {
14+
if (tr) tr.className = "";
15+
if ((tr = s && (i = props.each().findIndex(el => el.id === s)) > -1 && mapped()[i]))
16+
tr.className = "danger";
17+
});
18+
return tr;
1519
});
16-
return cached;
17-
}
20+
return mapped;
21+
};
1822

19-
export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) {
23+
export default function({data, selected, run, runLots, add, update, clear, swapRows, remove}) {
2024
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-
3125
return <div class='container'>
3226
<div class='jumbotron'><div class='row'>
3327
<div class='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
@@ -40,9 +34,17 @@ export default function({data, selected, run, runLots, add, update, clear, swapR
4034
<Button id='swaprows' text='Swap Rows' fn={swapRows} />
4135
</div></div>
4236
</div></div>
43-
<table class='table table-hover table-striped test-data'><tbody>{
44-
items
45-
}</tbody></table>
37+
<table class='table table-hover table-striped test-data'><tbody>
38+
<List each={ data } selected={ selected }>{ row => (
39+
rowId = row.id,
40+
<tr>
41+
<td class='col-md-1' textContent={ rowId } />
42+
<td class='col-md-4'><a onClick={[selected, rowId]} textContent={ row.label() } /></td>
43+
<td class='col-md-1'><a onClick={[remove, rowId]}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
44+
<td class='col-md-6'/>
45+
</tr>
46+
)}</List>
47+
</tbody></table>
4648
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
4749
</div>
4850
}

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-mobx-jsx",
3-
"version": "0.8.0",
3+
"version": "0.10.0",
44
"main": "dist/main.js",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "mobx-jsx"
@@ -17,18 +17,18 @@
1717
"url": "https://github.com/krausest/js-framework-benchmark.git"
1818
},
1919
"dependencies": {
20-
"babel-plugin-jsx-dom-expressions": "0.14.0",
21-
"mobx": "5.13.0",
22-
"mobx-jsx": "0.8.0"
20+
"babel-plugin-jsx-dom-expressions": "0.17.0",
21+
"mobx": "5.15.4",
22+
"mobx-jsx": "0.10.0"
2323
},
2424
"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",
25+
"@babel/core": "7.9.0",
26+
"@babel/plugin-proposal-decorators": "7.8.3",
27+
"@babel/plugin-proposal-class-properties": "7.8.3",
28+
"rollup": "2.1.0",
29+
"rollup-plugin-babel": "4.4.0",
30+
"@rollup/plugin-node-resolve": "7.1.1",
3131
"rollup-plugin-replace": "^2.2.0",
32-
"rollup-plugin-terser": "5.1.2"
32+
"rollup-plugin-terser": "5.3.0"
3333
}
3434
}

0 commit comments

Comments
 (0)