Skip to content

Commit 765908f

Browse files
krausestkrausest
committed
Merge branch 'WebReflection-heresy'
2 parents 73eeb24 + 0480eed commit 765908f

File tree

8 files changed

+46
-168
lines changed

8 files changed

+46
-168
lines changed

‎frameworks/keyed/heresy/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"heresy": "^0.23.2"
27+
"heresy": "0.24.1",
28+
"js-framework-benchmark-utils": "0.2.5"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.5",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

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

Lines changed: 6 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,14 @@
1-
import { define, html, render } from '../node_modules/heresy/esm/index.js';
1+
import {State} from 'js-framework-benchmark-utils';
2+
import {define, html, render} from 'heresy';
23

34
import App from './ui/app.js';
45
define('App', App);
56

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-
7+
const state = State(update);
758
const main = document.getElementById('container');
769

77-
update(main, scope);
10+
update(state);
7811

79-
function update(main, scope) {
80-
render(main, html`<App .scope=${scope} />`);
12+
function update(state) {
13+
render(main, html`<App .state=${state} />`);
8114
}

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
1-
import { html } from '../../node_modules/heresy/esm/index.js';
1+
import {html} from 'heresy';
22

33
import Button from './button.js';
44
import Row from './row.js';
55

66
export default {
77
extends: 'div',
88
includes: {Button, Row},
9-
mappedAttributes: ['scope'],
9+
mappedAttributes: ['state'],
1010
oninit() {
1111
this.classList.add('container');
1212
},
13-
onscope() {
13+
onstate() {
1414
this.render();
1515
},
16+
onclick({target}) {
17+
const a = target.closest('a');
18+
const {action} = a.dataset;
19+
this.state[action](+a.closest('tr').id);
20+
},
1621
render() {
1722
const {
18-
run, runLots, add, update, clear, swapRows,
19-
interact, data, selected
20-
} = this.scope;
23+
data, selected,
24+
run, runLots, add, update, clear, swapRows
25+
} = this.state;
2126
this.html`
2227
<div class="jumbotron">
2328
<div class="row">
@@ -36,9 +41,9 @@ export default {
3641
</div>
3742
</div>
3843
</div>
39-
<table onclick=${interact} class="table table-hover table-striped test-data">
44+
<table onclick=${this} class="table table-hover table-striped test-data">
4045
<tbody>
41-
${data.map(({id, label}) => html.for(this, id)`
46+
${data.map(({id, label}) => html.for(data, id)`
4247
<Row id=${id} class=${id === selected ? 'danger' : ''} label=${label} />
4348
`)}
4449
</tbody>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
<a data-action='select'>${this.getAttribute('label')}</a>
1313
</td>
1414
<td class="col-md-1">
15-
<a data-action='delete'>
15+
<a data-action='remove'>
1616
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
1717
</a>
1818
</td>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"heresy": "^0.23.2"
27+
"heresy": "0.24.1",
28+
"js-framework-benchmark-utils": "0.2.5"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.5",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

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

Lines changed: 6 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,14 @@
1-
import { define, html, render } from '../node_modules/heresy/esm/index.js';
1+
import {State} from 'js-framework-benchmark-utils';
2+
import {define, html, render} from 'heresy';
23

34
import App from './ui/app.js';
45
define('App', App);
56

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-
7+
const state = State(update);
758
const main = document.getElementById('container');
769

77-
update(main, scope);
10+
update(state);
7811

79-
function update(main, scope) {
80-
render(main, html`<App .scope=${scope} />`);
12+
function update(state) {
13+
render(main, html`<App .state=${state} />`);
8114
}

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
1-
import { html } from '../../node_modules/heresy/esm/index.js';
1+
import {html} from 'heresy';
22

33
import Button from './button.js';
44
import Row from './row.js';
55

66
export default {
77
extends: 'div',
88
includes: {Button, Row},
9-
mappedAttributes: ['scope'],
9+
mappedAttributes: ['state'],
1010
oninit() {
1111
this.classList.add('container');
1212
},
13-
onscope() {
13+
onstate() {
1414
this.render();
1515
},
16+
onclick({target}) {
17+
const a = target.closest('a');
18+
const {action} = a.dataset;
19+
this.state[action](+a.closest('tr').id);
20+
},
1621
render() {
1722
const {
18-
run, runLots, add, update, clear, swapRows,
19-
interact, data, selected
20-
} = this.scope;
23+
data, selected,
24+
run, runLots, add, update, clear, swapRows
25+
} = this.state;
2126
this.html`
2227
<div class="jumbotron">
2328
<div class="row">
@@ -36,10 +41,10 @@ export default {
3641
</div>
3742
</div>
3843
</div>
39-
<table onclick=${interact} class="table table-hover table-striped test-data">
44+
<table onclick=${this} class="table table-hover table-striped test-data">
4045
<tbody>
4146
${data.map(({id, label}) => html`
42-
<Row id=${id} class=${id === selected ? 'danger' : ''} .label=${label} />
47+
<Row id=${id} class=${id === selected ? 'danger' : ''} label=${label} />
4348
`)}
4449
</tbody>
4550
</table>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default {
1414
<a data-action='select'>${label}</a>
1515
</td>
1616
<td class="col-md-1">
17-
<a data-action='delete'>
17+
<a data-action='remove'>
1818
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
1919
</a>
2020
</td>

0 commit comments

Comments
 (0)