Work on child rendering tests

Author: weaverryan

src/LiveComponent/assets/src/Component/ValueStore.ts

@@ -6,6 +6,7 @@ export default class {
     private props: any = {};
     private data: any = {};
 
+    // TODO: consider removing props from ValueStore & component: only leaving in live_controller
     constructor(props: any, data: any) {
         this.props = props;
         this.data = data;
@@ -52,7 +53,20 @@ export default class {
         return { ...this.props, ...this.data };
     }
 
-    reinitializeData(data: any) {
+    reinitializeData(data: any): void {
         this.data = data;
     }
+
+    /**
+     * Returns true if any of the props changed.
+     */
+    reinitializeProps(props: any): boolean {
+        if (JSON.stringify(props) == JSON.stringify(this.props)) {
+            return false;
+        }
+
+        this.props = props;
+
+        return true;
+    }
 }

src/LiveComponent/assets/src/Component/index.ts

@@ -178,6 +178,32 @@ export default class Component {
         return new Map(this.children);
     }
 
+    updateFromNewElement(toEl: HTMLElement): boolean {
+        // TODO: need a driver here to be agnostic of markup
+        const propsString = toEl.dataset.livePropsValue;
+
+        // if no props are on the element, use the existing element completely
+        // this means the parent is signaling that the child does not need to be re-rendered
+        if (propsString === undefined) {
+            return false;
+        }
+
+        // push props directly down onto the value store
+        const props = JSON.parse(propsString);
+        const isChanged = this.valueStore.reinitializeProps(props);
+
+        const fingerprint = toEl.dataset.liveFingerprintValue;
+        if (fingerprint !== undefined) {
+            this.fingerprint = fingerprint;
+        }
+
+        if (isChanged) {
+            this.render();
+        }
+
+        return false;
+    }
+
     private tryStartingRequest(): void {
         if (!this.backendRequest) {
             this.performRequest()
@@ -277,6 +303,7 @@ export default class Component {
             newElement,
             this.unsyncedInputsTracker.getUnsyncedInputs(),
             (element: HTMLElement) => getValueFromElement(element, this.valueStore),
+            Array.from(this.getChildren().values())
         );
         // TODO: could possibly do this by listening to the dataValue value change
         this.valueStore.reinitializeData(newDataFromServer);
@@ -297,7 +324,7 @@ export default class Component {
         }));
     }
 
-    private caculateDebounce(debounce: number|boolean): number {
+    private calculateDebounce(debounce: number|boolean): number {
         if (debounce === true) {
             return this.defaultDebounce;
         }
@@ -320,7 +347,7 @@ export default class Component {
         this.clearRequestDebounceTimeout();
         this.requestDebounceTimeout = window.setTimeout(() => {
             this.render();
-        }, this.caculateDebounce(debounce));
+        }, this.calculateDebounce(debounce));
     }
 
     // inspired by Livewire!

src/LiveComponent/assets/src/dom_utils.ts

@@ -1,7 +1,7 @@
 import ValueStore from './Component/ValueStore';
 import { Directive, parseDirectives } from './directives_parser';
 import { normalizeModelName } from './string_utils';
-import Component from "./Component";
+import Component from './Component';
 
 /**
  * Return the "value" of any given element.
@@ -210,6 +210,21 @@ export function htmlToElement(html: string): HTMLElement {
     return child;
 }
 
+// Inspired by https://stackoverflow.com/questions/13389751/change-tag-using-javascript
+export function cloneElementWithNewTagName(element: Element, newTag: string): HTMLElement {
+    const originalTag = element.tagName
+    const startRX = new RegExp('^<'+originalTag, 'i')
+    const endRX = new RegExp(originalTag+'>$', 'i')
+    const startSubst = '<'+newTag
+    const endSubst = newTag+'>'
+
+    const newHTML = element.outerHTML
+        .replace(startRX, startSubst)
+        .replace(endRX, endSubst);
+
+    return htmlToElement(newHTML);
+}
+
 /**
  * Returns just the outer element's HTML as a string - useful for error messages.
  *

src/LiveComponent/assets/src/morphdom.ts

@@ -1,30 +1,62 @@
 import {
-cloneHTMLElement,
+    cloneElementWithNewTagName,
+    cloneHTMLElement,
     setValueOnElement
-} from "./dom_utils";
-import morphdom from "morphdom";
-import { normalizeAttributesForComparison } from "./normalize_attributes_for_comparison";
+} from './dom_utils';
+import morphdom from 'morphdom';
+import {
+    normalizeAttributesForComparison
+} from './normalize_attributes_for_comparison';
+import Component from './Component';
 
 export function executeMorphdom(
     rootFromElement: HTMLElement,
     rootToElement: HTMLElement,
     modifiedElements: Array<HTMLElement>,
     getElementValue: (element: HTMLElement) => any,
+    childComponents: Component[],
 ) {
-    // make sure everything is in non-loading state, the same as the HTML currently on the page
+    const childComponentMap: Map<HTMLElement, Component> = new Map();
+    childComponents.forEach((childComponent) => {
+        childComponentMap.set(childComponent.element, childComponent);
+        // TODO: add driver to make this agnostic
+        const childComponentToElement = rootToElement.querySelector(`[data-live-id-value=${childComponent.id}]`)
+        if (childComponentToElement && childComponentToElement.tagName !== childComponent.element.tagName) {
+            // we need to "correct" the tag name for the child to match the "from"
+            // so that we always get a "diff", not a remove/add
+            const newTag = cloneElementWithNewTagName(childComponentToElement, childComponent.element.tagName);
+            rootToElement.replaceChild(newTag, childComponentToElement);
+        }
+    });
+
     morphdom(rootFromElement, rootToElement, {
         getNodeKey: (node: Node) => {
-          if (!(node instanceof HTMLElement)) {
-              return;
-          }
+            if (!(node instanceof HTMLElement)) {
+                return;
+            }
+
+            // TODO: abstract out to make this function agnostic of markup
+            if (node.dataset.liveId) {
+                return node.dataset.liveId;
+            }
 
-          return node.dataset.liveId;
+            // TODO: do we really need data-live-id and data-live-value-id?
+            return node.dataset.liveIdValue
         },
         onBeforeElUpdated: (fromEl, toEl) => {
+            if (fromEl === rootFromElement) {
+                return true;
+            }
+
             if (!(fromEl instanceof HTMLElement) || !(toEl instanceof HTMLElement)) {
                 return false;
             }
 
+            const childComponent = childComponentMap.get(fromEl) || false
+            if (childComponent) {
+                return childComponent.updateFromNewElement(toEl);
+            }
+
             // if this field's value has been modified since this HTML was
             // requested, set the toEl's value to match the fromEl
             if (modifiedElements.includes(fromEl)) {
@@ -47,16 +79,6 @@ export function executeMorphdom(
                 }
             }
 
-            // avoid updating child components: they will handle themselves
-            const controllerName = fromEl.hasAttribute('data-controller') ? fromEl.getAttribute('data-controller') : null;
-            if (controllerName
-                && controllerName.split(' ').indexOf('live') !== -1
-                && fromEl !== rootFromElement
-            ) {
-                // TODO: add new child logic here
-                return false;
-            }
-
             // look for data-live-ignore, and don't update
             return !fromEl.hasAttribute('data-live-ignore');
         },

src/LiveComponent/assets/test/controller/action.test.ts

@@ -9,13 +9,13 @@
 
 'use strict';
 
-import { createTest, initComponent, shutdownTest } from '../tools';
+import { createTest, initComponent, shutdownTests } from '../tools';
 import { getByText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 
 describe('LiveController Action Tests', () => {
     afterEach(() => {
-        shutdownTest();
+        shutdownTests();
     })
 
     it('sends an action and renders the result', async () => {

src/LiveComponent/assets/test/controller/basic.test.ts

@@ -9,13 +9,13 @@
 
 'use strict';
 
-import {createTest, initComponent, shutdownTest, startStimulus} from '../tools';
+import {createTest, initComponent, shutdownTests, startStimulus} from '../tools';
 import { htmlToElement } from '../../src/dom_utils';
-import Component from "../../src/Component";
+import Component from '../../src/Component';
 
 describe('LiveController Basic Tests', () => {
     afterEach(() => {
-        shutdownTest()
+        shutdownTests()
     });
 
     it('dispatches connect event', async () => {
@@ -37,9 +37,9 @@ describe('LiveController Basic Tests', () => {
             <div ${initComponent(data, {}, { debounce: 115, id: 'the-id', fingerprint: 'the-fingerprint' })}></div>
         `);
 
-        expect(test.controller.component).toBeInstanceOf(Component);
-        expect(test.controller.component.defaultDebounce).toEqual(115);
-        expect(test.controller.component.id).toEqual('the-id');
-        expect(test.controller.component.fingerprint).toEqual('the-fingerprint');
+        expect(test.component).toBeInstanceOf(Component);
+        expect(test.component.defaultDebounce).toEqual(115);
+        expect(test.component.id).toEqual('the-id');
+        expect(test.component.fingerprint).toEqual('the-fingerprint');
     });
 });