fix: patch up instance of diffing

leafsphp · Feb 10, 2023 · 6fb9440 · 6fb9440
1 parent 09ca3d3
commit 6fb9440
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 45 deletions.
diff --git a/client/dist/engine/dom.d.ts b/client/dist/engine/dom.d.ts
@@ -1,5 +1,6 @@
 export default class Dom {
     static diff(newNode: string, oldNode: HTMLElement): void;
+    static diffElements(newNode: HTMLElement, oldNode: HTMLElement): void;
     static getBody(html: string, removeScripts?: boolean): HTMLElement;
     static flattenDomIntoArray(node: HTMLElement): HTMLCollection;
     static compareNodesAndReturnChanges(newNode: HTMLElement, oldNode: HTMLElement): Record<string, Element | null>[];

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/dist/utils/data.d.ts b/client/dist/utils/data.d.ts
@@ -11,7 +11,10 @@ export declare enum DIRECTIVE_SHORTHANDS {
 export declare function arraysMatch(a: any[], b: any[]): boolean;
 declare global {
     interface Window {
-        leafUI: Component;
+        leafUI: {
+            rootEl?: HTMLElement;
+            component: Component;
+        };
         _leafUIConfig: LeafUIConfig;
     }
     interface HTMLElement {

diff --git a/client/src/core/component.ts b/client/src/core/component.ts
@@ -20,6 +20,11 @@ export default class Component {
         this.render();
         rootEl['component'] = this;
 
+        window.leafUI = {
+            rootEl,
+            component: this
+        };
+
         return this;
     }
 

diff --git a/client/src/engine/dom.ts b/client/src/engine/dom.ts
@@ -3,14 +3,17 @@ import { DIRECTIVE_SHORTHANDS, arraysMatch } from './../utils/data';
 
 export default class Dom {
     static diff(newNode: string, oldNode: HTMLElement): void {
-        const newDomBody = Dom.getBody(newNode, true);
-        const newNodes = Array.prototype.slice.call(newDomBody.children);
+        Dom.diffElements(Dom.getBody(newNode, false), oldNode);
+    }
+
+    static diffElements(newNode: HTMLElement, oldNode: HTMLElement): void {
+        const newNodes = Array.prototype.slice.call(newNode.children);
         const oldNodes = Array.prototype.slice.call(oldNode.children);
 
         /**
          * Get the type for a node
          * @param  {Node}   node The node
-         * @return {String}      The type
+         * @return {String} The type
          */
         const getNodeType = (node: HTMLElement) => {
             if (node.nodeType === 3) return 'text';
@@ -31,7 +34,7 @@ export default class Dom {
         // const diff = Dom.compareNodesAndReturnChanges(newDomBody, oldNode);
 
         // If extra elements in DOM, remove them
-        var count = oldNodes.length - newNodes.length;
+        let count = oldNodes.length - newNodes.length;
         if (count > 0) {
             for (; count > 0; count--) {
                 oldNodes[oldNodes.length - count].parentNode.removeChild(
@@ -78,31 +81,45 @@ export default class Dom {
 
             if (hasDirectivePrefix || hasDirectiveShorthandPrefix) {
                 oldNodes[index].innerHTML = node.innerHTML;
+
                 for (let j = 0; j < node.attributes.length; j++) {
                     const attr = node.attributes[j];
+
                     if (
                         attr.name.startsWith('ui-') ||
                         Object.keys(DIRECTIVE_SHORTHANDS).some(shorthand =>
                             Object.values(oldNodes[index].attributes)
-                                .map((attr: any) => attr.name.startsWith(shorthand))
+                                .map((attr: any) =>
+                                    attr.name.startsWith(shorthand)
+                                )
                                 .includes(true)
                         )
                     ) {
                         if (
                             oldNodes[index].getAttribute(attr.name) !==
                             attr.value
                         ) {
-                            oldNodes[index].replaceWith(node);
-                            initComponent(node);
+                            const newNodeClone = node.cloneNode(true);
+                            oldNodes[index].parentNode.replaceChild(
+                                newNodeClone,
+                                oldNodes[index]
+                            );
+                            initComponent(newNodeClone);
                         }
+
                         continue;
                     }
-                    oldNodes[index].setAttribute(attr.name, attr.value);
+
+                    const newNodeClone = node.cloneNode(true);
+                    oldNodes[index].parentNode.replaceChild(
+                        newNodeClone,
+                        oldNodes[index]
+                    );
+                    initComponent(newNodeClone);
                 }
                 continue;
             }
 
-
             // If element is not the same type, replace it with new element
             if (getNodeType(node) !== getNodeType(oldNodes[index])) {
                 const newNodeClone = node.cloneNode(true);
@@ -138,13 +155,12 @@ export default class Dom {
                 const fragment = document.createDocumentFragment();
                 Dom.diff(node, fragment as any);
                 oldNodes[index].appendChild(fragment);
-                initComponent(node);
                 continue;
             }
 
             if (node.children.length > 0) {
-                Dom.diff(node, oldNodes[index]);
-                initComponent(node);
+                console.log('diffing children', newNode, oldNode);
+                Dom.diffElements(node, oldNodes[index]);
             }
         }
     }
@@ -153,7 +169,7 @@ export default class Dom {
         const parser = new DOMParser();
         const dom = parser.parseFromString(html, 'text/html');
 
-        if (removeScripts) {
+        if (removeScripts === true) {
             const scripts = dom.body.getElementsByTagName('script');
 
             for (let i = 0; i < scripts.length; i++) {

diff --git a/client/src/utils/data.ts b/client/src/utils/data.ts
@@ -33,7 +33,10 @@ export function arraysMatch(a: any[], b: any[]) {
 
 declare global {
     interface Window {
-        leafUI: Component;
+        leafUI: {
+            rootEl?: HTMLElement;
+            component: Component;
+        };
         _leafUIConfig: LeafUIConfig;
     }