Skip to content

Commit 22a7d04

Browse files
FredericHeemFredericHeem
committed
bau-0.90 keyed
1 parent aff59b3 commit 22a7d04

File tree

9 files changed

+245
-612
lines changed

9 files changed

+245
-612
lines changed

‎frameworks/non-keyed/bau/.npmrc renamed to ‎frameworks/keyed/bau/.npmrc

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<link href="/css/currentStyle.css" rel="stylesheet" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Bau.js Benchmark</title>
7+
<title>Bau.js Keyed Benchmark</title>
88
</head>
99
<body>
1010
<div id="app"></div>

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

Lines changed: 19 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,7 @@ const A = [
3333
"expensive",
3434
"fancy",
3535
];
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-
];
36+
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
4937
const N = [
5038
"table",
5139
"chair",
@@ -64,10 +52,7 @@ const N = [
6452

6553
let nextId = 1;
6654

67-
const buildLabel = () =>
68-
bau.state(
69-
`${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
70-
);
55+
const buildLabel = () => bau.state(`${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`);
7156

7257
const buildData = (count) => {
7358
const data = new Array(count);
@@ -83,16 +68,16 @@ const buildData = (count) => {
8368
};
8469

8570
const dataState = bau.state([]);
86-
const selectedState = bau.state(0);
71+
const selectedRowState = bau.state();
8772

8873
const run = () => {
8974
dataState.val = buildData(1000);
90-
selectedState.val = 0;
75+
selectedRowState.val = null;
9176
};
9277

9378
const runLots = () => {
9479
dataState.val = buildData(10000);
95-
selectedState.val = 0;
80+
selectedRowState.val = null;
9681
};
9782

9883
const add = () => {
@@ -118,55 +103,49 @@ const swapRows = () => {
118103

119104
const clear = () => {
120105
dataState.val = [];
121-
selectedState.val = 0;
106+
selectedRowState.val = null;
122107
};
123108

124-
const remove = ({ id, event }) => {
109+
const remove = (id) => () => {
125110
const idx = dataState.val.findIndex((d) => d.id === id);
126111
if (idx > -1) {
127112
dataState.val.splice(idx, 1);
128113
}
129114
};
130115

131-
const select = ({ id, event }) => {
132-
selectedState.val = id;
116+
const selectRow = (event) => {
117+
selectedRowState.val = event.target.closest("tr");
133118
};
134119

120+
bau.derive(() => {
121+
let { val, oldVal } = selectedRowState;
122+
if (oldVal) oldVal.className = "";
123+
if (val) val.className = "danger";
124+
});
125+
135126
const Row = ({ id, label }) =>
136127
tr(
137-
{
138-
class: () => (selectedState.val == id ? "danger" : ""),
139-
},
140128
td({ class: "col-md-1" }, id),
141-
td(
142-
{ class: "col-md-4" },
143-
a({ onclick: (event) => select({ id, event }) }, label)
144-
),
129+
td({ class: "col-md-4" }, a({ onclick: selectRow }, label)),
145130
td(
146131
{ class: "col-md-1" },
147-
a(
148-
{ onclick: (event) => remove({ id, event }) },
149-
span({ class: "glyphicon glyphicon-remove", "aria-hidden": true })
150-
)
132+
a({ onclick: remove(id) }, span({ class: "glyphicon glyphicon-remove", "aria-hidden": true }))
151133
),
152134
td({ class: "col-md-6" })
153135
);
154136

155137
const Button = ({ id, title, onclick }) =>
156138
div(
157139
{ class: "col-sm-6 smallpad" },
158-
button(
159-
{ type: "button", class: "btn btn-primary btn-block", id, onclick },
160-
title
161-
)
140+
button({ type: "button", class: "btn btn-primary btn-block", id, onclick }, title)
162141
);
163142

164143
const Jumbotron = ({}) =>
165144
div(
166145
{ class: "jumbotron" },
167146
div(
168147
{ class: "row" },
169-
div({ class: "col-md-6" }, h1("Bau Benchmark")),
148+
div({ class: "col-md-6" }, h1("Bau Keyed Benchmark")),
170149
div(
171150
{ class: "col-md-6" },
172151
div(

‎frameworks/keyed/bau/package-lock.json

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "js-framework-benchmark-bau",
33
"version": "1.2.0",
4-
"description": "bau demo benchmark",
4+
"description": "bau keyed demo benchmark",
55
"main": "index.js",
66
"js-framework-benchmark": {
77
"frameworkVersionFromPackage": "@grucloud/bau",
@@ -21,7 +21,7 @@
2121
"vite": "^4.4.8"
2222
},
2323
"dependencies": {
24-
"@grucloud/bau": "0.39.0",
24+
"@grucloud/bau": "0.90.0",
2525
"bootstrap": "3.3.6"
2626
}
2727
}

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

File renamed without changes.

0 commit comments

Comments
 (0)