Unable to find custom template for UX components with <twig:component> syntax

[arnolem]

Unable to find custom template for UX components with syntax

from ux.

[weaverryan]

I chatted about this with @smnandre. As he's done such a great job diving into this, I'm hoping he can get us a small PR (even a draft PR) to illustrate the changes he's imagining. It's tough to fully understand the problem for many of us without diving in super deep ourselves. And this is a very technical area :)

Related: due to this bug, the new defer attribute does NOT work if you use a tag with content - e.g. <twig:heavy-thing defer /> works, but <twig:heavy-thing defer></twig:heavy-thing> will render normally, not lazily.

[smnandre]

@StevenRenaux you did not register your component classes in services.yaml

Try with

services:
    # default configuration for services in *this* file
    _defaults:
        autowire: true      # Automatically injects dependencies in your services.
        autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.

    Component\:
        resource: '../components/'

    # makes classes in src/ available to be used as services
    # this creates a service per class whose id is the fully-qualified class name
    App\:
        resource: '../src/'
        exclude:
            - '../src/DependencyInjection/'
            - '../src/Entity/'
            - '../src/Kernel.php'
``à

[StevenRenaux]

@arnolem , @smnandre I made a reproducer and for me the problem could come from the naming of the components in template DIR.

https://github.com/StevenRenaux/triage_issue_52154

When it's button.twig it doesn't work but named button.html.twig it work well or maybe I didn't understand something for reproducing right.

Work as well with component registered and Class named well from the last commit.

[smnandre]

My working "reproducer" .. do you see anything different of your install @arnolem ?

https://github.com/smnandre/twig-button

[arnolem]

I added a few elements to be as close as possible to my use case and I have the problem.

👉 smnandre/twig-button#1

[smnandre]

So, there is indeed a problem, or at least something not documented.

Currently, it's not possible to change dynamically the template of a embed component (one with blocks inside).

It is possible today (in 2.12.0 and 2.x-dev), but only with the self-closing tags (similar to an include in Twig)

So with your configuration

{# OK - renders components/Button/button.twig #}
<twig:button />

{# OK - renders components/PrimaryButton/primary-button.html.twig #}
<twig:primary-button />

{# NOT OK - tries to render component/button.html.twig #}
<twig:button></twig:button>

{# NOT OK - tries to render component/primary-button.html.twig #}
<twig:primary-button></twig:primary-button>

It is something we are working on, but i cannot assure you will be able to dynamically change the embed components templates in the near future.

So for now I see two "working" solutions:

• use the self-closing tags & your subscriber
• write the full template in your attributes

Maybe some others with more experience may have another idea ?