Also dispatching the name="" attribute to the live:update-model event

This adds support for an element like <input data-model="foo" name="bar">.
In this situation, the "foo" model would be updated, but then both names
are dispatched in the event. This allows a parent component to, for example,
realize that its "bar" model should be updated.

also updating test to use embedded data

Author: weaverryan

src/LiveComponent/assets/src/live_controller.js

@@ -178,10 +178,27 @@ export default class extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
 
-        this.$updateModel(model, value, shouldRender);
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
     }
 
-    $updateModel(model, value, shouldRender = true) {
+    /**
+     * Update a model value.
+     *
+     * The extraModelName should be set to the "name" attribute of an element
+     * if it has one. This is only important in a parent/child component,
+     * where, in the child, you might be updating a "foo" model, but you
+     * also want this update to "sync" to the parent component's "bar" model.
+     * Typically, setup on a field like this:
+     *
+     *      <input data-model="foo" name="bar">
+     *
+     * @param {string} model The model update, which could include modifiers
+     * @param {any} value The new value
+     * @param {boolean} shouldRender Whether a re-render should be triggered
+     * @param {string|null} extraModelName Another model name that this might go by in a parent component.
+     * @param {Object} options Options include: {bool} dispatch
+     */
+    $updateModel(model, value, shouldRender = true, extraModelName = null, options = {}) {
         const directives = parseDirectives(model);
         if (directives.length > 1) {
             throw new Error(`The data-model="${model}" format is invalid: it does not support multiple directives (i.e. remove any spaces).`);
@@ -194,6 +211,7 @@ export default class extends Controller {
         }
 
         const modelName = normalizeModelName(directive.action);
+        const normalizedExtraModelName = extraModelName ? normalizeModelName(extraModelName) : null;
 
         // if there is a "validatedFields" data, it means this component wants
         // to track which fields have been / should be validated.
@@ -206,15 +224,14 @@ export default class extends Controller {
             this.dataValue = setDeepData(this.dataValue, 'validatedFields', validatedFields);
         }
 
-        if (!doesDeepPropertyExist(this.dataValue, modelName)) {
-            console.warn(`Model "${modelName}" is not a valid data-model value`);
+        if (options.dispatch !== false) {
+            this._dispatchEvent('live:update-model', {
+                modelName,
+                extraModelName: normalizedExtraModelName,
+                value,
+            });
         }
 
-        this._dispatchEvent('live:update-model', {
-            model: modelName,
-            value,
-        })
-
         // we do not send old and new data to the server
         // we merge in the new data now
         // TODO: handle edge case for top-level of a model with "exposed" props
@@ -577,11 +594,27 @@ export default class extends Controller {
     }
 
     _handleChildComponentUpdateModel(event) {
-        if (!doesDeepPropertyExist(this.dataValue, event.detail.model)) {
+        let matchingModelName = null;
+
+        if (doesDeepPropertyExist(this.dataValue, event.detail.modelName)) {
+            matchingModelName = event.detail.modelName;
+        } else if (doesDeepPropertyExist(this.dataValue, event.detail.extraModelName)) {
+            matchingModelName = event.detail.extraModelName;
+        }
+
+        if (matchingModelName === null) {
             return;
         }
 
-        this.$updateModel(event.detail.model, event.detail.value, false);
+        this.$updateModel(
+            matchingModelName,
+            event.detail.value,
+            false,
+            null,
+            {
+                dispatch: false
+            }
+        );
     }
 }
 

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

@@ -22,34 +22,41 @@ describe('LiveController parent -> child component tests', () => {
                 data-controller="live"
                 data-live-url-value="http://localhost/_components/parent"
             >
-                <span>Title: ${data.title}</span>
-                <span>Description in Parent: ${data.description}</span>
+                <span>Title: ${data.post.title}</span>
+                <span>Description in Parent: ${data.post.content}</span>
+
+                <input
+                    type="text"
+                    name="post[title]"
+                    value="${data.post.title}"
+                >
+
+                ${childTemplate({ value: data.post.content })}
 
                 <button
                     data-action="live#$render"
                 >Parent Re-render</button>
-
-                ${childTemplate({ description: data.description })}
             </div>
         `
     }
 
     const childTemplate = (data) => `
         <div
             data-controller="live"
-            data-live-url-value="http://localhost/_components/my_component"
+            data-live-url-value="http://localhost/_components/child"
         >
             <!-- form field not mapped with data-model -->
             <label>
-                Description:
+                Content:
                 <input
-                    value="${data.description}"
-                    data-model="description"
+                    value="${data.value}"
+                    data-model="value"
+                    name="post[content]"
                     data-action="live#update"
                 >
             </label>
 
-            <div>Description in child: ${data.description}</div>
+            <div>Value in child: ${data.value}</div>
 
             <button
                 data-action="live#$render"
@@ -75,60 +82,61 @@ describe('LiveController parent -> child component tests', () => {
     });
 
     it('renders parent component without affecting child component', async () => {
-        const data = { title: 'Parent component', description: 'i love components' };
+        const data = { post: { title: 'Parent component', content: 'i love components' } };
         const { element } = await startStimulusForParentChild(
             parentTemplate(data),
             data,
-            { description: data.description }
+            { value: data.post.content }
         );
 
-        // on child re-render, use a new description
-        fetchMock.get('http://localhost/_components/my_component?description=i+love+components', {
-            html: childTemplate({ description: 'i love popcorn' }),
-            data: { description: 'i love popcorn' }
+        // on child re-render, use a new content
+        fetchMock.get('http://localhost/_components/child?value=i+love+components', {
+            html: childTemplate({ value: 'i love popcorn' }),
+            data: { value: 'i love popcorn' }
         });
 
         // reload the child template
         getByText(element, 'Child Re-render').click();
-        await waitFor(() => expect(element).toHaveTextContent('Description in child: i love popcorn'));
+        await waitFor(() => expect(element).toHaveTextContent('Value in child: i love popcorn'));
 
         // on parent re-render, render the child template differently
-        fetchMock.get('http://localhost/_components/parent?title=Parent+component&description=i+love+components', {
-            html: parentTemplate({ title: 'Changed parent', description: 'changed child description' }),
-            data: { title: 'Changed parent', description: 'changed child description' }
+        fetchMock.get('begin:http://localhost/_components/parent', {
+            html: parentTemplate({ post: { title: 'Changed title', content: 'changed content' } }),
+            data: { post: { title: 'Changed title', content: 'changed content' } }
         });
         getByText(element, 'Parent Re-render').click();
-        await waitFor(() => expect(element).toHaveTextContent('Title: Changed parent'));
+        await waitFor(() => expect(element).toHaveTextContent('Title: Changed title'));
 
         // the child component should *not* have updated
-        expect(element).toHaveTextContent('Description in child: i love popcorn');
+        expect(element).toHaveTextContent('Value in child: i love popcorn');
     });
 
     it('updates child model and parent model in a deferred way', async () => {
-        const data = { title: 'Parent component', description: 'i love' };
+        const data = { post: { title: 'Parent component', content: 'i love' } };
         const { element, controller } = await startStimulusForParentChild(
             parentTemplate(data),
             data,
-            { description: data.description }
+            { value: data.post.content }
         );
 
         // verify the child request contains the correct description & re-render
-        fetchMock.get('http://localhost/_components/my_component?description=i+love+turtles', {
-            html: childTemplate({ description: 'i love turtles' }),
-            data: { description: 'i love turtles' }
+        fetchMock.get('http://localhost/_components/child?value=i+love+turtles', {
+            html: childTemplate({ value: 'i love turtles' }),
+            data: { value: 'i love turtles' }
         });
 
         // change the description in the child
-        const inputElement = getByLabelText(element, 'Description:');
+        const inputElement = getByLabelText(element, 'Content:');
         await userEvent.type(inputElement, ' turtles');
 
         // wait for the render to complete
-        await waitFor(() => expect(element).toHaveTextContent('Description in child: i love turtles'));
+        await waitFor(() => expect(element).toHaveTextContent('Value in child: i love turtles'));
 
         // the parent should not re-render
-        expect(element).not.toHaveTextContent('Description in parent: i love turtles');
-        // but the value DID update
-        expect(controller.dataValue.description).toEqual('i love turtles');
+        expect(element).not.toHaveTextContent('Content in parent: i love turtles');
+        // but the value DID update on the parent component
+        // this is because the name="post[content]" in the child matches the parent model
+        expect(controller.dataValue.post.content).toEqual('i love turtles');
     });
 
     // TODO - what if a child component re-renders and comes down with