[TwigComponent] Twig linter does not recognize anonymous components

[ker0x]

When I run the following command

bin/console lint:twig templates/ --format=github

I got this message

Unknown component "common:atoms:badge:default". And no matching anonymous component template was found.

[weaverryan]

Ooooh, how odd. WDYT @WebMamba?

[WebMamba]

This looks expected since this commit: eeef204.
@ker0x do a quick check in your templates, to see if you have somewhere <twig:common:atoms:badge:default/>, if not please provide a reproducer, everything works as expected on my side.

[aszenz]

Faced the same issue after trying anonymous components.

Using the debugger i found that that ComponentTemplateFinder classes environment was using ArrayLoader and only contained the template where the anonymous component was used templates/ComponentShowcase/buttons/index.html.twig and not the actual component file templates/Component/Button.html.twig.

ux/src/TwigComponent/src/ComponentTemplateFinder.php

Line 22 in b47c679

private Environment $environment,

Causing this check to return false since the component file components/Button.html.twig wasn't found in the loader:

ux/src/TwigComponent/src/ComponentTemplateFinder.php

Lines 57 to 58 in b47c679

	if ($loader->exists($template)) {
	return $template;

Note: I was using <twig:Button> inside a twig macro defined in templates/ComponentShowcase/buttons/index.html.twig

[smnandre]

Hello @aszenz !

I cannot reproduce your problem, could you provide a minimal reproducer ?

What version of symfony/ux-twig-component are you using ?

[ebitkov]

Having the same error. Made a quick symfony repo to reproduce it:
https://github.com/ebitkov/symfony-ux-twig-component-lint-error

Running symfony console lint:twig throws an exception in ComponentFactory line 244.

Interestingly, if you leave the component empty (<twig:button/>) no error is thrown.

[smnandre]

Well i tried with your reproducer and

• there is a small typo, the template should be button.html.twig (you forgot the ".html" part) (this has no incidence on our matter)
• the component works and is displayed (2.12 or 2.x-dev with config)
• there is indeed a problem with the linter and i'm not sure why

If it's "only" a lint config problem i'm not too worried, but it's something we'll have to keep an eye on (and fix)..

If you cannot use the component it's something else i agree

[ebitkov]

@smnandre yes, the component works fine. So far the error only occurs when linting the templates (not sure, if @ker0x and @aszenz refer to the same bug, tho).

But it breaks my CI, which checks the templates before pushing to production. It's not "system breaking", but still annoying.

edit: the ".html" part is as far as I know a "best-practice" thing and shouldn't break anything. Because of that I actually didn't noticed the "typo", since it worked fine without :)

[smnandre]

But it breaks my CI, which checks the templates before pushing to production. It's not "system breaking", but still annoying.

I totally agree and i'd love to take a look when i have time.. In the meantime,if you have some time too, feel free to start one and i'll join you (or anyone here with a bit of time) !

the ".html" part is as far as I know a "best-practice" thing and shouldn't break anything. Because of that I actually didn't noticed the "typo", since it worked fine without :)

Just to give you a heads-up, in 2.13, with the new anonymous mapping system (optional, but will be the main system in 3.0), only the ".html.twig" will be mapped

[ker0x]

@smnandre yes, the component works fine. So far the error only occurs when linting the templates (not sure, if @ker0x and @aszenz refer to the same bug, tho).

Same here, components are working fine. It's just on linting them that I get errors.

[smnandre]

Could you test with next TwigComponent version ? (2.x-dev)

[smnandre]

Thank you @ker0x @aszenz & @ebitkov . All your messages helped me understand the problem(s).

There are in fact two different problems we need to address.

1/ Internal difference between function and tag

We do not check the component name during the compilation when called in {{ component('FooBarBaz') }} function, but we do when called in tag {% component 'FooBarBaz' %}

Self-closing "HTML" component are transformed into function call during prelex ... that's why you can type <twig:WhateverYouWant /> and it will always seem valid to the lint command.

On the contrary, every "tag" component is validated, so the componentFactory is called, allowing us to check the existence of the component. BUT...

2/ Runtime TemplateComponentFinder instanciation

During the lint, there is indeed a switch of Loader...

$realLoader = $this->twig->getLoader();
        try {
            $temporaryLoader = new ArrayLoader([$file => $template]);
            $this->twig->setLoader($temporaryLoader);
            $nodeTree = $this->twig->parse($this->twig->tokenize(new Source($template, $file)));
            $this->twig->compile($nodeTree);
            $this->twig->setLoader($realLoader);

https://github.com/symfony/symfony/blob/6.4/src/Symfony/Bridge/Twig/Command/LintCommand.php

So as the TemplateComponentFinder has not be instanciated before, when it call environment::getLoader(), the loader it uses then to check if a template exists... is the empty one set in the command.... which does not know the template.

We have a couple of options there, but i'd like to remove the Environment dependency, and replace it with a LoaderInterface (the twig.loader service), removing this kind of runtime-effect.

WDYT ?

[weaverryan]

That's some excellent deep diving :).

We have a couple of options there, but i'd like to remove the Environment dependency, and replace it with a LoaderInterface (the twig.loader service), removing this kind of runtime-effect.

What do you propose exactly?

[WebMamba]

Do you know the reason why we have a different loader ?

[smnandre]

We dont :) the code i showed come from the lint command, which swap the real loader with a minimal one for each template. And as the component template finder is not instanciated before…