feature #1216 [Live] Throwing an error when setting an invalid model …

…name (weaverryan)

This PR was merged into the 2.x branch.

Discussion
----------

[Live] Throwing an error when setting an invalid model name

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | From a Slack conversation
| License       | MIT

Currently, if you use an invalid prop/model name in `data-model`, there is no error: the field is just silently *not* set. Now, we throw a clear error.

It's possible (?) that people were relying on this - notably if someone is using a `<form data-model="*">` to auto-map every form field as a model... but only some exist on their component. However, 99% of the time people are using that with a Symfony form + `ComponentWithFormTrait`, where that will not be an issue. And I think if you have `data-model="*"`, you are saying that *every* field is a prop. For the sake of DX, we should fail loudly and not let users make accidents.

Cheers!

Commits
-------

ed68c9c [Live] Throwing an error when setting an invalid model name

src/LiveComponent/assets/dist/live_controller.js

@@ -1799,6 +1799,9 @@ class Component {
     set(model, value, reRender = false, debounce = false) {
         const promise = this.nextRequestPromise;
         const modelName = normalizeModelName(model);
+        if (!this.valueStore.has(modelName)) {
+            throw new Error(`Invalid model name "${model}".`);
+        }
         const isChanged = this.valueStore.set(modelName, value);
         this.hooks.triggerHook('model:set', model, value, this);
         this.unsyncedInputsTracker.markModelAsSynced(modelName);

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

@@ -160,6 +160,10 @@ export default class Component {
     set(model: string, value: any, reRender = false, debounce: number|boolean = false): Promise<BackendResponse> {
         const promise = this.nextRequestPromise;
         const modelName = normalizeModelName(model);
+
+        if (!this.valueStore.has(modelName)) {
+            throw new Error(`Invalid model name "${model}".`);
+        }
         const isChanged = this.valueStore.set(modelName, value);
 
         this.hooks.triggerHook('model:set', model, value, this);

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

@@ -28,7 +28,7 @@ const makeTestComponent = (): { component: Component, backend: MockBackend } =>
     const component = new Component(
         document.createElement('div'),
         'test-component',
-        { firstName: '' },
+        { firstName: '', product: { name: '' } },
         [],
         () => [],
         null,
@@ -65,6 +65,14 @@ describe('Component class', () => {
             // @ts-ignore
             expect(await backendResponse?.getBody()).toEqual('<div data-live-props-value="{}"></div>');
         });
+
+        it('errors when an invalid model is passed', async () => {
+            const { component } = makeTestComponent();
+
+            // setting nested - totally ok
+            component.set('product.name', 'Ryan', false);
+            expect(() => { component.set('notARealModel', 'Ryan', false) }).toThrow('Invalid model name "notARealModel"');
+        });
     });
 
     describe('Proxy wrapper', () => {