Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
bernard-ng opened this issue Jul 24, 2023 · 9 comments · May be fixed by #1782
Open

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

bernard-ng opened this issue Jul 24, 2023 · 9 comments · May be fixed by #1782
Labels
Bug Bug Fix Stalled

Comments

@bernard-ng
Copy link

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
Copy link
Contributor

Isn't this fixed by #949 ?

@bernard-ng
Copy link
Author

@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
Copy link
Author

As alternative I've tried

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

result :

{{ component('DashliteHeader') }}

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

@bernard-ng
Copy link
Author

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

@bernard-ng
Copy link
Author

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
Copy link
Collaborator

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

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

@bernard-ng bernard-ng reopened this Jul 24, 2023
@bernard-ng bernard-ng changed the title [TwigComponent] The Component HTML syntax is not preserved when the verbatim tag is used. [TwigComponent] The Component HTML syntax is not preserved when printed as (raw) string Jul 24, 2023
@weaverryan weaverryan added the Bug Bug Fix label Jul 31, 2023
@carsonbot
Copy link

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?

bernard-ng added a commit to bernard-ng/symfony-ux that referenced this issue Apr 25, 2024
@bernard-ng
[TwigComponent] ingore content when printed as string symfony#1021
5eafce8
@bernard-ng bernard-ng linked a pull request Apr 25, 2024 that will close this issue
Open
@carsonbot
Copy link

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

@carsonbot
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Bug Fix Stalled
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[TwigComponent] ingore content when printed as string bernard-ng/symfony-ux
5 participants
@weaverryan @norkunas @carsonbot @bernard-ng @WebMamba