Skip to content

Commit 5aebca4

Browse files
nihil-pronihil-pro
nihil-pro
authored and
nihil-pro
committed
added preact+kr-observable and update react+kr-observable
1 parent 15eee88 commit 5aebca4

File tree

14 files changed

+394
-52
lines changed

14 files changed

+394
-52
lines changed

‎frameworks/keyed/preact-kr-observable/index.html

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

‎frameworks/keyed/preact-kr-observable/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-preact-kr-observable",
3+
"version": "1.1.1",
4+
"description": "React demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "preact:kr-observable",
8+
"frameworkHomeURL": "https://www.npmjs.com/package/kr-observable"
9+
},
10+
"scripts": {
11+
"dev": "rollup -c -w",
12+
"build-prod": "rollup -c --environment production"
13+
},
14+
"author": "Maxim Molochkov",
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+
"kr-observable": "1.0.30",
23+
"preact": "^10.25.0",
24+
"react": "18.2.0",
25+
"react-dom": "18.2.0"
26+
},
27+
"devDependencies": {
28+
"@rollup/plugin-alias": "^5.1.1",
29+
"@babel/core": "7.21.8",
30+
"@babel/preset-env": "7.21.5",
31+
"@babel/preset-react": "7.18.6",
32+
"@rollup/plugin-babel": "6.0.3",
33+
"@rollup/plugin-commonjs": "25.0.0",
34+
"@rollup/plugin-node-resolve": "15.0.2",
35+
"@rollup/plugin-replace": "5.0.2",
36+
"@rollup/plugin-terser": "0.4.3",
37+
"rollup": "3.22.0"
38+
}
39+
}

‎frameworks/keyed/preact-kr-observable/rollup.config.mjs

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { defineConfig } from 'rollup';
2+
import commonjs from '@rollup/plugin-commonjs';
3+
import { nodeResolve } from '@rollup/plugin-node-resolve';
4+
import replace from '@rollup/plugin-replace';
5+
import babel from '@rollup/plugin-babel';
6+
import terser from '@rollup/plugin-terser';
7+
import alias from '@rollup/plugin-alias';
8+
9+
const plugins = [
10+
commonjs(),
11+
replace({
12+
'process.env.NODE_ENV': JSON.stringify('production'),
13+
}),
14+
babel({
15+
exclude: 'node_modules/**',
16+
babelHelpers: 'bundled',
17+
presets: [
18+
// '@babel/preset-env',
19+
['@babel/preset-react', { runtime: 'automatic' }],
20+
],
21+
}),
22+
alias({
23+
entries:[
24+
{ find: 'react', replacement: 'preact/compat' },
25+
{ find: 'react-dom', replacement: 'preact/compat' },
26+
{ find: 'react/jsx-runtime', replacement: 'preact/compat' }
27+
]
28+
}),
29+
nodeResolve({ extensions: ['.js', '.jsx'] }),
30+
];
31+
32+
if (process.env.production) {
33+
plugins.push(terser());
34+
}
35+
36+
export default defineConfig({
37+
input: 'src/Main.jsx',
38+
output: {
39+
file: 'dist/main.js',
40+
format: 'commonjs',
41+
},
42+
plugins,
43+
});

‎frameworks/keyed/preact-kr-observable/src/Main.jsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { createRoot } from 'react-dom/client';
2+
import { observer } from 'kr-observable';
3+
import { Row } from './Row';
4+
import { rowsStore } from './RowsStore';
5+
import { Fragment } from "react";
6+
7+
const Button = ({ children, id, onClick }) => {
8+
return (
9+
<div className="col-sm-6 smallpad">
10+
<button
11+
type="button"
12+
className="btn btn-primary btn-block"
13+
id={id}
14+
onClick={onClick}
15+
>
16+
{children}
17+
</button>
18+
</div>
19+
);
20+
};
21+
22+
const RowList = observer(function list() {
23+
return (
24+
<Fragment>
25+
{rowsStore.rows.map(row => (
26+
<Row
27+
key={row.id}
28+
data={row}
29+
/>
30+
)
31+
)}
32+
</Fragment>
33+
)
34+
})
35+
36+
37+
function Main() {
38+
return (
39+
<div className="container">
40+
<div className="jumbotron">
41+
<div className="row">
42+
<div className="col-md-6">
43+
<h1>React + kr-observable</h1>
44+
</div>
45+
46+
<div className="col-md-6">
47+
<div className="row">
48+
<Button id="run" onClick={rowsStore.run}>
49+
Create 1,000 rows
50+
</Button>
51+
52+
<Button id="runlots" onClick={rowsStore.runLots}>
53+
Create 10,000 rows
54+
</Button>
55+
56+
<Button id="add" onClick={rowsStore.add}>
57+
Append 1,000 rows
58+
</Button>
59+
60+
<Button id="update" onClick={rowsStore.update}>
61+
Update every 10th row
62+
</Button>
63+
64+
<Button id="clear" onClick={rowsStore.clear}>
65+
Clear
66+
</Button>
67+
68+
<Button id="swaprows" onClick={rowsStore.swapRows}>
69+
Swap Rows
70+
</Button>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<table className="table table-hover table-striped test-data">
77+
<tbody>
78+
<RowList />
79+
</tbody>
80+
</table>
81+
82+
<span
83+
className="preloadicon glyphicon glyphicon-remove"
84+
aria-hidden="true"
85+
/>
86+
</div>
87+
);
88+
}
89+
90+
91+
createRoot(document.getElementById('main')).render(<Main />);

‎frameworks/keyed/preact-kr-observable/src/Row.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { observer } from 'kr-observable';
2+
import { rowsStore } from "./RowsStore";
3+
4+
export const Row = observer(function row({ data }) {
5+
return (
6+
<tr className={data.selected ? 'danger' : ''}>
7+
<td className="col-md-1">{data.id}</td>
8+
<td className="col-md-4">
9+
<a onClick={() => rowsStore.select(data.id)}>{data.label}</a>
10+
</td>
11+
<td className="col-md-1">
12+
<a onClick={() => rowsStore.delete(data.id)}>
13+
<span
14+
className="glyphicon glyphicon-remove"
15+
aria-hidden="true"
16+
></span>
17+
</a>
18+
</td>
19+
<td className="col-md-6"></td>
20+
</tr>
21+
);
22+
});

‎frameworks/keyed/preact-kr-observable/src/RowStore.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Observable } from 'kr-observable';
2+
3+
export class RowStore extends Observable {
4+
static ignore = ['id']
5+
id;
6+
label;
7+
selected = false
8+
constructor(id, label) {
9+
super();
10+
this.id = id
11+
this.label = label
12+
}
13+
}

‎frameworks/keyed/preact-kr-observable/src/RowsStore.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Observable } from 'kr-observable';
2+
import { buildData } from './data';
3+
4+
export class RowsStore extends Observable {
5+
rows = [];
6+
7+
delete(rowIdToDelete) {
8+
const rowIndexToDelete = this.rows.findIndex((row) => row.id === rowIdToDelete);
9+
this.rows.splice(rowIndexToDelete, 1);
10+
};
11+
12+
run() {
13+
this.rows = buildData(1000);
14+
};
15+
16+
add() {
17+
this.rows = this.rows.concat(buildData(1000))
18+
};
19+
20+
update() {
21+
for (let i = 0; i < this.rows.length; i += 10) {
22+
this.rows[i].label += ' !!!';
23+
}
24+
};
25+
26+
select(rowId) {
27+
this.rows.forEach(row => row.selected = row.id === rowId)
28+
};
29+
30+
runLots() {
31+
this.rows = buildData(10000);
32+
};
33+
34+
clear() {
35+
this.rows = [];
36+
};
37+
38+
swapRows() {
39+
const data = this.rows
40+
if (data.length > 998) {
41+
const item = data[1];
42+
data.set(1, data[998]);
43+
data.set(998, item)
44+
}
45+
};
46+
}
47+
48+
export const rowsStore = new RowsStore()

‎frameworks/keyed/preact-kr-observable/src/data.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { makeObservable } from "kr-observable";
2+
3+
const adjectives = [
4+
'pretty',
5+
'large',
6+
'big',
7+
'small',
8+
'tall',
9+
'short',
10+
'long',
11+
'handsome',
12+
'plain',
13+
'quaint',
14+
'clean',
15+
'elegant',
16+
'easy',
17+
'angry',
18+
'crazy',
19+
'helpful',
20+
'mushy',
21+
'odd',
22+
'unsightly',
23+
'adorable',
24+
'important',
25+
'inexpensive',
26+
'cheap',
27+
'expensive',
28+
'fancy',
29+
];
30+
31+
const colours = [
32+
'red',
33+
'yellow',
34+
'blue',
35+
'green',
36+
'pink',
37+
'brown',
38+
'purple',
39+
'brown',
40+
'white',
41+
'black',
42+
'orange',
43+
];
44+
45+
const 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+
let id = 1;
62+
63+
const random = (max) => Math.round(Math.random() * 1000) % max;
64+
65+
export const buildData = (count) => {
66+
const data = [];
67+
for (let i = 0; i < count; i++) {
68+
const d = {
69+
id: id++,
70+
label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`,
71+
selected: false
72+
}
73+
74+
data.push(makeObservable(d, ['id']))
75+
}
76+
return data;
77+
};

‎frameworks/keyed/react-kr-observable/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
"dev": "rollup -c -w",
1212
"build-prod": "rollup -c --environment production"
1313
},
14-
"author": "Maxim Molochkov",
14+
"author": "Roman Konstantin",
1515
"license": "Apache-2.0",
1616
"homepage": "https://github.com/krausest/js-framework-benchmark",
1717
"repository": {
1818
"type": "git",
1919
"url": "https://github.com/krausest/js-framework-benchmark.git"
2020
},
2121
"dependencies": {
22-
"kr-observable": "1.0.12",
22+
"kr-observable": "1.0.30",
2323
"react": "18.2.0",
2424
"react-dom": "18.2.0"
2525
},

0 commit comments

Comments
 (0)