Skip to content

Commit 795b765

Browse files
WebReflectionWebReflection
committed
heresy: custom elements for lighterhtml
1 parent d937235 commit 795b765

File tree

14 files changed

+502
-0
lines changed

14 files changed

+502
-0
lines changed

‎frameworks/keyed/heresy/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8" />
3+
<title>heresy keyed</title>
4+
<link href="/css/currentStyle.css" rel="stylesheet" />
5+
<div id="container"></div>
6+
<script src='dist/index.js'></script>

‎frameworks/keyed/heresy/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-heresy",
3+
"version": "1.0.0",
4+
"description": "heresy demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "heresy"
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+
"heresy"
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+
"heresy": "^0.23.2"
28+
},
29+
"devDependencies": {
30+
"@ungap/degap": "^0.1.4",
31+
"rollup": "^1.27.5",
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/heresy/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/heresy/src/index.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { define, html, render } from '../node_modules/heresy/esm/index.js';
2+
3+
import App from './ui/app.js';
4+
define('App', App);
5+
6+
let did = 1;
7+
const buildData = (count) => {
8+
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"];
9+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
10+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
11+
const data = [];
12+
for (let i = 0; i < count; i++) {
13+
data.push({
14+
id: did++,
15+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
16+
});
17+
}
18+
return data;
19+
};
20+
21+
const _random = max => Math.round(Math.random() * 1000) % max;
22+
23+
const scope = {
24+
add() {
25+
scope.data = scope.data.concat(buildData(1000));
26+
update(main, scope);
27+
},
28+
run() {
29+
scope.data = buildData(1000);
30+
update(main, scope);
31+
},
32+
runLots() {
33+
scope.data = buildData(10000);
34+
update(main, scope);
35+
},
36+
clear() {
37+
scope.data = [];
38+
update(main, scope);
39+
},
40+
update() {
41+
const {data} = scope;
42+
for (let i = 0, {length} = data; i < length; i += 10)
43+
data[i].label += ' !!!';
44+
update(main, scope);
45+
},
46+
swapRows() {
47+
const {data} = scope;
48+
if (data.length > 998) {
49+
const tmp = data[1];
50+
data[1] = data[998];
51+
data[998] = tmp;
52+
}
53+
update(main, scope);
54+
},
55+
interact(event) {
56+
event.preventDefault();
57+
const a = event.target.closest('a');
58+
const id = parseInt(a.closest('tr').id, 10);
59+
scope[a.dataset.action](id);
60+
},
61+
delete(id) {
62+
const {data} = scope;
63+
const idx = data.findIndex(d => d.id === id);
64+
data.splice(idx, 1);
65+
update(main, scope);
66+
},
67+
select(id) {
68+
scope.selected = id;
69+
update(main, scope);
70+
},
71+
selected: -1,
72+
data: [],
73+
};
74+
75+
const main = document.getElementById('container');
76+
77+
update(main, scope);
78+
79+
function update(main, scope) {
80+
render(main, html`<App .scope=${scope} />`);
81+
}

‎frameworks/keyed/heresy/src/ui/app.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { html } from '../../node_modules/heresy/esm/index.js';
2+
3+
import Button from './button.js';
4+
import Row from './row.js';
5+
6+
export default {
7+
extends: 'div',
8+
includes: {Button, Row},
9+
mappedAttributes: ['scope'],
10+
oninit() {
11+
this.classList.add('container');
12+
},
13+
onscope() {
14+
this.render();
15+
},
16+
render() {
17+
const {
18+
run, runLots, add, update, clear, swapRows,
19+
interact, data, selected
20+
} = this.scope;
21+
this.html`
22+
<div class="jumbotron">
23+
<div class="row">
24+
<div class="col-md-6">
25+
<h1>heresy keyed</h1>
26+
</div>
27+
<div class="col-md-6">
28+
<div class="row">
29+
<Button .id=${'run'} .cb=${run} .text=${'Create 1,000 rows'} />
30+
<Button .id=${'runlots'} .cb=${runLots} .text=${'Create 10,000 rows'} />
31+
<Button .id=${'add'} .cb=${add} .text=${'Append 1,000 rows'} />
32+
<Button .id=${'update'} .cb=${update} .text=${'Update every 10th row'} />
33+
<Button .id=${'clear'} .cb=${clear} .text=${'Clear'} />
34+
<Button .id=${'swaprows'} .cb=${swapRows} .text=${'Swap Rows'} />
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
<table onclick=${interact} class="table table-hover table-striped test-data">
40+
<tbody>
41+
${data.map(({id, label}) => html.for(this, id)`
42+
<Row id=${id} class=${id === selected ? 'danger' : ''} label=${label} />
43+
`)}
44+
</tbody>
45+
</table>
46+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />`;
47+
}
48+
};

‎frameworks/keyed/heresy/src/ui/button.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default {
2+
extends: 'div',
3+
mappedAttributes: ['id', 'cb', 'text'],
4+
oninit() {
5+
this.classList.add('col-sm-6', 'smallpad');
6+
},
7+
render() {
8+
const {id, cb, text} = this;
9+
this.html`
10+
<button
11+
type="button" class="btn btn-primary btn-block"
12+
id=${id}
13+
onclick=${cb}
14+
>
15+
${text}
16+
</button>`;
17+
}
18+
};

‎frameworks/keyed/heresy/src/ui/row.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export default {
2+
extends: 'tr',
3+
observedAttributes: ['label'],
4+
onattributechanged() {
5+
this.render();
6+
},
7+
render() {
8+
const {id} = this;
9+
this.html`
10+
<td class="col-md-1">${id}</td>
11+
<td class="col-md-4">
12+
<a data-action='select'>${this.getAttribute('label')}</a>
13+
</td>
14+
<td class="col-md-1">
15+
<a data-action='delete'>
16+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
17+
</a>
18+
</td>
19+
<td class="col-md-6" />`;
20+
}
21+
};

‎frameworks/non-keyed/heresy/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8" />
3+
<title>heresy non-keyed</title>
4+
<link href="/css/currentStyle.css" rel="stylesheet" />
5+
<div id="container"></div>
6+
<script src='dist/index.js'></script>

‎frameworks/non-keyed/heresy/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-heresy",
3+
"version": "1.0.0",
4+
"description": "heresy demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "heresy"
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+
"heresy"
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+
"heresy": "^0.23.2"
28+
},
29+
"devDependencies": {
30+
"@ungap/degap": "^0.1.4",
31+
"rollup": "^1.27.5",
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/heresy/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+
};

0 commit comments

Comments
 (0)