Support passing blocks to nested embedded components

Author: sneakyvv

src/TwigComponent/src/Twig/ComponentNode.php

@@ -48,8 +48,7 @@ public function compile(Compiler $compiler): void
         ;
 
         $this->addGetTemplate($compiler);
-
-        $compiler->raw('->display($props);');
+        $compiler->raw('->display($props, $blocks);');
         $compiler->raw("\n");
     }
 }

src/TwigComponent/tests/Fixtures/Component/DivComponent.php

@@ -0,0 +1,28 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * @author Bart Vanderstukken <bart.vanderstukken@gmail.com>
+ */
+#[AsTwigComponent]
+final class DivComponent
+{
+    public string $divComponentName = 'foo';
+
+    public function someFunction(): string
+    {
+        return 'calling DivComponent';
+    }
+}

src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper.php

@@ -0,0 +1,28 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * @author Bart Vanderstukken <bart.vanderstukken@gmail.com>
+ */
+#[AsTwigComponent]
+final class DivComponentWrapper
+{
+    public string $divComponentWrapperName = 'bar';
+
+    public function someFunction(): string
+    {
+        return 'calling DivComponentWrapper';
+    }
+}

src/TwigComponent/tests/Fixtures/Component/GenericElement.php

@@ -0,0 +1,29 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * @author Bart Vanderstukken <bart.vanderstukken@gmail.com>
+ */
+#[AsTwigComponent]
+final class GenericElement
+{
+    public string $element;
+    public string $id = 'symfonyIsAwesome';
+
+    public function someFunction(): string
+    {
+        return 'calling GenericElement';
+    }
+}

src/TwigComponent/tests/Fixtures/templates/components/DivComponent.html.twig

@@ -0,0 +1,14 @@
+<twig:GenericElement element="div" class="divComponent">
+    {{ parent() }} It is accessible via the {{'{{'}} parent() {{'}}'}} function.
+    Of course you can add some extra content from the DivComponent component.
+
+    Did you know I can access the embedded template's context?
+    Yeah, the Generic Element's property "id" is "{{ id }}".
+    And the result of a function via `this` works too: {{ this.someFunction }}.
+
+    I can also access DivComponent's properties just like those of Generic Element. I know DivComponent's name is {{ divComponentName }}.
+
+    But note that I can not access the scope of the template embedding this component.
+    I can't tell you what "name={{ name ?? '' }}" should be, since this content is only used when you're NOT using embedding components
+    (aka a self closing twig tag, or a {{'{{'}} component {{'}}'}}'.
+</twig:GenericElement>

src/TwigComponent/tests/Fixtures/templates/components/DivComponentWrapper.html.twig

@@ -0,0 +1,3 @@
+<twig:DivComponent>
+    We can even do something crazy...
+</twig:DivComponent>

src/TwigComponent/tests/Fixtures/templates/components/GenericElement.html.twig

@@ -0,0 +1,5 @@
+<{{ element }}{{ attributes }}>
+    {%- block content -%}
+        The Generic Element could have some default content, although it does not make sense in this example.
+    {%- endblock -%}
+</{{ element }}>

src/TwigComponent/tests/Fixtures/templates/embedded_component_passthrough_blocks.html.twig

@@ -0,0 +1,18 @@
+{% set name = 'Fabien' %}
+
+<twig:DivComponent>Hello {{ name }}!</twig:DivComponent>
+
+<twig:DivComponent/>
+
+<twig:DivComponentWrapper/>
+
+<twig:DivComponentWrapper>
+    And pass the content along and along and along.
+    Btw even I can access the final block's context. I know that the id is {{ id }} as well!
+    And of course since DivComponentWrapper's content is rendered inside of a DivComponent element, I also know DivComponent's properties. Its name is {{ divComponentName }}!
+
+    Apart from the obvious access to DivComponentWrapper's properties, like its property "name": {{ divComponentWrapperName }}.
+
+    The less obvious thing is that even at this level "this" refers to the component where the content block is used, i.e. the Generic Element.
+    Therefore, functions through this will be {{ this.someFunction }}.
+</twig:DivComponentWrapper>

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -151,6 +151,36 @@ public function testCanRenderEmbeddedComponent(): void
         $this->assertStringContainsString('custom td (1)', $output);
     }
 
+    public function testCanPassBlocksToChildEmbeddedComponent(): void
+    {
+        $output = self::getContainer()->get(Environment::class)->render('embedded_component_passthrough_blocks.html.twig');
+
+        // variable available from outside context + content overriding default content two levels deep (aka passthrough)
+        $this->assertStringContainsString('<div class="divComponent">Hello Fabien!</div>', $output);
+        // usage of parent function
+        $this->assertStringContainsString('The Generic Element could have some default content, although it does not make sense in this example. It is accessible via the {{ parent() }} function.', $output);
+        // access to embedded component's properties from within overriding content block
+        $this->assertStringContainsString('Yeah, the Generic Element\'s property "id" is "symfonyIsAwesome"', $output);
+        // access to embedded component's functions from within overriding content block
+        $this->assertStringContainsString('And the result of a function via `this` works too: calling GenericElement.', $output);
+        // access to component's properties from within an embedded component
+        $this->assertStringContainsString('I can also access DivComponent\'s properties just like those of Generic Element. I know DivComponent\'s name is foo.', $output);
+        // access to component's properties from within an embedded component
+        $this->assertStringContainsString("But note that I can not access the scope of the template embedding this component.\n    I can't tell you what \"name=\" should be, since this content is only used when you're NOT using embedding components\n    (aka a self closing twig tag, or a {{ component }}", $output);
+        // wrapping component overriding content block with another default block
+        $this->assertStringContainsString('We can even do something crazy...', $output);
+        // wrapping component overriding content block three levels deep (aka passthrough)
+        $this->assertStringContainsString('And pass the content along and along and along.', $output);
+        // access to embedded component's properties from within overriding content block even at this level
+        $this->assertStringContainsString('Btw even I can access the final block\'s context. I know that the id is symfonyIsAwesome as well!', $output);
+        // access to second embedded component's properties from within overriding block
+        $this->assertStringContainsString('And of course since DivComponentWrapper\'s content is rendered inside of a DivComponent element, I also know DivComponent\'s properties. Its name is foo!', $output);
+        // access to first component's properties from within overriding block
+        $this->assertStringContainsString('Apart from the obvious access to DivComponentWrapper\'s properties, like its property "name": bar.', $output);
+        // this refers to the Component where the block is eventually shown
+        $this->assertStringContainsString("The less obvious thing is that even at this level \"this\" refers to the component where the content block is used, i.e. the Generic Element.\n    Therefore, functions through this will be calling GenericElement.", $output);
+    }
+
     public function testComponentWithNamespace(): void
     {
         $output = $this->renderComponent('foo:bar:baz');

src/TwigComponent/tests/Integration/ComponentFactoryTest.php

@@ -151,15 +151,15 @@ public function testCanGetMetadataForSameComponentWithDifferentName(): void
     public function testCannotGetConfigByNameForNonRegisteredComponent(): void
     {
         $this->expectException(\InvalidArgumentException::class);
-        $this->expectExceptionMessage('Unknown component "invalid". The registered components are: component_a');
+        $this->expectExceptionMessageMatches('/^Unknown component "invalid"\. The registered components are:.* component_a/');
 
         $this->factory()->metadataFor('invalid');
     }
 
     public function testCannotGetInvalidComponent(): void
     {
         $this->expectException(\InvalidArgumentException::class);
-        $this->expectExceptionMessage('Unknown component "invalid". The registered components are: component_a');
+        $this->expectExceptionMessageMatches('/^Unknown component "invalid"\. The registered components are:.* component_a/');
 
         $this->factory()->get('invalid');
     }