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
121
122
123
124
125
126
|
import Delegator from 'dom-delegator';
import R from 'ramda';
import bean from 'bean';
import vh from 'virtual-dom/h';
import diff from 'virtual-dom/diff';
import patch from 'virtual-dom/patch';
import createElement from 'virtual-dom/create-element';
import * as l from 'hatter/lenses';
const delegator = Delegator();
const vhTypes = ['VirtualNode', 'Widget'];
function vhFromArray(node) {
if (!node)
return [];
if (typeof node == 'string' || vhTypes.includes(node.type))
return node;
if (!Array.isArray(node))
throw 'Invalid node structure';
if (node.length < 1)
return [];
if (typeof node[0] != 'string')
return node.map(vhFromArray);
let hasProps = (node.length > 1 &&
typeof node[1] == 'object' &&
!Array.isArray(node[1]) &&
!vhTypes.includes(node[1].type));
let children = R.flatten(node.slice(hasProps ? 2 : 1).map(vhFromArray));
let result = hasProps ? vh(node[0], node[1], children) :
vh(node[0], children);
// disable SoftSetHook for input
if (result.tagName == 'INPUT' &&
result.properties &&
result.properties.value &&
typeof(result.properties.value) === 'object') {
result.properties.value = result.properties.value.value;
}
return result;
}
class VTreeRenderer {
constructor(el) {
this._el = el;
this._vtree = null;
}
render(vtree) {
let vt = vhFromArray(vtree);
if (vt.type == 'VirtualNode') {
if (this._vtree) {
let d = diff(this._vtree, vt);
patch(this._el.firstChild, d);
} else {
while (this._el.firstChild)
this._el.removeChild(this._el.firstChild);
this._el.appendChild(createElement(vt));
}
this._vtree = vt;
} else {
this._vtree = null;
while (this._el.firstChild)
this._el.removeChild(this._el.firstChild);
}
}
}
export class Renderer {
constructor(el, initState, vtCb) {
this.init(el, initState, vtCb);
}
init(el, initState, vtCb) {
this._state = null;
this._changeCbs = [];
this._vtCb = vtCb;
this._r = new VTreeRenderer(el || document.querySelector('body'));
if (initState)
this.change(R.identity, _ => initState);
}
view(...lenses) {
return R.view(R.apply(l.path, lenses), this._state);
}
set(lens, value) {
if (arguments.length < 2) {
value = lens;
lens = R.identity;
}
this.change(lens, _ => value);
}
change(lens, cb) {
if (arguments.length < 2) {
cb = lens;
lens = R.identity;
}
if (this._changeCbs.push(cb) > 1)
return;
let startingSubState = this.view(lens);
while (this._changeCbs.length > 0) {
this._state = R.over(l.path(lens), this._changeCbs[0], this._state);
this._changeCbs.shift();
}
if (!this._vtCb ||
(this._state && R.equals(startingSubState, this.view(lens))))
return;
this._r.render(this._vtCb(this._state));
bean.fire(this, 'render', this._state);
}
}
const defaultRenderer = new Renderer();
export default defaultRenderer;
|
