Precise DOM morphing
morphing
typescript
dom
Remove confusing insertBefore arguments
Closes #6
+18
-15
+9
-7
dist/morphlex.js
+9
-7
dist/morphlex.js
···
23
23
}
24
24
}
25
25
// This is where we actually morph the nodes. The `morph` function exists to set up the `idMap`.
26
-
function morphNodes(node, guide, idMap, insertBefore, parent) {
27
-
// TODO: We should extract this into a separate function.
28
-
if (parent && insertBefore && insertBefore !== node) parent.insertBefore(guide, insertBefore);
26
+
function morphNodes(node, guide, idMap) {
29
27
if (isElement(node) && isElement(guide) && node.tagName === guide.tagName) {
30
28
// We need to check if the element is an input, option, or textarea here, because they have
31
29
// special attributes not covered by the isEqualNode check.
···
91
89
while (currentNode) {
92
90
if (isElement(currentNode)) {
93
91
if (currentNode.id === guide.id) {
94
-
return morphNodes(currentNode, guide, idMap, child, parent);
92
+
parent.insertBefore(currentNode, child);
93
+
return morphNodes(currentNode, guide, idMap);
95
94
} else if (currentNode.id !== "") {
96
95
const currentIdSet = idMap.get(currentNode);
97
96
if (currentIdSet && guideSetArray.some((it) => currentIdSet.has(it))) {
98
-
return morphNodes(currentNode, guide, idMap, child, parent);
97
+
parent.insertBefore(currentNode, child);
98
+
return morphNodes(currentNode, guide, idMap);
99
99
}
100
100
} else if (!nextMatchByTagName && currentNode.tagName === guide.tagName) {
101
101
nextMatchByTagName = currentNode;
···
103
103
}
104
104
currentNode = currentNode.nextSibling;
105
105
}
106
-
if (nextMatchByTagName) morphNodes(nextMatchByTagName, guide, idMap, child, parent);
107
-
else child.replaceWith(guide.cloneNode(true));
106
+
if (nextMatchByTagName) {
107
+
parent.insertBefore(nextMatchByTagName, child);
108
+
morphNodes(nextMatchByTagName, guide, idMap);
109
+
} else child.replaceWith(guide.cloneNode(true));
108
110
}
109
111
// We cannot use `instanceof` when nodes might be from different documents,
110
112
// so we use type guards instead. This keeps TypeScript happy, while doing
+9
-8
src/morphlex.ts
+9
-8
src/morphlex.ts
···
34
34
}
35
35
36
36
// This is where we actually morph the nodes. The `morph` function exists to set up the `idMap`.
37
-
function morphNodes(node: ChildNode, guide: ChildNode, idMap: IdMap, insertBefore?: Node, parent?: Node): void {
38
-
// TODO: We should extract this into a separate function.
39
-
if (parent && insertBefore && insertBefore !== node) parent.insertBefore(guide, insertBefore);
40
-
37
+
function morphNodes(node: ChildNode, guide: ChildNode, idMap: IdMap): void {
41
38
if (isElement(node) && isElement(guide) && node.tagName === guide.tagName) {
42
39
// We need to check if the element is an input, option, or textarea here, because they have
43
40
// special attributes not covered by the isEqualNode check.
···
117
114
while (currentNode) {
118
115
if (isElement(currentNode)) {
119
116
if (currentNode.id === guide.id) {
120
-
return morphNodes(currentNode, guide, idMap, child, parent);
117
+
parent.insertBefore(currentNode, child);
118
+
return morphNodes(currentNode, guide, idMap);
121
119
} else if (currentNode.id !== "") {
122
120
const currentIdSet = idMap.get(currentNode);
123
121
124
122
if (currentIdSet && guideSetArray.some((it) => currentIdSet.has(it))) {
125
-
return morphNodes(currentNode, guide, idMap, child, parent);
123
+
parent.insertBefore(currentNode, child);
124
+
return morphNodes(currentNode, guide, idMap);
126
125
}
127
126
} else if (!nextMatchByTagName && currentNode.tagName === guide.tagName) {
128
127
nextMatchByTagName = currentNode;
···
132
131
currentNode = currentNode.nextSibling;
133
132
}
134
133
135
-
if (nextMatchByTagName) morphNodes(nextMatchByTagName, guide, idMap, child, parent);
136
-
else child.replaceWith(guide.cloneNode(true));
134
+
if (nextMatchByTagName) {
135
+
parent.insertBefore(nextMatchByTagName, child);
136
+
morphNodes(nextMatchByTagName, guide, idMap);
137
+
} else child.replaceWith(guide.cloneNode(true));
137
138
}
138
139
139
140
// We cannot use `instanceof` when nodes might be from different documents,