Skip to content

Commit 1ae1514

Browse files
krausestkrausest
committed
Merge branch 'bau-keyed-0-90' of https://github.com/FredericHeem/js-framework-benchmark into FredericHeem-bau-keyed-0-90
2 parents 339844d + b50b96e commit 1ae1514

File tree

4 files changed

+53
-413
lines changed

4 files changed

+53
-413
lines changed

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

+2-2
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 Non Keyed Benchmark</title>
88
</head>
99
<body>
1010
<div id="app"></div>

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

+30-44
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+
let selectedRow = null;
8772

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

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

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

119104
const clear = () => {
120105
dataState.val = [];
121-
selectedState.val = 0;
106+
selectedRow = 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+
if (selectedRow) {
118+
selectedRow.className = "";
119+
}
120+
selectedRow = event.target.parentNode.parentNode;
121+
selectedRow.className = "danger";
133122
};
134123

135-
const Row = ({ id, label }) =>
136-
tr(
124+
const Row = ({ id, label }) => {
125+
const tdIdEl = td({ class: "col-md-1" }, id);
126+
const aLabelEl = a({ onclick: selectRow }, label);
127+
const aRemove = a({ onclick: remove(id) }, span({ class: "glyphicon glyphicon-remove", "aria-hidden": true }));
128+
129+
return tr(
137130
{
138-
class: () => (selectedState.val == id ? "danger" : ""),
131+
bauUpdate: (element, data) => {
132+
tdIdEl.textContent = data.id;
133+
aLabelEl.replaceWith(a({ onclick: selectRow }, data.label));
134+
aRemove.onclick = remove(data.id);
135+
},
139136
},
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-
),
137+
tdIdEl,
138+
td({ class: "col-md-4" }, aLabelEl),
139+
td({ class: "col-md-1" }, aRemove),
152140
td({ class: "col-md-6" })
153141
);
142+
};
154143

155144
const Button = ({ id, title, onclick }) =>
156145
div(
157146
{ class: "col-sm-6 smallpad" },
158-
button(
159-
{ type: "button", class: "btn btn-primary btn-block", id, onclick },
160-
title
161-
)
147+
button({ type: "button", class: "btn btn-primary btn-block", id, onclick }, title)
162148
);
163149

164150
const Jumbotron = ({}) =>
165151
div(
166152
{ class: "jumbotron" },
167153
div(
168154
{ class: "row" },
169-
div({ class: "col-md-6" }, h1("Bau Benchmark")),
155+
div({ class: "col-md-6" }, h1("Bau Non-Keyed Benchmark")),
170156
div(
171157
{ class: "col-md-6" },
172158
div(

0 commit comments

Comments
 (0)