Skip to content

Commit 96e447e

Browse files
twharmontwharmon
committed
Update rendrjs version
1 parent 4c39fcc commit 96e447e

File tree

11 files changed

+73
-108
lines changed

11 files changed

+73
-108
lines changed

‎frameworks/keyed/rendrjs-atoms/index.html

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

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"webpack-cli": "5.1.4"
1111
},
1212
"dependencies": {
13-
"@rendrjs/core": "0.1.237"
13+
"@rendrjs/core": "0.1.247"
1414
},
1515
"js-framework-benchmark": {
1616
"frameworkVersionFromPackage": "@rendrjs/core",

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import { div, rendr } from '@rendrjs/core';
1+
import { div } from '@rendrjs/core';
22
import { Jumbotron } from './Jumbotron';
33
import { makeIcon } from './RemoveIcon';
44
import { Table } from './Table';
55

6-
export let preloadIcon = makeIcon(true);
7-
8-
export let App = () => {
9-
return div({
10-
class: 'container',
11-
slot: [
12-
rendr(Jumbotron),
13-
rendr(Table),
14-
preloadIcon,
15-
],
16-
});
17-
};
6+
export let App = () => div({
7+
class: 'container',
8+
slot: [Jumbotron, Table, makeIcon(true)],
9+
});

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

Lines changed: 0 additions & 14 deletions
This file was deleted.

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

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import { div, h1, rendr, useAtomSetter } from '@rendrjs/core';
2-
import { Button } from './Button';
1+
import { div, h1, useAtomSetter, button } from '@rendrjs/core';
32
import { dataAtom, selectedAtom } from './store';
43

5-
let header = div({
6-
class: 'col-md-6',
7-
slot: h1({ slot: 'Rendrjs atoms keyed' }),
8-
});
9-
10-
11-
let random = (max) => Math.round(Math.random() * 1000) % max;
4+
let random = arr => arr[Math.round(Math.random() * 1000) % arr.length];
125

136
let A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome',
147
'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy',
@@ -21,72 +14,76 @@ let N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie',
2114

2215
let nextId = 1;
2316

24-
let buildData = (count) => {
17+
let buildData = (count = 1000) => {
2518
let data = new Array(count);
26-
2719
for (let i = 0; i < count; i++) {
2820
data[i] = {
2921
id: nextId++,
30-
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
22+
label: `${random(A)} ${random(C)} ${random(N)}`,
3123
};
3224
}
33-
3425
return data;
3526
};
3627

28+
let btn = (id, slot, onclick) => div({
29+
class: 'col-sm-6 smallpad',
30+
slot: button({
31+
id,
32+
onclick,
33+
type: 'button',
34+
class: 'btn btn-primary btn-block',
35+
slot,
36+
}),
37+
})
3738

3839
export let Jumbotron = () => {
3940
let setData = useAtomSetter(dataAtom);
4041
let setSelected = useAtomSetter(selectedAtom);
4142

42-
let run = () => {
43-
setData(buildData(1000));
44-
setSelected(0);
45-
};
46-
let lots = () => {
47-
setData(buildData(10000));
48-
setSelected(0);
49-
};
50-
let clear = () => {
51-
setData([]);
52-
setSelected(0);
53-
};
54-
let update = () => setData(old => {
55-
for (let i = 0; i < old.length; i += 10) {
56-
old[i].label += ' !!!';
57-
}
58-
return [ ...old ];
59-
});
60-
let swap = () => {
61-
setData(old => {
62-
if (old.length > 998) {
63-
let one = old[1];
64-
old[1] = old[998];
65-
old[998] = one;
66-
}
67-
return [ ...old ];
68-
});
69-
setSelected(0);
70-
};
71-
let push = () => setData(old => (old.concat(buildData(1000))));
72-
7343
return div({
7444
class: 'jumbotron',
7545
slot: div({
7646
class: 'row',
7747
slot: [
78-
header,
48+
div({
49+
class: 'col-md-6',
50+
slot: h1('Rendrjs atoms'),
51+
}),
7952
div({
8053
class: 'col-md-6',
8154
slot: div({
8255
class: 'row',
8356
slot: [
84-
rendr(Button, { id: 'run', text: 'Create 1,000 rows', cb: run }),
85-
rendr(Button, { id: 'runlots', text: 'Create 10,000 rows', cb: lots }),
86-
rendr(Button, { id: 'add', text: 'Append 1,000 rows', cb: push }),
87-
rendr(Button, { id: 'update', text: 'Update every 10th row', cb: update }),
88-
rendr(Button, { id: 'clear', text: 'Clear', cb: clear }),
89-
rendr(Button, { id: 'swaprows', text: 'Swap rows', cb: swap }),
57+
btn('run', 'Create 1,000 rows', () => {
58+
setData(buildData());
59+
setSelected(0);
60+
}),
61+
btn('runlots', 'Create 10,000 rows', () => {
62+
setData(buildData(10000));
63+
setSelected(0);
64+
}),
65+
btn('add', 'Append 1,000 rows', () => setData(old => old.concat(buildData()))),
66+
btn('update', 'Update every 10th row', () => setData(old => {
67+
for (let i = 0; i < old.length; i += 10) {
68+
old[i].label += ' !!!';
69+
}
70+
return [ ...old ];
71+
})),
72+
btn('clear', 'Clear', () => {
73+
setData([]);
74+
setSelected(0);
75+
}),
76+
btn('swaprows', 'Swap rows', () => {
77+
setData(old => {
78+
let two = old[998];
79+
if (two) {
80+
old[998] = old[1];
81+
old[1] = two;
82+
}
83+
return [ ...old ];
84+
});
85+
setSelected(0);
86+
}),
9087
],
9188
}),
9289
}),

‎frameworks/keyed/rendrjs-atoms/src/RemoveIcon.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { span } from '@rendrjs/core';
22

33
export let makeIcon = preload => span({
4-
class: `${preload ? 'preloadicon ' : ''}glyphicon glyphicon-remove`,
4+
class: preload ? 'preloadicon ' : '' + 'glyphicon glyphicon-remove',
55
ariaHidden: true,
66
});

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,29 @@ import { dataAtom, selectedAtom } from './store';
55
let icon = makeIcon();
66
let emptyTd = td({ class: 'col-md-6' });
77

8-
export let Row = ({ item }) => {
8+
export let Row = ({ item: { id, label } }) => {
99
let setData = useAtomSetter(dataAtom);
1010
let setSelected = useAtomSetter(selectedAtom);
11-
let selected = useAtomSelector(selectedAtom, s => s === item.id);
12-
13-
let del = (id) => setData(old => {
14-
old.splice(old.findIndex((d) => d.id === id), 1);
15-
return [ ...old ];
16-
});
11+
let selected = useAtomSelector(selectedAtom, s => s === id);
1712

1813
return tr({
1914
class: selected ? 'danger' : undefined,
2015
slot: [
21-
td({ class: 'col-md-1', slot: `${item.id}` }),
16+
td({ class: 'col-md-1', slot: `${id}` }),
2217
td({
2318
class: 'col-md-4',
2419
slot: a({
25-
onclick: () => setSelected(item.id),
26-
slot: item.label,
20+
onclick: () => setSelected(id),
21+
slot: label,
2722
}),
2823
}),
2924
td({
3025
class: 'col-md-1',
3126
slot: a({
32-
onclick: () => del(item.id),
27+
onclick: () => setData(old => {
28+
old.splice(old.findIndex(d => d.id === id), 1);
29+
return [ ...old ];
30+
}),
3331
slot: icon,
3432
}),
3533
}),

‎frameworks/keyed/rendrjs-atoms/src/Table.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ export let Table = () => {
1111
slot: data.map(item => rendr(Row, { key: item.id, item, memo: [item.label] })),
1212
}),
1313
});
14-
};
14+
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mount, rendr } from '@rendrjs/core';
1+
import { mount } from '@rendrjs/core';
22
import { App } from './App';
33

4-
mount(document.querySelector('#root'), rendr(App));
4+
mount(document.body, App);

0 commit comments

Comments
 (0)