Possible feature proposal: Dynamic Twig Component

[Pechynho]

Possible feature proposal: Dynamic Twig Component

Hi,

I had a use case where I needed to render Twig Components dynamically, including support for content and named blocks.

For example:

<twig:DynamicComponent name="Button" class="my-button">
    Hello world
</twig:DynamicComponent>

which would be equivalent to:

<twig:Button class="my-button">
    Hello world
</twig:Button>

I ended up implementing this myself and I'm wondering whether this is something the project might be interested in supporting natively.

Current implementation:

ComponentRendererInterface

<?php

declare(strict_types=1);

namespace App\UX\TwigComponent\Contract;

interface ComponentRendererInterface
{
    /**
     * @param array<array-key, mixed> $props
     * @param array<string, string> $blocks
     */
    public function createAndRender(
        string $name,
        array $props = [],
        ?string $content = null,
        array $blocks = [],
    ): string;
}

ComponentRenderer

<?php

declare(strict_types=1);

namespace App\UX\TwigComponent;

use App\UX\TwigComponent\Contract\ComponentRendererInterface;
use Symfony\Component\DependencyInjection\Attribute\Autowire;
use Symfony\Component\Filesystem\Filesystem;
use Symfony\UX\TwigComponent\ComponentRendererInterface as SymfonyComponentRendererInterface;
use Twig\Environment;
use Twig\Loader\FilesystemLoader;

use function array_keys;
use function count;
use function dirname;
use function hash;
use function implode;
use function sort;
use function sprintf;

final readonly class ComponentRenderer implements ComponentRendererInterface
{
    private const string TWIG_TEMPLATE_NAMESPACE = 'ux.twig.dynamic_component';

    public function __construct(
        #[Autowire('%kernel.cache_dir%/dynamic_twig_components')]
        private string $cacheDir,
        private Filesystem $fs,
        private Environment $environment,
        #[Autowire(service: 'twig.loader.native_filesystem')]
        private FilesystemLoader $filesystemLoader,
        private SymfonyComponentRendererInterface $symfonyComponentRenderer,
    ) {}

    public function createAndRender(
        string $name,
        array $props = [],
        ?string $content = null,
        array $blocks = [],
    ): string {
        if ($content === null && $blocks === []) {
            return $this->symfonyComponentRenderer->createAndRender($name, $props);
        }

        $blockNames = array_keys($blocks);
        sort($blockNames);

        $cacheId = hash(
            algo: 'xxh3',
            data: $name
                . '|'
                . ($content !== null ? 'non-empty-content' : 'empty-content')
                . '|'
                . count($blocks)
                . '|'
                . implode('|', $blockNames),
        );

        $renderParams = ['content' => $content, 'props' => $props];
        $filename = sprintf('template.%s.html.twig', $cacheId);
        $path = sprintf('%s/%s', $this->cacheDir, $filename);

        if (!$this->fs->exists($path)) {
            $twig = sprintf('<twig:%s {{ ...props }}>', $name);

            if ($content !== null) {
                $twig .= $content;
                $twig .= '{{ content|raw }}';
            }

            foreach ($blocks as $blockName => $blockContent) {
                $paramName = sprintf('block_%s', $blockName);
                $renderParams[$paramName] = $blockContent;
                $twig .= sprintf('<twig:block name="%s">{{ %s|raw }}</twig:block>', $blockName, $paramName);
            }

            $twig .= sprintf('</twig:%s>', $name);

            $this->fs->dumpFile($path, $twig);
        }

        $template = sprintf('@%s/%s', self::TWIG_TEMPLATE_NAMESPACE, $filename);

        if (!$this->filesystemLoader->exists($template)) {
            $this->filesystemLoader->addPath(dirname($path), self::TWIG_TEMPLATE_NAMESPACE);
        }

        return $this->environment->render($template, $renderParams);
    }
}

DynamicComponent

<?php

declare(strict_types=1);

namespace App\UX\Components\DynamicComponent;

use App\UX\TwigComponent\Contract\ComponentRendererInterface;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent('DynamicComponent', '@components/DynamicComponent/DynamicComponent.html.twig')]
final class DynamicComponent
{
    public string $name;

    /** @var list<string> */
    public array $blocks = [];

    public function __construct(
        private readonly ComponentRendererInterface $componentRenderer,
    ) {}

    /**
     * @param array<array-key, mixed> $props
     * @param array<string, string> $blocks
     */
    public function render(
        array $props = [],
        ?string $content = null,
        array $blocks = [],
    ): string {
        return $this->componentRenderer->createAndRender($this->name, $props, $content, $blocks);
    }
}

DynamicComponent template

{%- set content = block('content') is defined ? block('content') : null -%}

{%- set blocksMap = {} -%}

{%- for blockName in blocks -%}
    {%- if block(blockName) is defined -%}
        {%- set blocksMap = blocksMap|merge({(blockName): block(blockName)}) -%}
    {%- endif -%}
{%- endfor -%}

{{- this.render(attributes.all, content, blocksMap)|raw -}}

Usage

<twig:DynamicComponent name="Button" class="my-button">
    Hello world
</twig:DynamicComponent>

The implementation also supports named blocks:

<twig:DynamicComponent name="Modal" blocks="{{ ['footer'] }}">
    Main content

    <twig:block name="footer">
        Footer content
    </twig:block>
</twig:DynamicComponent>

Internally, the renderer generates a Twig component invocation, caches it in the cache directory and renders it through the existing Twig Component infrastructure.

Before spending time polishing this and preparing a PR, I'd like to know whether maintainers see value in supporting dynamic Twig Components with content and named blocks, and whether a contribution in this area would be welcome.

[Kocal]

I would be in favor of a syntax similar to Vue (https://vuejs.org/guide/essentials/component-basics.html#dynamic-components):

<twig:Component is="MyComponentName">
...
</twig:Component>

I'm not sure why do you need a blocks props 🤔

Note that #3395 could be related

[Pechynho]

Yeah, #3395 looks like much better approach to this problem. Gonna keep eye on that :)