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

[arnolem]

UX Twig Component version

2.12

Description

When i define a custom twig template of a component, it's ok where I called the component with the classic syntax but it's not possible to find the template with the new twig:component syntax.

How to reproduce

composer req symfony/ux-twig-component

(Version v2.12.0)

1- Configure a new folder for Twig

# config/packages/twig.yaml
twig:
    paths:
        - '%kernel.project_dir%/templates'
        - '%kernel.project_dir%/components'

2- Configure PHP classes autoload (❗dump-autoload)

    "autoload": {
        "psr-4": {
            "App\\": "src/",
            "Component\\": "components/"
        }
    },

and

services:

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

3- Create a folder components/Button
4- Create a PHP file

<?php
namespace Component\Button;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent('button', template: 'button.twig')]
class ButtonComponent { }

5- Create a Twig file components/button.twig

<button>Wixiweb</button>

---

You can use this button like this :
{{ component('button') }}

But you cannot use this button like this :
<twig:button></twig:button>

Unable to find template "button.twig" (looked into: /templates, /components, /templates) in [home/index.twig at line 13]

---

From : symfony/symfony#52154

[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]

@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'
``à

[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 ?

[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.