abstracting last bits of markup out of component

Fixing bad test exposed by new inability to compare promise resolve callback

Removing old child test

Author: weaverryan

src/LiveComponent/assets/src/Component/ElementDriver.ts

@@ -11,6 +11,16 @@ export interface ElementDriver {
     getComponentData(rootElement: HTMLElement): any;
 
     getComponentProps(rootElement: HTMLElement): any;
+
+    /**
+     * Given an HtmlElement and a child id, find the root element for that child.
+     */
+    findChildComponentElement(id: string, element: HTMLElement): HTMLElement|null;
+
+    /**
+     * Given an element, find the "key" that should be used to identify it;
+     */
+    getKeyFromElement(element: HTMLElement): string|null;
 }
 
 export class StandardElementDriver implements ElementDriver {
@@ -39,4 +49,12 @@ export class StandardElementDriver implements ElementDriver {
 
         return JSON.parse(rootElement.dataset.livePropsValue as string);
     }
+
+    findChildComponentElement(id: string, element: HTMLElement): HTMLElement|null {
+        return element.querySelector(`[data-live-id=${id}]`);
+    }
+
+    getKeyFromElement(element: HTMLElement): string|null {
+        return element.dataset.liveId || null;
+    }
 }

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

@@ -298,7 +298,9 @@ export default class Component {
             newElement,
             this.unsyncedInputsTracker.getUnsyncedInputs(),
             (element: HTMLElement) => getValueFromElement(element, this.valueStore),
-            Array.from(this.getChildren().values())
+            Array.from(this.getChildren().values()),
+            this.elementDriver.findChildComponentElement,
+            this.elementDriver.getKeyFromElement
         );
 
         // reset the modified values back to their client-side version

src/LiveComponent/assets/src/morphdom.ts

@@ -15,12 +15,16 @@ export function executeMorphdom(
     modifiedElements: Array<HTMLElement>,
     getElementValue: (element: HTMLElement) => any,
     childComponents: Component[],
+    findChildComponent: (id: string, element: HTMLElement) => HTMLElement|null,
+    getKeyFromElement: (element: HTMLElement) => string|null,
 ) {
     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=${childComponent.id}]`)
+        if (!childComponent.id) {
+            throw new Error('Child is missing id.');
+        }
+        const childComponentToElement = findChildComponent(childComponent.id, rootToElement);
         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
@@ -35,8 +39,7 @@ export function executeMorphdom(
                 return;
             }
 
-            // TODO: abstract out to make this function agnostic of markup
-            return node.dataset.liveId;
+            return getKeyFromElement(node);
         },
         onBeforeElUpdated: (fromEl, toEl) => {
             if (fromEl === rootFromElement) {

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

@@ -51,11 +51,15 @@ describe('LiveController parent -> child component tests', () => {
 
         const parentComponent = test.component;
         const childComponent = getComponent(getByTestId(test.element, 'child'));
+        // setting a marker to help verify THIS exact Component instance continues to be used
+        childComponent.fingerprint = 'FOO-FINGERPRINT';
 
         // check that the relationships all loaded correctly
         expect(parentComponent.getChildren().size).toEqual(1);
-        expect(parentComponent.getChildren().get('the-child-id')).toEqual(childComponent);
-        expect(childComponent.getParent()).toEqual(parentComponent);
+        // check fingerprint instead of checking object equality with childComponent
+        // because childComponent is actually the proxied Component
+        expect(parentComponent.getChildren().get('the-child-id')?.fingerprint).toEqual('FOO-FINGERPRINT');
+        expect(childComponent.getParent()).toBe(parentComponent);
 
         // remove the child
         childComponent.element.remove();
@@ -66,7 +70,7 @@ describe('LiveController parent -> child component tests', () => {
         // now put it back!
         test.element.appendChild(childComponent.element);
         await waitFor(() => expect(parentComponent.getChildren().size).toEqual(1));
-        expect(parentComponent.getChildren().get('the-child-id')).toEqual(childComponent);
+        expect(parentComponent.getChildren().get('the-child-id')?.fingerprint).toEqual('FOO-FINGERPRINT');
         expect(childComponent.getParent()).toEqual(parentComponent);
 
         // now remove the whole darn thing!
@@ -78,7 +82,7 @@ describe('LiveController parent -> child component tests', () => {
         // put it *all* back
         document.body.appendChild(test.element);
         await waitFor(() => expect(parentComponent.getChildren().size).toEqual(1));
-        expect(parentComponent.getChildren().get('the-child-id')).toEqual(childComponent);
+        expect(parentComponent.getChildren().get('the-child-id')?.fingerprint).toEqual('FOO-FINGERPRINT');
         expect(childComponent.getParent()).toEqual(parentComponent);
     });