[TwigComponent] using verbatim tag to pass in content causes an SyntaxError

[jrushlow]

Reproducer: https://github.com/jrushlow/bug-demo-verbatim-in-twig
Stacktrace: https://github.com/jrushlow/bug-demo-verbatim-in-twig/blob/9c7e2df445193d2fa5ffd415763e57ed82d961f5/templates/base.html.twig#L70

Anonymous Component

// components/Code.html.twig
<p>{% block content %}{% endblock %}</p>

🆗 We can render that component by

// base.html.twig
<twig:Code>Howdy!</twig:Code>

⛔ We can trigger a Twig\Error\SyntaxError by doing:

// base.html.twig
<twig:Code>{% verbatim %}Howdy!{% endverbatim %}</twig:Code>

A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

❗ This works - but counterintuitive to how we use components

// base.html.twig
<twig:Code>{% block content %}{% verbatim %}Howdy!{% endverbatim %}{% endblock %}</twig:Code>

What context is the {% block content %}? E.g. are we creating a new content block in base.html.twig or are we redefining the existing content block that already exists in the component? Beats me... I'm still trying to sort that out..

---

I'm not sure if this is a twig/twig problem or a ux problem. Logically thinking - I would expect that when I use verbatim tags - under the hood:

• the content within the tag is not parsed (think of a "CodeBlock" component where we want to show twig syntax)
• the "result" of verbatim is passed to the component.
• the component renders the string provided in the content context

Thoughts?

[smnandre]

You should use endverbatim .. is this a typo in this message ?

[jrushlow]

Ha yes.. good catch - just a typo in the issues

[smnandre]

Without the "&#123&#123" in the template does it still fail .?

[jrushlow]

Ya, the &#123 escapes are just to show the literal { if you spinup the reproducer with symfony-cli and goto /

Referencing
https://github.com/jrushlow/bug-demo-verbatim-in-twig/blob/9c7e2df445193d2fa5ffd415763e57ed82d961f5/templates/base.html.twig#L14C29-L14C34
and
https://github.com/jrushlow/bug-demo-verbatim-in-twig/blob/9c7e2df445193d2fa5ffd415763e57ed82d961f5/templates/base.html.twig#L21

if you were to remove everything and just have a template with:

// tmp.html.twig
<twig:Code>
    {% verbatim %}
        {{ include('a-file') }}
    {% endverbatim %}
</twig:Code>

We'd still get the error

[smnandre]

So this is the same with embed, you'd have to use

        {% embed 'components/Code.html.twig' %}
            {% block content %}
                {% verbatim %}
                AA
                {% endverbatim %}
            {% endblock %}
        {% endembed %}

So clearly something is not interpreted correctly in the lexer, but i suggest you indeed use the weird but safe option in the meantime :)

// tmp.html.twig
<twig:Code>
    {% block content %}
      {% verbatim %}
          {{ include('a-file') }}
      {% endverbatim %}
    {% endblock %}
</twig:Code>