Skip to content

Commit 0958e8c

Browse files
author
Jason Antwi-Appah
committed
feat(million): create benchmark
1 parent 21efcf0 commit 0958e8c

File tree

4 files changed

+121
-18
lines changed

4 files changed

+121
-18
lines changed

‎frameworks/keyed/million-delta/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
6+
<link href="/css/currentStyle.css" rel="stylesheet">
77
<title>Million.js delta</title>
88
</head>
99
<body>

‎frameworks/keyed/million-delta/package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/million-delta/package.json

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
"private": true,
33
"type": "module",
44
"scripts": {
5-
"dev": "vite",
6-
"build": "vite build",
7-
"preview": "vite preview"
5+
"dev": "vite",
6+
"build-dev": "npm run dev",
7+
"build": "vite build",
8+
"build-prod": "npm run build",
9+
"preview": "vite preview"
810
},
911
"dependencies": {
10-
"million": "1.12.0"
12+
"million": "1.12.0"
1113
},
1214
"devDependencies": {
13-
"vite": "3.0.2"
15+
"vite": "3.0.2"
16+
},
17+
"js-framework-benchmark": {
18+
"frameworkVersionFromPackage": "million"
1419
}
15-
}
20+
}

‎frameworks/keyed/million-delta/src/App.jsx

Lines changed: 102 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,105 @@
1+
import { useList } from "million/react"
2+
3+
const random = (max) => Math.round(Math.random() * 1000) % max;
4+
5+
const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
6+
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
7+
"cheap", "expensive", "fancy"];
8+
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
9+
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
10+
"keyboard"];
11+
12+
13+
let nextId = 1;
14+
const generate = () => {
15+
return {
16+
id: nextId++,
17+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
18+
}
19+
}
20+
121
export default function App() {
2-
return (
3-
<div>
4-
<h1>Hello, world!</h1>
22+
const [list, delta] = useList([])
23+
const clear = () => {
24+
list.splice(0, list.length)
25+
}
26+
27+
const append = (count) => {
28+
for (let i = 0; i < count; i++) {
29+
list.push(generate())
30+
}
31+
}
32+
33+
const create1k = () => {
34+
clear()
35+
append(1000)
36+
}
37+
38+
const create10k = () => {
39+
clear()
40+
append(10000)
41+
}
42+
43+
const append1k = () => {
44+
append(1000)
45+
}
46+
47+
const updateEvery10 = () => {
48+
for (let i = 0; i < Math.floor(list.length / 10); i += 10) {
49+
const item = list[i]
50+
list[i] = { id: item.id, label: item.label + " !!!" }
51+
}
52+
}
53+
54+
const swapRows = () => {
55+
list.splice(1, 1, list.splice(998, 1, list[1])[0])
56+
}
57+
58+
return (
59+
<div className="container">
60+
<div className="jumbotron">
61+
<div class="col-md-6"><h1>Million delta</h1></div>
62+
<div class="col-md-6">
63+
<div class="row">
64+
<div class="col-sm-6 smallpad">
65+
<button type="button" class="btn btn-primary btn-block" id="run" onClick={create1k}>Create 1,000 rows</button>
66+
</div>
67+
<div class="col-sm-6 smallpad">
68+
<button type="button" class="btn btn-primary btn-block" id="runlots" onClick={create10k}>Create 10,000 rows</button>
69+
</div>
70+
<div class="col-sm-6 smallpad">
71+
<button type="button" class="btn btn-primary btn-block" id="add" onClick={append1k}>Append 1,000 rows</button></div>
72+
<div class="col-sm-6 smallpad">
73+
<button type="button" class="btn btn-primary btn-block" id="update" onClick={updateEvery10}>Update every 10th row</button>
74+
</div>
75+
<div class="col-sm-6 smallpad">
76+
<button type="button" class="btn btn-primary btn-block" id="clear" onClick={clear}>Clear</button>
77+
</div>
78+
<div class="col-sm-6 smallpad">
79+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onClick={swapRows}>Swap Rows</button>
80+
</div>
81+
</div>
582
</div>
6-
);
83+
</div>
84+
<table className="table table-hover table-striped test-data">
85+
<tbody delta={delta}>
86+
{list.map((item) => (
87+
<tr class="">
88+
<td class="col-md-1">{item.id}</td>
89+
<td class="col-md-4">
90+
<a>{item.label}</a>
91+
</td>
92+
<td class="col-md-1">
93+
<a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
94+
</td>
95+
<td class="col-md-6">
96+
97+
</td>
98+
</tr>
99+
))}
100+
</tbody>
101+
</table>
102+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
103+
</div>
104+
);
7105
}

0 commit comments

Comments
 (0)