client-side implementation of differentiating between data & props

This will be needed later for child component handling, where the server will
send down a list of updated "props" only, and the client side will need to update
the props of a component, without changing the "data" that may have already been
altered by the user.

Author: weaverryan

package.json

@@ -49,7 +49,8 @@
         "rules": {
             "@typescript-eslint/no-explicit-any": "off",
             "@typescript-eslint/no-empty-function": "off",
-            "@typescript-eslint/ban-ts-comment": "off"
+            "@typescript-eslint/ban-ts-comment": "off",
+            "quotes": ["error", "single"]
         },
         "env": {
             "browser": true

src/LiveComponent/assets/src/Component/UnsyncedInputsTracker.ts

@@ -1,7 +1,9 @@
-import {ModelElementResolver} from "./ModelElementResolver";
+import {ModelElementResolver} from './ModelElementResolver';
+import {elementBelongsToThisComponent} from '../dom_utils';
+import Component from './index';
 
 export default class {
-    private readonly element: HTMLElement;
+    private readonly component: Component;
     private readonly modelElementResolver: ModelElementResolver;
     /** Fields that have changed, but whose value is not set back onto the value store */
     private readonly unsyncedInputs: UnsyncedInputContainer;
@@ -10,21 +12,21 @@ export default class {
         { event: 'input', callback: (event) => this.handleInputEvent(event) },
     ];
 
-    constructor(element: HTMLElement, modelElementResolver: ModelElementResolver) {
-        this.element = element;
+    constructor(component: Component, modelElementResolver: ModelElementResolver) {
+        this.component = component;
         this.modelElementResolver = modelElementResolver;
         this.unsyncedInputs = new UnsyncedInputContainer();
     }
 
     activate(): void {
         this.elementEventListeners.forEach(({event, callback}) => {
-            this.element.addEventListener(event, callback);
+            this.component.element.addEventListener(event, callback);
         });
     }
 
     deactivate(): void {
         this.elementEventListeners.forEach(({event, callback}) => {
-            this.element.removeEventListener(event, callback);
+            this.component.element.removeEventListener(event, callback);
         });
     }
 
@@ -42,10 +44,9 @@ export default class {
     }
 
     private updateModelFromElement(element: Element) {
-        // TODO: put back this child element check
-        // if (!elementBelongsToThisController(element, this)) {
-        //     return;
-        // }
+        if (!elementBelongsToThisComponent(element, this.component)) {
+            return;
+        }
 
         if (!(element instanceof HTMLElement)) {
             throw new Error('Could not update model for non HTMLElement');

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

@@ -3,14 +3,16 @@ import { normalizeModelName } from '../string_utils';
 
 export default class {
     updatedModels: string[] = [];
+    private props: any = {};
     private data: any = {};
 
-    constructor(data: any) {
+    constructor(props: any, data: any) {
+        this.props = props;
         this.data = data;
     }
 
     /**
-     * Returns the data with the given name.
+     * Returns the data or props with the given name.
      *
      * This allows for non-normalized model names - e.g.
      * user[firstName] -> user.firstName and also will fetch
@@ -19,7 +21,13 @@ export default class {
     get(name: string): any {
         const normalizedName = normalizeModelName(name);
 
-        return getDeepData(this.data, normalizedName);
+        const result = getDeepData(this.data, normalizedName);
+
+        if (result !== undefined) {
+            return result;
+        }
+
+        return getDeepData(this.props, normalizedName);
     }
 
     has(name: string): boolean {
@@ -40,20 +48,11 @@ export default class {
         this.data = setDeepData(this.data, normalizedName, value);
     }
 
-    /**
-     * Checks if the given name/propertyPath is for a valid top-level key.
-     */
-    hasAtTopLevel(name: string): boolean {
-        const parts = name.split('.');
-
-        return this.data[parts[0]] !== undefined;
-    }
-
     all(): any {
-        return this.data;
+        return { ...this.props, ...this.data };
     }
 
-    reinitialize(data: any) {
+    reinitializeData(data: any) {
         this.data = data;
     }
 }

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

@@ -38,18 +38,19 @@ export default class Component {
 
     /**
      * @param element The root element
-     * @param data    Component data
+     * @param props   Readonly component props
+     * @param data    Modifiable component data/state
      * @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, id: string|null, backend: BackendInterface, modelElementResolver: ModelElementResolver) {
+    constructor(element: HTMLElement, props: any, 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.valueStore = new ValueStore(props, data);
+        this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, modelElementResolver);
         this.hooks = new HookManager();
         this.pollingDirector = new PollingDirectory(this);
     }
@@ -104,7 +105,7 @@ export default class Component {
         this.debouncedStartRequest(debounce);
     }
 
-    get(model: string): any {
+    getData(model: string): any {
         const modelName = normalizeModelName(model);
         if (!this.valueStore.has(modelName)) {
             throw new Error(`Invalid model "${model}".`);
@@ -266,7 +267,7 @@ export default class Component {
             (element: HTMLElement) => getValueFromElement(element, this.valueStore),
         );
         // TODO: could possibly do this by listening to the dataValue value change
-        this.valueStore.reinitialize(newDataFromServer);
+        this.valueStore.reinitializeData(newDataFromServer);
 
         // reset the modified values back to their client-side version
         Object.keys(modifiedModelValues).forEach((modelName) => {
@@ -388,7 +389,7 @@ export function proxifyComponent(component: Component): Component {
 
             // return model
             if (component.valueStore.has(prop)) {
-                return component.get(prop)
+                return component.getData(prop)
             }
 
             // try to call an action

src/LiveComponent/assets/src/data_manipulation_utils.ts

@@ -1,6 +1,10 @@
 export function getDeepData(data: any, propertyPath: string) {
     const { currentLevelData, finalKey } = parseDeepData(data, propertyPath);
 
+    if (currentLevelData === undefined) {
+        return undefined;
+    }
+
     return currentLevelData[finalKey];
 }
 

src/LiveComponent/assets/src/dom_utils.ts

@@ -1,7 +1,7 @@
 import ValueStore from './Component/ValueStore';
 import { Directive, parseDirectives } from './directives_parser';
-import { LiveController } from './live_controller';
 import { normalizeModelName } from './string_utils';
+import Component from "./Component";
 
 /**
  * Return the "value" of any given element.
@@ -152,32 +152,34 @@ export function getModelDirectiveFromElement(element: HTMLElement, throwOnMissin
 }
 
 /**
- * Does the given element "belong" to the given live controller.
+ * Does the given element "belong" to the given component.
  *
  * To "belong" the element needs to:
- *      A) Live inside the controller element (of course)
- *      B) NOT also live inside a child "live controller" element
+ *      A) Live inside the component element (of course)
+ *      B) NOT also live inside a child component
  */
-export function elementBelongsToThisController(element: Element, controller: LiveController): boolean {
-    // TODO fix this
-    return true;
-    if (controller.element !== element && !controller.element.contains(element)) {
+export function elementBelongsToThisComponent(element: Element, component: Component): boolean {
+    if (component.element === element) {
+        return true;
+    }
+
+    if (!component.element.contains(element)) {
         return false;
     }
 
-    let foundChildController = false;
-    controller.childComponentControllers.forEach((childComponentController) => {
-        if (foundChildController) {
+    let foundChildComponent = false;
+    component.getChildren().forEach((childComponent) => {
+        if (foundChildComponent) {
             // return early
             return;
         }
 
-        if (childComponentController.element === element || childComponentController.element.contains(element)) {
-            foundChildController = true;
+        if (childComponent.element === element || childComponent.element.contains(element)) {
+            foundChildComponent = true;
         }
     });
 
-    return !foundChildController;
+    return !foundChildComponent;
 }
 
 export function cloneHTMLElement(element: HTMLElement): HTMLElement {

src/LiveComponent/assets/src/live_controller.ts

@@ -6,7 +6,7 @@ import {
     getElementAsTagText,
     setValueOnElement,
     getValueFromElement,
-    elementBelongsToThisController,
+    elementBelongsToThisComponent,
 } from './dom_utils';
 import Component, {proxifyComponent} from "./Component";
 import Backend from "./Backend";
@@ -27,17 +27,24 @@ export interface LiveEvent extends CustomEvent {
     },
 }
 
-export default class LiveController extends Controller {
+export interface LiveController {
+    element: HTMLElement,
+    component: Component
+}
+
+export default class extends Controller<HTMLElement> implements LiveController {
     static values = {
         url: String,
         data: Object,
+        props: Object,
         csrf: String,
         debounce: { type: Number, default: 150 },
         id: String,
     }
 
     readonly urlValue!: string;
-    dataValue!: any;
+    readonly dataValue!: any;
+    readonly propsValue!: any;
     readonly csrfValue!: string;
     readonly hasDebounceValue: boolean;
     readonly debounceValue: number;
@@ -46,7 +53,7 @@ export default class LiveController extends Controller {
     /** The component, wrapped in the convenience Proxy */
     private proxiedComponent: Component;
     /** The raw Component object */
-    private component: Component;
+    component: Component;
 
     isConnected = false;
     pendingActionTriggerModelElement: HTMLElement|null = null;
@@ -60,15 +67,11 @@ export default class LiveController extends Controller {
     initialize() {
         this.handleDisconnectedChildControllerEvent = this.handleDisconnectedChildControllerEvent.bind(this);
 
-        if (!(this.element instanceof HTMLElement)) {
-            throw new Error('Invalid Element Type');
-        }
-
-
         const id = this.idValue || null;
 
         this.component = new Component(
             this.element,
+            this.propsValue,
             this.dataValue,
             id,
             new Backend(this.urlValue, this.csrfValue),
@@ -272,7 +275,7 @@ export default class LiveController extends Controller {
      *                  If not passed, the model will always be updated.
      */
     private updateModelFromElementEvent(element: Element, eventName: string|null) {
-        if (!elementBelongsToThisController(element, this)) {
+        if (!elementBelongsToThisComponent(element, this.component)) {
             return;
         }
 

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

@@ -29,6 +29,7 @@ describe('Component class', () => {
 
             const component = new Component(
                 document.createElement('div'),
+                {},
                 {firstName: ''},
                 null,
                 backend,
@@ -68,7 +69,7 @@ describe('Component class', () => {
             const { proxy } = makeDummyComponent();
             // @ts-ignore
             proxy.firstName = 'Ryan';
-            expect(proxy.get('firstName')).toBe('Ryan');
+            expect(proxy.getData('firstName')).toBe('Ryan');
         });
 
         it('calls an action on a component', async () => {