Skip to content

Commit 26d4b40

Browse files
krausestkrausest
committed
Merge branch 'twharmon-rendrjs'
2 parents 174e458 + f29179c commit 26d4b40

File tree

10 files changed

+1608
-0
lines changed

10 files changed

+1608
-0
lines changed

‎frameworks/keyed/rendrjs/.gitignore

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

‎frameworks/keyed/rendrjs/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
<title>Rendrjs</title>
9+
<script type="module" crossorigin src="dist/main.js"></script>
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
15+
</body>
16+
17+
</html>

‎frameworks/keyed/rendrjs/package-lock.json

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

‎frameworks/keyed/rendrjs/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "js-framework-benchmark-rendrjs",
3+
"version": "0.0.1",
4+
"scripts": {
5+
"build-dev": "webpack --mode development --watch",
6+
"build-prod": "webpack --mode production"
7+
},
8+
"devDependencies": {
9+
"webpack": "5.88.1",
10+
"webpack-cli": "5.1.4"
11+
},
12+
"dependencies": {
13+
"@rendrjs/core": "0.1.190"
14+
},
15+
"js-framework-benchmark": {
16+
"frameworkVersionFromPackage": "@rendrjs/core",
17+
"frameworkHomeURL": "https://rendrjs.com"
18+
}
19+
}

‎frameworks/keyed/rendrjs/src/App.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { rendr, useCallback, useState } from '@rendrjs/core';
2+
import Jumbotron from './Jumbotron';
3+
import Row from './Row';
4+
5+
6+
const random = (max) => Math.round(Math.random() * 1000) % max;
7+
8+
const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome',
9+
'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy',
10+
'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive',
11+
'fancy'];
12+
const C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown',
13+
'white', 'black', 'orange'];
14+
const N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie',
15+
'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
16+
17+
let nextId = 1;
18+
19+
const buildData = (count) => {
20+
const data = new Array(count);
21+
22+
for (let i = 0; i < count; i++) {
23+
data[i] = {
24+
id: nextId++,
25+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
26+
};
27+
}
28+
29+
return data;
30+
};
31+
32+
const preloadIcon = rendr('span', {
33+
className: 'preloadicon glyphicon glyphicon-remove',
34+
'aria-hidden': true,
35+
});
36+
37+
const App = () => {
38+
const [state, setState] = useState({ data: [], selected: 0 });
39+
40+
const onRun = useCallback(() => setState({ data: buildData(1000), selected: 0 }), []);
41+
const onRunlots = useCallback(() => setState({ data: buildData(10000), selected: 0 }), []);
42+
const onClear = useCallback(() => setState({ data: [], selected: 0 }), []);
43+
const onUpdate = useCallback(() => setState(old => {
44+
const newData = old.data.slice(0);
45+
for (let i = 0; i < newData.length; i += 10) {
46+
const r = newData[i];
47+
newData[i] = { id: r.id, label: r.label + ' !!!' };
48+
}
49+
return { data: newData, selected: old.selected };
50+
}), []);
51+
const onSwap = useCallback(() => setState(old => {
52+
if (old.data.length > 988) {
53+
return {
54+
data: [old.data[0], old.data[998], ...old.data.slice(2, 998), old.data[1], old.data[999]],
55+
selected: old.selected,
56+
};
57+
}
58+
return { data: old.data, selected: 0 };
59+
}), []);
60+
const onAppend = useCallback(() => setState(old => {
61+
return { data: old.data.concat(buildData(1000)), selected: old.selected };
62+
}), []);
63+
const onDelete = useCallback((id) => {
64+
setState(old => {
65+
const idx = old.data.findIndex((d) => d.id === id);
66+
return { data: [...old.data.slice(0, idx), ...old.data.slice(idx + 1)], selected: old.selected };
67+
});
68+
}, []);
69+
const onSelect = useCallback((id) => {
70+
setState(old => ({ ...old, selected: id }));
71+
}, []);
72+
73+
return rendr('div', {
74+
className: 'container',
75+
slot: [
76+
rendr(Jumbotron, {
77+
onRun,
78+
onRunlots,
79+
onClear,
80+
onUpdate,
81+
onSwap,
82+
onAppend,
83+
memo: [],
84+
}),
85+
rendr('table', {
86+
className: 'table table-hover table-striped test-data',
87+
slot: rendr('tbody', {
88+
slot: state.data.map(item => rendr(Row, {
89+
key: `${item.id}`,
90+
item: item,
91+
selected: state.selected === item.id,
92+
onSelect,
93+
onDelete,
94+
memo: [item.label, item.id === state.selected],
95+
})),
96+
}),
97+
}),
98+
preloadIcon,
99+
],
100+
});
101+
};
102+
103+
export default App;

‎frameworks/keyed/rendrjs/src/Button.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { rendr } from '@rendrjs/core';
2+
3+
const Button = (props) => {
4+
return rendr('div', {
5+
className: 'col-sm-6 smallpad',
6+
slot: rendr('button', {
7+
id: props.id,
8+
onclick: props.cb,
9+
type: 'button',
10+
className: 'btn btn-primary btn-block',
11+
slot: props.title,
12+
}),
13+
});
14+
};
15+
16+
export default Button;

‎frameworks/keyed/rendrjs/src/Jumbotron.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { rendr } from '@rendrjs/core';
2+
import Button from './Button';
3+
4+
const Jumbotron = (props) => {
5+
return rendr('div', {
6+
className: 'jumbotron',
7+
slot: rendr('div', {
8+
className: 'row',
9+
slot: [
10+
rendr('div', {
11+
className: 'col-md-6',
12+
slot: rendr('h1', { slot: 'Rendrjs keyed' }),
13+
}),
14+
rendr('div', {
15+
className: 'col-md-6',
16+
slot: rendr('div', {
17+
className: 'row',
18+
slot: [
19+
rendr(Button, { id: 'run', title: 'Create 1,000 rows', cb: props.onRun }),
20+
rendr(Button, { id: 'runlots', title: 'Create 10,000 rows', cb: props.onRunlots }),
21+
rendr(Button, { id: 'add', title: 'Append 1,000 rows', cb: props.onAppend }),
22+
rendr(Button, { id: 'update', title: 'Update every 10th row', cb: props.onUpdate }),
23+
rendr(Button, { id: 'clear', title: 'Clear', cb: props.onClear }),
24+
rendr(Button, { id: 'swaprows', title: 'Swap rows', cb: props.onSwap }),
25+
],
26+
}),
27+
}),
28+
],
29+
}),
30+
});
31+
};
32+
33+
export default Jumbotron;

‎frameworks/keyed/rendrjs/src/Row.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { rendr } from '@rendrjs/core';
2+
3+
const Row = (props) => {
4+
return rendr('tr', {
5+
className: props.selected ? 'danger' : undefined,
6+
slot: [
7+
rendr('td', {
8+
className: 'col-md-1',
9+
slot: `${props.item.id}`,
10+
}),
11+
rendr('td', {
12+
className: 'col-md-4',
13+
slot: rendr('a', {
14+
onclick: () => props.onSelect(props.item.id),
15+
slot: props.item.label,
16+
}),
17+
}),
18+
rendr('td', {
19+
className: 'col-md-1',
20+
slot: rendr('a', {
21+
onclick: () => props.onDelete(props.item.id),
22+
slot: rendr('span', {
23+
className: 'glyphicon glyphicon-remove',
24+
'aria-hidden': true,
25+
}),
26+
}),
27+
}),
28+
rendr('td', {
29+
className: 'col-md-6',
30+
}),
31+
],
32+
});
33+
};
34+
35+
export default Row;

‎frameworks/keyed/rendrjs/src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { mount, rendr } from '@rendrjs/core';
2+
import App from './App';
3+
4+
mount(document.querySelector('#root'), rendr(App));

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const path = require('path');
2+
3+
module.exports = (env = {}) => ({
4+
mode: 'production',
5+
entry: path.resolve(__dirname, './src/main.js'),
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
},
10+
});

0 commit comments

Comments
 (0)