[TwigComponent] Unexpected Parsing Behavior When Rendering Twig Component Syntax

[ThibaultPelloquin]

Hello,

I have noticed a behavior that seems unexpected while trying to develop an interactive documentation using Twig in a project that utilizes UX Twig Components.

Versions affected

• twig/twig: v3.19.0
• symfony/ux-twig-component: v2.23.0
• symfony: 7.2.3

How to reproduce

1. Create a Twig template with the following content:

   <pre><code>{{ '<twig:DuckComponent name="Donald" color="white" quack="quack" />'|escape }}</code></pre>

2. Render the template.

What I expected

I expected the output to be a code block displaying:

<!-- but escaped -->
<pre><code><twig:DuckComponent name="Donald" color="white" quack="quack" /></code></pre>

What actually happens

Instead of rendering this expected string, I got this error:

Unexpected token "name" of value "DuckComponent" ("end of print statement" expected).

Stack trace:

at templates/dev/assets.html.twig:81
at Twig\TokenStream->expect(4)
(vendor/twig/twig/src/Parser.php:159)
at Twig\Parser->subparse(array(object(BlockTokenParser), 'decideBlockEnd'), true)
(vendor/twig/twig/src/TokenParser/BlockTokenParser.php:46)
at Twig\TokenParser\BlockTokenParser->parse(object(Token))
(vendor/twig/twig/src/Parser.php:202)
at Twig\Parser->subparse(null, false)
(vendor/twig/twig/src/Parser.php:95)
at Twig\Parser->parse(object(TokenStream))
(vendor/twig/twig/src/Environment.php:559)
at Twig\Environment->parse(object(TokenStream))
(vendor/twig/twig/src/Environment.php:590)
at Twig\Environment->compileSource(object(Source))
(vendor/twig/twig/src/Environment.php:409)
at Twig\Environment->loadTemplate('__TwigTemplate_6997921852dc7abcb36b116278776a66', 'dev/assets.html.twig')
(vendor/twig/twig/src/Environment.php:371)
at Twig\Environment->load('dev/assets.html.twig')
(vendor/twig/twig/src/Environment.php:334)

Workaround

If I escape th colon (:), in the component name, it prevents the error and renders what I expect:

<pre><code>{{ '<twig\:DuckComponent name="Donald" color="white" quack="quack" />'|escape }}</code></pre>

... but ...

Twig displays now a Deprecation:

User Deprecated: Since twig/twig 3.12: Character ":" should not be escaped; the "\" character is ignored in Twig 3 but will not be in Twig 4. Please remove the extra "\" character at position 7 in "dev/assets.html.twig" at line 96.

Question

Is my first test the true expected behavior?

Why does Twig attempt to interpret a string inside {{ ... }} as an actual Twig component instead of treating it as plain text?

Thank you so much for your answer. :-)

[smnandre]

Because TwigComponent use a PreLexer that comes before the Twig Lexer, in order to transliterate the HTML Syntax into classic Twig.

You can try this maybe ?

<pre><code>
    {{ '<' ~ 'twig:Alert message="lala" />' }}
</code></pre>

[ThibaultPelloquin]

Hi!

Sorry for the delayed response.

With ~, the issue remains exactly the same.

For the moment, the only solution I have is to replace the < by <.

This solution is not really satisfying, but I haven't found anything better... writing interactive documentation has become really complicated. --'

[smnandre]

Hmm it's weird, I just tried again and I have no problem with this

<pre><code>
{{ '<' ~ 'twig:Alert message="lala" />' }}
</code></pre>