Precise DOM morphing
morphing
typescript
dom
Only support morphing ChildNodes
+13
-19
+1
-1
dist/morphlite.d.ts
+1
-1
dist/morphlite.d.ts
+6
-10
dist/morphlite.js
+6
-10
dist/morphlite.js
···
13
13
if (node.textContent !== guide.textContent)
14
14
node.textContent = guide.textContent;
15
15
}
16
-
else if (isElement(node) && isElement(guide)) {
17
-
if (node.tagName === guide.tagName) {
18
-
if (node.hasAttributes() || guide.hasAttributes())
19
-
morphAttributes(node, guide);
20
-
if (node.hasChildNodes() || guide.hasChildNodes())
21
-
morphChildNodes(node, guide, idMap);
22
-
}
23
-
else
24
-
node.replaceWith(guide.cloneNode(true));
16
+
else if (isElement(node) && isElement(guide) && node.tagName === guide.tagName) {
17
+
if (node.hasAttributes() || guide.hasAttributes())
18
+
morphAttributes(node, guide);
19
+
if (node.hasChildNodes() || guide.hasChildNodes())
20
+
morphChildNodes(node, guide, idMap);
25
21
}
26
22
else
27
-
throw new Error(`Cannot morph from ${node.constructor.name}, to ${guide.constructor.name}`);
23
+
node.replaceWith(guide.cloneNode(true));
28
24
}
29
25
function morphAttributes(elem, guide) {
30
26
for (const { name } of elem.attributes)
+6
-8
src/morphlite.ts
+6
-8
src/morphlite.ts
···
1
1
type IdSet = Set<string>;
2
2
type IdMap = Map<Node, IdSet>;
3
3
4
-
export function morph(node: Node, guide: Node): void {
4
+
export function morph(node: ChildNode, guide: ChildNode): void {
5
5
const idMap: IdMap = new Map();
6
6
7
7
if (isElement(node) && isElement(guide)) {
···
12
12
morphNodes(node, guide, idMap);
13
13
}
14
14
15
-
function morphNodes(node: Node, guide: Node, idMap: IdMap, insertBefore?: Node, parent?: Node): void {
15
+
function morphNodes(node: ChildNode, guide: ChildNode, idMap: IdMap, insertBefore?: Node, parent?: Node): void {
16
16
if (parent && insertBefore && insertBefore !== node) parent.insertBefore(guide, insertBefore);
17
17
18
18
if (isText(node) && isText(guide)) {
19
19
if (node.textContent !== guide.textContent) node.textContent = guide.textContent;
20
-
} else if (isElement(node) && isElement(guide)) {
21
-
if (node.tagName === guide.tagName) {
22
-
if (node.hasAttributes() || guide.hasAttributes()) morphAttributes(node, guide);
23
-
if (node.hasChildNodes() || guide.hasChildNodes()) morphChildNodes(node, guide, idMap);
24
-
} else node.replaceWith(guide.cloneNode(true));
25
-
} else throw new Error(`Cannot morph from ${node.constructor.name}, to ${guide.constructor.name}`);
20
+
} else if (isElement(node) && isElement(guide) && node.tagName === guide.tagName) {
21
+
if (node.hasAttributes() || guide.hasAttributes()) morphAttributes(node, guide);
22
+
if (node.hasChildNodes() || guide.hasChildNodes()) morphChildNodes(node, guide, idMap);
23
+
} else node.replaceWith(guide.cloneNode(true));
26
24
}
27
25
28
26
function morphAttributes(elem: Element, guide: Element): void {