Skip to content

Commit 18e871a

Browse files
omilliomilli
committed
changed hella to keyed, upgrade to 0.6
1 parent 1958d7d commit 18e871a

File tree

6 files changed

+221
-386
lines changed

6 files changed

+221
-386
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010

1111
<body>
12-
<div id="root"></div>
12+
<div id="app"></div>
1313
<script src="dist/main.js"></script>
1414
</body>
1515

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

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

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,12 @@
88
"frameworkHomeURL": "https://hellajs.com"
99
},
1010
"scripts": {
11-
"dev:server": "bun ./index.html",
12-
"dev:build": "bun build ./src/main.js --outdir ./dist --minify --watch",
13-
"dev": "bun run dev:server & bun run dev:build",
1411
"build-prod": "bun build ./src/main.js --outdir ./dist --minify"
1512
},
1613
"devDependencies": {
1714
"bun": "^1.2.9"
1815
},
1916
"dependencies": {
20-
"@hellajs/core": "^0.3.0"
17+
"@hellajs/core": "^0.6.1"
2118
}
2219
}

‎frameworks/keyed/hellajs/src/main.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { html, signal, batch, forEach, mount } from "@hellajs/core";
2+
3+
const { div, table, tbody, tr, td, button, span, a, h1 } = html;
4+
5+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
6+
const colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
8+
9+
const random = (max) => Math.round(Math.random() * 1000) % max;
10+
11+
let nextId = 1;
12+
13+
const buildData = (count) => {
14+
let d = new Array(count);
15+
for (let i = 0; i < count; i++) {
16+
const label = signal(
17+
`${adjectives[random(adjectives.length)]} ${colors[random(colors.length)]} ${nouns[random(nouns.length)]}`
18+
);
19+
d[i] = { id: nextId++, label };
20+
}
21+
return d;
22+
};
23+
24+
const ActionButton = (
25+
id,
26+
label,
27+
onclick
28+
) =>
29+
div({ class: "col-sm-6" },
30+
button({ id, onclick, class: 'btn btn-primary btn-block col-md-6', type: "button" },
31+
label
32+
)
33+
)
34+
35+
function Bench() {
36+
const rows = signal([]);
37+
const selected = signal(undefined);
38+
39+
const create = (count) => {
40+
rows.set(buildData(count));
41+
}
42+
43+
const append = (count) => {
44+
rows.set([...rows(), ...buildData(count)]);
45+
}
46+
47+
const update = () => {
48+
batch(() => {
49+
for (let i = 0, d = rows(), len = d.length; i < len; i += 10) {
50+
const label = d[i].label;
51+
label.set(`${label()} !!!`);
52+
}
53+
})
54+
};
55+
56+
const swapRows = () => {
57+
const list = rows().slice();
58+
if (list.length > 998) {
59+
let item = list[1];
60+
list[1] = list[998];
61+
list[998] = item;
62+
rows.set(list);
63+
}
64+
};
65+
66+
const remove = (id) => {
67+
rows.set(rows().filter(row => row.id !== id));
68+
}
69+
70+
const clear = () => {
71+
rows.set([]);
72+
}
73+
74+
return div({ id: 'main' },
75+
div({ class: 'container' },
76+
div({ class: 'jumbotron' },
77+
div({ class: 'row' },
78+
div({ class: 'col-md-6' }, h1('HellaJS Keyed')),
79+
div({ class: 'col-md-6' },
80+
div({ class: 'row' },
81+
ActionButton('run', 'Create 1,000 rows', () => create(1000)),
82+
ActionButton('runlots', 'Create 10,000 rows', () => create(10000)),
83+
ActionButton('add', 'Append 1,000 rows', () => append(1000)),
84+
ActionButton('update', 'Update every 10th row', () => update()),
85+
ActionButton('clear', 'Clear', () => clear()),
86+
ActionButton('swaprows', 'Swap Rows', () => swapRows()),
87+
)
88+
),
89+
),
90+
),
91+
table({ class: 'table table-hover table-striped test-rows' },
92+
tbody(
93+
forEach(rows, (row) =>
94+
tr({ class: () => (selected() === row.id ? 'danger' : '') },
95+
td({ class: 'col-md-1' }, row.id),
96+
td({ class: 'col-md-4' },
97+
a({ class: 'lbl', onclick: () => selected.set(row.id) },
98+
row.label
99+
),
100+
),
101+
td({ class: 'col-md-1' },
102+
a({ class: 'remove', onclick: () => remove(row.id) },
103+
span({ class: 'glyphicon glyphicon-remove', ariaHidden: 'true' })
104+
),
105+
),
106+
)
107+
)
108+
),
109+
),
110+
span({ class: 'preloadicon glyphicon glyphicon-remove' }, ''),
111+
),
112+
)
113+
}
114+
115+
mount(Bench, "#app");

0 commit comments

Comments
 (0)