Skip to content

Commit 0e1726a

Browse files
author
maomincoding
committed
Add Strve
1 parent b50b3aa commit 0e1726a

File tree

6 files changed

+365
-0
lines changed

6 files changed

+365
-0
lines changed

‎frameworks/keyed/strve/.gitignore

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
/buildDir
5+
.parcel-cache
6+
7+
# local env files
8+
.env.local
9+
.env.*.local
10+
11+
# Log files
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
pnpm-debug.log*
16+
17+
# Editor directories and files
18+
.idea
19+
.vscode
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
yarn.lock

‎frameworks/keyed/strve/index.html

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

‎frameworks/keyed/strve/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "js-framework-benchmark-keyed-strve",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "strve-js",
7+
"frameworkHomeURL": "https://maomincoding.github.io/strve-doc/"
8+
},
9+
"scripts": {
10+
"build-dev": "webpack --watch",
11+
"build-prod": "webpack --mode production"
12+
},
13+
"devDependencies": {
14+
"@babel/core": "7.21.0",
15+
"babel-loader": "9.1.2",
16+
"babel-plugin-jsx-to-strve": "2.0.0",
17+
"babel-plugin-strve": "2.0.0",
18+
"terser-webpack-plugin": "5.3.7",
19+
"webpack": "5.76.1",
20+
"webpack-cli": "5.0.1"
21+
},
22+
"dependencies": {
23+
"strve-js": "6.0.2"
24+
}
25+
}

‎frameworks/keyed/strve/src/data.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
let ID = 1;
2+
3+
function _random(max) {
4+
return Math.round(Math.random() * 1000) % max;
5+
}
6+
7+
export function buildData(count = 1000) {
8+
const adjectives = [
9+
"pretty",
10+
"large",
11+
"big",
12+
"small",
13+
"tall",
14+
"short",
15+
"long",
16+
"handsome",
17+
"plain",
18+
"quaint",
19+
"clean",
20+
"elegant",
21+
"easy",
22+
"angry",
23+
"crazy",
24+
"helpful",
25+
"mushy",
26+
"odd",
27+
"unsightly",
28+
"adorable",
29+
"important",
30+
"inexpensive",
31+
"cheap",
32+
"expensive",
33+
"fancy",
34+
];
35+
const colours = [
36+
"red",
37+
"yellow",
38+
"blue",
39+
"green",
40+
"pink",
41+
"brown",
42+
"purple",
43+
"brown",
44+
"white",
45+
"black",
46+
"orange",
47+
];
48+
const nouns = [
49+
"table",
50+
"chair",
51+
"house",
52+
"bbq",
53+
"desk",
54+
"car",
55+
"pony",
56+
"cookie",
57+
"sandwich",
58+
"burger",
59+
"pizza",
60+
"mouse",
61+
"keyboard",
62+
];
63+
const data = [];
64+
for (let i = 0; i < count; i++)
65+
data.push({
66+
id: ID++,
67+
label:
68+
adjectives[_random(adjectives.length)] +
69+
" " +
70+
colours[_random(colours.length)] +
71+
" " +
72+
nouns[_random(nouns.length)],
73+
});
74+
return data;
75+
}

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

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import { setData, createApp } from "strve-js";
2+
import { buildData } from "./data.js";
3+
4+
let selected = undefined;
5+
let rows = [];
6+
7+
function setRows(update = rows.slice()) {
8+
setData(
9+
() => {
10+
rows = update;
11+
},
12+
{
13+
name: TbodyComponent,
14+
}
15+
);
16+
}
17+
18+
function add() {
19+
const data = rows.concat(buildData(1000));
20+
setData(
21+
() => {
22+
rows = data;
23+
},
24+
{
25+
name: TbodyComponent,
26+
}
27+
);
28+
}
29+
30+
function remove(id) {
31+
rows.splice(
32+
rows.findIndex((d) => d.id === id),
33+
1
34+
);
35+
setRows();
36+
}
37+
38+
function select(id) {
39+
setData(
40+
() => {
41+
selected = +id;
42+
},
43+
{
44+
name: TbodyComponent,
45+
}
46+
);
47+
}
48+
49+
function run() {
50+
setRows(buildData());
51+
selected = undefined;
52+
}
53+
54+
function update() {
55+
for (let i = 0; i < rows.length; i += 10) {
56+
rows[i].label += " !!!";
57+
}
58+
setRows();
59+
}
60+
61+
function runLots() {
62+
setRows(buildData(10000));
63+
selected = undefined;
64+
}
65+
66+
function clear() {
67+
setRows([]);
68+
selected = undefined;
69+
}
70+
71+
function swapRows() {
72+
if (rows.length > 998) {
73+
const d1 = rows[1];
74+
const d998 = rows[998];
75+
rows[1] = d998;
76+
rows[998] = d1;
77+
setRows();
78+
}
79+
}
80+
81+
function TbodyComponent() {
82+
return (
83+
<tbody>
84+
{rows.map((item) => (
85+
<tr
86+
class={item.id === selected ? "danger" : ""}
87+
data-label={item.label}
88+
key={item.id}
89+
>
90+
<td class="col-md-1">{item.id}</td>
91+
<td class="col-md-4">
92+
<a onClick={() => select(item.id)}>{item.label}</a>
93+
</td>
94+
<td class="col-md-1">
95+
<a onClick={() => remove(item.id)}>
96+
<span
97+
class="glyphicon glyphicon-remove"
98+
aria-hidden="true"
99+
></span>
100+
</a>
101+
</td>
102+
<td class="col-md-6"></td>
103+
</tr>
104+
))}
105+
</tbody>
106+
);
107+
}
108+
109+
function MainBody() {
110+
return (
111+
<fragment>
112+
<div class="jumbotron">
113+
<div class="row">
114+
<div class="col-md-6">
115+
<h1>Strve-keyed</h1>
116+
</div>
117+
<div class="col-md-6">
118+
<div class="row">
119+
<div class="col-sm-6 smallpad">
120+
<button
121+
type="button"
122+
class="btn btn-primary btn-block"
123+
id="run"
124+
onClick={run}
125+
>
126+
Create 1,000 rows
127+
</button>
128+
</div>
129+
<div class="col-sm-6 smallpad">
130+
<button
131+
type="button"
132+
class="btn btn-primary btn-block"
133+
id="runlots"
134+
onClick={runLots}
135+
>
136+
Create 10,000 rows
137+
</button>
138+
</div>
139+
<div class="col-sm-6 smallpad">
140+
<button
141+
type="button"
142+
class="btn btn-primary btn-block"
143+
id="add"
144+
onClick={add}
145+
>
146+
Append 1,000 rows
147+
</button>
148+
</div>
149+
<div class="col-sm-6 smallpad">
150+
<button
151+
type="button"
152+
class="btn btn-primary btn-block"
153+
id="update"
154+
onClick={update}
155+
>
156+
Update every 10th row
157+
</button>
158+
</div>
159+
<div class="col-sm-6 smallpad">
160+
<button
161+
type="button"
162+
class="btn btn-primary btn-block"
163+
id="clear"
164+
onClick={clear}
165+
>
166+
Clear
167+
</button>
168+
</div>
169+
<div class="col-sm-6 smallpad">
170+
<button
171+
type="button"
172+
class="btn btn-primary btn-block"
173+
id="swaprows"
174+
onClick={swapRows}
175+
>
176+
Swap Rows
177+
</button>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
<table class="table table-hover table-striped test-data">
184+
<component $name={TbodyComponent.name}>{TbodyComponent()}</component>
185+
</table>
186+
<span
187+
class="preloadicon glyphicon glyphicon-remove"
188+
aria-hidden="true"
189+
></span>
190+
</fragment>
191+
);
192+
}
193+
194+
createApp(() => MainBody()).mount("#main");

‎frameworks/keyed/strve/webpack.config.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const path = require("path");
2+
const TerserPlugin = require("terser-webpack-plugin");
3+
4+
module.exports = {
5+
mode: "production",
6+
entry: {
7+
main: path.join(__dirname, "src", "main.jsx"),
8+
},
9+
output: {
10+
path: path.join(__dirname, "dist"),
11+
filename: "[name].js",
12+
},
13+
module: {
14+
rules: [
15+
{
16+
test: /\.jsx?$/,
17+
exclude: /node_modules/,
18+
use: [
19+
{
20+
loader: "babel-loader",
21+
options: {
22+
plugins: ["babel-plugin-jsx-to-strve", "babel-plugin-strve"],
23+
},
24+
},
25+
],
26+
},
27+
],
28+
},
29+
optimization: {
30+
minimize: true,
31+
minimizer: [new TerserPlugin()],
32+
},
33+
};

0 commit comments

Comments
 (0)