Skip to content

Commit 11c4794

Browse files
krausestkrausest
committed
Merge branch 'ryansolid-solid'
2 parents c7bd060 + ca61e38 commit 11c4794

File tree

5 files changed

+165
-181
lines changed

5 files changed

+165
-181
lines changed

‎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.0.18",
3+
"version": "0.1.2",
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-
"@tko/computed": "4.0.0-alpha6.3",
21-
"babel-plugin-jsx-dom-expressions": "0.0.29",
22-
"ko-jsx": "0.0.18"
20+
"babel-plugin-jsx-dom-expressions": "0.1.0",
21+
"knockout": "^3.4.2",
22+
"ko-jsx": "0.1.2"
2323
},
2424
"devDependencies": {
25-
"@babel/core": "*",
26-
"rollup": "0.63.4",
27-
"rollup-plugin-babel": "beta",
28-
"rollup-plugin-commonjs": "^9.1.3",
29-
"rollup-plugin-node-resolve": "3.3.0",
30-
"rollup-plugin-terser": "1.0.1"
25+
"@babel/core": "7.0.0",
26+
"rollup": "0.65.2",
27+
"rollup-plugin-babel": "4.0.3",
28+
"rollup-plugin-commonjs": "^9.1.6",
29+
"rollup-plugin-node-resolve": "3.4.0",
30+
"rollup-plugin-terser": "2.0.2"
3131
}
3232
}

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

Lines changed: 94 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,110 @@
1-
import { root, observable, observableArray } from 'ko-jsx'
2-
import template from './template'
1+
import { root } from 'ko-jsx';
2+
import ko from 'knockout';
3+
import template from './template';
34

45
// var startTime;
56
// var lastMeasure;
67

78
// var startMeasure = function (name) {
8-
// startTime = performance.now();
9-
// lastMeasure = name;
9+
// startTime = performance.now();
10+
// lastMeasure = name;
1011
// };
1112
// var stopMeasure = function () {
12-
// window.setTimeout(function () {
13-
// var stop = performance.now();
14-
// console.log(lastMeasure + " took " + (stop - startTime));
15-
// }, 0);
13+
// window.setTimeout(function () {
14+
// var stop = performance.now();
15+
// console.log(lastMeasure + " took " + (stop - startTime));
16+
// }, 0);
1617
// };
1718

1819
var HomeViewModel = function () {
19-
var self = this;
20-
self.id = 1;
21-
22-
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"];
23-
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
24-
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
25-
26-
function _random(max) {
27-
return Math.round(Math.random() * 1000) % max;
20+
var self = this;
21+
self.id = 1;
22+
23+
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"];
24+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
25+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
26+
27+
function _random(max) {
28+
return Math.round(Math.random() * 1000) % max;
29+
}
30+
31+
function buildData(count) {
32+
var data = [];
33+
for (var i = 0; i < count; i++) {
34+
data.push({
35+
id: self.id++,
36+
label: ko.observable(adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)])
37+
});
2838
}
29-
30-
function buildData(count) {
31-
var data = [];
32-
for (var i = 0; i < count; i++) {
33-
data.push(new ItemViewModel({
34-
id: self.id++,
35-
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
36-
}));
37-
}
38-
return data;
39+
return data;
40+
}
41+
42+
self.selected = ko.observable(null);
43+
self.data = ko.observableArray();
44+
45+
self.run = function () {
46+
// startMeasure("run");
47+
self.data(buildData(1000));
48+
self.selected(null);
49+
// stopMeasure();
50+
};
51+
52+
self.runLots = function () {
53+
// startMeasure("runLots");
54+
self.data(buildData(10000));
55+
self.selected(null);
56+
// stopMeasure();
57+
};
58+
59+
self.add = function () {
60+
// startMeasure("add");
61+
self.data.push.apply(self.data, buildData(1000));
62+
// stopMeasure();
63+
};
64+
65+
self.update = function () {
66+
// startMeasure("update");
67+
var tmp = self.data();
68+
for (let i = 0; i < tmp.length; i += 10) {
69+
tmp[i].label(tmp[i].label() + ' !!!');
3970
}
40-
41-
self.selected = observable(null);
42-
self.data = observableArray();
43-
44-
self.run = function () {
45-
// startMeasure("run");
46-
self.data(buildData(1000));
47-
self.selected(null);
48-
// stopMeasure();
49-
};
50-
51-
self.runLots = function () {
52-
// startMeasure("runLots");
53-
self.data(buildData(10000));
54-
self.selected(null);
55-
// stopMeasure();
56-
};
57-
58-
self.add = function () {
59-
// startMeasure("add");
60-
self.data.push.apply(self.data, buildData(1000));
61-
// stopMeasure();
62-
};
63-
64-
self.update = function () {
65-
// startMeasure("update");
66-
var tmp = self.data();
67-
for (let i = 0; i < tmp.length; i += 10) {
68-
tmp[i].label(tmp[i].label() + ' !!!');
69-
}
70-
// stopMeasure();
71-
};
72-
73-
self.clear = function () {
74-
// startMeasure("clear");
75-
self.data.removeAll();
76-
self.selected(null);
77-
// stopMeasure();
78-
};
79-
80-
self.swapRows = function () {
81-
// startMeasure("swapRows");
82-
var tmp = self.data();
83-
if (tmp.length > 998) {
84-
var a = tmp[1];
85-
tmp[1] = tmp[998];
86-
tmp[998] = a;
87-
self.data(tmp);
88-
}
89-
// stopMeasure();
90-
};
91-
92-
self.select = function (id) {
93-
// startMeasure("select");
94-
self.selected(id);
95-
// stopMeasure();
96-
};
97-
98-
self.del = function (id) {
99-
// startMeasure("delete");
100-
var tmp = self.data();
101-
const idx = tmp.findIndex(d => d.id === id);
102-
self.data.splice(idx, 1);
103-
// stopMeasure();
104-
};
105-
};
106-
107-
var ItemViewModel = function (data, parent) {
108-
var self = this;
109-
110-
self.id = data.id;
111-
self.label = observable(data.label);
71+
// stopMeasure();
72+
};
73+
74+
self.clear = function () {
75+
// startMeasure("clear");
76+
self.data.removeAll();
77+
self.selected(null);
78+
// stopMeasure();
79+
};
80+
81+
self.swapRows = function () {
82+
// startMeasure("swapRows");
83+
var tmp = self.data();
84+
if (tmp.length > 998) {
85+
var a = tmp[1];
86+
tmp[1] = tmp[998];
87+
tmp[998] = a;
88+
self.data(tmp);
89+
}
90+
// stopMeasure();
91+
};
92+
93+
self.clickRow = function(e, id) {
94+
if (e.target.matches('.delete')) {
95+
// startMeasure("delete");
96+
var tmp = self.data();
97+
const idx = tmp.findIndex(d => d.id === id);
98+
self.data.splice(idx, 1);
99+
// stopMeasure();
100+
} else {
101+
// startMeasure("select");
102+
self.selected(id);
103+
// stopMeasure();
104+
}
105+
}
112106
};
113107

114108
root(function () {
115-
document.getElementById('main').appendChild(template(new HomeViewModel()))
109+
document.getElementById('main').appendChild(template(new HomeViewModel()))
116110
});

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

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,41 @@
1-
import { r, selectOn, delegateEvent } from 'ko-jsx'
1+
import { r, selectWhen } from 'ko-jsx'
22

3-
export default function({data, selected, run, runLots, add, update, clear, swapRows, select, del}) {
4-
let selectClass, clickSelect, clickRemove, tbody;
5-
return (
6-
<div class='container'>
7-
<div class='jumbotron'><div class='row'>
8-
<div class ='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
9-
<div class ='col-md-6'><div class ='row'>
10-
<div class ='col-sm-6 smallpad'>
11-
<button id='run' class='btn btn-primary btn-block' type='button' onClick={run}>Create 1,000 rows</button>
12-
</div>
13-
<div class='col-sm-6 smallpad'>
14-
<button id='runlots' class='btn btn-primary btn-block' type='button' onClick={runLots}>Create 10,000 rows</button>
15-
</div>
16-
<div class='col-sm-6 smallpad'>
17-
<button id='add' class='btn btn-primary btn-block' type='button' onClick={add}>Append 1,000 rows</button>
18-
</div>
19-
<div class='col-sm-6 smallpad'>
20-
<button id='update' class='btn btn-primary btn-block' type='button' onClick={update}>Update every 10th row</button>
21-
</div>
22-
<div class='col-sm-6 smallpad'>
23-
<button id='clear' class='btn btn-primary btn-block' type='button' onClick={clear}>Clear</button>
24-
</div>
25-
<div class='col-sm-6 smallpad'>
26-
<button id='swaprows' class='btn btn-primary btn-block' type='button' onClick={swapRows}>Swap Rows</button>
27-
</div>
28-
</div></div>
3+
export default function({data, selected, run, runLots, add, update, clear, swapRows, clickRow}) {
4+
return <div class='container'>
5+
<div class='jumbotron'><div class='row'>
6+
<div class ='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
7+
<div class ='col-md-6'><div class ='row'>
8+
<div class ='col-sm-6 smallpad'>
9+
<button id='run' class='btn btn-primary btn-block' type='button' onClick={run}>Create 1,000 rows</button>
10+
</div>
11+
<div class='col-sm-6 smallpad'>
12+
<button id='runlots' class='btn btn-primary btn-block' type='button' onClick={runLots}>Create 10,000 rows</button>
13+
</div>
14+
<div class='col-sm-6 smallpad'>
15+
<button id='add' class='btn btn-primary btn-block' type='button' onClick={add}>Append 1,000 rows</button>
16+
</div>
17+
<div class='col-sm-6 smallpad'>
18+
<button id='update' class='btn btn-primary btn-block' type='button' onClick={update}>Update every 10th row</button>
19+
</div>
20+
<div class='col-sm-6 smallpad'>
21+
<button id='clear' class='btn btn-primary btn-block' type='button' onClick={clear}>Clear</button>
22+
</div>
23+
<div class='col-sm-6 smallpad'>
24+
<button id='swaprows' class='btn btn-primary btn-block' type='button' onClick={swapRows}>Swap Rows</button>
25+
</div>
2926
</div></div>
30-
<table class='table table-hover table-striped test-data'><tbody ref={tbody}>{
31-
(selectClass = selectOn(selected, (el, selected) => el.className = selected ? 'danger' : ''),
32-
clickSelect = delegateEvent(tbody, 'click', select),
33-
clickRemove = delegateEvent(tbody, 'click', del),
34-
data.map(row =>
35-
<tr $selectClass={row.id}>
36-
<td class='col-md-1' textContent={((row.id))} />
37-
<td class='col-md-4'><a $clickSelect={row.id}>{row.label}</a></td>
38-
<td class='col-md-1'><a $clickRemove={row.id}><span class='delete glyphicon glyphicon-remove' /></a></td>
39-
<td class='col-md-6'/>
40-
</tr>
41-
))
42-
}</tbody></table>
43-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
44-
</div>
45-
)
27+
</div></div>
28+
<table class='table table-hover table-striped test-data'><tbody onClick={clickRow}>{
29+
selectWhen(selected, (el, selected) => el.className = selected ? 'danger' : '')
30+
(data.each(row =>
31+
<tr model={((row.id))}>
32+
<td class='col-md-1' textContent={((row.id))} />
33+
<td class='col-md-4'><a>{row.label}</a></td>
34+
<td class='col-md-1'><a><span class='delete glyphicon glyphicon-remove' /></a></td>
35+
<td class='col-md-6'/>
36+
</tr>
37+
))
38+
}</tbody></table>
39+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
40+
</div>
4641
}

‎frameworks/keyed/solid/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-solid",
3-
"version": "0.0.16",
3+
"version": "0.1.0",
44
"main": "dist/main.js",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "solid-js"
@@ -17,15 +17,15 @@
1717
"url": "https://github.com/krausest/js-framework-benchmark.git"
1818
},
1919
"dependencies": {
20-
"babel-plugin-jsx-dom-expressions": "0.0.29",
20+
"babel-plugin-jsx-dom-expressions": "0.1.0",
2121
"s-js": "0.4.9",
22-
"solid-js": "0.0.16"
22+
"solid-js": "0.1.0"
2323
},
2424
"devDependencies": {
25-
"@babel/core": "7.0.0-beta.56",
26-
"rollup": "0.63.4",
27-
"rollup-plugin-babel": "beta",
28-
"rollup-plugin-node-resolve": "3.3.0",
29-
"rollup-plugin-terser": "1.0.1"
25+
"@babel/core": "7.0.0",
26+
"rollup": "0.65.2",
27+
"rollup-plugin-babel": "4.0.3",
28+
"rollup-plugin-node-resolve": "3.4.0",
29+
"rollup-plugin-terser": "2.0.2"
3030
}
3131
}

0 commit comments

Comments
 (0)