[TwigComponent] Add `aware` tag

[seb-jean]

Hi,

This issue is a continuation of #2514.

I looked at how this was done for Laravel components. It uses an @aware directive to pass props from a parent component to a child component. This also allows us to say which props will be accessible or not for children. This works for self closing tags but also for opening and closing tags.

[WebMamba]

I think every component should be isolated as much as possible. You should not have components depending on the external context. Why not just use props?

[Kocal]

100% agree here, good components must stay isolated the more as possible.

[seb-jean]

The idea behind this is to avoid repeating the props on each child component like this:

<twig:Form:Row disabled>
    <twig:Form:Label disabled>Description</twig:Form:Label>
    <twig:Form:Textarea disabled />
    <twig:Form:Description disabled>Symfony UX Core Team is awesome!</twig:Form:Description>
</twig:Form:Row>

[smnandre]

So a sort of temporary data-store, during the render.

That would not be "passed down" but more... "available anywhere while the parent component is rendering" .. right ?

[smnandre]

@seb-jean : is the sample you provide a real-world one ? Like here, why would you need to "pass down" the disabled attribute ? (genuine question i'm looking for examples)

[seb-jean]

Here are some examples that inspired me:

• https://catalyst.tailwindui.com/docs/input#disabled-state
• https://catalyst.tailwindui.com/docs/checkbox#disabled-state

[smnandre]

Disabled can be set on the highest form element to disable everything below, not sure if this is a good example (checkbox disabled would need to be identified)

For the rest, have I understood correctly for the "inside share context" ?

[seb-jean]

Yes, you understood correctly :).

[Kocal]

So, something like https://vuejs.org/guide/components/provide-inject or https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree

[smnandre]

Hmm.. not exactly. I mean what i had in mind, but we could thing anything. Just be aware (pun intended) this will hurt our brain the second we need to prioritize things.

So what i had in mind was more the context for the content (so anything in Twig)

If i look at your examples and the one @Kocal shared, we are then speaking about mounting data as props.

So what would we what ?

[WebMamba]

What we can do is a bit inspired by React. It is to access the child's parent context via a variable.
So in your child, you could do something like this:

{{ parent.disabled }}

WDYT ?

[WebMamba]

But I am against giving the ability to share context between parent and child components directly. For the reasons explain above.

[seb-jean]

{{ parent.disabled }} is clean. However, it should not be only the direct parent.
What I found interesting for @aware is to make available the parent props on a case-by-case basis.

This is mainly to avoid adding props everywhere in the components. For my part, I find that it does not make the code easier to read to repeat the props. This is my point of view.