bug #721 [Live] Adding failing test case for updating individual parts of deeply writable paths (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Live] Adding failing test case for updating individual parts of deeply writable paths

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | Fix #720
| License       | MIT

In the unreleased code, writing a "deep" path to an array `LiveProp` is broken (e.g. `formValues` in `ComponentWithFormTrait` when you have an embedded form). Test case here, solution coming shortly.

Commits
-------

7954675 [Live] Adding failing test case for updating individual parts of deeply writable paths

Author: weaverryan

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

@@ -1,6 +1,9 @@
 export interface ElementDriver {
     getModelName(element: HTMLElement): string | null;
-    getComponentProps(rootElement: HTMLElement): any;
+    getComponentProps(rootElement: HTMLElement): {
+        props: any;
+        nestedProps: any;
+    };
     findChildComponentElement(id: string, element: HTMLElement): HTMLElement | null;
     getKeyFromElement(element: HTMLElement): string | null;
 }

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

@@ -1,18 +1,17 @@
 export default class {
-    private readonly identifierKey;
     private props;
+    private nestedProps;
     private dirtyProps;
     private pendingProps;
-    constructor(props: any);
+    constructor(props: any, nestedProps: any);
     get(name: string): any;
     has(name: string): boolean;
     set(name: string, value: any): boolean;
     getOriginalProps(): any;
+    getOriginalNestedProps(): any;
     getDirtyProps(): any;
     flushDirtyPropsToPending(): void;
-    reinitializeAllProps(props: any): void;
+    reinitializeAllProps(props: any, nestedProps: any): void;
     pushPendingPropsBackToDirty(): void;
     reinitializeProvidedProps(props: any): boolean;
-    private isPropNameTopLevel;
-    private findIdentifier;
 }

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

@@ -22,7 +22,7 @@ export default class Component {
     private nextRequestPromiseResolve;
     private children;
     private parent;
-    constructor(element: HTMLElement, props: any, fingerprint: string | null, id: string | null, backend: BackendInterface, elementDriver: ElementDriver);
+    constructor(element: HTMLElement, props: any, nestedProps: any, fingerprint: string | null, id: string | null, backend: BackendInterface, elementDriver: ElementDriver);
     _swapBackend(backend: BackendInterface): void;
     addPlugin(plugin: PluginInterface): void;
     connect(): void;

src/LiveComponent/assets/dist/live_controller.d.ts

@@ -16,6 +16,10 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     static values: {
         url: StringConstructor;
         props: ObjectConstructor;
+        nestedProps: {
+            type: ObjectConstructor;
+            default: {};
+        };
         csrf: StringConstructor;
         debounce: {
             type: NumberConstructor;
@@ -26,6 +30,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     };
     readonly urlValue: string;
     readonly propsValue: any;
+    readonly nestedPropsValue: any;
     readonly csrfValue: string;
     readonly hasDebounceValue: boolean;
     readonly debounceValue: number;

src/LiveComponent/assets/dist/live_controller.js

@@ -354,12 +354,13 @@ const parseDeepData = function (data, propertyPath) {
 };
 
 class ValueStore {
-    constructor(props) {
-        this.identifierKey = '@id';
+    constructor(props, nestedProps) {
         this.props = {};
+        this.nestedProps = {};
         this.dirtyProps = {};
         this.pendingProps = {};
         this.props = props;
+        this.nestedProps = nestedProps;
     }
     get(name) {
         const normalizedName = normalizeModelName(name);
@@ -369,14 +370,10 @@ class ValueStore {
         if (this.pendingProps[normalizedName] !== undefined) {
             return this.pendingProps[normalizedName];
         }
-        const value = getDeepData(this.props, normalizedName);
-        if (null === value) {
-            return value;
+        if (this.nestedProps[normalizedName] !== undefined) {
+            return this.nestedProps[normalizedName];
         }
-        if (this.isPropNameTopLevel(normalizedName) && typeof value === 'object' && value[this.identifierKey] !== undefined) {
-            return value[this.identifierKey];
-        }
-        return value;
+        return getDeepData(this.props, normalizedName);
     }
     has(name) {
         return this.get(name) !== undefined;
@@ -393,15 +390,19 @@ class ValueStore {
     getOriginalProps() {
         return Object.assign({}, this.props);
     }
+    getOriginalNestedProps() {
+        return Object.assign({}, this.nestedProps);
+    }
     getDirtyProps() {
         return Object.assign({}, this.dirtyProps);
     }
     flushDirtyPropsToPending() {
         this.pendingProps = Object.assign({}, this.dirtyProps);
         this.dirtyProps = {};
     }
-    reinitializeAllProps(props) {
+    reinitializeAllProps(props, nestedProps) {
         this.props = props;
+        this.nestedProps = nestedProps;
         this.pendingProps = {};
     }
     pushPendingPropsBackToDirty() {
@@ -411,24 +412,14 @@ class ValueStore {
     reinitializeProvidedProps(props) {
         let changed = false;
         for (const [key, value] of Object.entries(props)) {
-            const currentIdentifier = this.get(key);
-            const newIdentifier = this.findIdentifier(value);
-            if (currentIdentifier !== newIdentifier) {
+            const currentValue = this.get(key);
+            if (currentValue !== value) {
                 changed = true;
                 this.props[key] = value;
             }
         }
         return changed;
     }
-    isPropNameTopLevel(key) {
-        return key.indexOf('.') === -1;
-    }
-    findIdentifier(value) {
-        if (typeof value !== 'object' || value[this.identifierKey] === undefined) {
-            return value;
-        }
-        return value[this.identifierKey];
-    }
 }
 
 var DOCUMENT_FRAGMENT_NODE = 11;
@@ -1386,7 +1377,7 @@ class ChildComponentWrapper {
     }
 }
 class Component {
-    constructor(element, props, fingerprint, id, backend, elementDriver) {
+    constructor(element, props, nestedProps, fingerprint, id, backend, elementDriver) {
         this.defaultDebounce = 150;
         this.backendRequest = null;
         this.pendingActions = [];
@@ -1399,7 +1390,7 @@ class Component {
         this.elementDriver = elementDriver;
         this.id = id;
         this.fingerprint = fingerprint;
-        this.valueStore = new ValueStore(props);
+        this.valueStore = new ValueStore(props, nestedProps);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
         this.hooks = new HookManager();
         this.resetPromise();
@@ -1488,7 +1479,7 @@ class Component {
         return children;
     }
     updateFromNewElement(toEl) {
-        const props = this.elementDriver.getComponentProps(toEl);
+        const { props } = this.elementDriver.getComponentProps(toEl);
         if (props === null) {
             return false;
         }
@@ -1590,7 +1581,8 @@ class Component {
             throw error;
         }
         this.hooks.triggerHook('loading.state:finished', newElement);
-        this.valueStore.reinitializeAllProps(this.elementDriver.getComponentProps(newElement));
+        const { props: newProps, nestedProps: newNestedProps } = this.elementDriver.getComponentProps(newElement);
+        this.valueStore.reinitializeAllProps(newProps, newNestedProps);
         executeMorphdom(this.element, newElement, this.unsyncedInputsTracker.getUnsyncedInputs(), (element) => getValueFromElement(element, this.valueStore), Array.from(this.getChildren().values()), this.elementDriver.findChildComponentElement, this.elementDriver.getKeyFromElement);
         Object.keys(modifiedModelValues).forEach((modelName) => {
             this.valueStore.set(modelName, modifiedModelValues[modelName]);
@@ -1806,10 +1798,13 @@ class StandardElementDriver {
         return modelDirective.action;
     }
     getComponentProps(rootElement) {
-        if (!rootElement.dataset.livePropsValue) {
-            return null;
-        }
-        return JSON.parse(rootElement.dataset.livePropsValue);
+        var _a, _b;
+        const propsJson = (_a = rootElement.dataset.livePropsValue) !== null && _a !== void 0 ? _a : '{}';
+        const nestedPropsJson = (_b = rootElement.dataset.liveNestedPropsValue) !== null && _b !== void 0 ? _b : '{}';
+        return {
+            props: JSON.parse(propsJson),
+            nestedProps: JSON.parse(nestedPropsJson),
+        };
     }
     findChildComponentElement(id, element) {
         return element.querySelector(`[data-live-id=${id}]`);
@@ -2234,7 +2229,7 @@ class LiveControllerDefault extends Controller {
     initialize() {
         this.handleDisconnectedChildControllerEvent = this.handleDisconnectedChildControllerEvent.bind(this);
         const id = this.element.dataset.liveId || null;
-        this.component = new Component(this.element, this.propsValue, this.fingerprintValue, id, new Backend(this.urlValue, this.csrfValue), new StandardElementDriver());
+        this.component = new Component(this.element, this.propsValue, this.nestedPropsValue, this.fingerprintValue, id, new Backend(this.urlValue, this.csrfValue), new StandardElementDriver());
         this.proxiedComponent = proxifyComponent(this.component);
         this.element.__component = this.proxiedComponent;
         if (this.hasDebounceValue) {
@@ -2393,6 +2388,7 @@ class LiveControllerDefault extends Controller {
 LiveControllerDefault.values = {
     url: String,
     props: Object,
+    nestedProps: { type: Object, default: {} },
     csrf: String,
     debounce: { type: Number, default: 150 },
     id: String,

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

@@ -3,7 +3,7 @@ import {getModelDirectiveFromElement} from '../dom_utils';
 export interface ElementDriver {
     getModelName(element: HTMLElement): string|null;
 
-    getComponentProps(rootElement: HTMLElement): any;
+    getComponentProps(rootElement: HTMLElement): { props: any, nestedProps: any };
 
     /**
      * Given an HtmlElement and a child id, find the root element for that child.
@@ -28,11 +28,13 @@ export class StandardElementDriver implements ElementDriver {
     }
 
     getComponentProps(rootElement: HTMLElement): any {
-        if (!rootElement.dataset.livePropsValue) {
-            return null;
-        }
+        const propsJson = rootElement.dataset.livePropsValue ?? '{}';
+        const nestedPropsJson = rootElement.dataset.liveNestedPropsValue ?? '{}';
 
-        return JSON.parse(rootElement.dataset.livePropsValue as string);
+        return {
+            props: JSON.parse(propsJson),
+            nestedProps: JSON.parse(nestedPropsJson),
+        }
     }
 
     findChildComponentElement(id: string, element: HTMLElement): HTMLElement|null {

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

@@ -2,15 +2,20 @@ import { getDeepData } from '../data_manipulation_utils';
 import { normalizeModelName } from '../string_utils';
 
 export default class {
-    private readonly identifierKey = '@id';
-
     /**
-     * The original props passed to the component.
+     * Original, read-only props that represent the original component state.
      *
      * @private
      */
     private props: any = {};
 
+    /**
+     * A list of extra, nested props added to make them available as models.
+     *
+     * @private
+     */
+    private nestedProps: any = {};
+
     /**
      * A list of props that have been "dirty" (changed) since the last request to the server.
      */
@@ -22,8 +27,9 @@ export default class {
      */
     private pendingProps: {[key: string]: any} = {};
 
-    constructor(props: any) {
+    constructor(props: any, nestedProps: any) {
         this.props = props;
+        this.nestedProps = nestedProps;
     }
 
     /**
@@ -44,19 +50,11 @@ export default class {
             return this.pendingProps[normalizedName];
         }
 
-        const value = getDeepData(this.props, normalizedName);
-
-        if (null === value) {
-            return value;
+        if (this.nestedProps[normalizedName] !== undefined) {
+            return this.nestedProps[normalizedName];
         }
 
-        // if normalizedName is "top level" and value is an object,
-        // and the value has an "@id" key, then return the "@id" key.
-        if (this.isPropNameTopLevel(normalizedName) && typeof value === 'object' && value[this.identifierKey] !== undefined) {
-            return value[this.identifierKey];
-        }
-
-        return value;
+        return getDeepData(this.props, normalizedName);
     }
 
     has(name: string): boolean {
@@ -88,6 +86,10 @@ export default class {
         return { ...this.props };
     }
 
+    getOriginalNestedProps(): any {
+        return { ...this.nestedProps };
+    }
+
     getDirtyProps(): any {
         return { ...this.dirtyProps };
     }
@@ -102,11 +104,10 @@ export default class {
 
     /**
      * Called when an update request finishes successfully.
-     *
-     * @param props
      */
-    reinitializeAllProps(props: any): void {
+    reinitializeAllProps(props: any, nestedProps: any): void {
         this.props = props;
+        this.nestedProps = nestedProps;
         this.pendingProps = {};
     }
 
@@ -129,42 +130,22 @@ export default class {
      * The server manages returning only the readonly props, so we don't need to
      * worry about that.
      *
-     * If a prop is readonly, it will also include all of its "writable" paths
-     * data. So, that embedded, writable data *is* overwritten. For example,
-     * if the "user" data is currently { '@id': 123, firstName: 'Ryan' } and
-     * the "user" prop changes to "456", the new "user" prop passed here will
-     * be { '@id': 456, firstName: 'Kevin' }. This will overwrite the "firstName",
-     * writable embedded data.
-     *
      * Returns true if any of the props changed.
      */
     reinitializeProvidedProps(props: any): boolean {
         let changed = false;
 
         for (const [key, value] of Object.entries(props)) {
-            const currentIdentifier = this.get(key);
-            const newIdentifier = this.findIdentifier(value);
+            const currentValue = this.get(key);
 
-            // if the readonly identifier is different, then overwrite
-            // the prop entirely, including embedded writable data.
-            if (currentIdentifier !== newIdentifier) {
+            // if the readonly identifier is different, then overwrite the
+            // prop entirely
+            if (currentValue !== value) {
                 changed = true;
                 this.props[key] = value;
             }
         }
 
         return changed;
     }
-
-    private isPropNameTopLevel(key: string): boolean {
-        return key.indexOf('.') === -1;
-    }
-
-    private findIdentifier(value: any): any {
-        if (typeof value !== 'object' || value[this.identifierKey] === undefined) {
-            return value;
-        }
-
-        return value[this.identifierKey];
-    }
 }