Precise DOM morphing
morphing
typescript
dom
Only `insertBefore` if necessary
+13
-6
+6
-3
dist/morphlex.js
+6
-3
dist/morphlex.js
···
126
126
while (currentNode) {
127
127
if (isElement(currentNode)) {
128
128
if (currentNode.id === ref.id) {
129
-
parent.insertBefore(currentNode, child);
129
+
insertBefore(parent, currentNode, child);
130
130
return morphNode(currentNode, ref, context);
131
131
} else {
132
132
if (currentNode.id !== "") {
133
133
const currentIdSet = context.idMap.get(currentNode);
134
134
if (currentIdSet && refSetArray.some((it) => currentIdSet.has(it))) {
135
-
parent.insertBefore(currentNode, child);
135
+
insertBefore(parent, currentNode, child);
136
136
return morphNode(currentNode, ref, context);
137
137
} else if (!nextMatchByTagName && currentNode.tagName === ref.tagName) {
138
138
nextMatchByTagName = currentNode;
···
143
143
currentNode = currentNode.nextSibling;
144
144
}
145
145
if (nextMatchByTagName) {
146
-
if (nextMatchByTagName !== child) parent.insertBefore(nextMatchByTagName, child);
146
+
insertBefore(parent, nextMatchByTagName, child);
147
147
morphNode(nextMatchByTagName, ref, context);
148
148
} else replaceNode(child, ref.cloneNode(true), context);
149
149
}
···
156
156
context.afterNodeAdded?.({ newNode });
157
157
context.afterNodeRemoved?.({ oldNode: node });
158
158
}
159
+
}
160
+
function insertBefore(parent, node, before) {
161
+
if (node !== before) parent.insertBefore(node, before);
159
162
}
160
163
function appendChild(node, newNode, context) {
161
164
if (context.beforeNodeAdded?.({ newNode, parentNode: node }) ?? true) {
+7
-3
src/morphlex.ts
+7
-3
src/morphlex.ts
···
236
236
while (currentNode) {
237
237
if (isElement(currentNode)) {
238
238
if (currentNode.id === ref.id) {
239
-
parent.insertBefore(currentNode, child);
239
+
insertBefore(parent, currentNode, child);
240
240
return morphNode(currentNode, ref, context);
241
241
} else {
242
242
if (currentNode.id !== "") {
243
243
const currentIdSet = context.idMap.get(currentNode);
244
244
245
245
if (currentIdSet && refSetArray.some((it) => currentIdSet.has(it))) {
246
-
parent.insertBefore(currentNode, child);
246
+
insertBefore(parent, currentNode, child);
247
247
return morphNode(currentNode, ref, context);
248
248
} else if (!nextMatchByTagName && currentNode.tagName === ref.tagName) {
249
249
nextMatchByTagName = currentNode;
···
256
256
}
257
257
258
258
if (nextMatchByTagName) {
259
-
if (nextMatchByTagName !== child) parent.insertBefore(nextMatchByTagName, child);
259
+
insertBefore(parent, nextMatchByTagName, child);
260
260
morphNode(nextMatchByTagName, ref, context);
261
261
} else replaceNode(child, ref.cloneNode(true), context);
262
262
}
···
270
270
context.afterNodeAdded?.({ newNode });
271
271
context.afterNodeRemoved?.({ oldNode: node });
272
272
}
273
+
}
274
+
275
+
function insertBefore(parent: ParentNode, node: ChildNode, before: ChildNode): void {
276
+
if (node !== before) parent.insertBefore(node, before);
273
277
}
274
278
275
279
function appendChild(node: ParentNode, newNode: Node, context: Context): void {