Skip to content

Commit e418138

Browse files
krausestkrausest
committed
Merge branch 'domdiff' of https://github.com/WebReflection/js-framework-benchmark into WebReflection-domdiff
2 parents d66f14e + bc86240 commit e418138

File tree

6 files changed

+47
-171
lines changed

6 files changed

+47
-171
lines changed

‎frameworks/keyed/domdiff/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"domdiff": "2.2.0"
27+
"domdiff": "2.2.0",
28+
"js-framework-benchmark-utils": "0.2.5"
2829
},
2930
"devDependencies": {
3031
"rollup": "^1.27.0",

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import domdiff from 'domdiff';
2-
import {Scope, getRow} from './utils.js';
2+
import {State} from 'js-framework-benchmark-utils';
3+
import {getRow} from './utils.js';
34

45
const tbody = document.querySelector('tbody');
56
let rows = [].slice.call(tbody.children);
6-
const scope = new Scope(({data, selected}) => {
7+
const state = State(({data, selected, select, remove}) => {
78
rows = domdiff(
89
tbody,
910
rows,
1011
data.map(item => {
11-
const info = getRow(scope, item);
12-
const {row, select, td} = info;
1312
const {id, label} = item;
13+
const info = getRow(data, select, remove, id, label);
14+
const {row, selector, td} = info;
1415
if (info.id !== id)
1516
td.textContent = (row.id = (info.id = id));
1617
if (info.label !== label)
17-
select.textContent = (info.label = label);
18+
selector.textContent = (info.label = label);
1819
const danger = id === selected;
1920
if (info.danger !== danger)
2021
row.classList.toggle('danger', (info.danger = danger));
@@ -23,8 +24,8 @@ const scope = new Scope(({data, selected}) => {
2324
);
2425
});
2526

26-
Object.keys(scope).forEach(id => {
27+
Object.keys(state).forEach(id => {
2728
const button = document.querySelector(`#${id.toLowerCase()}`);
2829
if (button)
29-
button.addEventListener('click', () => scope[id]());
30+
button.addEventListener('click', () => state[id]());
3031
});

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

Lines changed: 19 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,3 @@
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 function Scope(update) {
19-
const scope = {
20-
add() {
21-
scope.data = scope.data.concat(buildData(1000));
22-
update(scope);
23-
},
24-
run() {
25-
scope.data = buildData(1000);
26-
update(scope);
27-
},
28-
runLots() {
29-
scope.data = buildData(10000);
30-
update(scope);
31-
},
32-
clear() {
33-
scope.data = [];
34-
update(scope);
35-
},
36-
update() {
37-
const {data} = scope;
38-
for (let i = 0, {length} = data; i < length; i += 10)
39-
data[i].label += ' !!!';
40-
update(scope);
41-
},
42-
swapRows() {
43-
const {data} = scope;
44-
if (data.length > 998) {
45-
const tmp = data[1];
46-
data[1] = data[998];
47-
data[998] = tmp;
48-
}
49-
update(scope);
50-
},
51-
delete(id) {
52-
const {data} = scope;
53-
const idx = data.findIndex(d => d.id === id);
54-
data.splice(idx, 1);
55-
update(scope);
56-
},
57-
select(id) {
58-
scope.selected = id;
59-
update(scope);
60-
},
61-
selected: -1,
62-
data: [],
63-
};
64-
return scope;
65-
};
66-
671
const template = document.createElement('template');
682
template.innerHTML = `
693
<tr>
@@ -77,23 +11,29 @@ template.innerHTML = `
7711
`.trim();
7812
const tr = template.content.firstChild;
7913

80-
const rows = new WeakMap;
81-
const createRow = (scope, item) => {
82-
const {id, label} = item;
83-
14+
const createRow = (select, remove, id, label) => {
8415
const row = tr.cloneNode(true);
8516
const td = row.querySelector('td');
8617
td.textContent = (row.id = id);
8718

88-
const [select, remove] = row.querySelectorAll('a');
89-
select.textContent = label;
90-
select.addEventListener('click', () => scope.select(id));
91-
remove.addEventListener('click', () => scope.delete(id));
19+
const [selector, remover] = row.querySelectorAll('a');
20+
selector.textContent = label;
21+
selector.addEventListener('click', () => select(id));
22+
remover.addEventListener('click', () => remove(id));
23+
24+
return {danger: false, id, label, row, selector, td};
25+
};
26+
27+
const {create} = Object;
28+
const rows = new WeakMap;
9229

93-
const info = {danger: false, id, label, row, select, td};
94-
rows.set(item, info);
95-
return info;
30+
const setCache = data => {
31+
const cache = create(null);
32+
rows.set(data, cache);
33+
return cache;
9634
};
9735

98-
export const getRow = (scope, item) =>
99-
rows.get(item) || createRow(scope, item);
36+
export const getRow = (data, select, remove, id, label) => {
37+
const cache = rows.get(data) || setCache(data);
38+
return cache[id] || (cache[id] = createRow(select, remove, id, label));
39+
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"domdiff": "2.2.0"
27+
"domdiff": "2.2.0",
28+
"js-framework-benchmark-utils": "0.2.5"
2829
},
2930
"devDependencies": {
3031
"rollup": "^1.27.0",

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import domdiff from 'domdiff';
2-
import {Scope, getRow, spliceRows} from './utils.js';
2+
import {State} from 'js-framework-benchmark-utils';
3+
import {getRow, spliceRows} from './utils.js';
34

45
const tbody = document.querySelector('tbody');
56
let rows = [].slice.call(tbody.children);
6-
const scope = new Scope(({data, selected}) => {
7+
const state = State(({data, selected, select, remove}) => {
78
rows = domdiff(
89
tbody,
910
rows,
1011
data.map((item, index) => {
11-
const info = getRow(scope, item, index);
12-
const {row, select, td} = info;
1312
const {id, label} = item;
13+
const info = getRow(index, select, remove, id, label);
14+
const {row, selector, td} = info;
1415
if (info.id !== id)
1516
td.textContent = (row.id = (info.id = id));
1617
if (info.label !== label)
17-
select.textContent = (info.label = label);
18+
selector.textContent = (info.label = label);
1819
const danger = id === selected;
1920
if (info.danger !== danger)
2021
row.classList.toggle('danger', (info.danger = danger));
@@ -24,8 +25,8 @@ const scope = new Scope(({data, selected}) => {
2425
spliceRows(rows.length);
2526
});
2627

27-
Object.keys(scope).forEach(id => {
28+
Object.keys(state).forEach(id => {
2829
const button = document.querySelector(`#${id.toLowerCase()}`);
2930
if (button)
30-
button.addEventListener('click', () => scope[id]());
31+
button.addEventListener('click', () => state[id]());
3132
});

‎frameworks/non-keyed/domdiff/src/utils.js

Lines changed: 8 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,3 @@
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 function Scope(update) {
19-
const scope = {
20-
add() {
21-
scope.data = scope.data.concat(buildData(1000));
22-
update(scope);
23-
},
24-
run() {
25-
scope.data = buildData(1000);
26-
update(scope);
27-
},
28-
runLots() {
29-
scope.data = buildData(10000);
30-
update(scope);
31-
},
32-
clear() {
33-
scope.data = [];
34-
update(scope);
35-
},
36-
update() {
37-
const {data} = scope;
38-
for (let i = 0, {length} = data; i < length; i += 10)
39-
data[i].label += ' !!!';
40-
update(scope);
41-
},
42-
swapRows() {
43-
const {data} = scope;
44-
if (data.length > 998) {
45-
const tmp = data[1];
46-
data[1] = data[998];
47-
data[998] = tmp;
48-
}
49-
update(scope);
50-
},
51-
delete(id) {
52-
const {data} = scope;
53-
const idx = data.findIndex(d => d.id === id);
54-
data.splice(idx, 1);
55-
update(scope);
56-
},
57-
select(id) {
58-
scope.selected = id;
59-
update(scope);
60-
},
61-
selected: -1,
62-
data: [],
63-
};
64-
return scope;
65-
};
66-
671
const template = document.createElement('template');
682
template.innerHTML = `
693
<tr>
@@ -78,24 +12,22 @@ template.innerHTML = `
7812
const tr = template.content.firstChild;
7913

8014
const rows = [];
81-
const createRow = (scope, item, index) => {
82-
const {id, label} = item;
83-
15+
const createRow = (select, remove, id, label, index) => {
8416
const row = tr.cloneNode(true);
8517
const td = row.querySelector('td');
8618
td.textContent = (row.id = id);
8719

88-
const [select, remove] = row.querySelectorAll('a');
89-
select.textContent = label;
90-
select.addEventListener('click', () => scope.select(+row.id));
91-
remove.addEventListener('click', () => scope.delete(+row.id));
20+
const [selector, remover] = row.querySelectorAll('a');
21+
selector.textContent = label;
22+
selector.addEventListener('click', () => select(+row.id));
23+
remover.addEventListener('click', () => remove(+row.id));
9224

93-
const info = {danger: false, id, label, row, select, td};
25+
const info = {danger: false, id, label, row, selector, td};
9426
return (rows[index] = info);
9527
};
9628

97-
export const getRow = (scope, item, index) =>
98-
rows[index] || createRow(scope, item, index);
29+
export const getRow = (index, select, remove, id, label) =>
30+
rows[index] || createRow(select, remove, id, label, index);
9931

10032
export const spliceRows = (length) => {
10133
rows.splice(length);

0 commit comments

Comments
 (0)