-
Notifications
You must be signed in to change notification settings - Fork 0
/
reagent.js.html
120 lines (112 loc) · 5.14 KB
/
reagent.js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8"/>
<title>mreframe reagent example (Mithril+Reagent components with initialization logic)</title>
<script src="../dist/mreframe.js"></script>
</head><body>
<script>
/* Console output logs init/render events, and demonstrates automatic redraw detection */
const [{reagent: r, atom: {atom, deref, swap}}, m] = ['mreframe', 'mithril/hyperscript'].map(require);
// Mithril component using 'this'
let Component = {
oninit ({attrs: {add}}) {this.answer = 1; console.log({add}, 'Component')},
view ({children, attrs: {add}}) {
console.log('Component');
return m('span', this.answer+(add||0), " ", children);
},
};
// Mithril component using 'vnode.state'
let Component2 = {
oninit: ({state, attrs: {add}}) => {state.answer = 2; console.log({add}, 'Component2')},
view: ({state, children, attrs: {add}}) => (console.log('Component2'),
m('span', state.answer+(add||0), " ", children)),
};
// Mithril closure component
let ComponentF = ({attrs: {add}}) => {
let answer = 3;
console.log({add}, 'ComponentF');
return {view: ({children, attrs: {add}}) => (console.log('ComponentF'),
m('span', answer+(add||0), " ", children))};
};
let RComponentFNoredraw = (...children) => {
let answer = 4, add = Math.random();
console.log('RComponentFNoredraw');
return ['span', answer+add, " ", ['<>', ...children]];
};
// Reagent form-2 component
let RComponentF = add => {
let answer = 5;
console.log({add}, 'RComponentF');
return (add, ...children) => (console.log('RComponentF'),
['span', answer+(add||0), " ", ['<>', ...children]]);
};
// Reagent form-2 component with inner state and delayed update
let RComponentF2 = add => {
let self = r.currentComponent();
r.setState(self, {answer: 6}); // rerender
console.log({add}, 'RComponentF2');
setTimeout(() => r.setState(self, {answer: 21}), 10000); // rerender
return (add, ...children) => (console.log('RComponentF2'),
['span', r.state(self).answer+(add||0), " ", ['<>', ...children]]);
};
// Reagent form-3 component with delayed update
let RComponent = r.createClass({
constructor: vnode => {
console.log({add: r.argv(vnode)[1]}, 'RComponent');
setTimeout(() => r.setState(vnode, {answer: 42}), 5000); // rerender
},
getInitialState: () => ({answer: 7}),
reagentRender: (add, ...children) => (console.log('RComponent'),
['span', r.state( r.currentComponent() ).answer+(add||0), " ", ['<>', ...children]]),
});
{// Mithril app
Object.assign(m, {redraw: require('mithril/redraw'), mount: require('mithril/mount')});
let renders = 0, redraws = 0;
let App = {
view: () => [
m('h1', document.title),
"Plain text",
m('p', "Plain paragraph"),
m('p',
m('i', {title: "Hover me "+Math.random()}, "Nested"),
" ",
m('span', {style: {color: 'green'}}, "text")),
m('p', m(Component, {add: Math.random()}, "component"), " text"),
m('p', m(Component2, {add: Math.random()}, "component"), " text"),
m('p', m(ComponentF, {add: Math.random()}, "function"), " text"),
m('button', {onclick: () => redraws++}, "Redraw"),
" (renders: ", ++renders, ", redraws: ", redraws, ") ",
m('button', {onclick (e) {e.redraw = false}}, "No Redraw"),
m('button', {onclick (e) {e.redraw = false; setTimeout(() => {redraws++; m.redraw()}, 1000)}},
"Delayed Redraw"),
],
};
//m.mount(document.body, App);
}
{// Reagent app
let renders = atom(0), redraws = r.atom(0), inc = n => n + 1;
let App = () =>
['<>',
['h1', document.title],
"Plain text",
['p', "Plain paragraph"],
['p',
['i', {title: "Hover me " + Math.random()}, "Nested"],
" ",
['span', {style: {color: 'green'}}, "text"]],
['p', ['>', Component, {add: Math.random()}, "component"], " text"],
['p', ['>', Component2, {add: Math.random()}, "component"], " text"],
['p', ['>', ComponentF, {add: Math.random()}, "function"], " text"],
['p', [RComponentFNoredraw, "function"], " text (has no inputs, won't be redrawn)"],
['p', r.asElement([RComponentF, Math.random(), "component"]), " text"],
['p', [RComponentF, Math.random(), "function"], " text"],
['p', [RComponentF2, Math.random(), "function"], " text (causes rerender after 10 seconds)"],
['p', [RComponent, Math.random(), "component"], " text (causes rerender after 5 seconds)"],
['button', {onclick: () => swap(redraws, inc)}, "Redraw"],
" (renders: ", swap(renders, inc), ", redraws: ", deref(redraws), ") ",
['button', {onclick: () => {}}, "No Redraw"], " ",
['button', {onclick: () => setTimeout(() => swap(redraws, inc), 1000)}, "Delayed Redraw"]];
r.render([App], document.body);
}
</script>
</body></html>