[LiveComponent] Fix bug where writable path does not respect frontend "fieldName"

[norkunas]

I've installed ^2.x-dev to test live component but have some issues with it.
In this test repository I've added three test components with different configurations:

• test1: #[LiveProp(fieldName: 'data')]
  Access the form, click add/delete collection items, no errors. As soon as I try to enter a value to any input it fails with Invalid or missing checksum. This usually means that you tried to change a property that is not writable: true. (okay, so probably this is expected, as we need to expose what is writable)
• test2: #[LiveProp(fieldName: 'data', writable: true)]
  Access the form, immediately error is thrown: An exception has been thrown during the rendering of a template ("The LiveProp path "invoice" is an object that was dehydrated to an array *and* it is writable. That's not allowed. You probably want to set writable to only the properties on your class that should be writable (e.g. writable: ['name', 'price']).").
• test3: #[LiveProp(fieldName: 'data', writable: ['number', 'lineItems'])]
  Access the form, enter value to any input - same errors as in the first test.
  Adding a single item to collection works, adding one more or removing first one throws: The name "0.name" contains illegal characters. Names should start with a letter, digit or underscore and only contain letters, digits, numbers, underscores ("_"), hyphens ("-") and colons (":").

What I miss here to make it work?

[weaverryan]

Hey @norkunas!

Thanks for that awesome reproducer. I just merged #713 because it was quite related. After updating to the latest, things work "better", bit still not write :).

The correct code is test2. But, you've hit a case (dehydration to an array + writable) that I had purposely not supported (I couldn't think of a use-case... even though know it seems really obvious). Apparently I need to add support for that :). Fortunately, I think now that #713 is merged, it should pretty reasonable to do.

I wrote too quickly. test1 should be fine: your actual invoice property is not writable by the user, so it does not need writable: true. I think this is a simple mixup you're sending invoice.0.name data to the frontend, but that should be hydrated onto the formValues property from LiveComponentTrait. This looks like a small bug fix to me.

So let's keep the issue open until I do that.

Thanks!

[norkunas]

Thank you :)