Skip to content

Commit fce461e

Browse files
krausestkrausest
committed
Merge branch 'titoBouzout-master'
2 parents 0f56084 + 0d231f6 commit fce461e

File tree

6 files changed

+287
-0
lines changed

6 files changed

+287
-0
lines changed

‎frameworks/keyed/pota/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
css

‎frameworks/keyed/pota/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Pota</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="main"></div>
10+
<script src="dist/main.js"></script>
11+
</body>
12+
</html>

‎frameworks/keyed/pota/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "js-framework-benchmark-pota",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"main": "dist/main.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "pota",
8+
"frameworkHomeURL": "https://github.com/potahtml/pota"
9+
},
10+
"scripts": {
11+
"build-dev": "rollup -c -w",
12+
"build-prod": "rollup -c"
13+
},
14+
"author": "Tito Bouzout",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/krausest/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/krausest/js-framework-benchmark.git"
20+
},
21+
"dependencies": {
22+
"pota": "^0.7.79"
23+
},
24+
"devDependencies": {
25+
"@babel/core": "^7.23.9",
26+
"@rollup/plugin-babel": "^6.0.4",
27+
"@rollup/plugin-node-resolve": "^15.2.3",
28+
"@rollup/plugin-terser": "^0.4.4",
29+
"rollup": "^4.9.6"
30+
}
31+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import babel from "@rollup/plugin-babel";
2+
import resolve from "@rollup/plugin-node-resolve";
3+
import terser from "@rollup/plugin-terser";
4+
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+
19+
export default [
20+
{
21+
input: "./src/main.jsx",
22+
plugins,
23+
output: [
24+
{
25+
...outputOptions,
26+
file: "./dist/main.js",
27+
},
28+
],
29+
},
30+
];

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

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import { render, signal, batch, For } from "pota";
2+
import { useSelector } from "pota/hooks";
3+
4+
let idCounter = 1;
5+
const adjectives = [
6+
"pretty",
7+
"large",
8+
"big",
9+
"small",
10+
"tall",
11+
"short",
12+
"long",
13+
"handsome",
14+
"plain",
15+
"quaint",
16+
"clean",
17+
"elegant",
18+
"easy",
19+
"angry",
20+
"crazy",
21+
"helpful",
22+
"mushy",
23+
"odd",
24+
"unsightly",
25+
"adorable",
26+
"important",
27+
"inexpensive",
28+
"cheap",
29+
"expensive",
30+
"fancy",
31+
],
32+
colours = [
33+
"red",
34+
"yellow",
35+
"blue",
36+
"green",
37+
"pink",
38+
"brown",
39+
"purple",
40+
"brown",
41+
"white",
42+
"black",
43+
"orange",
44+
],
45+
nouns = [
46+
"table",
47+
"chair",
48+
"house",
49+
"bbq",
50+
"desk",
51+
"car",
52+
"pony",
53+
"cookie",
54+
"sandwich",
55+
"burger",
56+
"pizza",
57+
"mouse",
58+
"keyboard",
59+
];
60+
61+
function _random(max) {
62+
return Math.round(Math.random() * 1000) % max;
63+
}
64+
65+
function buildData(count) {
66+
let data = new Array(count);
67+
for (let i = 0; i < count; i++) {
68+
const [label, setLabel] = signal(
69+
`${adjectives[_random(adjectives.length)]} ${
70+
colours[_random(colours.length)]
71+
} ${nouns[_random(nouns.length)]}`,
72+
);
73+
data[i] = {
74+
id: idCounter++,
75+
label,
76+
setLabel,
77+
};
78+
}
79+
return data;
80+
}
81+
82+
const Button = ({ id, text, fn }) => (
83+
<div class="col-sm-6 smallpad">
84+
<button
85+
id={id}
86+
class="btn btn-primary btn-block"
87+
type="button"
88+
onClick={fn}
89+
>
90+
{text}
91+
</button>
92+
</div>
93+
);
94+
95+
const App = () => {
96+
const [data, setData] = signal([]),
97+
[selected, setSelected] = signal(null),
98+
run = () => setData(buildData(1000)),
99+
runLots = () => {
100+
setData(buildData(10000));
101+
},
102+
add = () => setData((d) => [...d, ...buildData(1000)]),
103+
update = () =>
104+
batch(() => {
105+
for (let i = 0, d = data(), len = d.length; i < len; i += 10)
106+
d[i].setLabel((l) => l + " !!!");
107+
}),
108+
swapRows = () => {
109+
const d = data().slice();
110+
if (d.length > 998) {
111+
let tmp = d[1];
112+
d[1] = d[998];
113+
d[998] = tmp;
114+
setData(d);
115+
}
116+
},
117+
clear = () => setData([]),
118+
remove = (id) =>
119+
setData((d) => {
120+
const idx = d.findIndex((datum) => datum.id === id);
121+
d.splice(idx, 1);
122+
return [...d];
123+
}),
124+
isSelected = useSelector(selected);
125+
126+
return (
127+
<div class="container">
128+
<div class="jumbotron">
129+
<div class="row">
130+
<div class="col-md-6">
131+
<h1>pota Keyed</h1>
132+
</div>
133+
<div class="col-md-6">
134+
<div class="row">
135+
<Button id="run" text="Create 1,000 rows" fn={run} />
136+
<Button id="runlots" text="Create 10,000 rows" fn={runLots} />
137+
<Button id="add" text="Append 1,000 rows" fn={add} />
138+
<Button id="update" text="Update every 10th row" fn={update} />
139+
<Button id="clear" text="Clear" fn={clear} />
140+
<Button id="swaprows" text="Swap Rows" fn={swapRows} />
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
<table
146+
class="table table-hover table-striped test-data"
147+
onClick={(e) => {
148+
const element = e.target;
149+
if (element.setSelected !== undefined) {
150+
setSelected(element.setSelected);
151+
} else if (element.removeRow !== undefined) {
152+
remove(element.removeRow);
153+
}
154+
}}
155+
>
156+
<tbody>
157+
<For each={data}>
158+
{(row) => {
159+
const { id, label } = row;
160+
161+
return (
162+
<tr class:danger={isSelected(id)}>
163+
<td class="col-md-1" textContent={id} />
164+
<td class="col-md-4">
165+
<a textContent={label} prop:setSelected={id} />
166+
</td>
167+
<td class="col-md-1">
168+
<a>
169+
<span
170+
class="glyphicon glyphicon-remove"
171+
aria-hidden="true"
172+
prop:removeRow={id}
173+
/>
174+
</a>
175+
</td>
176+
<td class="col-md-6" />
177+
</tr>
178+
);
179+
}}
180+
</For>
181+
</tbody>
182+
</table>
183+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
184+
</div>
185+
);
186+
};
187+
188+
render(App, document.getElementById("main"));

‎frameworks/keyed/pota/tsconfig.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"outDir": "./dist",
5+
6+
"allowJs": true,
7+
"checkJs": true,
8+
"strict": true,
9+
10+
"module": "NodeNext",
11+
"target": "ESNext",
12+
"lib": ["ESNext", "DOM", "DOM.Iterable"],
13+
"moduleResolution": "NodeNext",
14+
15+
"jsx": "react-jsx",
16+
"jsxImportSource": "pota",
17+
18+
"sourceMap": true,
19+
20+
"types": ["pota"]
21+
},
22+
"exclude": ["./src/dist/*", "node_modules"]
23+
}

0 commit comments

Comments
 (0)