[Twig] "Anonymous" components

Author: kbond

src/TwigComponent/src/ComponentRenderer.php

@@ -16,6 +16,7 @@
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 use Symfony\UX\TwigComponent\EventListener\PreRenderEvent;
 use Twig\Environment;
+use Twig\Error\LoaderError;
 use Twig\Extension\EscaperExtension;
 
 /**
@@ -25,24 +26,17 @@
  */
 final class ComponentRenderer
 {
-    private bool $safeClassesRegistered = false;
-
     public function __construct(
         private Environment $twig,
         private EventDispatcherInterface $dispatcher,
         private ComponentFactory $factory,
         private PropertyAccessorInterface $propertyAccessor
     ) {
+        $this->twig->getExtension(EscaperExtension::class)->addSafeClass(ComponentAttributes::class, ['html']);
     }
 
     public function render(MountedComponent $mounted): string
     {
-        if (!$this->safeClassesRegistered) {
-            $this->twig->getExtension(EscaperExtension::class)->addSafeClass(ComponentAttributes::class, ['html']);
-
-            $this->safeClassesRegistered = true;
-        }
-
         $component = $mounted->getComponent();
         $metadata = $this->factory->metadataFor($mounted->getName());
         $variables = array_merge(
@@ -65,6 +59,18 @@ public function render(MountedComponent $mounted): string
         return $this->twig->render($event->getTemplate(), $event->getVariables());
     }
 
+    public function renderAnonymous(string $template, array $data): string
+    {
+        // TODO configurable attributes - global option for anon components?
+        $data['attributes'] = new ComponentAttributes($data['attributes'] ?? []);
+
+        try {
+            return $this->twig->render($template, $data);
+        } catch (LoaderError) {
+            throw new \RuntimeException(); // todo user mistyped the component name, mistyped the component template, didn't autowire component...
+        }
+    }
+
     private function exposedVariables(object $component, bool $exposePublicProps): \Iterator
     {
         if ($exposePublicProps) {

src/TwigComponent/src/Twig/ComponentRuntime.php

@@ -11,8 +11,10 @@
 
 namespace Symfony\UX\TwigComponent\Twig;
 
+use Symfony\UX\TwigComponent\AnonymousComponent;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Symfony\UX\TwigComponent\ComponentRenderer;
+use Twig\Error\LoaderError;
 
 /**
  * @author Kevin Bond <[email protected]>
@@ -32,6 +34,11 @@ public function __construct(ComponentFactory $componentFactory, ComponentRendere
 
     public function render(string $name, array $props = []): string
     {
-        return $this->componentRenderer->render($this->componentFactory->create($name, $props));
+        try {
+            return $this->componentRenderer->render($this->componentFactory->create($name, $props));
+        } catch (\InvalidArgumentException) {
+            // component not found, try as anonymous component
+            return $this->componentRenderer->renderAnonymous($name, $props);
+        }
     }
 }

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -13,6 +13,7 @@
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Twig\Environment;
+use Twig\Error\RuntimeError;
 
 /**
  * @author Kevin Bond <[email protected]>
@@ -118,6 +119,41 @@ public function testCanDisableExposingPublicProps(): void
         $this->assertStringContainsString('NoPublicProp1: default', $output);
     }
 
+    public function testCanRenderAnonymousComponent(): void
+    {
+        $output = $this->renderComponent('components/with_attributes.html.twig', [
+            'prop' => 'prop value 1',
+            'attributes' => [
+                'class' => 'bar',
+                'style' => 'color:red;',
+                'value' => '',
+                'autofocus' => null,
+            ],
+        ]);
+
+        $this->assertStringContainsString('Component Content (prop value 1)', $output);
+        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;" value="" autofocus>', $output);
+
+        $output = $this->renderComponent('components/with_attributes.html.twig', [
+            'prop' => 'prop value 2',
+            'attributes' => [
+                'class' => 'baz',
+                'type' => 'submit',
+                'style' => 'color:red;',
+            ],
+        ]);
+
+        $this->assertStringContainsString('Component Content (prop value 2)', $output);
+        $this->assertStringContainsString('<button class="foo baz" type="submit" style="color:red;">', $output);
+    }
+
+    public function testInvalidAnonymousComponent(): void
+    {
+        $this->expectException(RuntimeError::class);
+
+        $this->renderComponent('invalid.html.twig');
+    }
+
     private function renderComponent(string $name, array $data = []): string
     {
         return self::getContainer()->get(Environment::class)->render('render_component.html.twig', [