[TwigComponent] The Component HTML syntax is not preserved when printed as (raw) string

[bernard-ng]

The verbatim tag marks sections as being raw text that should not be parsed, but this is not the case when using the html syntax for components.

In my use case, I've created a bundle that generates dashboard code using twig components that I've defined in my bundle,

I want the generated code to have html syntax, but it doesn't, for exemple :

{% verbatim %}
<twig:DashliteResponsiveTable :data="data">
  <twig:block name="header">
      <twig:DashliteResponsiveTableColumn value="Nom" col />
      <twig:DashliteResponsiveTableColumn tools />
  </twig:block>

    <twig:DashliteResponsiveTableColumn :value="item.name" />
    <twig:DashliteResponsiveTableColumn tools>
        <twig:DashliteResponsiveTableAction path="" icon="edit" />
        <twig:DashliteDeleteButton path="" :item="item" />
    </twig:DashliteResponsiveTableColumn>
</twig:DashliteResponsiveTable>
{% endverbatim %}

renders

{% component 'DashliteResponsiveTable' with { data: data } %}
    {% block header %}
        {{ component('DashliteResponsiveTableColumn', { value: 'Nom', col: true }) }}
        {{ component('DashliteResponsiveTableColumn', { tools: true }) }}
    {% endblock %}

    {% block content %}
        {{ component('DashliteResponsiveTableColumn', { value: item.name }) }}
        {% component 'DashliteResponsiveTableColumn' with { tools: true } %}
            {% block content %}
                {{ component('DashliteResponsiveTableAction', { path: , icon: 'edit' }) }}
                {{ component('DashliteDeleteButton', { path: , item: item }) }}
            {% endblock %}
        {% endcomponent %}
    {% endblock %}
{% endcomponent %}

excepted result :

<twig:DashliteResponsiveTable :data="data">
  <twig:block name="header">
      <twig:DashliteResponsiveTableColumn value="Nom" col />
      <twig:DashliteResponsiveTableColumn tools />
  </twig:block>

    <twig:DashliteResponsiveTableColumn :value="item.name" />
    <twig:DashliteResponsiveTableColumn tools>
        <twig:DashliteResponsiveTableAction path="" icon="edit" />
        <twig:DashliteDeleteButton path="" :item="item" />
    </twig:DashliteResponsiveTableColumn>
</twig:DashliteResponsiveTable>

how can I keep this syntax when generating code using twig itself?

if this requires a PR I'd be happy to contribute just give me instructions and what I can do

Thanks.

[norkunas]

Isn't this fixed by #949 ?

[bernard-ng]

@norkunas it should be!

but it doesn't seem to be the case with me, my bundle generates code from a file A, this file A is a template that uses the verbatim tag, to get a file B

protected function createFile(string $template, array $params, string $output, bool $force = false): void
{
    $content = $this->twig->render("@DevscastDdd/maker/{$template}.twig", $params);
    $filename = "{$this->projectDir}/{$output}";

    if (! file_exists(dirname($filename))) {
        mkdir($directory, 0777, true);
    }

    if (file_exists($filename) && ! $force) {
        $this->io->error(sprintf('Skipped : File %s already exists', $filename));
    } else {
        file_put_contents($filename, $content);
    }
}

here's how I generate the file

[bernard-ng]

As alternative I've tried

{{ "<twig:DashliteHeader />" | raw }}

result :

{{ component('DashliteHeader') }}

Still not working for me, (my use case is code generation)

[bernard-ng]

fixed : upgraded from 2.9 to 2.10, but raw filter is still not working

[bernard-ng]

for reference : if you encounter the same issue for the same needs, you can ignore component transformation when they are printed by patching the TwigPreLexer

if ($this->consume('{{')) {
    $output .= '{{';
    $output .= $this->consumeUntil('}}');
    $this->consume('}}');
    $output.= '}}';

    if ($this->position === $this->length) {
        break;
    }
}

[WebMamba]

@bernard-ng can you reopen this issue? I think we should fixed what you tried here:

As alternative I've tried
{{ "<twig:DashliteHeader />" | raw }}

[carsonbot]

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

[carsonbot]

Hello? This issue is about to be closed if nobody replies.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!