initial component child tracking/setup

and removing originalData - new child logic will not need this

Author: weaverryan

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

@@ -16,6 +16,7 @@ declare const Turbo: any;
 export default class Component {
     readonly element: HTMLElement;
     private readonly backend: BackendInterface;
+    id: string|null;
 
     readonly valueStore: ValueStore;
     private readonly unsyncedInputsTracker: UnsyncedInputsTracker;
@@ -24,7 +25,6 @@ export default class Component {
 
     defaultDebounce = 150;
 
-    private originalData = {};
     private backendRequest: BackendRequest|null;
     /** Actions that are waiting to be executed */
     private pendingActions: BackendAction[] = [];
@@ -33,23 +33,25 @@ export default class Component {
     /** Current "timeout" before the pending request should be sent. */
     private requestDebounceTimeout: number | null = null;
 
+    private children: Map<string, Component> = new Map();
+    private parent: Component|null = null;
+
     /**
      * @param element The root element
      * @param data    Component data
+     * @param id      Some unique id to identify this component. Needed to be a child component
      * @param backend Backend instance for updating
      * @param modelElementResolver Class to get "model" name from any element.
      */
-    constructor(element: HTMLElement, data: any, backend: BackendInterface, modelElementResolver: ModelElementResolver) {
+    constructor(element: HTMLElement, data: any, id: string|null, backend: BackendInterface, modelElementResolver: ModelElementResolver) {
         this.element = element;
         this.backend = backend;
+        this.id = id;
 
         this.valueStore = new ValueStore(data);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(element, modelElementResolver);
         this.hooks = new HookManager();
         this.pollingDirector = new PollingDirectory(this);
-
-        // deep clone the data
-        this.snapshotOriginalData();
     }
 
     connect(): void {
@@ -138,6 +140,32 @@ export default class Component {
         this.pollingDirector.clearPolling();
     }
 
+    addChild(component: Component): void {
+        if (!component.id) {
+            throw new Error('Children components must have an id.');
+        }
+
+        this.children.set(component.id, component);
+        component.parent = this;
+    }
+
+    removeChild(child: Component): void {
+        if (!child.id) {
+            throw new Error('Children components must have an id.');
+        }
+
+        this.children.delete(child.id);
+        child.parent = null;
+    }
+
+    getParent(): Component|null {
+        return this.parent;
+    }
+
+    getChildren(): Map<string, Component> {
+        return new Map(this.children);
+    }
+
     private tryStartingRequest(): void {
         if (!this.backendRequest) {
             this.performRequest()
@@ -236,16 +264,10 @@ export default class Component {
             newElement,
             this.unsyncedInputsTracker.getUnsyncedInputs(),
             (element: HTMLElement) => getValueFromElement(element, this.valueStore),
-            this.originalData,
-            this.valueStore.all(),
-            newDataFromServer
         );
         // TODO: could possibly do this by listening to the dataValue value change
         this.valueStore.reinitialize(newDataFromServer);
 
-        // take a new snapshot of the "original data"
-        this.snapshotOriginalData();
-
         // reset the modified values back to their client-side version
         Object.keys(modifiedModelValues).forEach((modelName) => {
             this.valueStore.set(modelName, modifiedModelValues[modelName]);
@@ -262,10 +284,6 @@ export default class Component {
         }));
     }
 
-    private snapshotOriginalData() {
-        this.originalData = JSON.parse(JSON.stringify(this.valueStore.all()));
-    }
-
     private caculateDebounce(debounce: number|boolean): number {
         if (debounce === true) {
             return this.defaultDebounce;
@@ -343,9 +361,16 @@ export default class Component {
     }
 }
 
-export function createComponent(element: HTMLElement, data: any, backend: BackendInterface, modelElementResolver: ModelElementResolver): Component {
-    const component = new Component(element, data, backend, modelElementResolver);
-
+/**
+ * Makes the Component feel more like a JS-version of the PHP component:
+ *
+ *      // set model like properties
+ *      component.firstName = 'Ryan';
+ *
+ *      // call a live action called "saveStatus" with a "status" arg
+ *      component.saveStatus({ status: 'published' });
+ */
+export function proxifyComponent(component: Component): Component {
     return new Proxy(component, {
         get(component: Component, prop: string|symbol): any {
             // string check is to handle symbols

src/LiveComponent/assets/src/dom_utils.ts

@@ -159,6 +159,8 @@ export function getModelDirectiveFromElement(element: HTMLElement, throwOnMissin
  *      B) NOT also live inside a child "live controller" element
  */
 export function elementBelongsToThisController(element: Element, controller: LiveController): boolean {
+    // TODO fix this
+    return true;
     if (controller.element !== element && !controller.element.contains(element)) {
         return false;
     }

src/LiveComponent/assets/src/have_rendered_values_changed.ts

@@ -8,60 +8,77 @@ import {
     getValueFromElement,
     elementBelongsToThisController,
 } from './dom_utils';
-import Component, {createComponent} from "./Component";
+import Component, {proxifyComponent} from "./Component";
 import Backend from "./Backend";
-import {DataModelElementResolver} from "./Component/ModelElementResolver";
+import {
+    DataModelElementResolver,
+} from "./Component/ModelElementResolver";
 import LoadingHelper from "./LoadingHelper";
 
 interface UpdateModelOptions {
     dispatch?: boolean;
     debounce?: number|boolean;
 }
 
-export interface LiveController {
-    dataValue: any;
-    element: Element,
-    childComponentControllers: Array<LiveController>
+export interface LiveEvent extends CustomEvent {
+    detail: {
+        controller: LiveController,
+        component: Component
+    },
 }
 
-export default class extends Controller implements LiveController {
+export default class LiveController extends Controller {
     static values = {
         url: String,
         data: Object,
         csrf: String,
         debounce: { type: Number, default: 150 },
+        id: String,
     }
 
     readonly urlValue!: string;
     dataValue!: any;
     readonly csrfValue!: string;
     readonly hasDebounceValue: boolean;
     readonly debounceValue: number;
+    readonly idValue: string;
+
+    /** The component, wrapped in the convenience Proxy */
+    private proxiedComponent: Component;
+    /** The raw Component object */
+    private component: Component;
 
-    component: Component;
     isConnected = false;
-    childComponentControllers: Array<LiveController> = [];
     pendingActionTriggerModelElement: HTMLElement|null = null;
 
     private elementEventListeners: Array<{ event: string, callback: (event: any) => void }> = [
-         { event: 'input', callback: (event) => this.handleInputEvent(event) },
-         { event: 'change', callback: (event) => this.handleChangeEvent(event) },
+        { event: 'input', callback: (event) => this.handleInputEvent(event) },
+        { event: 'change', callback: (event) => this.handleChangeEvent(event) },
+        { event: 'live:connect', callback: (event) => this.handleConnectedControllerEvent(event) },
      ];
 
     initialize() {
-        this.handleConnectedControllerEvent = this.handleConnectedControllerEvent.bind(this);
-        this.handleDisconnectedControllerEvent = this.handleDisconnectedControllerEvent.bind(this);
+        this.handleDisconnectedChildControllerEvent = this.handleDisconnectedChildControllerEvent.bind(this);
 
         if (!(this.element instanceof HTMLElement)) {
             throw new Error('Invalid Element Type');
         }
 
-        this.component = createComponent(
+
+        const id = this.idValue || null;
+
+        this.component = new Component(
             this.element,
             this.dataValue,
+            id,
             new Backend(this.urlValue, this.csrfValue),
             new DataModelElementResolver(),
         );
+        this.proxiedComponent = proxifyComponent(this.component);
+
+        // @ts-ignore Adding the dynamic property
+        this.element.__component = this.proxiedComponent;
+
         if (this.hasDebounceValue) {
             this.component.defaultDebounce = this.debounceValue;
         }
@@ -100,9 +117,7 @@ export default class extends Controller implements LiveController {
             throw new Error('Invalid Element Type');
         }
 
-        this.element.addEventListener('live:connect', this.handleConnectedControllerEvent);
-
-        this._dispatchEvent('live:connect', { controller: this });
+        this._dispatchEvent('live:connect');
     }
 
     disconnect() {
@@ -112,11 +127,8 @@ export default class extends Controller implements LiveController {
             this.component.element.removeEventListener(event, callback);
         });
 
-        this.element.removeEventListener('live:connect', this.handleConnectedControllerEvent);
-        this.element.removeEventListener('live:disconnect', this.handleDisconnectedControllerEvent);
-
-        this._dispatchEvent('live:disconnect', { controller: this });
         this.isConnected = false;
+        this._dispatchEvent('live:disconnect');
     }
 
     /**
@@ -334,37 +346,49 @@ export default class extends Controller implements LiveController {
         this.component.set(modelDirective.action, finalValue, shouldRender, debounce);
     }
 
-    handleConnectedControllerEvent(event: any) {
+    handleConnectedControllerEvent(event: LiveEvent) {
         if (event.target === this.element) {
             return;
         }
 
-        this.childComponentControllers.push(event.detail.controller);
+        const childController = event.detail.controller;
+        if (childController.component.getParent()) {
+            // child already has a parent - we are a grandparent
+            return;
+        }
+
+        this.component.addChild(childController.component);
+
         // live:disconnect needs to be registered on the child element directly
         // that's because if the child component is removed from the DOM, then
         // the parent controller is no longer an ancestor, so the live:disconnect
         // event would not bubble up to it.
-        event.detail.controller.element.addEventListener('live:disconnect', this.handleDisconnectedControllerEvent);
+        // @ts-ignore TS doesn't like the LiveEvent arg in the listener, not sure how to fix
+        childController.element.addEventListener('live:disconnect', this.handleDisconnectedChildControllerEvent);
     }
 
-    handleDisconnectedControllerEvent(event: any) {
-        if (event.target === this.element) {
-            return;
-        }
+    handleDisconnectedChildControllerEvent(event: LiveEvent): void {
+        const childController = event.detail.controller;
 
-        const index = this.childComponentControllers.indexOf(event.detail.controller);
+        // @ts-ignore TS doesn't like the LiveEvent arg in the listener, not sure how to fix
+        childController.element.removeEventListener('live:disconnect', this.handleDisconnectedChildControllerEvent);
 
-        // Remove value from an array
-        if (index > -1) {
-            this.childComponentControllers.splice(index, 1);
+        // this shouldn't happen: but double-check we're the parent
+        if (childController.component.getParent() !== this.component) {
+            return;
         }
+
+        this.component.removeChild(childController.component);
     }
 
-    _dispatchEvent(name: string, payload: any = null, canBubble = true, cancelable = false) {
+    _dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
+        detail.controller = this;
+        detail.component = this.proxiedComponent;
+
         return this.element.dispatchEvent(new CustomEvent(name, {
             bubbles: canBubble,
             cancelable,
-            detail: payload
+            detail
         }));
     }