[Twig] add embedded components

Author: kbond

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

@@ -34,6 +34,11 @@ public function onPreRender(PreRenderEvent $event): void
             return;
         }
 
+        if (method_exists($event, 'isEmbedded') && $event->isEmbedded()) {
+            // TODO: remove method_exists once min ux-twig-component version has this method
+            throw new \LogicException('Embedded components cannot be live.');
+        }
+
         $metadata = $event->getMetadata();
         $attributes = $this->getLiveAttributes($event->getMountedComponent(), $metadata);
         $variables = $event->getVariables();

src/TwigComponent/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.2
 
 -   Allow to pass stringable object as non mapped component attribute
+-   Add _embedded_ components.
 
 ## 2.1
 

src/TwigComponent/src/ComponentRenderer.php

@@ -49,7 +49,14 @@ public function render(MountedComponent $mounted): string
         return $this->twig->render($event->getTemplate(), $event->getVariables());
     }
 
-    private function preRender(MountedComponent $mounted): PreRenderEvent
+    public function embeddedContext(string $name, array $props, array $context): array
+    {
+        $context[PreRenderEvent::EMBEDDED] = true;
+
+        return $this->preRender($this->factory->create($name, $props), $context)->getVariables();
+    }
+
+    private function preRender(MountedComponent $mounted, array $context = []): PreRenderEvent
     {
         if (!$this->safeClassesRegistered) {
             $this->twig->getExtension(EscaperExtension::class)->addSafeClass(ComponentAttributes::class, ['html']);
@@ -60,6 +67,9 @@ private function preRender(MountedComponent $mounted): PreRenderEvent
         $component = $mounted->getComponent();
         $metadata = $this->factory->metadataFor($mounted->getName());
         $variables = array_merge(
+            // first so values can be overridden
+            $context,
+
             // add the component as "this"
             ['this' => $component],
 

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -67,6 +67,7 @@ class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %
         $container->register('ux.twig_component.twig.component_extension', ComponentExtension::class)
             ->addTag('twig.extension')
             ->addTag('container.service_subscriber', ['key' => ComponentRenderer::class, 'id' => 'ux.twig_component.component_renderer'])
+            ->addTag('container.service_subscriber', ['key' => ComponentFactory::class, 'id' => 'ux.twig_component.component_factory'])
         ;
     }
 }

src/TwigComponent/src/EventListener/PreRenderEvent.php

@@ -22,6 +22,9 @@
  */
 final class PreRenderEvent extends Event
 {
+    /** @internal */
+    public const EMBEDDED = '__embedded';
+
     private string $template;
 
     /**
@@ -35,6 +38,11 @@ public function __construct(
         $this->template = $this->metadata->getTemplate();
     }
 
+    public function isEmbedded(): bool
+    {
+        return $this->variables[self::EMBEDDED] ?? false;
+    }
+
     /**
      * @return string The twig template used for the component
      */
@@ -48,6 +56,10 @@ public function getTemplate(): string
      */
     public function setTemplate(string $template): self
     {
+        if ($this->isEmbedded()) {
+            throw new \LogicException('Cannot modify template for embedded components.');
+        }
+
         $this->template = $template;
 
         return $this;

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -13,6 +13,7 @@
 
 use Psr\Container\ContainerInterface;
 use Symfony\Contracts\Service\ServiceSubscriberInterface;
+use Symfony\UX\TwigComponent\ComponentFactory;
 use Symfony\UX\TwigComponent\ComponentRenderer;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
@@ -32,7 +33,10 @@ public function __construct(private ContainerInterface $container)
 
     public static function getSubscribedServices(): array
     {
-        return [ComponentRenderer::class];
+        return [
+            ComponentRenderer::class,
+            ComponentFactory::class,
+        ];
     }
 
     public function getFunctions(): array
@@ -42,8 +46,20 @@ public function getFunctions(): array
         ];
     }
 
+    public function getTokenParsers(): array
+    {
+        return [
+            new ComponentTokenParser(fn () => $this->container->get(ComponentFactory::class)),
+        ];
+    }
+
     public function render(string $name, array $props = []): string
     {
         return $this->container->get(ComponentRenderer::class)->createAndRender($name, $props);
     }
+
+    public function embeddedContext(string $name, array $props, array $context): array
+    {
+        return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context);
+    }
 }

src/TwigComponent/src/Twig/ComponentNode.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Symfony\UX\TwigComponent\Twig;
+
+use Twig\Compiler;
+use Twig\Node\EmbedNode;
+use Twig\Node\Expression\ArrayExpression;
+
+/**
+ * @author Fabien Potencier <fabien@symfony.com>
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @experimental
+ *
+ * @internal
+ */
+final class ComponentNode extends EmbedNode
+{
+    public function __construct(string $component, string $template, int $index, ArrayExpression $variables, bool $only, int $lineno, string $tag)
+    {
+        parent::__construct($template, $index, $variables, $only, false, $lineno, $tag);
+
+        $this->setAttribute('component', $component);
+    }
+
+    public function compile(Compiler $compiler): void
+    {
+        $compiler->addDebugInfo($this);
+
+        $compiler
+            ->raw('$props = $this->extensions[')
+            ->string(ComponentExtension::class)
+            ->raw(']->embeddedContext(')
+            ->string($this->getAttribute('component'))
+            ->raw(', ')
+            ->raw('twig_to_array(')
+            ->subcompile($this->getNode('variables'))
+            ->raw('), ')
+            ->raw($this->getAttribute('only') ? '[]' : '$context')
+            ->raw(");\n")
+        ;
+
+        $this->addGetTemplate($compiler);
+
+        $compiler->raw('->display($props);');
+        $compiler->raw("\n");
+    }
+}

src/TwigComponent/src/Twig/ComponentTokenParser.php

@@ -0,0 +1,120 @@
+<?php
+
+namespace Symfony\UX\TwigComponent\Twig;
+
+use Symfony\UX\TwigComponent\ComponentFactory;
+use Twig\Node\Expression\AbstractExpression;
+use Twig\Node\Expression\ArrayExpression;
+use Twig\Node\Expression\ConstantExpression;
+use Twig\Node\Expression\NameExpression;
+use Twig\Node\Node;
+use Twig\Token;
+use Twig\TokenParser\AbstractTokenParser;
+
+/**
+ * @author Fabien Potencier <fabien@symfony.com>
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @experimental
+ *
+ * @internal
+ */
+final class ComponentTokenParser extends AbstractTokenParser
+{
+    /** @var ComponentFactory|callable():ComponentFactory */
+    private $factory;
+
+    /**
+     * @param callable():ComponentFactory $factory
+     */
+    public function __construct(callable $factory)
+    {
+        $this->factory = $factory;
+    }
+
+    public function parse(Token $token): Node
+    {
+        $stream = $this->parser->getStream();
+        $parent = $this->parser->getExpressionParser()->parseExpression();
+        $componentName = $this->componentName($parent);
+        $componentMetadata = $this->factory()->metadataFor($componentName);
+
+        [$variables, $only] = $this->parseArguments();
+
+        if (null === $variables) {
+            $variables = new ArrayExpression([], $parent->getTemplateLine());
+        }
+
+        $parentToken = new Token(Token::STRING_TYPE, $componentMetadata->getTemplate(), $token->getLine());
+        $fakeParentToken = new Token(Token::STRING_TYPE, '__parent__', $token->getLine());
+
+        // inject a fake parent to make the parent() function work
+        $stream->injectTokens([
+            new Token(Token::BLOCK_START_TYPE, '', $token->getLine()),
+            new Token(Token::NAME_TYPE, 'extends', $token->getLine()),
+            $parentToken,
+            new Token(Token::BLOCK_END_TYPE, '', $token->getLine()),
+        ]);
+
+        $module = $this->parser->parse($stream, fn (Token $token) => $token->test("end{$this->getTag()}"), true);
+
+        // override the parent with the correct one
+        if ($fakeParentToken === $parentToken) {
+            $module->setNode('parent', $parent);
+        }
+
+        $this->parser->embedTemplate($module);
+
+        $stream->expect(Token::BLOCK_END_TYPE);
+
+        return new ComponentNode($componentName, $module->getTemplateName(), $module->getAttribute('index'), $variables, $only, $token->getLine(), $this->getTag());
+    }
+
+    public function getTag(): string
+    {
+        return 'component';
+    }
+
+    private function componentName(AbstractExpression $expression): string
+    {
+        if ($expression instanceof ConstantExpression) { // using {% component 'name' %}
+            return $expression->getAttribute('value');
+        }
+
+        if ($expression instanceof NameExpression) { // using {% component name %}
+            return $expression->getAttribute('name');
+        }
+
+        throw new \LogicException('Could not parse component name.');
+    }
+
+    private function factory(): ComponentFactory
+    {
+        if (\is_callable($this->factory)) {
+            $this->factory = ($this->factory)();
+        }
+
+        return $this->factory;
+    }
+
+    private function parseArguments(): array
+    {
+        $stream = $this->parser->getStream();
+
+        $variables = null;
+
+        if ($stream->nextIf(Token::NAME_TYPE, 'with')) {
+            $variables = $this->parser->getExpressionParser()->parseExpression();
+        }
+
+        $only = false;
+
+        if ($stream->nextIf(Token::NAME_TYPE, 'only')) {
+            $only = true;
+        }
+
+        $stream->expect(Token::BLOCK_END_TYPE);
+
+        return [$variables, $only];
+    }
+}