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
|
import { h, t } from "./lustre/element.mjs";
import { fold, each } from "../gleam_stdlib/gleam/list.mjs";
const Element = h("").constructor;
const Text = t("").constructor;
export function morph(prev, curr) {
if (curr instanceof Element) {
if (prev?.nodeType === 1 && prev.nodeName !== curr[0].toUpperCase()) {
return morphElement(prev, curr);
} else {
const el = document.createElement(curr[0]);
each(curr[1], (attr) => {
const name = attr[0];
const value = attr[1];
morphAttr(el, name, value);
});
each(curr[2], (child) => {
el.appendChild(morph(null, child));
});
if (prev) prev.replaceWith(el);
return el;
}
}
if (curr instanceof Text) {
if (prev?.nodeType === 3) {
return morphText(prev, curr);
} else {
const el = document.createTextNode(curr[0]);
if (prev) prev.replaceWith(el);
return el;
}
}
return null;
}
function morphElement(prev, curr) {
const prevAttrs = prev.attributes;
const currAttrs = fold(curr[1], new Map(), (acc, attr) => {
const name = attr[0];
const value = attr[1];
acc.set(name, value);
return acc;
});
const currChildren = curr[2].toArray();
for (const { name, value: prevValue } of prevAttrs) {
if (!currAttrs.has(name)) prev.removeAttribute(name);
const value = currAttrs.get(name);
if (value !== prevValue) {
morphAttr(prev, name, value);
currAttrs.delete(name);
}
}
for (const [name, value] of currAttrs) {
morphAttr(prev, name, value);
}
for (let child = prev.firstChild; child; child = child.nextSibling) {
if (currChildren.length) {
morph(child, currChildren.shift());
} else {
prev.removeChild(child);
}
}
for (const child of currChildren) {
prev.appendChild(morph(null, child));
}
return prev;
}
function morphText(prev, curr) {
if (prev.nodeValue !== curr[0]) prev.nodeValue = curr[0];
return prev;
}
function morphAttr(el, name, value) {
switch (typeof value) {
case "string":
el.setAttribute(name, value);
break;
// Boolean attributes work a bit differently in HTML. Their presence always
// implies true: to set an attribute to false you need to remove it entirely.
case "boolean":
value ? el.setAttribute(name, name) : el.removeAttribute(name);
break;
// For properties, we're leaning on reference equality to avoid unnecessary
// updates.
default:
if (el[name] !== value) el[name] = value;
}
}
|
