bug #743 [Live] Fix nested props persisting (weaverryan)

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

Discussion
----------

[Live] Fix nested props persisting

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       |  None
| License       | MIT

A fix to the new, unreleased hydration system upgrade. Previously, if a nested value changed, we sent that value via Ajax on `updated` (e.g. `product.name: 'foo'`), but the that new value was not part of the `props` returned back. And so, on the next request, the new value (`foo`) was missing. Fortunately, this clarified that the system needed to be a bit simpler.

Cheers!

Commits
-------

f36514fd [Live] Fix nested props persisting

Author: fullstackdeveloperwebapp

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

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

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

@@ -1,17 +1,15 @@
 export default class {
     private props;
-    private nestedProps;
     private dirtyProps;
     private pendingProps;
-    constructor(props: any, nestedProps: any);
+    constructor(props: 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, nestedProps: any): void;
+    reinitializeAllProps(props: any): void;
     pushPendingPropsBackToDirty(): void;
     reinitializeProvidedProps(props: any): boolean;
 }

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

@@ -23,7 +23,7 @@ export default class Component {
     private children;
     private parent;
     private externalMutationTracker;
-    constructor(element: HTMLElement, props: any, nestedProps: any, fingerprint: string | null, id: string | null, backend: BackendInterface, elementDriver: ElementDriver);
+    constructor(element: HTMLElement, props: 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,10 +16,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     static values: {
         url: StringConstructor;
         props: ObjectConstructor;
-        nestedProps: {
-            type: ObjectConstructor;
-            default: {};
-        };
         csrf: StringConstructor;
         debounce: {
             type: NumberConstructor;
@@ -30,7 +26,6 @@ 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,13 +354,11 @@ const parseDeepData = function (data, propertyPath) {
 };
 
 class ValueStore {
-    constructor(props, nestedProps) {
+    constructor(props) {
         this.props = {};
-        this.nestedProps = {};
         this.dirtyProps = {};
         this.pendingProps = {};
         this.props = props;
-        this.nestedProps = nestedProps;
     }
     get(name) {
         const normalizedName = normalizeModelName(name);
@@ -370,8 +368,8 @@ class ValueStore {
         if (this.pendingProps[normalizedName] !== undefined) {
             return this.pendingProps[normalizedName];
         }
-        if (this.nestedProps[normalizedName] !== undefined) {
-            return this.nestedProps[normalizedName];
+        if (this.props[normalizedName] !== undefined) {
+            return this.props[normalizedName];
         }
         return getDeepData(this.props, normalizedName);
     }
@@ -390,19 +388,15 @@ 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, nestedProps) {
+    reinitializeAllProps(props) {
         this.props = props;
-        this.nestedProps = nestedProps;
         this.pendingProps = {};
     }
     pushPendingPropsBackToDirty() {
@@ -1727,7 +1721,7 @@ class ChildComponentWrapper {
     }
 }
 class Component {
-    constructor(element, props, nestedProps, fingerprint, id, backend, elementDriver) {
+    constructor(element, props, fingerprint, id, backend, elementDriver) {
         this.defaultDebounce = 150;
         this.backendRequest = null;
         this.pendingActions = [];
@@ -1740,7 +1734,7 @@ class Component {
         this.elementDriver = elementDriver;
         this.id = id;
         this.fingerprint = fingerprint;
-        this.valueStore = new ValueStore(props, nestedProps);
+        this.valueStore = new ValueStore(props);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
         this.hooks = new HookManager();
         this.resetPromise();
@@ -1833,7 +1827,7 @@ class Component {
         return children;
     }
     updateFromNewElement(toEl) {
-        const { props } = this.elementDriver.getComponentProps(toEl);
+        const props = this.elementDriver.getComponentProps(toEl);
         if (props === null) {
             return false;
         }
@@ -1934,8 +1928,8 @@ class Component {
             console.error('There was a problem with the component HTML returned:');
             throw error;
         }
-        const { props: newProps, nestedProps: newNestedProps } = this.elementDriver.getComponentProps(newElement);
-        this.valueStore.reinitializeAllProps(newProps, newNestedProps);
+        const newProps = this.elementDriver.getComponentProps(newElement);
+        this.valueStore.reinitializeAllProps(newProps);
         this.externalMutationTracker.handlePendingChanges();
         this.externalMutationTracker.stop();
         executeMorphdom(this.element, newElement, this.unsyncedInputsTracker.getUnsyncedInputs(), (element) => getValueFromElement(element, this.valueStore), Array.from(this.getChildren().values()), this.elementDriver.findChildComponentElement, this.elementDriver.getKeyFromElement, this.externalMutationTracker);
@@ -2154,13 +2148,9 @@ class StandardElementDriver {
         return modelDirective.action;
     }
     getComponentProps(rootElement) {
-        var _a, _b;
+        var _a;
         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),
-        };
+        return JSON.parse(propsJson);
     }
     findChildComponentElement(id, element) {
         return element.querySelector(`[data-live-id=${id}]`);
@@ -2585,7 +2575,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.nestedPropsValue, this.fingerprintValue, id, new Backend(this.urlValue, this.csrfValue), new StandardElementDriver());
+        this.component = new Component(this.element, this.propsValue, this.fingerprintValue, id, new Backend(this.urlValue, this.csrfValue), new StandardElementDriver());
         this.proxiedComponent = proxifyComponent(this.component);
         this.element.__component = this.proxiedComponent;
         if (this.hasDebounceValue) {
@@ -2744,7 +2734,6 @@ 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): { props: any, nestedProps: any };
+    getComponentProps(rootElement: HTMLElement): any;
 
     /**
      * Given an HtmlElement and a child id, find the root element for that child.
@@ -29,12 +29,8 @@ export class StandardElementDriver implements ElementDriver {
 
     getComponentProps(rootElement: HTMLElement): any {
         const propsJson = rootElement.dataset.livePropsValue ?? '{}';
-        const nestedPropsJson = rootElement.dataset.liveNestedPropsValue ?? '{}';
 
-        return {
-            props: JSON.parse(propsJson),
-            nestedProps: JSON.parse(nestedPropsJson),
-        }
+        return JSON.parse(propsJson);
     }
 
     findChildComponentElement(id: string, element: HTMLElement): HTMLElement|null {

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

@@ -9,13 +9,6 @@ export default class {
      */
     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.
      */
@@ -27,9 +20,8 @@ export default class {
      */
     private pendingProps: {[key: string]: any} = {};
 
-    constructor(props: any, nestedProps: any) {
+    constructor(props: any) {
         this.props = props;
-        this.nestedProps = nestedProps;
     }
 
     /**
@@ -50,8 +42,8 @@ export default class {
             return this.pendingProps[normalizedName];
         }
 
-        if (this.nestedProps[normalizedName] !== undefined) {
-            return this.nestedProps[normalizedName];
+        if (this.props[normalizedName] !== undefined) {
+            return this.props[normalizedName];
         }
 
         return getDeepData(this.props, normalizedName);
@@ -86,10 +78,6 @@ export default class {
         return { ...this.props };
     }
 
-    getOriginalNestedProps(): any {
-        return { ...this.nestedProps };
-    }
-
     getDirtyProps(): any {
         return { ...this.dirtyProps };
     }
@@ -105,9 +93,8 @@ export default class {
     /**
      * Called when an update request finishes successfully.
      */
-    reinitializeAllProps(props: any, nestedProps: any): void {
+    reinitializeAllProps(props: any): void {
         this.props = props;
-        this.nestedProps = nestedProps;
         this.pendingProps = {};
     }
 

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

@@ -64,20 +64,19 @@ export default class Component {
     /**
      * @param element The root element
      * @param props   Readonly component props
-     * @param nestedProps   Extra nested prop values that can be used as models
      * @param fingerprint
      * @param id      Some unique id to identify this component. Needed to be a child component
      * @param backend Backend instance for updating
      * @param elementDriver Class to get "model" name from any element.
      */
-    constructor(element: HTMLElement, props: any, nestedProps: any, fingerprint: string|null, id: string|null, backend: BackendInterface, elementDriver: ElementDriver) {
+    constructor(element: HTMLElement, props: any, fingerprint: string|null, id: string|null, backend: BackendInterface, elementDriver: ElementDriver) {
         this.element = element;
         this.backend = backend;
         this.elementDriver = elementDriver;
         this.id = id;
         this.fingerprint = fingerprint;
 
-        this.valueStore = new ValueStore(props, nestedProps);
+        this.valueStore = new ValueStore(props);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
         this.hooks = new HookManager();
         this.resetPromise();
@@ -230,7 +229,7 @@ export default class Component {
      * @param toEl
      */
     updateFromNewElement(toEl: HTMLElement): boolean {
-        const { props } = this.elementDriver.getComponentProps(toEl);
+        const props = this.elementDriver.getComponentProps(toEl);
 
         // 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
@@ -399,8 +398,8 @@ export default class Component {
             throw error;
         }
 
-        const { props: newProps, nestedProps: newNestedProps } = this.elementDriver.getComponentProps(newElement);
-        this.valueStore.reinitializeAllProps(newProps, newNestedProps);
+        const newProps = this.elementDriver.getComponentProps(newElement);
+        this.valueStore.reinitializeAllProps(newProps);
 
         // make sure we've processed all external changes before morphing
         this.externalMutationTracker.handlePendingChanges();

src/LiveComponent/assets/src/live_controller.ts

@@ -37,7 +37,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     static values = {
         url: String,
         props: Object,
-        nestedProps: { type: Object, default: {} },
         csrf: String,
         debounce: { type: Number, default: 150 },
         id: String,
@@ -46,7 +45,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
 
     declare readonly urlValue: string;
     declare readonly propsValue: any;
-    declare readonly nestedPropsValue: any;
     declare readonly csrfValue: string;
     declare readonly hasDebounceValue: boolean;
     declare readonly debounceValue: number;
@@ -72,7 +70,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         this.component = new Component(
             this.element,
             this.propsValue,
-            this.nestedPropsValue,
             this.fingerprintValue,
             id,
             new Backend(this.urlValue, this.csrfValue),

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

@@ -28,7 +28,6 @@ const makeTestComponent = (): { component: Component, backend: MockBackend } =>
     const component = new Component(
         document.createElement('div'),
         { firstName: '' },
-        {},
         null,
         null,
         backend,