Skip to content

Commit 97bb3ec

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/Freak613/js-framework-benchmark into Freak613-master
2 parents 3eeb0e5 + 95cc729 commit 97bb3ec

27 files changed

+549
-8583
lines changed

‎frameworks/keyed/1more/app.js‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import { html, render, key, component } from "1more";
2+
import {
3+
box,
4+
read,
5+
write,
6+
useSubscription,
7+
usePropSubscription,
8+
} from "1more/box";
9+
10+
function random(max) {
11+
return Math.round(Math.random() * 1000) % max;
12+
}
13+
14+
const A = [
15+
"pretty",
16+
"large",
17+
"big",
18+
"small",
19+
"tall",
20+
"short",
21+
"long",
22+
"handsome",
23+
"plain",
24+
"quaint",
25+
"clean",
26+
"elegant",
27+
"easy",
28+
"angry",
29+
"crazy",
30+
"helpful",
31+
"mushy",
32+
"odd",
33+
"unsightly",
34+
"adorable",
35+
"important",
36+
"inexpensive",
37+
"cheap",
38+
"expensive",
39+
"fancy",
40+
];
41+
const C = [
42+
"red",
43+
"yellow",
44+
"blue",
45+
"green",
46+
"pink",
47+
"brown",
48+
"purple",
49+
"brown",
50+
"white",
51+
"black",
52+
"orange",
53+
];
54+
const N = [
55+
"table",
56+
"chair",
57+
"house",
58+
"bbq",
59+
"desk",
60+
"car",
61+
"pony",
62+
"cookie",
63+
"sandwich",
64+
"burger",
65+
"pizza",
66+
"mouse",
67+
"keyboard",
68+
];
69+
70+
let nextId = 1;
71+
72+
function buildData(count) {
73+
const data = [];
74+
for (let i = 0; i < count; i++) {
75+
data[i] = {
76+
id: nextId++,
77+
label: box(
78+
`${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
79+
),
80+
};
81+
}
82+
return data;
83+
}
84+
85+
const state = {
86+
data: box([]),
87+
selected: box(undefined),
88+
};
89+
90+
const actions = {
91+
run() {
92+
write(buildData(1000), state.data);
93+
},
94+
add() {
95+
const data = read(state.data);
96+
write(data.concat(buildData(1000)), state.data);
97+
},
98+
runlots() {
99+
write(buildData(10000), state.data);
100+
},
101+
cleardata() {
102+
write([], state.data);
103+
write(undefined, state.selected);
104+
},
105+
update() {
106+
const data = read(state.data);
107+
for (let i = 0; i < data.length; i += 10) {
108+
const item = data[i];
109+
write(read(item.label) + " !!!", item.label);
110+
}
111+
},
112+
select(id) {
113+
write(id, state.selected);
114+
},
115+
remove(id) {
116+
const data = read(state.data).slice();
117+
const idx = data.findIndex(item => item.id === id);
118+
data.splice(idx, 1);
119+
write(data, state.data);
120+
},
121+
swaprows() {
122+
const data = read(state.data).slice();
123+
const tmp = data[1];
124+
data[1] = data[998];
125+
data[998] = tmp;
126+
write(data, state.data);
127+
},
128+
};
129+
130+
const Item = component(c => {
131+
const getSelected = useSubscription(
132+
c,
133+
state.selected,
134+
(selected, id) => id === selected,
135+
);
136+
const getLabel = usePropSubscription(c);
137+
138+
return item => html`
139+
<tr class=${getSelected(item.id) ? "danger" : null}>
140+
<td class="col-md-1">${item.id}</td>
141+
<td class="col-md-4">
142+
<a onclick=${() => actions.select(item.id)}>
143+
${getLabel(item.label)}
144+
</a>
145+
</td>
146+
<td class="col-md-1">
147+
<a onclick=${() => actions.remove(item.id)}>
148+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
149+
</a>
150+
</td>
151+
<td class="col-md-6"></td>
152+
</tr>
153+
`;
154+
});
155+
156+
const App = component(c => {
157+
const getData = useSubscription(c, state.data);
158+
159+
return () => html`
160+
<div class="container">
161+
<div class="jumbotron">
162+
<div class="row">
163+
<div class="col-md-6">
164+
<h1>1more</h1>
165+
</div>
166+
<div class="col-md-6">
167+
<div class="row">
168+
<div class="col-sm-6 smallpad">
169+
<button
170+
type="button"
171+
class="btn btn-primary btn-block"
172+
id="run"
173+
onclick=${actions.run}
174+
>
175+
Create 1,000 rows
176+
</button>
177+
</div>
178+
<div class="col-sm-6 smallpad">
179+
<button
180+
type="button"
181+
class="btn btn-primary btn-block"
182+
id="runlots"
183+
onclick=${actions.runlots}
184+
>
185+
Create 10,000 rows
186+
</button>
187+
</div>
188+
<div class="col-sm-6 smallpad">
189+
<button
190+
type="button"
191+
class="btn btn-primary btn-block"
192+
id="add"
193+
onclick=${actions.add}
194+
>
195+
Append 1,000 rows
196+
</button>
197+
</div>
198+
<div class="col-sm-6 smallpad">
199+
<button
200+
type="button"
201+
class="btn btn-primary btn-block"
202+
id="update"
203+
onclick=${actions.update}
204+
>
205+
Update every 10th row
206+
</button>
207+
</div>
208+
<div class="col-sm-6 smallpad">
209+
<button
210+
type="button"
211+
class="btn btn-primary btn-block"
212+
id="clear"
213+
onclick=${actions.cleardata}
214+
>
215+
Clear
216+
</button>
217+
</div>
218+
<div class="col-sm-6 smallpad">
219+
<button
220+
type="button"
221+
class="btn btn-primary btn-block"
222+
id="swaprows"
223+
onclick=${actions.swaprows}
224+
>
225+
Swap Rows
226+
</button>
227+
</div>
228+
</div>
229+
</div>
230+
</div>
231+
</div>
232+
<table class="table table-hover table-striped test-data">
233+
<tbody>
234+
${getData().map(item => key(item.id, Item(item)))}
235+
</tbody>
236+
</table>
237+
<span
238+
class="preloadicon glyphicon glyphicon-remove"
239+
aria-hidden="true"
240+
></span>
241+
</div>
242+
`;
243+
});
244+
245+
const container = document.getElementById("main");
246+
247+
render(App(), container);

‎frameworks/keyed/1more/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>1more</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
<script src='dist/app.min.js' type="module"></script>
8+
</head>
9+
<body>
10+
<div id="main">
11+
</div>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)