fix: patch up dom diffing issues

leafsphp · Feb 11, 2023 · c5f901b · c5f901b
1 parent e6d4ea3
commit c5f901b
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 36 deletions.
diff --git a/client/dist/ui.cjs.development.js b/client/dist/ui.cjs.development.js
diff --git a/client/dist/ui.cjs.development.js.map b/client/dist/ui.cjs.development.js.map
diff --git a/client/dist/ui.cjs.production.min.js b/client/dist/ui.cjs.production.min.js
diff --git a/client/dist/ui.cjs.production.min.js.map b/client/dist/ui.cjs.production.min.js.map
diff --git a/client/dist/ui.esm.js b/client/dist/ui.esm.js
diff --git a/client/dist/ui.esm.js.map b/client/dist/ui.esm.js.map
diff --git a/client/src/engine/dom.ts b/client/src/engine/dom.ts
@@ -10,6 +10,8 @@ export default class Dom {
         const newNodes = Array.prototype.slice.call(newNode.children);
         const oldNodes = Array.prototype.slice.call(oldNode.children);
 
+        console.log('diffing elements', newNodes, oldNodes);
+
         /**
          * Get the type for a node
          * @param  {Node}   node The node
@@ -44,14 +46,14 @@ export default class Dom {
         for (let index = 0; index < newNodes.length; index++) {
             const node = newNodes[index];
 
-            console.log('diffing node', node);
+            console.log('diffing node', newNodes[index], oldNodes[index], index);
 
             if (!oldNodes[index]) {
                 const newNodeClone = node.cloneNode(true);
                 oldNode.appendChild(newNodeClone);
                 console.log('adding new UI node', newNodeClone);
                 initComponent(newNodeClone);
-                return;
+                continue;
             }
 
             if (node instanceof HTMLScriptElement && oldNodes[index] instanceof HTMLScriptElement) {
@@ -64,11 +66,6 @@ export default class Dom {
                         newNodeClone,
                         oldNodes[index]
                     );
-                    console.log(
-                        'replacing script UI node',
-                        newNodeClone,
-                        oldNodes[index]
-                    );
                 }
 
                 continue;
@@ -85,7 +82,6 @@ export default class Dom {
                 ) &&
                 oldNodes[index]?.innerHTML === node.innerHTML
             ) {
-                console.log('no changes to UI node', oldNodes[index]);
                 continue;
             }
 
@@ -125,7 +121,6 @@ export default class Dom {
                                 newNodeClone,
                                 oldNodes[index]
                             );
-                            console.log('replacing directive UI node', newNodeClone, oldNodes[index]);
                             initComponent(newNodeClone);
                         }
 
@@ -152,7 +147,7 @@ export default class Dom {
                 );
                 console.log('replacing node', newNodeClone, oldNodes[index]);
                 initComponent(newNodeClone);
-                return;
+                continue;
             }
 
             // If content is different, update it