Skip to content

Commit dccfc3d

Browse files
AimWhyAimWhy
committed
feat: Version 1.0.14(diff optimize) and Add non-keyed
1 parent ec2b9ed commit dccfc3d

File tree

7 files changed

+229
-11
lines changed

7 files changed

+229
-11
lines changed

‎frameworks/keyed/frei-hooks/package-lock.json

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

‎frameworks/keyed/frei-hooks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
"webpack-cli": "5.0.1"
3535
},
3636
"dependencies": {
37-
"@aimwhy/frei": "^1.0.13"
37+
"@aimwhy/frei": "^1.0.14"
3838
}
3939
}

‎frameworks/keyed/frei-hooks/src/main.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@ const listReducer = (state, action) => {
5959
}
6060
return { data: newdata, selected };
6161
case 'REMOVE': {
62-
const idx = data.findIndex((d) => d.id === action.id);
63-
64-
return { data: [...data.slice(0, idx), ...data.slice(idx + 1)], selected };
62+
return { data: data.filter((item) => item.id !== action.id), selected };
6563
}
6664
case 'SELECT':
6765
return { data, selected: action.id };

‎frameworks/non-keyed/frei-hooks/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>React Hooks</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/non-keyed/frei-hooks/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "js-framework-benchmark-frei-hooks",
3+
"version": "1.2.0",
4+
"description": "Frei Hooks demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "@aimwhy/frei",
8+
"frameworkHomeURL": "https://github.com/aimwhy/frei"
9+
},
10+
"scripts": {
11+
"dev": "webpack --watch",
12+
"build-prod": "webpack"
13+
},
14+
"keywords": [
15+
"@aimwhy/frei",
16+
"hooks",
17+
"react",
18+
"webpack"
19+
],
20+
"author": "Stefan Krause",
21+
"license": "Apache-2.0",
22+
"homepage": "https://github.com/krausest/js-framework-benchmark",
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/krausest/js-framework-benchmark.git"
26+
},
27+
"devDependencies": {
28+
"@babel/core": "7.21.0",
29+
"@babel/preset-env": "7.20.2",
30+
"@babel/preset-react": "7.18.6",
31+
"babel-loader": "9.1.2",
32+
"terser-webpack-plugin": "5.3.7",
33+
"webpack": "5.76.1",
34+
"webpack-cli": "5.0.1"
35+
},
36+
"dependencies": {
37+
"@aimwhy/frei": "^1.0.14"
38+
}
39+
}

‎frameworks/non-keyed/frei-hooks/src/main.jsx

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { createRoot, useReducer } from '@aimwhy/frei';
2+
3+
const random = (max) => Math.round(Math.random() * 1000) % max;
4+
5+
const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
6+
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
7+
"cheap", "expensive", "fancy"];
8+
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
9+
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
10+
"keyboard"];
11+
12+
let nextId = 1;
13+
14+
const buildData = (count) => {
15+
const data = new Array(count);
16+
17+
for (let i = 0; i < count; i++) {
18+
data[i] = {
19+
id: nextId++,
20+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
21+
};
22+
}
23+
24+
return data;
25+
};
26+
27+
const initialState = { data: [], selected: 0 };
28+
29+
const listReducer = (state, action) => {
30+
const { data, selected } = state;
31+
32+
switch (action.type) {
33+
case 'RUN':
34+
return { data: buildData(1000), selected: 0 };
35+
case 'RUN_LOTS':
36+
return { data: buildData(10000), selected: 0 };
37+
case 'ADD':
38+
return { data: data.concat(buildData(1000)), selected };
39+
case 'UPDATE': {
40+
const newData = data.slice(0);
41+
42+
for (let i = 0; i < newData.length; i += 10) {
43+
const r = newData[i];
44+
45+
newData[i] = { id: r.id, label: r.label + " !!!" };
46+
}
47+
48+
return { data: newData, selected };
49+
}
50+
case 'CLEAR':
51+
return { data: [], selected: 0 };
52+
case 'SWAP_ROWS':
53+
const newdata = [...data];
54+
if (data.length > 998) {
55+
const d1 = newdata[1];
56+
const d998 = newdata[998];
57+
newdata[1] = d998;
58+
newdata[998] = d1;
59+
}
60+
return { data: newdata, selected };
61+
case 'REMOVE': {
62+
return { data: data.filter((item) => item.id !== action.id), selected };
63+
}
64+
case 'SELECT':
65+
return { data, selected: action.id };
66+
default:
67+
return state;
68+
}
69+
};
70+
71+
const Row = ({ selected, item, dispatch }) => (
72+
<tr className={selected ? "danger" : ""}>
73+
<td className="col-md-1">{item.id}</td>
74+
<td className="col-md-4">
75+
<a onClick={() => dispatch({ type: 'SELECT', id: item.id })}>{item.label}</a>
76+
</td>
77+
<td className="col-md-1">
78+
<a onClick={() => dispatch({ type: 'REMOVE', id: item.id })}>
79+
<span className="glyphicon glyphicon-remove" aria-hidden="true" />
80+
</a>
81+
</td>
82+
<td className="col-md-6" />
83+
</tr>
84+
);
85+
86+
const Button = ({ id, cb, title }) => (
87+
<div className="col-sm-6 smallpad">
88+
<button type="button" className="btn btn-primary btn-block" id={id} onClick={cb}>{title}</button>
89+
</div>
90+
);
91+
92+
const Jumbotron = ({ dispatch }) => (
93+
<div className="jumbotron">
94+
<div className="row">
95+
<div className="col-md-6">
96+
<h1>React Hooks keyed</h1>
97+
</div>
98+
<div className="col-md-6">
99+
<div className="row">
100+
<Button id="run" title="Create 1,000 rows" cb={() => dispatch({ type: 'RUN' })} />
101+
<Button id="runlots" title="Create 10,000 rows" cb={() => dispatch({ type: 'RUN_LOTS' })} />
102+
<Button id="add" title="Append 1,000 rows" cb={() => dispatch({ type: 'ADD' })} />
103+
<Button id="update" title="Update every 10th row" cb={() => dispatch({ type: 'UPDATE' })} />
104+
<Button id="clear" title="Clear" cb={() => dispatch({ type: 'CLEAR' })} />
105+
<Button id="swaprows" title="Swap Rows" cb={() => dispatch({ type: 'SWAP_ROWS' })} />
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
);
111+
112+
const Main = () => {
113+
const [{ data, selected }, dispatch] = useReducer(listReducer, initialState);
114+
115+
return (<div className="container">
116+
<Jumbotron dispatch={dispatch} />
117+
<table className="table table-hover table-striped test-data">
118+
<tbody>
119+
{data.map(item => (
120+
<Row key={item.id} item={item} selected={selected === item.id} dispatch={dispatch} />
121+
))}
122+
</tbody>
123+
</table>
124+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
125+
</div>);
126+
}
127+
128+
createRoot(document.getElementById("main")).render(<Main/>);

‎frameworks/non-keyed/frei-hooks/webpack.config.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const TerserPlugin = require('terser-webpack-plugin');
4+
5+
module.exports = {
6+
mode: 'production',
7+
// mode: 'development',
8+
entry: {
9+
main: path.join(__dirname, 'src', 'main.jsx'),
10+
},
11+
output: {
12+
path: path.join(__dirname, 'dist'),
13+
filename: '[name].js'
14+
},
15+
resolve: {
16+
extensions: ['.js', '.jsx']
17+
},
18+
module: {
19+
rules: [{
20+
test: /\.jsx?$/,
21+
exclude: /node_modules/,
22+
use: [
23+
{
24+
loader: 'babel-loader',
25+
options: {
26+
presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic', importSource: '@aimwhy/frei' }]],
27+
}
28+
}
29+
]
30+
}]
31+
},
32+
optimization: {
33+
minimize: true,
34+
minimizer: [new TerserPlugin()],
35+
},
36+
plugins: [
37+
new webpack.DefinePlugin({
38+
'process.env': { NODE_ENV: JSON.stringify('production') }
39+
}),
40+
],
41+
};

0 commit comments

Comments
 (0)