Skip to content

Commit 33c3fd2

Browse files
aidenybaiaidenybai
committed
new benches
1 parent 48e7839 commit 33c3fd2

File tree

27 files changed

+2900
-3614
lines changed

27 files changed

+2900
-3614
lines changed

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"private": true,
3-
"type": "module",
4-
"scripts": {
5-
"dev": "vite",
6-
"build-dev": "npm run dev",
7-
"build": "vite build --base '/frameworks/keyed/million-react/dist/'",
8-
"build-prod": "npm run build",
9-
"preview": "vite preview"
10-
},
11-
"dependencies": {
12-
"million": "1.12.0"
13-
},
14-
"devDependencies": {
15-
"vite": "3.0.2"
16-
},
17-
"js-framework-benchmark": {
18-
"frameworkVersionFromPackage": "million",
19-
"customURL": "/dist"
20-
}
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vite",
6+
"build-dev": "npm run dev",
7+
"build": "vite build --base '/frameworks/keyed/million-react/dist/'",
8+
"build-prod": "npm run build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"million": "^1.12.3-beta.0"
13+
},
14+
"devDependencies": {
15+
"vite": "3.0.2"
16+
},
17+
"js-framework-benchmark": {
18+
"frameworkVersionFromPackage": "million",
19+
"customURL": "/dist"
20+
}
2121
}

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

Lines changed: 163 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,200 @@
1-
import { useState } from "million/react"
1+
import { useState } from 'million/react';
22

33
const random = (max) => Math.round(Math.random() * 1000) % max;
44

5-
const A = ["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"];
6-
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7-
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
8-
"keyboard"];
9-
5+
const A = [
6+
'pretty',
7+
'large',
8+
'big',
9+
'small',
10+
'tall',
11+
'short',
12+
'long',
13+
'handsome',
14+
'plain',
15+
'quaint',
16+
'clean',
17+
'elegant',
18+
'easy',
19+
'angry',
20+
'crazy',
21+
'helpful',
22+
'mushy',
23+
'odd',
24+
'unsightly',
25+
'adorable',
26+
'important',
27+
'inexpensive',
28+
'cheap',
29+
'expensive',
30+
'fancy',
31+
];
32+
const C = [
33+
'red',
34+
'yellow',
35+
'blue',
36+
'green',
37+
'pink',
38+
'brown',
39+
'purple',
40+
'brown',
41+
'white',
42+
'black',
43+
'orange',
44+
];
45+
const N = [
46+
'table',
47+
'chair',
48+
'house',
49+
'bbq',
50+
'desk',
51+
'car',
52+
'pony',
53+
'cookie',
54+
'sandwich',
55+
'burger',
56+
'pizza',
57+
'mouse',
58+
'keyboard',
59+
];
1060

1161
let nextId = 1;
1262
const generate = () => {
1363
return {
1464
id: nextId++,
15-
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
16-
}
17-
}
65+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${
66+
N[random(N.length)]
67+
}`,
68+
};
69+
};
1870

1971
export default function App() {
20-
const [list, setList] = useState([])
21-
const [selected, setSelected] = useState(0)
72+
const [list, setList] = useState([]);
73+
const [selected, setSelected] = useState(0);
2274

2375
const clear = () => {
24-
setSelected(0)
25-
setList([])
26-
}
76+
setSelected(0);
77+
setList([]);
78+
};
2779

2880
const createArray = (count) => {
29-
const l = []
81+
const l = [];
3082
for (let i = 0; i < count; i++) {
31-
l.push(generate())
83+
l.push(generate());
3284
}
33-
return l
34-
}
85+
return l;
86+
};
3587

3688
const append = (count) => {
37-
setList((prev) => prev.concat(createArray(count)))
38-
}
89+
setList((prev) => prev.concat(createArray(count)));
90+
};
3991

4092
const create1k = () => {
41-
setList(createArray(1000))
42-
}
93+
setList(createArray(1000));
94+
};
4395

4496
const create10k = () => {
45-
setList(createArray(10000))
46-
}
97+
setList(createArray(10000));
98+
};
4799

48100
const append1k = () => {
49-
append(1000)
50-
}
101+
append(1000);
102+
};
51103

52104
const updateEvery10 = () => {
53105
setList((prev) => {
54-
const newList = [...prev]
106+
const newList = [...prev];
55107
for (let i = 0; i < prev.length; i += 10) {
56-
const item = newList[i]
57-
newList[i] = { id: item.id, label: item.label + " !!!" }
108+
const item = newList[i];
109+
newList[i] = { id: item.id, label: item.label + ' !!!' };
58110
}
59-
return newList
60-
})
61-
}
111+
return newList;
112+
});
113+
};
62114

63115
const swapRows = () => {
64116
if (list.length >= 1000) {
65-
setList((prev) => [prev[0], prev[998], ...prev.slice(2, 998), prev[1], prev[999], ...list.length > 1000 ? prev.slice(999) : []])
117+
setList((prev) => [
118+
prev[0],
119+
prev[998],
120+
...prev.slice(2, 998),
121+
prev[1],
122+
prev[999],
123+
...(list.length > 1000 ? prev.slice(999) : []),
124+
]);
66125
}
67-
}
126+
};
68127

69-
const remove = (id) => setList(list.filter((i) => i.id !== id))
128+
const remove = (id) => setList(list.filter((i) => i.id !== id));
70129

71130
return (
72131
<div className="container">
73132
<div className="jumbotron">
74133
<div className="row">
75-
<div class="col-md-6"><h1>Million React</h1></div>
134+
<div class="col-md-6">
135+
<h1>Million React keyed</h1>
136+
</div>
76137
<div class="col-md-6">
77138
<div class="row">
78139
<div class="col-sm-6 smallpad">
79-
<button type="button" class="btn btn-primary btn-block" id="run" onClick={create1k}>Create 1,000 rows</button>
140+
<button
141+
type="button"
142+
class="btn btn-primary btn-block"
143+
id="run"
144+
onClick={create1k}
145+
>
146+
Create 1,000 rows
147+
</button>
80148
</div>
81149
<div class="col-sm-6 smallpad">
82-
<button type="button" class="btn btn-primary btn-block" id="runlots" onClick={create10k}>Create 10,000 rows</button>
150+
<button
151+
type="button"
152+
class="btn btn-primary btn-block"
153+
id="runlots"
154+
onClick={create10k}
155+
>
156+
Create 10,000 rows
157+
</button>
83158
</div>
84159
<div class="col-sm-6 smallpad">
85-
<button type="button" class="btn btn-primary btn-block" id="add" onClick={append1k}>Append 1,000 rows</button></div>
160+
<button
161+
type="button"
162+
class="btn btn-primary btn-block"
163+
id="add"
164+
onClick={append1k}
165+
>
166+
Append 1,000 rows
167+
</button>
168+
</div>
86169
<div class="col-sm-6 smallpad">
87-
<button type="button" class="btn btn-primary btn-block" id="update" onClick={updateEvery10}>Update every 10th row</button>
170+
<button
171+
type="button"
172+
class="btn btn-primary btn-block"
173+
id="update"
174+
onClick={updateEvery10}
175+
>
176+
Update every 10th row
177+
</button>
88178
</div>
89179
<div class="col-sm-6 smallpad">
90-
<button type="button" class="btn btn-primary btn-block" id="clear" onClick={clear}>Clear</button>
180+
<button
181+
type="button"
182+
class="btn btn-primary btn-block"
183+
id="clear"
184+
onClick={clear}
185+
>
186+
Clear
187+
</button>
91188
</div>
92189
<div class="col-sm-6 smallpad">
93-
<button type="button" class="btn btn-primary btn-block" id="swaprows" onClick={swapRows}>Swap Rows</button>
190+
<button
191+
type="button"
192+
class="btn btn-primary btn-block"
193+
id="swaprows"
194+
onClick={swapRows}
195+
>
196+
Swap Rows
197+
</button>
94198
</div>
95199
</div>
96200
</div>
@@ -99,28 +203,37 @@ export default function App() {
99203
<table className="table table-hover table-striped test-data">
100204
<tbody>
101205
{list.map((item) => (
102-
<Row key={item.id} remove={remove} selected={selected} setSelected={setSelected} item={item} />
206+
<Row
207+
key={item.id}
208+
remove={remove}
209+
selected={selected}
210+
setSelected={setSelected}
211+
item={item}
212+
/>
103213
))}
104214
</tbody>
105215
</table>
106-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
216+
<span
217+
class="preloadicon glyphicon glyphicon-remove"
218+
aria-hidden="true"
219+
></span>
107220
</div>
108221
);
109222
}
110223

111224
function Row({ item, remove, selected, setSelected }) {
112225
return (
113-
<tr className={selected === item.id ? "danger" : ""}>
226+
<tr className={selected === item.id ? 'danger' : ''}>
114227
<td class="col-md-1">{item.id}</td>
115228
<td class="col-md-4">
116229
<a onClick={() => setSelected(item.id)}>{item.label}</a>
117230
</td>
118231
<td class="col-md-1">
119-
<a onClick={
120-
() => remove(item.id)
121-
}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
232+
<a onClick={() => remove(item.id)}>
233+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
234+
</a>
122235
</td>
123236
<td class="col-md-6" />
124237
</tr>
125-
)
126-
}
238+
);
239+
}

‎frameworks/keyed/million-react/src/main.jsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import { createRoot, StrictMode } from 'million/react';
1+
import { createRoot } from 'million/react';
22

33
import App from './App';
44

5-
createRoot(document.getElementById('main')).render(
6-
<StrictMode>
7-
<App />
8-
</StrictMode>
9-
);
5+
createRoot(document.getElementById('main')).render(<App />);

‎frameworks/non-keyed/million-delta/index.html renamed to ‎frameworks/keyed/million/index.html

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

0 commit comments

Comments
 (0)