Precise DOM morphing
morphing
typescript
dom
Build the guideSetArray in advance of the loop
This means we only need to allocate one array when searching for a match
+8
-4
+4
-3
dist/morphlex.js
+4
-3
dist/morphlex.js
···
53
53
morphNodes(child, guide, idMap);
54
54
}
55
55
function morphChildElement(child, guide, idMap, parent) {
56
+
const guideIdSet = idMap.get(guide);
57
+
const guideSetArray = guideIdSet ? [...guideIdSet] : [];
56
58
let current = child;
57
59
let nextMatchByTagName = null;
58
-
const b = idMap.get(guide);
59
60
while (current) {
60
61
if (isElement(current)) {
61
62
if (current.id !== "" && current.id === guide.id) {
62
63
return morphNodes(current, guide, idMap, child, parent);
63
64
}
64
65
else {
65
-
const a = idMap.get(current);
66
-
if (a && b && [...a].some((it) => b.has(it))) {
66
+
const currentIdSet = idMap.get(current);
67
+
if (currentIdSet && guideSetArray.some((it) => currentIdSet.has(it))) {
67
68
return morphNodes(current, guide, idMap, child, parent);
68
69
}
69
70
else if (!nextMatchByTagName && current.tagName === guide.tagName) {
+4
-1
src/morphlex.ts
+4
-1
src/morphlex.ts
···
53
53
function morphChildElement(child: Element, guide: Element, idMap: IdMap, parent: Element): void {
54
54
const guideIdSet = idMap.get(guide);
55
55
56
+
// Generate the array in advance of the loop
57
+
const guideSetArray = guideIdSet ? [...guideIdSet] : [];
58
+
56
59
let current: ChildNode | null = child;
57
60
let nextMatchByTagName: ChildNode | null = null;
58
61
···
65
68
} else {
66
69
const currentIdSet = idMap.get(current);
67
70
68
-
if (currentIdSet && guideIdSet && [...currentIdSet].some((it) => guideIdSet.has(it))) {
71
+
if (currentIdSet && guideSetArray.some((it) => currentIdSet.has(it))) {
69
72
// Match by idSet.
70
73
return morphNodes(current, guide, idMap, child, parent);
71
74
} else if (!nextMatchByTagName && current.tagName === guide.tagName) {