Skip to content

Commit 5d05d4c

Browse files
krausestkrausest
committed
Merge branch 'bau' of https://github.com/FredericHeem/js-framework-benchmark into FredericHeem-bau
2 parents 063ffab + d256af5 commit 5d05d4c

File tree

8 files changed

+538
-0
lines changed

8 files changed

+538
-0
lines changed

‎frameworks/non-keyed/bau/.npmrc

Whitespace-only changes.

‎frameworks/non-keyed/bau/css/currentStyle.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import url("/node_modules/bootstrap/dist/css/bootstrap.min.css");
2+
@import url("/css/main.css");

‎frameworks/non-keyed/bau/css/main.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body {
2+
padding: 10px 0 0 0;
3+
margin: 0;
4+
overflow-y: scroll;
5+
}
6+
#duration {
7+
padding-top: 0px;
8+
}
9+
.jumbotron {
10+
padding-top:10px;
11+
padding-bottom:10px;
12+
}
13+
.test-data a {
14+
display: block;
15+
}
16+
.preloadicon {
17+
position: absolute;
18+
top:-20px;
19+
left:-20px;
20+
}
21+
.col-sm-6.smallpad {
22+
padding: 5px;
23+
}
24+
.jumbotron .row h1 {
25+
font-size: 40px;
26+
}

‎frameworks/non-keyed/bau/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+
<link href="/css/currentStyle.css" rel="stylesheet" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Bau.js Benchmark</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" crossorigin src="dist/main.js"></script>
12+
</body>
13+
</html>

‎frameworks/non-keyed/bau/main.js

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

0 commit comments

Comments
 (0)