[TwigComponents] Render component using dynamically passed name

[Pechynho]

Hi,

I'm trying to render a Twig component using a dynamically passed name. Is there a way to achieve this in Twig? Here is an example of what I'm attempting to do:

{% set my_string = 'Modal' %}
{% component (my_string) with {type: 'success'} %}
    {% block content %}{{ ...content }}{% endblock %}
{% endcomponent %}

I want to be able to dynamically set the component name using the my_string variable. Any guidance or suggestions on how to accomplish this would be greatly appreciated!

Thank you!

[WebMamba]

Do you have an error or something when executing this? You can also do this:

{% set my_string = 'Modal' %}

{{ component(my_string, {
   type: 'success',
   content: ...content
})

but here you need to have your content in a props.

[smnandre]

@WebMamba is right, the only way to call component dynamically is with the component function.

Currently there is no possibility to embed content into components with dynamic name.

[seb-jean]

Maybe we could take inspiration from this: https://laravel.com/docs/11.x/blade#dynamic-components

[smnandre]

You can call dynamic component already. It's embedding a component that does not work

[seb-jean]

Sorry! ☺️

[tibobaldwin]

Inspired by what @seb-jean said, we could perhaps create a dynamic-component component like for icons and then use it with HTML Syntax.

Without content:

{% set component_name = 'Modal' %}

<twig:ux:dynamic-component component="{{ component_name }}" />

With content:

{% set component_name = 'Modal' %}

<twig:ux:dynamic-component component="{{ component_name }}">
    {{ block(outerBlocks.content) }}
</twig:ux:dynamic-component>

So the content can be passed with dynamic component names.

[smnandre]

This is not the real problem, for now the component tag does not allow dynamic bloc names.

The HTML syntax is only sugar on top of it

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Friendly reminder that this issue exists. If I don't hear anything I'll close this.

[Kocal]

Good timing, @Valmonzo recently asked me about dynamic component name, and I suggested the following syntaxes:

{{ component(componentName) }}
{% component (componentName) %}
<twig:component :is="componentName"/> {# like Vue.js #}

WDYT?

[smnandre]

{{ component(componentName) }}
{% component (componentName) %}

Both exist currently, at least the first, right ?

<twig:component :is="componentName"/>

This is something one can do locally in one line with an anonymous template. But not something -- personal opinion here -- should be promoted nor offered by the component.

If you can call many components like this, they are probably nothing more than a "include".

Until now, the idea has always been to offer features for component, not to offer a full alternative syntax to Twig. This could be done. And i see many reasons someone would like this. But I do not think TwigComponent are the place to do this.

As a new syntax could only be done "fully" by template, and would require not a PreLexer, but a custom Lexer. Again, doable. Even in a new UX package if someone wanted to code it.

I may be wrong here, or blind to some needs I don't see. So just in case I say it now explicitely: i have no definitive opinion here, and I can entirely change my mind... Also, my voice has only the limited weight it deserves. ;)

[Kocal]

I do not think {% component (componentName) %} exists, at least I don't find any implementation in ComponentTokenParser::componentName nor in tests.

If we make this doable, end-users could create a Twig template like this:

{% props is %}
{% component (is) with attributes %} (or with {...attributes} ..?)
    {% block content %}{% endblock %}
{% endcomponent %}

But what about other Twig blocks?

IMO, I would like to see:

1. implement dynamic component usage with {% component (componentName) %}
2. implement <twig:component is="...">, an internal component, that will simply map to {% component (is) with {...attributes} %}

WDYT?

[smnandre]

First I'd really like to understand the need.. as I have really no example coming to mind (not saying they do not exist!) where this would be anything but an include.

I mean i saw how one could code this anonymous, but i have not yet understood what is the final goal.. how would this be used in a template?

Secondly, you're absolutely right.

{% set foo = 'AlertBar' %}

{{ component(foo, {message: 'Message here'}) }}

This exist, the other one does not indeed.

I know remember I made it once --locally-- to try, but stopped there. Because it brings so many other problems, due to blocks, parent templates, etc.

So this could be done very quickly to be honest

<twig:component :is="componentName"/> 

This probably will never be doable

<twig:component :is ...>

</twig:component>

[Phil23]

It can actually be a very common scenario, for example, if you want to combine your component system with a CMS system, where more parts of the template are defined in data. Then you need to dynamically render components based on what is configured in that content data. We also stumbled over this at shopware.

[smnandre]

That does not really answer my point. How would you both not know the component name yet still know What to pass Into the component content block ?

If you know What blocs you pass into, that seems to say either you know What block it expects, or that all your component have the same blocks … then probably not need components for them… or is there something I don’t see here ?

Also, dont forget some things are philosophical, other are related to Twig.. it has its own Logic and block system we could entitely by pass, of course. But we would then lose so many features we rely on.

I was in the small team that released the new website of the company I work for.. its content & pages are entirely based on Storyblok for the headless/admin part, Symfony / Symfony UX (and a ton of TwigComponent) for the public/render part. And not once have we met this need.

What I am saying here is not your need is not real, what I am saying is I do not understand the scénario and would need very précise examples of What you are trying to do and why!

Then I may be able to help you more!

[Phil23]

I can provide you with more info. Acutally I tried to find a fix for the dynamic component names my self and already found a solution which seems a pretty easy change. I will try to create a PR if I have tested this further. Dynamic block names still to be figured out.

The use case I tried to describe is that if you use Twig Components as a template system for a CMS system where most of your page template is defined in data, you want to dynamically render templates based on what users configure in the CMS system. For example, in Shopware we have a page builder tool, where users can design pages in a visual editor, where they can place the elements within the layout and configure them. We are currently working on a new version of this tool including a new API for frontends to consume the designed pages.

Example data:

{
    "id": "123",
    "name": "Home",
    "elements": [
        {
        "id": "123",
        "component": "grid:container",
        "properties": {
            "columns": "2",
            "gap": "24",
            "align": "start",
            "alignContent": "start"
        },
        "slots": {
            "column-1": [
            {
                "id": "123",
                "component": "grid:column",
                "properties": {
                    "span": "1"
                },
                "slots": {
                "default": [
                    {
                    "id": "123",
                    "component": "text:text",
                    "properties": {
                        "text": "Hello World"
                    }
                    }
                ]
                }
            }
            ],
            "column-2": [
            {
                "id": "123",
                "component": "grid:column",
                "properties": {
                    "span": "2"
                },
                "slots": {
                "default": {
                    "id": "123",
                    "component": "media:image",
                    "properties": {
                    "media": "media/image.jpg"
                    }
                }
                }
            }
            ]
        }
        }
    ]
}

This could be data coming from a CMS system, which you would like to consume with a Twig frontend.

{% for element in page.elements %}
    {% component element.component with element.properties %}
        {# Block to be figured out #}
    {% endcomponent %}
{% endfor %}

I think it is a common scenario if you are using a CMS system, no only Shopware, but also systems like Contentful.