Skip to content

Commit fa8c110

Browse files
WebReflectionWebReflection
committed
hyperhtml: final test-case update
1 parent 4377ab6 commit fa8c110

File tree

5 files changed

+42
-94
lines changed

5 files changed

+42
-94
lines changed

‎frameworks/keyed/hyperhtml/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8"/>
5-
<title>hyperHTML keyed</title>
5+
<title>hyper(HTML) keyed</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>

‎frameworks/keyed/hyperhtml/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
},
1313
"license": "Apache-2.0",
1414
"dependencies": {
15-
"hyperhtml": "2.31.5"
15+
"hyperhtml": "2.31.5",
16+
"js-framework-benchmark-utils": "0.2.5"
1617
},
1718
"devDependencies": {
1819
"@ungap/degap": "^0.1.4",

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

Lines changed: 8 additions & 2 deletions
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",
@@ -21,7 +27,7 @@ export default {
2127
},
2228
}),
2329
resolve(),
24-
// terser()
30+
terser()
2531
],
2632
context: 'null',
2733
moduleContext: 'null',

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

Lines changed: 15 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,26 @@
1-
import { bind, wire } from '../node_modules/hyperhtml/esm/index.js';
1+
import {State} from 'js-framework-benchmark-utils';
2+
import {bind} from 'hyperhtml';
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-
};
4+
import Row from './row.js';
175

18-
const _random = max => Math.round(Math.random() * 1000) % max;
6+
const state = State(update);
7+
const html = bind(document.getElementById('main'));
198

20-
const scope = {
21-
add() {
22-
scope.data = scope.data.concat(buildData(1000));
23-
update(scope);
24-
},
25-
run() {
26-
scope.data = buildData(1000);
27-
update(scope);
28-
},
29-
runLots() {
30-
scope.data = buildData(10000);
31-
update(scope);
32-
},
33-
clear() {
34-
scope.data = [];
35-
update(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(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(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(scope);
63-
},
64-
select(id) {
65-
scope.selected = id;
66-
update(scope);
67-
},
68-
selected: -1,
69-
data: [],
9+
const click = ({target}) => {
10+
const a = target.closest('a');
11+
const {action} = a.dataset;
12+
state[action](+a.closest('tr').id);
7013
};
7114

72-
const render = bind(document.getElementById('main'));
73-
update(scope);
15+
update(state);
7416

75-
function update({data, selected, run, runLots, add, update, clear, swapRows, interact}) {
76-
render`
17+
function update({data, selected, run, runLots, add, update, clear, swapRows}) {
18+
html`
7719
<div class="container">
7820
<div class="jumbotron">
7921
<div class="row">
8022
<div class="col-md-6">
81-
<h1>lighterhtml</h1>
23+
<h1>hyper(HTML) keyed</h1>
8224
</div>
8325
<div class="col-md-6">
8426
<div class="row">
@@ -110,25 +52,8 @@ function update({data, selected, run, runLots, add, update, clear, swapRows, int
11052
</div>
11153
</div>
11254
</div>
113-
<table onclick=${interact} class="table table-hover table-striped test-data">
114-
<tbody>${
115-
data.map(item => {
116-
const {id, label} = item;
117-
return wire(item)`
118-
<tr id=${id} class=${id === selected ? 'danger' : ''}>
119-
<td class="col-md-1">${id}</td>
120-
<td class="col-md-4">
121-
<a data-action='select'>${label}</a>
122-
</td>
123-
<td class="col-md-1">
124-
<a data-action='delete'>
125-
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
126-
</a>
127-
</td>
128-
<td class="col-md-6"></td>
129-
</tr>`;
130-
})
131-
}</tbody>
55+
<table onclick=${click} class="table table-hover table-striped test-data">
56+
<tbody>${data.map(item => Row(data, selected, item))}</tbody>
13257
</table>
13358
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
13459
</div>`;

‎frameworks/keyed/hyperhtml/src/row.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {wire} from 'hyperhtml';
2+
3+
export default (data, selected, {id, label}) => wire(data, `html:${id}`)`
4+
<tr id=${id} class=${id === selected ? 'danger' : ''}>
5+
<td class="col-md-1">${id}</td>
6+
<td class="col-md-4">
7+
<a data-action='select'>${label}</a>
8+
</td>
9+
<td class="col-md-1">
10+
<a data-action='remove'>
11+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
12+
</a>
13+
</td>
14+
<td class="col-md-6"></td>
15+
</tr>
16+
`;

0 commit comments

Comments
 (0)