Skip to content

Commit 0f3b24f

Browse files
WebReflectionWebReflection
committed
neverland: hooks for lighterhtml
1 parent d937235 commit 0f3b24f

File tree

10 files changed

+452
-0
lines changed

10 files changed

+452
-0
lines changed

‎frameworks/keyed/neverland/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>neverland keyed</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/index.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/neverland/package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "js-framework-benchmark-neverland",
3+
"version": "1.0.0",
4+
"description": "neverland demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "neverland"
8+
},
9+
"scripts": {
10+
"build-dev": "rollup -c -w",
11+
"build-prod": "rollup -c"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
16+
},
17+
"keywords": [
18+
"neverland"
19+
],
20+
"author": "Mathis Zeiher",
21+
"license": "Apache-2.0",
22+
"bugs": {
23+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
24+
},
25+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
26+
"dependencies": {
27+
"neverland": "3.0.4"
28+
},
29+
"devDependencies": {
30+
"@ungap/degap": "^0.1.4",
31+
"rollup": "^1.27.4",
32+
"rollup-plugin-includepaths": "^0.2.3",
33+
"rollup-plugin-minify-html-literals": "^1.2.2",
34+
"rollup-plugin-node-resolve": "^5.2.0",
35+
"rollup-plugin-terser": "^5.1.2"
36+
}
37+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import includePaths from 'rollup-plugin-includepaths';
3+
import minifyHTML from 'rollup-plugin-minify-html-literals';
4+
import { terser } from 'rollup-plugin-terser';
5+
6+
export default {
7+
input: 'src/index.js',
8+
plugins: [
9+
minifyHTML({
10+
options: {
11+
minifyOptions: {
12+
keepClosingSlash: true
13+
}
14+
}
15+
}),
16+
includePaths({
17+
include: {
18+
"@ungap/create-content": "./node_modules/@ungap/degap/create-content.js",
19+
"@ungap/template-tag-arguments": "./node_modules/@ungap/degap/template-tag-arguments.js",
20+
"@ungap/template-literal": "./node_modules/@ungap/degap/template-literal.js",
21+
"@ungap/weakmap": "./node_modules/@ungap/degap/weakmap.js",
22+
"@ungap/weakset": "./node_modules/@ungap/degap/weakset.js",
23+
"@ungap/event": "./node_modules/@ungap/degap/event.js",
24+
"@ungap/essential-map": "./node_modules/@ungap/degap/essential-map.js",
25+
"@ungap/import-node": "./node_modules/@ungap/degap/import-node.js",
26+
"@ungap/trim": "./node_modules/@ungap/degap/trim.js"
27+
},
28+
}),
29+
resolve(),
30+
terser()
31+
],
32+
context: 'null',
33+
moduleContext: 'null',
34+
output: {
35+
file: 'dist/index.js',
36+
format: 'iife',
37+
name: 'app'
38+
}
39+
};

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {
2+
neverland as $, html, render,
3+
useCallback,
4+
useMemo,
5+
useReducer
6+
} from '../node_modules/neverland/esm/index.js';
7+
8+
import {Scope, listReducer} from './utils.js';
9+
10+
11+
const GlyphIcon = () => html`<span class="glyphicon glyphicon-remove" aria-hidden="true" />`;
12+
13+
const Row = $(({item, dispatch, selected}) => {
14+
const select = useCallback(() => dispatch({type: 'select', id: item.id}), [item]),
15+
remove = useCallback(() => dispatch({type: 'delete', id: item.id}), [item]);
16+
17+
return html.for(item)`
18+
<tr class=${selected ? "danger" : ""}>
19+
<td class="col-md-1">${item.id}</td>
20+
<td class="col-md-4"><a onclick=${select}>${item.label}</a></td>
21+
<td class="col-md-1"><a onclick=${remove}>${GlyphIcon()}</a></td>
22+
<td class="col-md-6" />
23+
</tr>
24+
`;
25+
});
26+
27+
const Button = ({id, title, cb}) => html`
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id=${id} onclick=${cb}>${title}</button>
30+
</div>
31+
`;
32+
33+
const Jumbotron = ({dispatch}) => html`
34+
<div class="jumbotron">
35+
<div class="row">
36+
<div class="col-md-6">
37+
<h1>neverland keyed</h1>
38+
</div>
39+
<div class="col-md-6">
40+
<div class="row">
41+
${Button({id: 'run', title: 'Create 1,000 rows', cb: () => dispatch({type: 'run'})})}
42+
${Button({id: 'runlots', title: 'Create 10,000 rows', cb: () => dispatch({type: 'runLots'})})}
43+
${Button({id: 'add', title: 'Append 1,000 rows', cb: () => dispatch({type: 'add'})})}
44+
${Button({id: 'update', title: 'Update every 10th row', cb: () => dispatch({type: 'update'})})}
45+
${Button({id: 'clear', title: 'Clear', cb: () => dispatch({type: 'clear'})})}
46+
${Button({id: 'swaprows', title: 'Swap Rows', cb: () => dispatch({type: 'swapRows'})})}
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
`;
52+
53+
const Main = $(() => {
54+
const [state, dispatch] = useReducer(listReducer, Scope);
55+
const jumbotron = useMemo(() => Jumbotron({dispatch}), []);
56+
57+
return html`
58+
<div class="container">
59+
${jumbotron}
60+
<table class="table table-hover table-striped test-data">
61+
<tbody>
62+
${state.data.map(item => Row({item, dispatch, selected: item.id === state.selected}))}
63+
</tbody>
64+
</table>
65+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
66+
</div>
67+
`;
68+
});
69+
70+
render(document.getElementById('main'), Main);

‎frameworks/keyed/neverland/src/utils.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
let did = 1;
2+
const buildData = (count) => {
3+
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"];
4+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
5+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
6+
const data = [];
7+
for (let i = 0; i < count; i++) {
8+
data.push({
9+
id: did++,
10+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
11+
});
12+
}
13+
return data;
14+
};
15+
16+
const _random = max => Math.round(Math.random() * 1000) % max;
17+
18+
export const Scope = () => ({
19+
data: [],
20+
selected: -1,
21+
add() {
22+
this.data = this.data.concat(buildData(1000));
23+
},
24+
run() {
25+
this.data = buildData(1000);
26+
},
27+
runLots() {
28+
this.data = buildData(10000);
29+
},
30+
clear() {
31+
this.data = [];
32+
},
33+
update() {
34+
const {data} = this;
35+
for (let i = 0, {length} = data; i < length; i += 10)
36+
data[i].label += ' !!!';
37+
},
38+
swapRows() {
39+
const {data} = this;
40+
if (data.length > 998) {
41+
const tmp = data[1];
42+
data[1] = data[998];
43+
data[998] = tmp;
44+
}
45+
},
46+
delete(id) {
47+
const {data} = this;
48+
const idx = data.findIndex(d => d.id === id);
49+
data.splice(idx, 1);
50+
},
51+
select(id) {
52+
this.selected = id;
53+
},
54+
});
55+
56+
export const listReducer = (state, action) => {
57+
const {type} = action;
58+
switch (type) {
59+
case 'delete':
60+
case 'select':
61+
state[type](action.id);
62+
break;
63+
default:
64+
state[type]();
65+
break;
66+
}
67+
return {...state};
68+
};

‎frameworks/non-keyed/neverland/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>neverland non-keyed</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/index.js'></script>
11+
</body>
12+
</html>

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "js-framework-benchmark-neverland",
3+
"version": "1.0.0",
4+
"description": "neverland demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "neverland"
8+
},
9+
"scripts": {
10+
"build-dev": "rollup -c -w",
11+
"build-prod": "rollup -c"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
16+
},
17+
"keywords": [
18+
"neverland"
19+
],
20+
"author": "Mathis Zeiher",
21+
"license": "Apache-2.0",
22+
"bugs": {
23+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
24+
},
25+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
26+
"dependencies": {
27+
"neverland": "3.0.4"
28+
},
29+
"devDependencies": {
30+
"@ungap/degap": "^0.1.4",
31+
"rollup": "^1.27.4",
32+
"rollup-plugin-includepaths": "^0.2.3",
33+
"rollup-plugin-minify-html-literals": "^1.2.2",
34+
"rollup-plugin-node-resolve": "^5.2.0",
35+
"rollup-plugin-terser": "^5.1.2"
36+
}
37+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import includePaths from 'rollup-plugin-includepaths';
3+
import minifyHTML from 'rollup-plugin-minify-html-literals';
4+
import { terser } from 'rollup-plugin-terser';
5+
6+
export default {
7+
input: 'src/index.js',
8+
plugins: [
9+
minifyHTML({
10+
options: {
11+
minifyOptions: {
12+
keepClosingSlash: true
13+
}
14+
}
15+
}),
16+
includePaths({
17+
include: {
18+
"@ungap/create-content": "./node_modules/@ungap/degap/create-content.js",
19+
"@ungap/template-tag-arguments": "./node_modules/@ungap/degap/template-tag-arguments.js",
20+
"@ungap/template-literal": "./node_modules/@ungap/degap/template-literal.js",
21+
"@ungap/weakmap": "./node_modules/@ungap/degap/weakmap.js",
22+
"@ungap/weakset": "./node_modules/@ungap/degap/weakset.js",
23+
"@ungap/event": "./node_modules/@ungap/degap/event.js",
24+
"@ungap/essential-map": "./node_modules/@ungap/degap/essential-map.js",
25+
"@ungap/import-node": "./node_modules/@ungap/degap/import-node.js",
26+
"@ungap/trim": "./node_modules/@ungap/degap/trim.js"
27+
},
28+
}),
29+
resolve(),
30+
terser()
31+
],
32+
context: 'null',
33+
moduleContext: 'null',
34+
output: {
35+
file: 'dist/index.js',
36+
format: 'iife',
37+
name: 'app'
38+
}
39+
};

‎frameworks/non-keyed/neverland/src/index.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {
2+
neverland as $, html, render,
3+
useCallback,
4+
useMemo,
5+
useReducer
6+
} from '../node_modules/neverland/esm/index.js';
7+
8+
import {Scope, listReducer} from './utils.js';
9+
10+
11+
const GlyphIcon = () => html`<span class="glyphicon glyphicon-remove" aria-hidden="true" />`;
12+
13+
const Row = $(({item, dispatch, selected}) => {
14+
const select = useCallback(() => dispatch({type: 'select', id: item.id}), [item]),
15+
remove = useCallback(() => dispatch({type: 'delete', id: item.id}), [item]);
16+
17+
return html`
18+
<tr class=${selected ? "danger" : ""}>
19+
<td class="col-md-1">${item.id}</td>
20+
<td class="col-md-4"><a onclick=${select}>${item.label}</a></td>
21+
<td class="col-md-1"><a onclick=${remove}>${GlyphIcon()}</a></td>
22+
<td class="col-md-6" />
23+
</tr>
24+
`;
25+
});
26+
27+
const Button = ({id, title, cb}) => html`
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id=${id} onclick=${cb}>${title}</button>
30+
</div>
31+
`;
32+
33+
const Jumbotron = ({dispatch}) => html`
34+
<div class="jumbotron">
35+
<div class="row">
36+
<div class="col-md-6">
37+
<h1>neverland non-keyed</h1>
38+
</div>
39+
<div class="col-md-6">
40+
<div class="row">
41+
${Button({id: 'run', title: 'Create 1,000 rows', cb: () => dispatch({type: 'run'})})}
42+
${Button({id: 'runlots', title: 'Create 10,000 rows', cb: () => dispatch({type: 'runLots'})})}
43+
${Button({id: 'add', title: 'Append 1,000 rows', cb: () => dispatch({type: 'add'})})}
44+
${Button({id: 'update', title: 'Update every 10th row', cb: () => dispatch({type: 'update'})})}
45+
${Button({id: 'clear', title: 'Clear', cb: () => dispatch({type: 'clear'})})}
46+
${Button({id: 'swaprows', title: 'Swap Rows', cb: () => dispatch({type: 'swapRows'})})}
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
`;
52+
53+
const Main = $(() => {
54+
const [state, dispatch] = useReducer(listReducer, Scope);
55+
const jumbotron = useMemo(() => Jumbotron({dispatch}), []);
56+
57+
return html`
58+
<div class="container">
59+
${jumbotron}
60+
<table class="table table-hover table-striped test-data">
61+
<tbody>
62+
${state.data.map(item => Row({item, dispatch, selected: item.id === state.selected}))}
63+
</tbody>
64+
</table>
65+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
66+
</div>
67+
`;
68+
});
69+
70+
render(document.getElementById('main'), Main);

0 commit comments

Comments
 (0)