Skip to content

Commit df57e59

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/dozjs/js-framework-benchmark into dozjs-master
2 parents f30ad49 + 80f3001 commit df57e59

File tree

4 files changed

+193
-1
lines changed

4 files changed

+193
-1
lines changed

‎frameworks/keyed/doz/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"doz": "2.4.7"
27+
"doz": "3.0.1"
2828
},
2929
"devDependencies": {
3030
"webpack": "4.41.4",

‎frameworks/non-keyed/doz/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>Doz</title>
4+
<link href="/css/currentStyle.css" rel="stylesheet" />
5+
<div id="container"></div>
6+
<script src='dist/main.js'></script>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "js-framework-benchmark-doz",
3+
"version": "1.0.0",
4+
"description": "Doz demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "doz"
8+
},
9+
"scripts": {
10+
"build-dev": "webpack --watch --mode=development",
11+
"build-prod": "webpack --mode=production"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
16+
},
17+
"keywords": [
18+
"doz"
19+
],
20+
"author": "Fabio Ricali",
21+
"license": "MIT",
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+
"doz": "3.0.1"
28+
},
29+
"devDependencies": {
30+
"webpack": "4.41.4",
31+
"webpack-cli": "3.3.10"
32+
}
33+
}

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import Doz from 'doz'
2+
3+
const adjectives = [
4+
'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'];
5+
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
6+
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
7+
8+
let did = 1;
9+
let selected = -1;
10+
11+
const actions = {
12+
add() {
13+
this.getStore('records').data = this.getStore('records').data.concat(buildData(1000));
14+
},
15+
16+
run() {
17+
this.getStore('records').data = buildData(1000);
18+
},
19+
20+
runLots() {
21+
this.getStore('records').data = buildData(10000);
22+
},
23+
24+
clear() {
25+
this.getStore('records').data = [];
26+
},
27+
28+
del(id) {
29+
const data = this.getStore('records').data;
30+
const idx = data.findIndex(d => d.id === id);
31+
data.splice(idx, 1);
32+
},
33+
34+
interact(e) {
35+
const td = e.target.closest('td');
36+
const interaction = td.getAttribute('data-interaction');
37+
const id = parseInt(td.parentNode.id);
38+
if (interaction === 'delete') {
39+
this.action.del(id);
40+
} else {
41+
this.action.select(id);
42+
}
43+
},
44+
45+
select(id) {
46+
const data = this.getStore('records').data;
47+
if (selected > -1) {
48+
data[selected].selected = false;
49+
}
50+
selected = data.findIndex(d => d.id === id);
51+
data[selected].selected = true;
52+
},
53+
54+
swapRows() {
55+
this.mainComponent.prepareCommit();
56+
const data = this.getStore('records').data;
57+
if (data.length > 998) {
58+
const tmp = data[1];
59+
data[1] = data[998];
60+
data[998] = tmp;
61+
}
62+
this.mainComponent.commit();
63+
},
64+
65+
update() {
66+
this.mainComponent.prepareCommit();
67+
const data = this.getStore('records').data;
68+
for (let i = 0; i < data.length; i += 10) {
69+
data[i].label += ' !!!';
70+
}
71+
this.mainComponent.commit();
72+
}
73+
};
74+
75+
const buildData = count => {
76+
const data = [];
77+
for (let i = 0; i < count; i++) {
78+
data.push({
79+
id: did++,
80+
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
81+
selected: false,
82+
});
83+
}
84+
return data;
85+
};
86+
87+
const _random = max => {
88+
return Math.round(Math.random() * 1000) % max;
89+
};
90+
91+
new Doz({
92+
store: 'records',
93+
actions,
94+
root: '#container',
95+
props: {
96+
data: []
97+
},
98+
template(h) {
99+
return h`
100+
<div class="container">
101+
<div class="jumbotron">
102+
<div class="row">
103+
<div class="col-md-6">
104+
<h1>Doz</h1>
105+
</div>
106+
<div class="col-md-6">
107+
<div class="row">
108+
<div class="col-sm-6 smallpad">
109+
<button type="button" class="btn btn-primary btn-block" id="run" onclick="${this.action.run}">Create 1,000 rows</button>
110+
</div>
111+
<div class="col-sm-6 smallpad">
112+
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick="${this.action.runLots}">Create 10,000 rows</button>
113+
</div>
114+
<div class="col-sm-6 smallpad">
115+
<button type="button" class="btn btn-primary btn-block" id="add" onclick="${this.action.add}">Append 1,000 rows</button>
116+
</div>
117+
<div class="col-sm-6 smallpad">
118+
<button type="button" class="btn btn-primary btn-block" id="update" onclick="${this.action.update}">Update every 10th row</button>
119+
</div>
120+
<div class="col-sm-6 smallpad">
121+
<button type="button" class="btn btn-primary btn-block" id="clear" onclick="${this.action.clear}">Clear</button>
122+
</div>
123+
<div class="col-sm-6 smallpad">
124+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onclick="${this.action.swapRows}">Swap Rows</button>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
<table onclick="${this.action.interact}" class="table table-hover table-striped test-data">
131+
<tbody>
132+
${this.props.data.map(
133+
item => h`
134+
<tr id="${item.id}" class="${item.selected ? 'danger' : ''}" >
135+
<td class="col-md-1">${item.id}</td>
136+
<td class="col-md-4" >
137+
<a>${item.label}</a>
138+
</td>
139+
<td data-interaction="delete" class="col-md-1">
140+
<a>
141+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
142+
</a>
143+
</td>
144+
<td class="col-md-6"></td>
145+
</tr>`
146+
)}
147+
</tbody>
148+
</table>
149+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
150+
</div>
151+
`
152+
},
153+
});

0 commit comments

Comments
 (0)