Precise DOM morphing
morphing typescript dom
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve naming

+20 -20
+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
··· 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);