Skip to content

Commit 3150ebf

Browse files
WebReflectionWebReflection
committed
lighterhtml: final test-case update
1 parent 4377ab6 commit 3150ebf

File tree

10 files changed

+187
-264
lines changed

10 files changed

+187
-264
lines changed

‎frameworks/keyed/lighterhtml/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"lighterhtml": "2.0.7"
27+
"lighterhtml": "2.0.7",
28+
"js-framework-benchmark-utils": "0.2.5"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.5",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

‎frameworks/keyed/lighterhtml/rollup.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@ import { terser } from 'rollup-plugin-terser';
66
export default {
77
input: 'src/index.js',
88
plugins: [
9-
minifyHTML(),
9+
minifyHTML({
10+
options: {
11+
minifyOptions: {
12+
keepClosingSlash: true
13+
}
14+
}
15+
}),
1016
includePaths({
1117
include: {
1218
"@ungap/create-content": "./node_modules/@ungap/degap/create-content.js",

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

Lines changed: 12 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,19 @@
1-
import { html, render } from '../node_modules/lighterhtml/esm/index.js';
1+
import {State} from 'js-framework-benchmark-utils';
2+
import {html, render} from 'lighterhtml';
23

3-
let did = 1;
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;
16-
};
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: [],
70-
};
4+
import Jumbotron from './jumbotron.js';
5+
import Table from './table.js';
716

7+
const state = State(update);
728
const main = document.getElementById('container');
73-
update(main, scope);
749

75-
function update(
76-
where,
77-
{data, selected, run, runLots, add, update, clear, swapRows, interact}
78-
) {
79-
render(where, html`
10+
update(state);
11+
12+
function update(state) {
13+
render(main, html`
8014
<div class="container">
81-
<div class="jumbotron">
82-
<div class="row">
83-
<div class="col-md-6">
84-
<h1>lighterhtml keyed</h1>
85-
</div>
86-
<div class="col-md-6">
87-
<div class="row">
88-
<div class="col-sm-6 smallpad">
89-
<button type="button" class="btn btn-primary btn-block"
90-
id="run" onclick=${run}>Create 1,000 rows</button>
91-
</div>
92-
<div class="col-sm-6 smallpad">
93-
<button type="button" class="btn btn-primary btn-block"
94-
id="runlots" onclick=${runLots}>Create 10,000 rows</button>
95-
</div>
96-
<div class="col-sm-6 smallpad">
97-
<button type="button" class="btn btn-primary btn-block"
98-
id="add" onclick=${add}>Append 1,000 rows</button>
99-
</div>
100-
<div class="col-sm-6 smallpad">
101-
<button type="button" class="btn btn-primary btn-block"
102-
id="update" onclick=${update}>Update every 10th row</button>
103-
</div>
104-
<div class="col-sm-6 smallpad">
105-
<button type="button" class="btn btn-primary btn-block"
106-
id="clear" onclick=${clear}>Clear</button>
107-
</div>
108-
<div class="col-sm-6 smallpad">
109-
<button type="button" class="btn btn-primary btn-block"
110-
id="swaprows" onclick=${swapRows}>Swap Rows</button>
111-
</div>
112-
</div>
113-
</div>
114-
</div>
115-
</div>
116-
<table onclick=${interact} class="table table-hover table-striped test-data">
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>
125-
</td>
126-
<td class="col-md-1">
127-
<a data-action='delete'>
128-
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
129-
</a>
130-
</td>
131-
<td class="col-md-6"></td>
132-
</tr>`;
133-
})
134-
}</tbody>
135-
</table>
136-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
15+
${Jumbotron(state)}
16+
${Table(state)}
17+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
13718
</div>`);
13819
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {html} from 'lighterhtml';
2+
3+
export default ({run, runLots, add, update, clear, swapRows}) => html`
4+
<div class="jumbotron">
5+
<div class="row">
6+
<div class="col-md-6">
7+
<h1>lighterhtml keyed</h1>
8+
</div>
9+
<div class="col-md-6">
10+
<div class="row">
11+
<div class="col-sm-6 smallpad">
12+
<button type="button" class="btn btn-primary btn-block"
13+
id="run" onclick=${run}>Create 1,000 rows</button>
14+
</div>
15+
<div class="col-sm-6 smallpad">
16+
<button type="button" class="btn btn-primary btn-block"
17+
id="runlots" onclick=${runLots}>Create 10,000 rows</button>
18+
</div>
19+
<div class="col-sm-6 smallpad">
20+
<button type="button" class="btn btn-primary btn-block"
21+
id="add" onclick=${add}>Append 1,000 rows</button>
22+
</div>
23+
<div class="col-sm-6 smallpad">
24+
<button type="button" class="btn btn-primary btn-block"
25+
id="update" onclick=${update}>Update every 10th row</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button type="button" class="btn btn-primary btn-block"
29+
id="clear" onclick=${clear}>Clear</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block"
33+
id="swaprows" onclick=${swapRows}>Swap Rows</button>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
`;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {html} from 'lighterhtml';
2+
3+
const click = ({currentTarget, target}) => {
4+
const a = target.closest('a');
5+
const {action} = a.dataset;
6+
currentTarget.props[action](+a.closest('tr').id);
7+
};
8+
9+
export default (state) => {
10+
const {data, selected} = state;
11+
return html`
12+
<table onclick=${click} props=${state}
13+
class="table table-hover table-striped test-data">
14+
<tbody>${
15+
data.map(item => {
16+
const {id, label} = item;
17+
return html.for(data, id)`
18+
<tr id=${id} class=${id === selected ? 'danger' : ''}>
19+
<td class="col-md-1">${id}</td>
20+
<td class="col-md-4">
21+
<a data-action="select">${label}</a>
22+
</td>
23+
<td class="col-md-1">
24+
<a data-action="remove">
25+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
26+
</a>
27+
</td>
28+
<td class="col-md-6" />
29+
</tr>`;
30+
})
31+
}</tbody>
32+
</table>
33+
`;
34+
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27+
"js-framework-benchmark-utils": "0.2.5",
2728
"lighterhtml": "2.0.7"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.5",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

‎frameworks/non-keyed/lighterhtml/rollup.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@ import { terser } from 'rollup-plugin-terser';
66
export default {
77
input: 'src/index.js',
88
plugins: [
9-
minifyHTML(),
9+
minifyHTML({
10+
options: {
11+
minifyOptions: {
12+
keepClosingSlash: true
13+
}
14+
}
15+
}),
1016
includePaths({
1117
include: {
1218
"@ungap/create-content": "./node_modules/@ungap/degap/create-content.js",

0 commit comments

Comments
 (0)