Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit cd72bfb

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/WebReflection/js-framework-benchmark into WebReflection-master
2 parents 9e80ef2 + ecc317b commit cd72bfb

File tree

15 files changed

+390
-17
lines changed

15 files changed

+390
-17
lines changed

‎hyperhtml-v1.12.5-non-keyed/index.html renamed to ‎hyperhtml-v2.1.2-keyed/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 v1.12.5</title>
5+
<title>hyper(HTML) v2.1.2</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>

‎hyperhtml-v1.12.5-non-keyed/package.json renamed to ‎hyperhtml-v2.1.2-keyed/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
{
22
"name": "js-framework-benchmark-hyper-html",
33
"version": "1.0.0",
4-
"description": "HyperHTML demo",
4+
"description": "hyper(HTML) demo",
55
"main": "index.js",
66
"scripts": {
77
"build-dev": "rollup -c -w",
88
"build-prod": "rollup -c"
99
},
1010
"license": "Apache-2.0",
1111
"dependencies": {
12-
"hyperhtml": "1.12.5"
12+
"hyperhtml": "^2.1.2"
1313
},
1414
"devDependencies": {
1515
"babel-core": "^6.26.0",
1616
"babel-plugin-external-helpers": "^6.22.0",
1717
"babel-preset-es2016": "^6.24.1",
1818
"rollup": "^0.50.0",
1919
"rollup-plugin-babel": "^3.0.2",
20-
"rollup-plugin-commonjs": "^8.2.6",
2120
"rollup-plugin-node-resolve": "^3.0.0",
2221
"rollup-plugin-uglify": "^2.0.1",
2322
"uglify-es": "^3.1.6"

‎hyperhtml-v1.12.5-non-keyed/rollup.config.js renamed to ‎hyperhtml-v2.1.2-keyed/rollup.config.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import * as path from "path";
44
import babel from "rollup-plugin-babel";
55
import resolve from "rollup-plugin-node-resolve";
6-
import commonjs from "rollup-plugin-commonjs";
76
import uglify from "rollup-plugin-uglify";
87
import { minify } from "uglify-es";
98

@@ -12,8 +11,7 @@ export default {
1211
output: {
1312
file: "dist/index.min.js",
1413
format: "iife",
15-
name: "app",
16-
sourcemap: true
14+
name: "app"
1715
},
1816
plugins: [
1917
resolve({
@@ -28,7 +26,6 @@ export default {
2826
runtimeHelpers: true,
2927
babelrc: false
3028
}),
31-
commonjs(),
3229
uglify({}, minify)
3330
]
3431
};

‎hyperhtml-v2.1.2-keyed/src/Row.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component } from 'hyperhtml/esm';
2+
import { startMeasure } from './utils';
3+
4+
const rows = new WeakMap;
5+
const set = (state, row) => (rows.set(state, row), row);
6+
7+
export default class Row extends Component {
8+
static for(state) {
9+
return (rows.get(state) || set(state, new Row(state))).render();
10+
}
11+
constructor(state) {
12+
super().state = state;
13+
}
14+
get className() {
15+
return this.state.id === Row.app.store.selected ? 'danger' : '';
16+
}
17+
select() {
18+
startMeasure('select');
19+
Row.app.store.select(this.state.id);
20+
Row.app.update();
21+
}
22+
remove() {
23+
startMeasure('delete');
24+
Row.app.store.delete(this.state.id);
25+
Row.app.update();
26+
}
27+
render() {
28+
return this.html`
29+
<tr class=${this.className}>
30+
<td class=col-md-1>${this.state.id}</td>
31+
<td class=col-md-4>
32+
<a data-call=select onclick=${this}>${this.state.label}</a>
33+
</td>
34+
<td class=col-md-1>
35+
<a data-call=remove onclick=${this}>
36+
<span class="glyphicon glyphicon-remove" aria-hidden=true></span>
37+
</a>
38+
</td>
39+
<td class=col-md-6></td>
40+
</tr>`;
41+
}
42+
}

‎hyperhtml-v2.1.2-keyed/src/index.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { bind } from "hyperhtml/esm";
2+
3+
import { startMeasure, stopMeasure } from "./utils";
4+
import { Store } from "./store";
5+
import Row from "./Row.js";
6+
7+
const store = new Store();
8+
9+
Row.app = {
10+
store,
11+
render: bind(document.querySelector("#main")),
12+
update() {
13+
this.render`
14+
<div class="container">
15+
<div class="jumbotron">
16+
<div class="row">
17+
<div class="col-md-6">
18+
<h1>hyper(HTML) v2.1.2</h1>
19+
</div>
20+
<div class="col-md-6">
21+
<div class="row">
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="run" onclick=${run}>Create 1,000 rows</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick=${runLots}>Create 10,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="add" onclick=${add}>Append 1,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="update" onclick=${update}>Update every 10th row</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="clear" onclick=${clear}>Clear</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onclick=${swapRows}>Swap Rows</button>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
<table class="table table-hover table-striped test-data">
45+
<tbody>
46+
${store.data.map(Row.for)}
47+
</tbody>
48+
</table>
49+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
50+
</div>`;
51+
stopMeasure();
52+
}
53+
};
54+
55+
Row.app.update();
56+
57+
function run() {
58+
startMeasure("run");
59+
store.run();
60+
Row.app.update();
61+
}
62+
63+
function runLots() {
64+
startMeasure("runLots");
65+
store.runLots();
66+
Row.app.update();
67+
}
68+
69+
function add() {
70+
startMeasure("add");
71+
store.add();
72+
Row.app.update();
73+
}
74+
75+
function update() {
76+
startMeasure("update");
77+
store.update();
78+
Row.app.update();
79+
}
80+
81+
function clear() {
82+
startMeasure("clear");
83+
store.clear();
84+
Row.app.update();
85+
}
86+
87+
function swapRows() {
88+
startMeasure("swapRows");
89+
store.swapRows();
90+
Row.app.update();
91+
}

‎hyperhtml-v1.12.5-non-keyed/src/store.js renamed to ‎hyperhtml-v2.1.2-keyed/src/store.js

File renamed without changes.

‎hyperhtml-v1.12.5-non-keyed/src/utils.js renamed to ‎hyperhtml-v2.1.2-keyed/src/utils.js

File renamed without changes.

‎hyperhtml-v2.1.2-non-keyed/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>hyper(HTML) v2.1.2</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/index.min.js'></script>
11+
</body>
12+
</html>

‎hyperhtml-v2.1.2-non-keyed/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "js-framework-benchmark-hyper-html",
3+
"version": "1.0.0",
4+
"description": "hyper(HTML) demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "rollup -c -w",
8+
"build-prod": "rollup -c"
9+
},
10+
"license": "Apache-2.0",
11+
"dependencies": {
12+
"hyperhtml": "^2.1.2"
13+
},
14+
"devDependencies": {
15+
"babel-core": "^6.26.0",
16+
"babel-plugin-external-helpers": "^6.22.0",
17+
"babel-preset-es2016": "^6.24.1",
18+
"rollup": "^0.50.0",
19+
"rollup-plugin-babel": "^3.0.2",
20+
"rollup-plugin-node-resolve": "^3.0.0",
21+
"rollup-plugin-uglify": "^2.0.1",
22+
"uglify-es": "^3.1.6"
23+
}
24+
}

‎hyperhtml-v2.1.2-non-keyed/rollup.config.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use strict";
2+
3+
import * as path from "path";
4+
import babel from "rollup-plugin-babel";
5+
import resolve from "rollup-plugin-node-resolve";
6+
import uglify from "rollup-plugin-uglify";
7+
import { minify } from "uglify-es";
8+
9+
export default {
10+
input: "src/index.js",
11+
output: {
12+
file: "dist/index.min.js",
13+
format: "iife",
14+
name: "app"
15+
},
16+
plugins: [
17+
resolve({
18+
module: true,
19+
jsnext: true,
20+
browser: true
21+
}),
22+
babel({
23+
exclude: "node_modules/**",
24+
presets: [["es2016"]],
25+
plugins: ["external-helpers"],
26+
runtimeHelpers: true,
27+
babelrc: false
28+
}),
29+
uglify({}, minify)
30+
]
31+
};

‎hyperhtml-v1.12.5-non-keyed/src/index.js renamed to ‎hyperhtml-v2.1.2-non-keyed/src/index.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import hyperhtml from "hyperhtml";
1+
import { bind, wire } from "hyperhtml/esm";
22

33
import { startMeasure, stopMeasure } from "./utils";
44
import { Store } from "./store";
55

6-
const { bind, wire } = hyperhtml;
76
const store = new Store();
87
const renderOnMain = bind(document.querySelector("#main"));
98
app(renderOnMain, store);
@@ -16,7 +15,7 @@ function app(render) {
1615
<div class="jumbotron">
1716
<div class="row">
1817
<div class="col-md-6">
19-
<h1>HyperHTML v1.12.5</h1>
18+
<h1>hyper(HTML) v2.1.2</h1>
2019
</div>
2120
<div class="col-md-6">
2221
<div class="row">
@@ -104,9 +103,8 @@ function select(id) {
104103

105104
function row(state) {
106105
const { id, label } = state;
107-
const className = classNameSelected(store.selected);
108106
return wire(state, ":row")`
109-
<tr class=${className(id)}>
107+
<tr class=${className(id, store.selected)}>
110108
<td class="col-md-1">${id}</td>
111109
<td class="col-md-4">
112110
<a onclick=${() => select(id)}>${label}</a>
@@ -121,6 +119,6 @@ function row(state) {
121119
`;
122120
}
123121

124-
function classNameSelected(selected) {
125-
return id => (id === selected ? "danger" : "");
122+
function className(id, selected) {
123+
return id === selected ? "danger" : "";
126124
}

0 commit comments

Comments
 (0)