Precise DOM morphing
morphing
typescript
dom
Improve naming
+20
-20
+6
-6
dist/morphlex.js
+6
-6
dist/morphlex.js
···
38
38
const childNodes = [...elem.childNodes];
39
39
const guideChildNodes = [...guide.childNodes];
40
40
for (let i = 0; i < guideChildNodes.length; i++) {
41
-
const childA = childNodes.at(i);
42
-
const childB = guideChildNodes.at(i);
43
-
if (childA && childB)
44
-
morphChildNode(childA, childB, idMap, elem);
45
-
else if (childB)
46
-
elem.appendChild(childB.cloneNode(true));
41
+
const child = childNodes.at(i);
42
+
const guideChild = guideChildNodes.at(i);
43
+
if (child && guideChild)
44
+
morphChildNode(child, guideChild, idMap, elem);
45
+
else if (guideChild)
46
+
elem.appendChild(guideChild.cloneNode(true));
47
47
}
48
48
while (elem.childNodes.length > guide.childNodes.length)
49
49
elem.lastChild?.remove();
+14
-14
src/morphlex.ts
+14
-14
src/morphlex.ts
···
37
37
const guideChildNodes = [...guide.childNodes];
38
38
39
39
for (let i = 0; i < guideChildNodes.length; i++) {
40
-
const childA = childNodes.at(i);
41
-
const childB = guideChildNodes.at(i);
40
+
const child = childNodes.at(i);
41
+
const guideChild = guideChildNodes.at(i);
42
42
43
-
if (childA && childB) morphChildNode(childA, childB, idMap, elem);
44
-
else if (childB) elem.appendChild(childB.cloneNode(true));
43
+
if (child && guideChild) morphChildNode(child, guideChild, idMap, elem);
44
+
else if (guideChild) elem.appendChild(guideChild.cloneNode(true));
45
45
}
46
46
47
47
// This is separate because the loop above might modify the length of the element's child nodes.
···
59
59
// Generate the array in advance of the loop
60
60
const guideSetArray = guideIdSet ? [...guideIdSet] : [];
61
61
62
-
let current: ChildNode | null = child;
62
+
let currentNode: ChildNode | null = child;
63
63
let nextMatchByTagName: ChildNode | null = null;
64
64
65
65
// Try find a match by idSet, while also looking out for the next best match by tagName.
66
-
while (current) {
67
-
if (isElement(current)) {
68
-
if (current.id !== "" && current.id === guide.id) {
66
+
while (currentNode) {
67
+
if (isElement(currentNode)) {
68
+
if (currentNode.id !== "" && currentNode.id === guide.id) {
69
69
// Exact match by id.
70
-
return morphNodes(current, guide, idMap, child, parent);
70
+
return morphNodes(currentNode, guide, idMap, child, parent);
71
71
} else {
72
-
const currentIdSet = idMap.get(current);
72
+
const currentIdSet = idMap.get(currentNode);
73
73
74
74
if (currentIdSet && guideSetArray.some((it) => currentIdSet.has(it))) {
75
75
// Match by idSet.
76
-
return morphNodes(current, guide, idMap, child, parent);
77
-
} else if (!nextMatchByTagName && current.tagName === guide.tagName) {
78
-
nextMatchByTagName = current;
76
+
return morphNodes(currentNode, guide, idMap, child, parent);
77
+
} else if (!nextMatchByTagName && currentNode.tagName === guide.tagName) {
78
+
nextMatchByTagName = currentNode;
79
79
}
80
80
}
81
81
}
82
82
83
-
current = current.nextSibling;
83
+
currentNode = currentNode.nextSibling;
84
84
}
85
85
86
86
if (nextMatchByTagName) morphNodes(nextMatchByTagName, guide, idMap, child, parent);