feat(view): dynamic view components (#1169)

Author: brendt

src/Tempest/View/src/Components/DynamicViewComponent.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Tempest\View\Components;
+
+use Tempest\Container\Container;
+use Tempest\Core\AppConfig;
+use Tempest\View\Elements\ElementFactory;
+use Tempest\View\Elements\ViewComponentElement;
+use Tempest\View\GenericView;
+use Tempest\View\Parser\TempestViewCompiler;
+use Tempest\View\Parser\Token;
+use Tempest\View\ViewComponent;
+use Tempest\View\ViewConfig;
+use Tempest\View\ViewRenderer;
+
+final class DynamicViewComponent implements ViewComponent
+{
+    private Token $token;
+
+    public function __construct(
+        private AppConfig $appConfig,
+        private TempestViewCompiler $compiler,
+        private ElementFactory $elementFactory,
+        private ViewConfig $viewConfig,
+    ) {}
+
+    public function setToken(Token $token): void
+    {
+        $this->token = $token;
+    }
+
+    public static function getName(): string
+    {
+        return 'x-dynamic-component';
+    }
+
+    public function compile(ViewComponentElement $element): string
+    {
+        $name = $this->token->getAttribute('is') ?? $this->token->getAttribute(':is');
+        $isExpression = $this->token->getAttribute(':is') !== null;
+
+        return sprintf(
+            '<?php eval(\'?>\' . \Tempest\get(%s::class)->render(%s, %s)); ?>',
+            self::class,
+            $isExpression ? $name : "'{$name}'",
+            var_export($element->getAttributes(), true), // @mago-expect best-practices/no-debug-symbols
+        );
+    }
+
+    public function render(string $name, array $attributes): string
+    {
+        $viewComponent = $this->viewConfig->viewComponents[$name] ?? null;
+
+        $element = new ViewComponentElement(
+            environment: $this->appConfig->environment,
+            compiler: $this->compiler,
+            elementFactory: $this->elementFactory,
+            viewComponent: $viewComponent,
+            attributes: $attributes,
+        );
+
+        return $element->compile();
+    }
+}

src/Tempest/View/src/Elements/ElementFactory.php

@@ -7,6 +7,7 @@
 use Tempest\Container\Container;
 use Tempest\Core\AppConfig;
 use Tempest\View\Attributes\PhpAttribute;
+use Tempest\View\Components\DynamicViewComponent;
 use Tempest\View\Element;
 use Tempest\View\Parser\TempestViewCompiler;
 use Tempest\View\Parser\Token;
@@ -81,6 +82,11 @@ private function makeElement(Token $token, ?Element $parent): ?Element
         }
 
         if ($viewComponentClass = $this->viewConfig->viewComponents[$token->tag] ?? null) {
+            if ($token->getAttribute('is') || $token->getAttribute(':is')) {
+                $viewComponentClass = $this->container->get(DynamicViewComponent::class);
+                $viewComponentClass->setToken($token);
+            }
+
             if (! ($viewComponentClass instanceof ViewComponent)) {
                 $viewComponentClass = $this->container->get($viewComponentClass);
             }

src/Tempest/View/src/Elements/ViewComponentElement.php

@@ -4,7 +4,6 @@
 
 namespace Tempest\View\Elements;
 
-use Dom\HTMLDocument;
 use Tempest\Core\Environment;
 use Tempest\View\Element;
 use Tempest\View\Parser\TempestViewCompiler;
@@ -15,8 +14,6 @@
 use function Tempest\Support\arr;
 use function Tempest\Support\str;
 
-use const Dom\HTML_NO_DEFAULT_NS;
-
 final class ViewComponentElement implements Element
 {
     use IsElement;

tests/Integration/View/ViewComponentTest.php

@@ -777,6 +777,39 @@ public function test_nested_table_components(): void
         HTML, $html);
     }
 
+    public function test_dynamic_view_component_with_string_name(): void
+    {
+        $this->registerViewComponent('x-test', '<div>{{ $prop }}</div>');
+
+        $html = $this->render(<<<'HTML'
+        <x-component is="x-test" prop="test"/>
+        HTML);
+
+        $this->assertSame('<div>test</div>', $html);
+    }
+
+    public function test_dynamic_view_component_with_expression_name(): void
+    {
+        $this->registerViewComponent('x-test', '<div>{{ $prop }}</div>');
+
+        $html = $this->render(<<<'HTML'
+        <x-component :is="$name" prop="test" />
+        HTML, name: 'x-test');
+
+        $this->assertSame('<div>test</div>', $html);
+    }
+
+    public function test_dynamic_view_component_with_variable_attribute(): void
+    {
+        $this->registerViewComponent('x-test', '<div>{{ $prop }}</div>');
+
+        $html = $this->render(<<<'HTML'
+        <x-component :is="$name" :prop="$input" />
+        HTML, name: 'x-test', input: 'test');
+
+        $this->assertSame('<div>test</div>', $html);
+    }
+
     private function assertSnippetsMatch(string $expected, string $actual): void
     {
         $expected = str_replace([PHP_EOL, ' '], '', $expected);