Skip to content

Commit 0cf4549

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/titoBouzout/js-framework-benchmark into titoBouzout-master
2 parents 6d8bc23 + 241e953 commit 0cf4549

File tree

3 files changed

+143
-116
lines changed

3 files changed

+143
-116
lines changed

‎frameworks/keyed/pota/package.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
{
22
"name": "js-framework-benchmark-pota",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"type": "module",
55
"main": "dist/main.js",
66
"js-framework-benchmark": {
77
"frameworkVersionFromPackage": "pota",
88
"frameworkHomeURL": "https://pota.quack.uy/",
9-
"issues": [
10-
801
11-
]
9+
"issues": [801]
1210
},
1311
"scripts": {
1412
"build-dev": "rollup -c -w",
@@ -22,7 +20,7 @@
2220
"url": "https://github.com/krausest/js-framework-benchmark.git"
2321
},
2422
"dependencies": {
25-
"pota": "^0.13.121"
23+
"pota": "^0.14.132"
2624
},
2725
"devDependencies": {
2826
"@babel/core": "^7.23.9",

‎frameworks/keyed/pota/rollup.config.js

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,21 @@ import babel from "@rollup/plugin-babel";
22
import resolve from "@rollup/plugin-node-resolve";
33
import terser from "@rollup/plugin-terser";
44

5-
const outputOptions = {
6-
format: "es",
7-
sourcemap: false,
8-
};
9-
10-
const plugins = [
11-
resolve({}),
12-
babel({
13-
babelHelpers: "bundled",
14-
presets: [["pota/babel-preset"]],
15-
}),
16-
terser(),
17-
];
18-
195
export default [
206
{
217
input: "./src/main.jsx",
22-
plugins,
8+
plugins: [
9+
resolve({}),
10+
babel({
11+
babelHelpers: "bundled",
12+
presets: [["pota/babel-preset"]],
13+
}),
14+
terser(),
15+
],
2316
output: [
2417
{
25-
...outputOptions,
18+
format: "es",
19+
sourcemap: false,
2620
file: "./dist/main.js",
2721
},
2822
],

‎frameworks/keyed/pota/src/main.jsx

Lines changed: 130 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,84 @@
1-
import { render, signal, batch } from "pota";
2-
import { For } from "pota/web";
3-
import { useSelector } from "pota/hooks";
1+
import { render, signal, batch } from 'pota'
2+
import { For } from 'pota/web'
43

5-
let idCounter = 1;
4+
import { useSelector } from 'pota/plugin/useSelector'
5+
6+
let idCounter = 1
67
const adjectives = [
7-
"pretty",
8-
"large",
9-
"big",
10-
"small",
11-
"tall",
12-
"short",
13-
"long",
14-
"handsome",
15-
"plain",
16-
"quaint",
17-
"clean",
18-
"elegant",
19-
"easy",
20-
"angry",
21-
"crazy",
22-
"helpful",
23-
"mushy",
24-
"odd",
25-
"unsightly",
26-
"adorable",
27-
"important",
28-
"inexpensive",
29-
"cheap",
30-
"expensive",
31-
"fancy",
8+
'pretty',
9+
'large',
10+
'big',
11+
'small',
12+
'tall',
13+
'short',
14+
'long',
15+
'handsome',
16+
'plain',
17+
'quaint',
18+
'clean',
19+
'elegant',
20+
'easy',
21+
'angry',
22+
'crazy',
23+
'helpful',
24+
'mushy',
25+
'odd',
26+
'unsightly',
27+
'adorable',
28+
'important',
29+
'inexpensive',
30+
'cheap',
31+
'expensive',
32+
'fancy',
3233
],
3334
colours = [
34-
"red",
35-
"yellow",
36-
"blue",
37-
"green",
38-
"pink",
39-
"brown",
40-
"purple",
41-
"brown",
42-
"white",
43-
"black",
44-
"orange",
35+
'red',
36+
'yellow',
37+
'blue',
38+
'green',
39+
'pink',
40+
'brown',
41+
'purple',
42+
'brown',
43+
'white',
44+
'black',
45+
'orange',
4546
],
4647
nouns = [
47-
"table",
48-
"chair",
49-
"house",
50-
"bbq",
51-
"desk",
52-
"car",
53-
"pony",
54-
"cookie",
55-
"sandwich",
56-
"burger",
57-
"pizza",
58-
"mouse",
59-
"keyboard",
60-
];
48+
'table',
49+
'chair',
50+
'house',
51+
'bbq',
52+
'desk',
53+
'car',
54+
'pony',
55+
'cookie',
56+
'sandwich',
57+
'burger',
58+
'pizza',
59+
'mouse',
60+
'keyboard',
61+
]
6162

6263
function _random(max) {
63-
return Math.round(Math.random() * 1000) % max;
64+
return Math.round(Math.random() * 1000) % max
6465
}
6566

6667
function buildData(count) {
67-
let data = new Array(count);
68+
let data = new Array(count)
6869
for (let i = 0; i < count; i++) {
6970
const [label, setLabel, updateLabel] = signal(
7071
`${adjectives[_random(adjectives.length)]} ${
7172
colours[_random(colours.length)]
7273
} ${nouns[_random(nouns.length)]}`,
73-
);
74+
)
7475
data[i] = {
7576
id: idCounter++,
7677
label,
7778
updateLabel,
78-
};
79+
}
7980
}
80-
return data;
81+
return data
8182
}
8283

8384
const Button = ({ id, text, fn }) => (
@@ -91,38 +92,38 @@ const Button = ({ id, text, fn }) => (
9192
{text}
9293
</button>
9394
</div>
94-
);
95+
)
9596

9697
const App = () => {
9798
const [data, setData, updateData] = signal([]),
9899
[selected, setSelected] = signal(null),
99100
run = () => setData(buildData(1000)),
100101
runLots = () => {
101-
setData(buildData(10000));
102+
setData(buildData(10000))
102103
},
103-
add = () => updateData((d) => [...d, ...buildData(1000)]),
104+
add = () => updateData(d => [...d, ...buildData(1000)]),
104105
update = () =>
105106
batch(() => {
106107
for (let i = 0, d = data(), len = d.length; i < len; i += 10)
107-
d[i].updateLabel((l) => l + " !!!");
108+
d[i].updateLabel(l => l + ' !!!')
108109
}),
109110
swapRows = () => {
110-
const d = data().slice();
111+
const d = data().slice()
111112
if (d.length > 998) {
112-
let tmp = d[1];
113-
d[1] = d[998];
114-
d[998] = tmp;
115-
setData(d);
113+
let tmp = d[1]
114+
d[1] = d[998]
115+
d[998] = tmp
116+
setData(d)
116117
}
117118
},
118119
clear = () => setData([]),
119-
remove = (id) =>
120-
updateData((d) => {
121-
const idx = d.findIndex((datum) => datum.id === id);
122-
d.splice(idx, 1);
123-
return [...d];
120+
remove = id =>
121+
updateData(d => {
122+
const idx = d.findIndex(datum => datum.id === id)
123+
d.splice(idx, 1)
124+
return [...d]
124125
}),
125-
isSelected = useSelector(selected);
126+
isSelected = useSelector(selected)
126127

127128
return (
128129
<div class="container">
@@ -133,37 +134,68 @@ const App = () => {
133134
</div>
134135
<div class="col-md-6">
135136
<div class="row">
136-
<Button id="run" text="Create 1,000 rows" fn={run} />
137-
<Button id="runlots" text="Create 10,000 rows" fn={runLots} />
138-
<Button id="add" text="Append 1,000 rows" fn={add} />
139-
<Button id="update" text="Update every 10th row" fn={update} />
140-
<Button id="clear" text="Clear" fn={clear} />
141-
<Button id="swaprows" text="Swap Rows" fn={swapRows} />
137+
<Button
138+
id="run"
139+
text="Create 1,000 rows"
140+
fn={run}
141+
/>
142+
<Button
143+
id="runlots"
144+
text="Create 10,000 rows"
145+
fn={runLots}
146+
/>
147+
<Button
148+
id="add"
149+
text="Append 1,000 rows"
150+
fn={add}
151+
/>
152+
<Button
153+
id="update"
154+
text="Update every 10th row"
155+
fn={update}
156+
/>
157+
<Button
158+
id="clear"
159+
text="Clear"
160+
fn={clear}
161+
/>
162+
<Button
163+
id="swaprows"
164+
text="Swap Rows"
165+
fn={swapRows}
166+
/>
142167
</div>
143168
</div>
144169
</div>
145170
</div>
146171
<table
147172
class="table table-hover table-striped test-data"
148-
onClick={(e) => {
149-
const element = e.target;
150-
if (element.setSelected !== undefined) {
151-
setSelected(element.setSelected);
152-
} else if (element.removeRow !== undefined) {
153-
remove(element.removeRow);
173+
onClick={e => {
174+
const element = e.target
175+
const { selectRow, removeRow } = element
176+
if (selectRow !== undefined) {
177+
setSelected(selectRow)
178+
} else if (removeRow !== undefined) {
179+
remove(removeRow)
154180
}
155181
}}
156182
>
157183
<tbody>
158184
<For each={data}>
159-
{(row) => {
160-
const { id, label } = row;
185+
{row => {
186+
const { id, label } = row
161187

162188
return (
163189
<tr class:danger={isSelected(id)}>
164-
<td class="col-md-1" textContent={id} />
190+
<td
191+
class="col-md-1"
192+
textContent={id}
193+
/>
165194
<td class="col-md-4">
166-
<a textContent={label} prop:setSelected={id} />
195+
<a
196+
textContent={label}
197+
prop:selectRow={id}
198+
/>
167199
</td>
168200
<td class="col-md-1">
169201
<a>
@@ -176,14 +208,17 @@ const App = () => {
176208
</td>
177209
<td class="col-md-6" />
178210
</tr>
179-
);
211+
)
180212
}}
181213
</For>
182214
</tbody>
183215
</table>
184-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
216+
<span
217+
class="preloadicon glyphicon glyphicon-remove"
218+
aria-hidden="true"
219+
/>
185220
</div>
186-
);
187-
};
221+
)
222+
}
188223

189-
render(App, document.getElementById("main"));
224+
render(App, document.getElementById('main'))

0 commit comments

Comments
 (0)