[TwigComponent] Passing props from a parent component to a child with different HTML syntax

[seb-jean]

Hi,
I have a problem but I don't know if it's a bug or if it's an intended behavior :

I want to pass a props (for my example, the props is called disabled) from a parent component to the child component.

Props are passed when it is a component with a self-closing HTML syntax. For my example: <twig:Form:Label>Description</twig:Form:Label>
However, when it is a component with opening and closing tag HTML syntax, the props are not passed from the parent to the child. For my example <twig:Form:Textarea />

{# templates/index.html.twig #}

<twig:Form:Row disabled>
    <twig:Form:Label>Description</twig:Form:Label>
    <twig:Form:Textarea />
</twig:Form:Row>

{# templates/components/Form/Label.html.twig #}
{{ disabled }}  {# work #}

{# templates/components/Form/Textarea.html.twig #}
{{ disabled }}  {# not work #}

Is this normal?

[smnandre]

Not a bug, but something we could document better.

Self-closing component have better performance, isolation, and modern architecture.. embedding ones have more features and extension capacities :)

[Kocal]

Hi, this is caused by our TwigPreLexer, which behaves differently if the <twig:...> is self closing or not:

                if ($isSelfClosing) {
                    // use the simpler component() format, so that the system doesn't think
                    // this is an "embedded" component with blocks
                    // see https://github.com/symfony/ux/issues/810
                    $output .= "{{ component('{$componentName}'".($attributes ? ", { {$attributes} }" : '').') }}';
                } else {
                    $output .= "{% component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
                }

When the component is not self-closing, then it is replaced by {% component '...' with { disabled: ... } %}, without the only keyword.

To me, that's definitely an issue, when using components like Vue or React, you do not expect variables to be secretly passed down to your component.

[smnandre]

This is a feature, it has been asked for and documented :)

[Kocal]

So... it is broken by design? What about <twig:Form:Textarea /> vs <twig:Form:Textarea></twig:Form:Textarea>?

I don't see where it has been asked / documented, can you give me some hints please? 🙏🏻

[smnandre]

[ryanleichty]

when using components like Vue or React, you do not expect variables to be secretly passed down to your component.

But React gives you context and Vue gives you provide/inject (and most other component frameworks have an equivalent context provider). You miss out on a lot of compositional possibilities: #2522 (comment)