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

Skip to content

Commit 2dc3218

Browse files
krausestkrausest
committed
Merge branch 'master' of github.com:krausest/js-framework-benchmark
2 parents a3753b2 + 860be0b commit 2dc3218

24 files changed

+7459
-333
lines changed

‎frameworks/keyed/uhtml/package-lock.json

Lines changed: 944 additions & 107 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/uhtml/package.json

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
"main": "index.js",
66
"js-framework-benchmark": {
77
"frameworkVersionFromPackage": "uhtml",
8-
"issues": [801]
8+
"issues": [
9+
801
10+
]
911
},
1012
"scripts": {
1113
"build-dev": "rollup -c -w",
@@ -25,15 +27,15 @@
2527
},
2628
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2729
"dependencies": {
28-
"js-framework-benchmark-utils": "0.2.5",
29-
"uhtml": "1.8.1"
30+
"js-framework-benchmark-utils": "^0.2.5",
31+
"uhtml": "^2.7.5"
3032
},
3133
"devDependencies": {
32-
"@ungap/degap": "^0.1.7",
33-
"rollup": "^2.0.6",
34-
"rollup-plugin-includepaths": "^0.2.3",
35-
"rollup-plugin-minify-html-literals": "^1.2.3",
36-
"rollup-plugin-node-resolve": "^5.2.0",
37-
"rollup-plugin-terser": "^5.3.0"
34+
"@rollup/plugin-node-resolve": "^13.0.0",
35+
"@ungap/degap": "^0.2.6",
36+
"rollup": "^2.52.1",
37+
"rollup-plugin-includepaths": "^0.2.4",
38+
"rollup-plugin-minify-html-literals": "^1.2.6",
39+
"rollup-plugin-terser": "^7.0.2"
3840
}
3941
}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import minifyHTML from 'rollup-plugin-minify-html-literals';
2-
import resolve from 'rollup-plugin-node-resolve';
2+
import {nodeResolve} from '@rollup/plugin-node-resolve';
3+
import {terser} from 'rollup-plugin-terser';
34
import includePaths from 'rollup-plugin-includepaths';
4-
import { terser } from 'rollup-plugin-terser';
55

66
export default {
77
input: 'src/index.js',
@@ -15,17 +15,19 @@ export default {
1515
}),
1616
includePaths({
1717
include: {
18-
'@ungap/create-content': './node_modules/@ungap/degap/create-content.js'
18+
'@ungap/create-content': 'node_modules/@ungap/degap/create-content.js'
1919
},
2020
}),
21-
resolve(),
21+
nodeResolve(),
2222
terser()
2323
],
24-
context: 'null',
25-
moduleContext: 'null',
2624
output: {
25+
esModule: false,
2726
file: 'dist/index.js',
27+
exports: 'named',
2828
format: 'iife',
2929
name: 'app'
3030
}
3131
};
32+
33+

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@ import {State} from 'js-framework-benchmark-utils';
22
import {html, render} from 'uhtml';
33

44
import Jumbotron from './jumbotron.js';
5-
import Table from './table.js';
5+
import Table from './table-delegate.js';
66

7-
const state = State(update);
8-
const main = document.getElementById('container');
7+
const state = State(Table);
98

10-
update(state);
11-
12-
function update(state) {
13-
render(main, html`
9+
render(document.getElementById('container'), html`
1410
<div class="container">
1511
${Jumbotron(state)}
1612
${Table(state)}
1713
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
18-
</div>`);
19-
}
14+
</div>
15+
`);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,27 @@ export default ({run, runLots, add, update, clear, swapRows}) => html`
1010
<div class="row">
1111
<div class="col-sm-6 smallpad">
1212
<button type="button" class="btn btn-primary btn-block"
13-
id="run" onclick=${run}>Create 1,000 rows</button>
13+
id="run" @click=${run}>Create 1,000 rows</button>
1414
</div>
1515
<div class="col-sm-6 smallpad">
1616
<button type="button" class="btn btn-primary btn-block"
17-
id="runlots" onclick=${runLots}>Create 10,000 rows</button>
17+
id="runlots" @click=${runLots}>Create 10,000 rows</button>
1818
</div>
1919
<div class="col-sm-6 smallpad">
2020
<button type="button" class="btn btn-primary btn-block"
21-
id="add" onclick=${add}>Append 1,000 rows</button>
21+
id="add" @click=${add}>Append 1,000 rows</button>
2222
</div>
2323
<div class="col-sm-6 smallpad">
2424
<button type="button" class="btn btn-primary btn-block"
25-
id="update" onclick=${update}>Update every 10th row</button>
25+
id="update" @click=${update}>Update every 10th row</button>
2626
</div>
2727
<div class="col-sm-6 smallpad">
2828
<button type="button" class="btn btn-primary btn-block"
29-
id="clear" onclick=${clear}>Clear</button>
29+
id="clear" @click=${clear}>Clear</button>
3030
</div>
3131
<div class="col-sm-6 smallpad">
3232
<button type="button" class="btn btn-primary btn-block"
33-
id="swaprows" onclick=${swapRows}>Swap Rows</button>
33+
id="swaprows" @click=${swapRows}>Swap Rows</button>
3434
</div>
3535
</div>
3636
</div>

‎frameworks/keyed/uhtml/src/table.js renamed to ‎frameworks/keyed/uhtml/src/table-delegate.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import {html} from 'uhtml';
22

3-
const click = ({currentTarget, target}) => {
3+
const handler = ({currentTarget, target}) => {
44
const a = target.closest('a');
55
const {action} = a.dataset;
6-
currentTarget.props[action](+a.closest('tr').id);
6+
currentTarget.state[action](+a.closest('tr').id);
77
};
88

99
export default (state) => {
1010
const {data, selected} = state;
11-
return html`
12-
<table onclick=${click} .props=${state}
13-
class="table table-hover table-striped test-data">
11+
return html.for(state)`
12+
<table class="table table-hover table-striped test-data"
13+
@click=${handler} .state=${state}>
1414
<tbody>${
1515
data.map(item => {
1616
const {id, label} = item;
@@ -22,7 +22,7 @@ export default (state) => {
2222
</td>
2323
<td class="col-md-1">
2424
<a data-action="remove">
25-
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
25+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
2626
</a>
2727
</td>
2828
<td class="col-md-6" />

‎frameworks/keyed/uhtml/src/table-tr.js

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

‎frameworks/keyed/uhydro/app.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/uhydro/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>uhydro</title><script src="app.js" type="module"></script><link href="/css/currentStyle.css" rel="stylesheet"></head><body><div id="main"><div class="container"><div class="jumbotron"><div class="row"><div class="col-md-6"><h1>uhydro</h1></div><div class="col-md-6"><div class="row"></div></div></div></div><table class="table table-hover table-striped test-data"><tbody></tbody></table><span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span></div></div></body></html>

0 commit comments

Comments
 (0)