Skip to content

Commit 6c3f6ed

Browse files
aidenybaiaidenybai
committed
init
1 parent daefcc1 commit 6c3f6ed

File tree

12 files changed

+486
-1610
lines changed

12 files changed

+486
-1610
lines changed

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

File renamed without changes.

‎frameworks/non-keyed/million/package-lock.json renamed to ‎frameworks/keyed/million/package-lock.json

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

‎frameworks/non-keyed/million/package.json renamed to ‎frameworks/keyed/million/package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,19 @@
33
"type": "module",
44
"scripts": {
55
"dev": "vite",
6-
"build-dev": "npm run dev",
7-
"build": "vite build --base '/frameworks/non-keyed/million/dist/'",
6+
"build-dev": "vite build --watch --base '/frameworks/keyed/million/dist/'",
7+
"build": "vite build --base '/frameworks/keyed/million/dist/'",
88
"build-prod": "npm run build",
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"million": "^1.12.3-beta.7"
12+
"million": "^1.12.3-beta.1"
1313
},
1414
"devDependencies": {
1515
"vite": "3.0.2"
1616
},
1717
"js-framework-benchmark": {
1818
"frameworkVersionFromPackage": "million",
19-
"frameworkHomeURL": "https://millionjs.org/",
2019
"customURL": "/dist"
2120
}
2221
}

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

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
import {
2+
createBlock,
3+
$wire,
4+
fragment,
5+
} from '/Users/aidenybai/Projects/aidenybai/million/packages/next/block';
6+
7+
const adjectives = [
8+
'pretty',
9+
'large',
10+
'big',
11+
'small',
12+
'tall',
13+
'short',
14+
'long',
15+
'handsome',
16+
'plain',
17+
'quaint',
18+
'clean',
19+
'elegant',
20+
'easy',
21+
'angry',
22+
'crazy',
23+
'helpful',
24+
'mushy',
25+
'odd',
26+
'unsightly',
27+
'adorable',
28+
'important',
29+
'inexpensive',
30+
'cheap',
31+
'expensive',
32+
'fancy',
33+
];
34+
const colors = [
35+
'red',
36+
'yellow',
37+
'blue',
38+
'green',
39+
'pink',
40+
'brown',
41+
'purple',
42+
'brown',
43+
'white',
44+
'black',
45+
'orange',
46+
];
47+
const nouns = [
48+
'table',
49+
'chair',
50+
'house',
51+
'bbq',
52+
'desk',
53+
'car',
54+
'pony',
55+
'cookie',
56+
'sandwich',
57+
'burger',
58+
'pizza',
59+
'mouse',
60+
'keyboard',
61+
];
62+
63+
const random = (max) => Math.round(Math.random() * 1000) % max;
64+
65+
let nextId = 1;
66+
let list = [];
67+
let selected = 0;
68+
69+
const clear = () => {
70+
list = [];
71+
update();
72+
};
73+
74+
const buildData = (count) => {
75+
const data = new Array(count);
76+
for (let i = 0; i < count; ++i) {
77+
data[i] = {
78+
id: nextId++,
79+
label: `${adjectives[random(adjectives.length)]} ${
80+
colors[random(colors.length)]
81+
} ${nouns[random(nouns.length)]}`,
82+
};
83+
}
84+
return data;
85+
};
86+
87+
const create1k = () => {
88+
clear();
89+
list = buildData(1000);
90+
update();
91+
};
92+
93+
const create10k = () => {
94+
clear();
95+
list = buildData(10000);
96+
update();
97+
};
98+
99+
const append1k = () => {
100+
list.concat(buildData(1000));
101+
update();
102+
};
103+
104+
const updateEvery10 = () => {
105+
let i = 0;
106+
while (i < list.length) {
107+
list[i].label = `${list[i].label} !!!`;
108+
i += 10;
109+
}
110+
update();
111+
};
112+
113+
const swapRows = () => {
114+
if (list.length > 998) {
115+
const item = list[1];
116+
list[1] = list[998];
117+
list[998] = item;
118+
}
119+
update();
120+
};
121+
122+
const select = (id) => {
123+
selected = id;
124+
update();
125+
};
126+
127+
const remove = (id) => {
128+
list.splice(
129+
list.findIndex((z) => z.id === id),
130+
1
131+
);
132+
update();
133+
};
134+
135+
const Main = createBlock(({ rows }) => (
136+
<div class="container">
137+
<div class="jumbotron">
138+
<div class="row">
139+
<div class="col-md-6">
140+
<h1>Million</h1>
141+
</div>
142+
<div class="col-md-6">
143+
<div class="row">
144+
<div class="col-sm-6 smallpad">
145+
<button
146+
type="button"
147+
class="btn btn-primary btn-block"
148+
id="run"
149+
onClick={create1k}
150+
>
151+
Create 1,000 rows
152+
</button>
153+
</div>
154+
<div class="col-sm-6 smallpad">
155+
<button
156+
type="button"
157+
class="btn btn-primary btn-block"
158+
id="runlots"
159+
onClick={create10k}
160+
>
161+
Create 10,000 rows
162+
</button>
163+
</div>
164+
<div class="col-sm-6 smallpad">
165+
<button
166+
type="button"
167+
class="btn btn-primary btn-block"
168+
id="add"
169+
onClick={append1k}
170+
>
171+
Append 1,000 rows
172+
</button>
173+
</div>
174+
<div class="col-sm-6 smallpad">
175+
<button
176+
type="button"
177+
class="btn btn-primary btn-block"
178+
id="update"
179+
onClick={updateEvery10}
180+
>
181+
Update every 10th row
182+
</button>
183+
</div>
184+
<div class="col-sm-6 smallpad">
185+
<button
186+
type="button"
187+
class="btn btn-primary btn-block"
188+
id="clear"
189+
onClick={() => {
190+
clear();
191+
update();
192+
}}
193+
>
194+
Clear
195+
</button>
196+
</div>
197+
<div class="col-sm-6 smallpad">
198+
<button
199+
type="button"
200+
class="btn btn-primary btn-block"
201+
id="swaprows"
202+
onClick={swapRows}
203+
>
204+
Swap Rows
205+
</button>
206+
</div>
207+
</div>
208+
</div>
209+
</div>
210+
</div>
211+
<table class="table table-hover table-striped test-data">
212+
<tbody>{rows}</tbody>
213+
</table>
214+
<span
215+
class="preloadicon glyphicon glyphicon-remove"
216+
aria-hidden="true"
217+
></span>
218+
</div>
219+
));
220+
221+
const Row = createBlock(({ className, id, label }) => {
222+
return (
223+
<tr class={className}>
224+
<td class="col-md-1">{id}</td>
225+
<td class="col-md-4">
226+
<a
227+
onClick={$wire(({ id }) => {
228+
return () => {
229+
select(id);
230+
};
231+
}, id)}
232+
>
233+
{label}
234+
</a>
235+
</td>
236+
<td class="col-md-1">
237+
<a
238+
onClick={$wire(({ id }) => {
239+
return () => {
240+
remove(id);
241+
};
242+
}, id)}
243+
>
244+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
245+
</a>
246+
</td>
247+
<td class="col-md-6"></td>
248+
</tr>
249+
);
250+
});
251+
252+
function Rows({ oldCache, newCache }) {
253+
return fragment(
254+
list.map((item) => {
255+
const isSelected = selected === item.id;
256+
const cachedItem = oldCache[item.id];
257+
if (cachedItem) {
258+
const [cachedLabel, cachedIsSelected] = cachedItem._data;
259+
if (cachedLabel === item.label && cachedIsSelected === isSelected) {
260+
return (newCache[item.id] = cachedItem);
261+
}
262+
}
263+
const row = (
264+
<Row
265+
id={item.id}
266+
label={item.label}
267+
className={isSelected ? 'danger' : ''}
268+
/>
269+
);
270+
row._data = [item.label, isSelected];
271+
row.key = String(item.id);
272+
newCache[row.id] = row;
273+
return row;
274+
})
275+
);
276+
}
277+
278+
function render(oldCache, newCache) {
279+
return <Rows oldCache={oldCache} newCache={newCache} />;
280+
}
281+
282+
let oldCache = {};
283+
284+
const main = render({}, oldCache);
285+
(<Main rows={main} />).mount(document.getElementById('main'));
286+
287+
function update() {
288+
let newCache = {};
289+
main.patch(render(oldCache, newCache));
290+
oldCache = newCache;
291+
}

‎frameworks/non-keyed/million/vite.config.js renamed to ‎frameworks/keyed/million/vite.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ import { million } from 'million/vite-plugin-million';
44
// https://vitejs.dev/config/
55
export default defineConfig({
66
plugins: [million()],
7-
});
7+
});

‎frameworks/non-keyed/million-react/index.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)