Enable embedded live components

sneakyvv · sneakyvv · commit 19f28e324bbf · 2023-05-31T21:59:48.000+02:00
diff --git a/src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php b/src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php
@@ -47,10 +47,6 @@ public function onPreRender(PreRenderEvent $event): void
             return;
         }
 
-        if ($event->isEmbedded()) {
-            throw new \LogicException('Embedded components cannot be live.');
-        }
-
         $metadata = $event->getMetadata();
         $attributes = $this->getLiveAttributes($event->getMountedComponent(), $metadata);
         $variables = $event->getVariables();
@@ -60,8 +56,21 @@ public function onPreRender(PreRenderEvent $event): void
         // onto the variables. So, we manually merge our new attributes in and
         // override that variable.
         if (isset($variables[$attributesKey]) && $variables[$attributesKey] instanceof ComponentAttributes) {
+            $originalAttributes = $variables[$attributesKey]->all();
+
             // merge with existing attributes if available
-            $attributes = $attributes->defaults($variables[$attributesKey]->all());
+            $attributes = $attributes->defaults($originalAttributes);
+
+            if (isset($originalAttributes['data-host-template'], $originalAttributes['data-embedded-template-index'])) {
+                // This component is an embedded component, that's being re-rendered.
+                // We'll change the template that will be used to render it to
+                // the embedded template so that the blocks from that template
+                // will be used, if any, instead of the originals.
+                $event->setTemplate(
+                    $originalAttributes['data-host-template'],
+                    $originalAttributes['data-embedded-template-index'],
+                );
+            }
         }
 
         // "key" is a special attribute: don't actually render it
diff --git a/src/LiveComponent/src/Util/LiveControllerAttributesCreator.php b/src/LiveComponent/src/Util/LiveControllerAttributesCreator.php
@@ -80,6 +80,13 @@ public function attributesForRendering(MountedComponent $mounted, ComponentMetad
 
         $mountedAttributes = $mounted->getAttributes();
 
+        if ($mounted->hasExtraMetadata('hostTemplate') && $mounted->hasExtraMetadata('embeddedTemplateIndex')) {
+            $mountedAttributes = $mountedAttributes->defaults([
+                'data-host-template' => $mounted->getExtraMetadata('hostTemplate'),
+                'data-embedded-template-index' => $mounted->getExtraMetadata('embeddedTemplateIndex'),
+            ]);
+        }
+
         if ($isChildComponent) {
             if (!isset($mountedAttributes->all()['data-live-id'])) {
                 $id = $deterministicId ?: $this->idCalculator
diff --git a/src/LiveComponent/tests/Fixtures/templates/components/component2.html.twig b/src/LiveComponent/tests/Fixtures/templates/components/component2.html.twig
@@ -1,4 +1,6 @@
-<div{{ attributes }}>
+<div{{ attributes.defaults({class: 'component2'}) }} >
+    {% block content %}
     Count: {{ this.count }}
     PreReRenderCalled: {{ this.preReRenderCalled ? 'Yes' : 'No' }}
+    {% endblock %}
 </div>
diff --git a/src/LiveComponent/tests/Fixtures/templates/render_embedded_with_blocks.html.twig b/src/LiveComponent/tests/Fixtures/templates/render_embedded_with_blocks.html.twig
@@ -0,0 +1,6 @@
+{% component component2 %}
+    {% block content %}
+        {{ parent() }}
+        Embedded content with access to context, like count={{ this.count }}
+    {% endblock %}
+{% endcomponent %}
diff --git a/src/LiveComponent/tests/Fixtures/templates/render_multiple_embedded_with_blocks.html.twig b/src/LiveComponent/tests/Fixtures/templates/render_multiple_embedded_with_blocks.html.twig
@@ -0,0 +1,2 @@
+<div id="component1">{% component component2 %}{% block content %}Overridden content from component 1{% endblock %}{% endcomponent %}</div><div id="component2">{% component component2 %}{% block content %}Overridden content from component 2 on same line - count: {{ this.count }}{% endblock %}{% endcomponent %}</div>
+<div id="component3">Not overriding{% component component2 %}{% endcomponent %}</div>
diff --git a/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php b/src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php
@@ -32,6 +32,17 @@ final class LiveComponentSubscriberTest extends KernelTestCase
     use LiveComponentTestHelper;
     use ResetDatabase;
 
+    /**
+     * The deterministic id of the "component2" component in render_embedded_with_blocks.html.twig.
+     * If that template changes, this will need to be updated.
+     */
+    public const DETERMINISTIC_ID = 21098427781;
+    /**
+     * The deterministic id of the "component2" component in render_multiple_embedded_with_blocks.html.twig.
+     * If that template changes, this will need to be updated.
+     */
+    public const DETERMINISTIC_ID_MULTI_2 = 30904230242;
+
     public function testCanRenderComponentAsHtml(): void
     {
         $component = $this->mountComponent('component1', [
@@ -70,7 +81,15 @@ public function testCanRenderComponentAsHtmlWithAlternateRoute(): void
 
     public function testCanExecuteComponentActionNormalRoute(): void
     {
-        $dehydrated = $this->dehydrateComponent($this->mountComponent('component2'));
+        $dehydrated = $this->dehydrateComponent(
+            $this->mountComponent(
+                'component2',
+                [
+                    'data-host-template' => 'render_embedded_with_blocks.html.twig',
+                    'data-embedded-template-index' => self::DETERMINISTIC_ID,
+                ]
+            )
+        );
         $token = null;
 
         $this->browser()
@@ -90,6 +109,7 @@ public function testCanExecuteComponentActionNormalRoute(): void
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
             ->assertContains('Count: 2')
+            ->assertSee('Embedded content with access to context, like count=2')
         ;
     }
 
@@ -204,6 +224,67 @@ public function testPreReRenderHookOnlyExecutedDuringAjax(): void
         ;
     }
 
+    public function testItAddsEmbeddedTemplateContextToEmbeddedComponents(): void
+    {
+        $dehydrated = $this->dehydrateComponent(
+            $this->mountComponent(
+                'component2',
+                [
+                    'data-host-template' => 'render_embedded_with_blocks.html.twig',
+                    'data-embedded-template-index' => self::DETERMINISTIC_ID,
+                ]
+            )
+        );
+
+        $this->browser()
+            ->visit('/render-template/render_embedded_with_blocks')
+            ->assertSuccessful()
+            ->assertSee('PreReRenderCalled: No')
+            ->assertSee('Embedded content with access to context, like count=1')
+            ->assertSeeElement('.component2')
+            ->assertElementAttributeContains('.component2', 'data-live-props-value', '"data-host-template":"render_embedded_with_blocks.html.twig"')
+            ->assertElementAttributeContains('.component2', 'data-live-props-value', '"data-embedded-template-index":'.self::DETERMINISTIC_ID)
+            ->get('/_components/component2?props='.urlencode(json_encode($dehydrated->getProps())))
+            ->assertSuccessful()
+            ->assertSee('PreReRenderCalled: Yes')
+            ->assertSee('Embedded content with access to context, like count=1')
+        ;
+    }
+
+    public function testItUseBlocksFromEmbeddedContextUsingMultipleComponents(): void
+    {
+        $dehydrated = $this->dehydrateComponent(
+            $this->mountComponent(
+                'component2',
+                [
+                    'data-host-template' => 'render_multiple_embedded_with_blocks.html.twig',
+                    'data-embedded-template-index' => self::DETERMINISTIC_ID_MULTI_2,
+                ]
+            )
+        );
+
+        $token = null;
+
+        $this->browser()
+            ->visit('/render-template/render_multiple_embedded_with_blocks')
+            ->assertSuccessful()
+            ->assertSeeIn('#component1', 'Overridden content from component 1')
+            ->assertSeeIn('#component2', 'Overridden content from component 2 on same line - count: 1')
+            ->assertSeeIn('#component3', 'PreReRenderCalled: No')
+            ->use(function (Crawler $crawler) use (&$token) {
+                // get a valid token to use for actions
+                $token = $crawler->filter('div')->eq(1)->attr('data-live-csrf-value');
+            })
+            ->post('/_components/component2/increase', [
+                'headers' => ['X-CSRF-TOKEN' => $token],
+                'body' => json_encode(['props' => $dehydrated->getProps()]),
+            ])
+            ->assertSuccessful()
+            ->assertHeaderContains('Content-Type', 'html')
+            ->assertSee('Overridden content from component 2 on same line - count: 2')
+        ;
+    }
+
     public function testCanRedirectFromComponentAction(): void
     {
         $dehydrated = $this->dehydrateComponent($this->mountComponent('component2'));
diff --git a/src/LiveComponent/tests/Integration/EventListener/AddLiveAttributesSubscriberTest.php b/src/LiveComponent/tests/Integration/EventListener/AddLiveAttributesSubscriberTest.php
diff --git a/src/TwigComponent/src/ComponentRenderer.php b/src/TwigComponent/src/ComponentRenderer.php
@@ -58,7 +58,11 @@ public function render(MountedComponent $mounted): string
         $event = $this->preRender($mounted);
 
         try {
-            return $this->twig->render($event->getTemplate(), $event->getVariables());
+            return $this->twig->loadTemplate(
+                $this->twig->getTemplateClass($event->getTemplate()),
+                $event->getTemplate(),
+                $event->getTemplateIndex(),
+            )->render($event->getVariables());
         } finally {
             $this->componentStack->pop();
 
@@ -67,11 +71,15 @@ public function render(MountedComponent $mounted): string
         }
     }
 
-    public function embeddedContext(string $name, array $props, array $context): array
+    public function embeddedContext(string $name, array $props, array $context, string $hostTemplateName, int $index): array
     {
         $context[PreRenderEvent::EMBEDDED] = true;
 
-        return $this->preRender($this->factory->create($name, $props), $context)->getVariables();
+        $mounted = $this->factory->create($name, $props);
+        $mounted->addExtraMetadata('hostTemplate', $hostTemplateName);
+        $mounted->addExtraMetadata('embeddedTemplateIndex', $index);
+
+        return $this->preRender($mounted, $context)->getVariables();
     }
 
     private function preRender(MountedComponent $mounted, array $context = []): PreRenderEvent
diff --git a/src/TwigComponent/src/Event/PreRenderEvent.php b/src/TwigComponent/src/Event/PreRenderEvent.php
@@ -25,6 +25,8 @@ final class PreRenderEvent extends Event
 
     private string $template;
 
+    private ?int $templateIndex = null;
+
     /**
      * @internal
      */
@@ -52,17 +54,22 @@ public function getTemplate(): string
     /**
      * Change the twig template used.
      */
-    public function setTemplate(string $template): self
+    public function setTemplate(string $template, int $index = null): self
     {
-        if ($this->isEmbedded()) {
-            throw new \LogicException('Cannot modify template for embedded components.');
-        }
-
         $this->template = $template;
+        $this->templateIndex = $index;
 
         return $this;
     }
 
+    /**
+     * @return string The twig template index used for the component, in case it's an embedded template
+     */
+    public function getTemplateIndex(): ?int
+    {
+        return $this->templateIndex;
+    }
+
     public function getComponent(): object
     {
         return $this->mounted->getComponent();
diff --git a/src/TwigComponent/src/Twig/ComponentExtension.php b/src/TwigComponent/src/Twig/ComponentExtension.php
@@ -61,10 +61,10 @@ public function render(string $name, array $props = []): string
         }
     }
 
-    public function embeddedContext(string $name, array $props, array $context): array
+    public function embeddedContext(string $name, array $props, array $context, string $hostTemplateName, int $index): array
     {
         try {
-            return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context);
+            return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context, $hostTemplateName, $index);
         } catch (\Throwable $e) {
             $this->throwRuntimeError($name, $e);
         }
diff --git a/src/TwigComponent/src/Twig/ComponentNode.php b/src/TwigComponent/src/Twig/ComponentNode.php
@@ -35,21 +35,23 @@ public function compile(Compiler $compiler): void
         $compiler->addDebugInfo($this);
 
         $compiler
-            ->raw('$props = $this->extensions[')
+            ->write('$embeddedContext = $this->extensions[')
             ->string(ComponentExtension::class)
             ->raw(']->embeddedContext(')
             ->string($this->getAttribute('component'))
-            ->raw(', ')
-            ->raw('twig_to_array(')
+            ->raw(', twig_to_array(')
             ->subcompile($this->getNode('variables'))
             ->raw('), ')
             ->raw($this->getAttribute('only') ? '[]' : '$context')
+            ->raw(', ')
+            ->string($this->getAttribute('name'))
+            ->raw(', ')
+            ->raw($this->getAttribute('index'))
             ->raw(");\n")
         ;
 
         $this->addGetTemplate($compiler);
-
-        $compiler->raw('->display($props);');
+        $compiler->write('->display($embeddedContext);');
         $compiler->raw("\n");
     }
 }
diff --git a/src/TwigComponent/src/Twig/ComponentTokenParser.php b/src/TwigComponent/src/Twig/ComponentTokenParser.php
@@ -31,6 +31,8 @@ final class ComponentTokenParser extends AbstractTokenParser
     /** @var ComponentFactory|callable():ComponentFactory */
     private $factory;
 
+    private array $lineAndFileCounts = [];
+
     /**
      * @param callable():ComponentFactory $factory
      */
@@ -72,6 +74,9 @@ public function parse(Token $token): Node
 
         $this->parser->embedTemplate($module);
 
+        // use deterministic index for the embedded template, so it can be loaded in a controlled manner
+        $module->setAttribute('index', $this->generateEmbeddedTemplateIndex($stream->getSourceContext()->getName(), $token->getLine()));
+
         $stream->expect(Token::BLOCK_END_TYPE);
 
         return new ComponentNode($componentName, $module->getTemplateName(), $module->getAttribute('index'), $variables, $only, $token->getLine(), $this->getTag());
@@ -124,4 +129,14 @@ private function parseArguments(): array
 
         return [$variables, $only];
     }
+
+    private function generateEmbeddedTemplateIndex(string $file, int $line): int
+    {
+        $fileAndLine = sprintf('%s-%d', $file, $line);
+        if (!isset($this->lineAndFileCounts[$fileAndLine])) {
+            $this->lineAndFileCounts[$fileAndLine] = 0;
+        }
+
+        return crc32($fileAndLine).++$this->lineAndFileCounts[$fileAndLine];
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div id="component1">{% component component2 %}{% block content %}Overridden content from component 1{% endblock %}{% endcomponent %}</div><div id="component2">{% component component2 %}{% block content %}Overridden content from component 2 on same line - count: {{ this.count }}{% endblock %}{% endcomponent %}</div>`
	`2`	`+<div id="component3">Not overriding{% component component2 %}{% endcomponent %}</div>`
Original file line number	Diff line number	Diff line change
`@@ -61,10 +61,10 @@ public function render(string $name, array $props = []): string`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`		`- public function embeddedContext(string $name, array $props, array $context): array`
	`64`	`+ public function embeddedContext(string $name, array $props, array $context, string $hostTemplateName, int $index): array`
`65`	`65`	`{`
`66`	`66`	`try {`
`67`		`- return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context);`
	`67`	`+ return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context, $hostTemplateName, $index);`
`68`	`68`	`} catch (\Throwable $e) {`
`69`	`69`	`$this->throwRuntimeError($name, $e);`
`70`	`70`	`}`