Skip to content

Commit e9cd53c

Browse files
FredericHeemFredericHeem
committed
initial support for bau
1 parent 246a077 commit e9cd53c

File tree

8 files changed

+539
-0
lines changed

8 files changed

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

0 commit comments

Comments
 (0)