improve syncNodes to handle new nodes on a empty list better

beforesemicolon · Aug 11, 2024 · eaeda7b · eaeda7b
1 parent c6a8e28
commit eaeda7b
Showing 1 changed file with 76 additions and 58 deletions.
diff --git a/src/utils/sync-nodes.ts b/src/utils/sync-nodes.ts
@@ -19,77 +19,95 @@ export const syncNodes = (
     anchorNode: Node
 ) => {
     if (newChildNodes.length) {
-        const newChildNodesSet = new Set(newChildNodes)
-        let prevN: Node | HtmlTemplate = anchorNode
-        let idx = 0
-        let currentNode: Node | HtmlTemplate | null = currentChildNodes.head
+        if (currentChildNodes.size) {
+            const newChildNodesSet = new Set(newChildNodes)
+            let prevN: Node | HtmlTemplate = anchorNode
+            let idx = 0
+            let currentNode: Node | HtmlTemplate | null = currentChildNodes.head
 
-        while (idx < newChildNodes.length || currentNode) {
-            const newNode = newChildNodes.hasOwnProperty(idx)
-                ? getNodeOrTemplate(newChildNodes[idx])
-                : null
-            const newAdded =
-                newNode &&
-                !currentChildNodes.has(newNode) &&
-                currentNode !== newNode
-            let currentReplaced = false
-            let currentRemoved = false
-            let currentMoved = false
-
-            if (!newNode && currentNode) {
-                currentRemoved = true
-            } else if (currentNode && newNode) {
-                currentRemoved = !newChildNodesSet.has(currentNode)
-                currentReplaced =
-                    currentRemoved && !currentChildNodes.has(newNode)
-                currentMoved =
-                    !currentRemoved &&
-                    !currentReplaced &&
+            while (idx < newChildNodes.length || currentNode) {
+                const newNode = newChildNodes.hasOwnProperty(idx)
+                    ? getNodeOrTemplate(newChildNodes[idx])
+                    : null
+                const newAdded =
+                    newNode &&
+                    !currentChildNodes.has(newNode) &&
                     currentNode !== newNode
-            }
+                let currentReplaced = false
+                let currentRemoved = false
+                let currentMoved = false
+
+                if (!newNode && currentNode) {
+                    currentRemoved = true
+                } else if (currentNode && newNode) {
+                    currentRemoved = !newChildNodesSet.has(currentNode)
+                    currentReplaced =
+                        currentRemoved && !currentChildNodes.has(newNode)
+                    currentMoved =
+                        !currentRemoved &&
+                        !currentReplaced &&
+                        currentNode !== newNode
+                }
 
-            if (currentMoved && newNode) {
-                const nextCurrentNode =
-                    currentChildNodes.getNextValueOf(currentNode)
+                if (currentMoved && newNode) {
+                    const nextCurrentNode =
+                        currentChildNodes.getNextValueOf(currentNode)
 
-                if (nextCurrentNode !== newNode) {
+                    if (nextCurrentNode !== newNode) {
+                        currentChildNodes.insertValueBefore(
+                            newNode,
+                            currentNode as Node
+                        )
+                        insertAfter(newNode, prevN)
+                    } else {
+                        currentChildNodes.remove(currentNode as Node)
+                        currentNode =
+                            currentChildNodes.getNextValueOf(nextCurrentNode)
+                    }
+                } else if (currentReplaced && newNode) {
+                    insertAfter(newNode, prevN)
+                    removeNodeOrTemplate(currentNode as Node)
+                    const nextCurrentNode =
+                        currentChildNodes.getNextValueOf(currentNode)
                     currentChildNodes.insertValueBefore(
                         newNode,
                         currentNode as Node
                     )
+                    currentChildNodes.remove(currentNode as Node)
+                    currentNode = nextCurrentNode
+                } else if (currentRemoved) {
+                    removeNodeOrTemplate(currentNode as Node)
+                    const nextCurrentNode =
+                        currentChildNodes.getNextValueOf(currentNode)
+                    currentChildNodes.remove(currentNode as Node)
+                    currentNode = nextCurrentNode
+                    continue
+                } else if (newAdded) {
                     insertAfter(newNode, prevN)
+                    currentChildNodes.push(newNode)
                 } else {
-                    currentChildNodes.remove(currentNode as Node)
-                    currentNode =
-                        currentChildNodes.getNextValueOf(nextCurrentNode)
+                    currentNode = currentChildNodes.getNextValueOf(currentNode)
                 }
-            } else if (currentReplaced && newNode) {
-                insertAfter(newNode, prevN)
-                removeNodeOrTemplate(currentNode as Node)
-                const nextCurrentNode =
-                    currentChildNodes.getNextValueOf(currentNode)
-                currentChildNodes.insertValueBefore(
-                    newNode,
-                    currentNode as Node
-                )
-                currentChildNodes.remove(currentNode as Node)
-                currentNode = nextCurrentNode
-            } else if (currentRemoved) {
-                removeNodeOrTemplate(currentNode as Node)
-                const nextCurrentNode =
-                    currentChildNodes.getNextValueOf(currentNode)
-                currentChildNodes.remove(currentNode as Node)
-                currentNode = nextCurrentNode
-                continue
-            } else if (newAdded) {
-                insertAfter(newNode, prevN)
-                currentChildNodes.push(newNode)
-            } else {
-                currentNode = currentChildNodes.getNextValueOf(currentNode)
+
+                if (newNode) prevN = newNode
+                idx++
+            }
+        } else {
+            const frag = document.createDocumentFragment()
+
+            for (const newNode of newChildNodes) {
+                const node = getNodeOrTemplate(newNode)
+
+                if (node instanceof HtmlTemplate) {
+                    node.render(frag)
+                } else {
+                    frag.appendChild(node)
+                }
+
+                currentChildNodes.push(node)
             }
 
-            if (newNode) prevN = newNode
-            idx++
+            insertAfter(frag, anchorNode)
         }
     } else {
         for (const currentChildNode of currentChildNodes) {