Skip to content

Commit 9a39c8c

Browse files
WebReflectionWebReflection
committed
lighterhtml: update test using the domc implementation
1 parent 06ec3d0 commit 9a39c8c

File tree

4 files changed

+196
-201
lines changed

4 files changed

+196
-201
lines changed

‎frameworks/keyed/lighterhtml/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"lighterhtml": "^2.0.1"
27+
"lighterhtml": "^2.0.2"
2828
},
2929
"devDependencies": {
3030
"@ungap/degap": "^0.1.4",

‎frameworks/keyed/lighterhtml/src/index.js

Lines changed: 100 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,82 @@
11
import { html, render } from '../node_modules/lighterhtml/esm/index.js';
22

3-
const adjectives = [
4-
'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'];
5-
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
6-
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
7-
8-
let data = [];
93
let did = 1;
10-
let selected = -1;
11-
12-
const add = () => {
13-
data = data.concat(buildData(1000));
14-
_render();
15-
};
16-
const run = () => {
17-
data = buildData(1000);
18-
_render();
19-
};
20-
const runLots = () => {
21-
data = buildData(10000);
22-
_render();
23-
};
24-
const clear = () => {
25-
data = [];
26-
_render();
27-
};
28-
const interact = event => {
29-
event.preventDefault();
30-
event.stopPropagation();
31-
const {target} = event;
32-
const id = +target.closest('tr').id;
33-
if (target.getAttribute('data-interaction') === 'delete') {
34-
del(id)
35-
} else {
36-
select(id)
37-
}
38-
};
39-
const del = id => {
40-
const idx = data.findIndex(d => d.id === id);
41-
data.splice(idx, 1)
42-
_render();
43-
};
44-
const select = id => {
45-
if (selected > -1) {
46-
data[selected].selected = false;
47-
}
48-
selected = data.findIndex(d => d.id === id);
49-
data[selected].selected = true;
50-
_render();
4+
const buildData = (count) => {
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+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
8+
const data = [];
9+
for (let i = 0; i < count; i++) {
10+
data.push({
11+
id: did++,
12+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
13+
});
14+
}
15+
return data;
5116
};
52-
const swapRows = () => {
53-
if (data.length > 998) {
54-
const tmp = data[1]
55-
data[1] = data[998]
56-
data[998] = tmp
57-
}
58-
_render();
59-
};
60-
const update = () => {
61-
for(let i = 0; i < data.length; i += 10) {
62-
data[i].label += ' !!!';
63-
}
64-
_render();
65-
};
66-
const buildData = count => {
67-
const data = [];
68-
for (let i = 0; i < count; i++) {
69-
data.push({
70-
id: did++,
71-
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
72-
selected: false,
73-
});
74-
}
75-
return data;
76-
};
77-
const _random = max => {
78-
return Math.round(Math.random() * 1000) % max;
17+
18+
const _random = max => Math.round(Math.random() * 1000) % max;
19+
20+
const scope = {
21+
add() {
22+
scope.data = scope.data.concat(buildData(1000));
23+
update(main, scope);
24+
},
25+
run() {
26+
scope.data = buildData(1000);
27+
update(main, scope);
28+
},
29+
runLots() {
30+
scope.data = buildData(10000);
31+
update(main, scope);
32+
},
33+
clear() {
34+
scope.data = [];
35+
update(main, scope);
36+
},
37+
update() {
38+
const {data} = scope;
39+
for (let i = 0, {length} = data; i < length; i += 10)
40+
data[i].label += ' !!!';
41+
update(main, scope);
42+
},
43+
swapRows() {
44+
const {data} = scope;
45+
if (data.length > 998) {
46+
const tmp = data[1];
47+
data[1] = data[998];
48+
data[998] = tmp;
49+
}
50+
update(main, scope);
51+
},
52+
interact(event) {
53+
event.preventDefault();
54+
const a = event.target.closest('a');
55+
const id = parseInt(a.closest('tr').id, 10);
56+
scope[a.dataset.action](id);
57+
},
58+
delete(id) {
59+
const {data} = scope;
60+
const idx = data.findIndex(d => d.id === id);
61+
data.splice(idx, 1);
62+
update(main, scope);
63+
},
64+
select(id) {
65+
scope.selected = id;
66+
update(main, scope);
67+
},
68+
selected: -1,
69+
data: [],
7970
};
8071

81-
const container = document.getElementById('container');
82-
const _render = () => {
83-
render(container, html.for(container)`
72+
const main = document.getElementById('container');
73+
update(main, scope);
74+
75+
function update(
76+
where,
77+
{data, selected, run, runLots, add, update, clear, swapRows, interact}
78+
) {
79+
render(where, html`
8480
<div class="container">
8581
<div class="jumbotron">
8682
<div class="row">
@@ -90,50 +86,53 @@ const _render = () => {
9086
<div class="col-md-6">
9187
<div class="row">
9288
<div class="col-sm-6 smallpad">
93-
<button type="button" class="btn btn-primary btn-block" id="run" onclick=${run}>Create 1,000 rows</button>
89+
<button type="button" class="btn btn-primary btn-block"
90+
id="run" onclick=${run}>Create 1,000 rows</button>
9491
</div>
9592
<div class="col-sm-6 smallpad">
96-
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick=${runLots}>Create 10,000 rows</button>
93+
<button type="button" class="btn btn-primary btn-block"
94+
id="runlots" onclick=${runLots}>Create 10,000 rows</button>
9795
</div>
9896
<div class="col-sm-6 smallpad">
99-
<button type="button" class="btn btn-primary
100-
btn-block" id="add" onclick=${add}>Append 1,000 rows</button>
97+
<button type="button" class="btn btn-primary btn-block"
98+
id="add" onclick=${add}>Append 1,000 rows</button>
10199
</div>
102100
<div class="col-sm-6 smallpad">
103-
<button type="button" class="btn btn-primary
104-
btn-block" id="update" onclick=${update}>Update every 10th row</button>
101+
<button type="button" class="btn btn-primary btn-block"
102+
id="update" onclick=${update}>Update every 10th row</button>
105103
</div>
106104
<div class="col-sm-6 smallpad">
107-
<button type="button" class="btn btn-primary
108-
btn-block" id="clear" onclick=${clear}>Clear</button>
105+
<button type="button" class="btn btn-primary btn-block"
106+
id="clear" onclick=${clear}>Clear</button>
109107
</div>
110108
<div class="col-sm-6 smallpad">
111-
<button type="button" class="btn btn-primary
112-
btn-block" id="swaprows" onclick=${swapRows}>Swap Rows</button>
109+
<button type="button" class="btn btn-primary btn-block"
110+
id="swaprows" onclick=${swapRows}>Swap Rows</button>
113111
</div>
114112
</div>
115113
</div>
116114
</div>
117115
</div>
118116
<table onclick=${interact} class="table table-hover table-striped test-data">
119-
<tbody>${data.map(item => html.for(item)`
120-
<tr id=${item.id} class=${item.selected ? 'danger' : ''}>
121-
<td class="col-md-1">${item.id}</td>
122-
<td data-interaction='select' class="col-md-4">
123-
<a data-interaction='select'>${item.label}</a>
117+
<tbody>${
118+
data.map(item => {
119+
const {id, label} = item;
120+
return html.for(item)`
121+
<tr id=${id} class=${id === selected ? 'danger' : ''}>
122+
<td class="col-md-1">${id}</td>
123+
<td class="col-md-4">
124+
<a data-action='select'>${label}</a>
124125
</td>
125-
<td data-interaction='delete' class="col-md-1">
126-
<a data-interaction='delete'>
127-
<span data-interaction='delete' class="glyphicon glyphicon-remove" aria-hidden="true"></span>
126+
<td class="col-md-1">
127+
<a data-action='delete'>
128+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
128129
</a>
129130
</td>
130131
<td class="col-md-6"></td>
131-
</tr>`)
132-
}
133-
</tbody>
132+
</tr>`;
133+
})
134+
}</tbody>
134135
</table>
135136
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
136137
</div>`);
137-
};
138-
139-
_render();
138+
}

‎frameworks/non-keyed/lighterhtml/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"lighterhtml": "^2.0.1"
27+
"lighterhtml": "^2.0.2"
2828
},
2929
"devDependencies": {
3030
"@ungap/degap": "^0.1.4",

0 commit comments

Comments
 (0)