Component object data model

[weaverryan]

TODO (2) of symfony#500

This is all about establishing communication between a parent & child component. Suppose you have a parent form component with a $blogContent property. This component renders a child component (e.g. a reusable smart rich text editor) with a $value property.

The idea is that I want to pass my $blogContent property INTO the child as a prop called value. That can be done today, of course - e.g. {{ component('rich_editor', { value: blogContent }) }}. BUT, I also want that, when the value prop is modified by the end-user (e.g. they type into the rich text editor), that the new value is also set onto the parent component's blogContent prop. THAT's really what this feature is about.

Syntax to do this (from inside parent component's template):

{{ component('rich_editor', {
   'data-model': 'value:blogContent'
}) }}

Or simply 'data-model': 'blogContent' if your child prop is called value (it defaults to value).

To get this syntax/functionality, I'm looking at:

A) Vue https://vuejs.org/guide/components/events.html#usage-with-v-model

where <CustomComponent v-model="searchText"> is short for:

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

which translates to

1. "please pass a modelValue prop into the child set to the parent component's searchText
   and
2. When the modelValue changes inside the child, please set it onto the searchText prop on the parent

(note Vue used to use value as their default name with v-model but switched to modelValue - I'm not sure why).

B) From Alpine.js - x-modelable:

<div x-data="{ number: 5 }">
    <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
        <button @click="count++">Increment</button>
    </div>
 
    Number: <span x-text="number"></span>
</div>

the x-model and x-modelable translate to:

A) Grab the number data from the parent scope and make it available as count in the child
and
B) When count in the child updates, please update the number in the parent

Cheers!

[kbond]

Looks great!

[kbond]

Curious why you chose to put this in twig components? Is there value in having it here or just to make the transition from twig to live easier/consistent?

[kbond]

Suggested change

	final class ModeBindingParserTest extends TestCase
	final class ModelBindingParserTest extends TestCase

[kbond]

This should work w/o value:, right? Is this tested?

I see it's unit tested.

[kbond]

🤯 This is cool!