From e618111be0ca71dea01cd58064538c88bb333d35 Mon Sep 17 00:00:00 2001 From: sneakyvv Date: Sun, 11 Jun 2023 21:01:39 +0200 Subject: [PATCH] [TwigComponent] Add variable to refer outer scope when rendering embedded components --- src/TwigComponent/doc/index.rst | 40 +++++++++++++++++++ src/TwigComponent/src/ComponentRenderer.php | 3 ++ .../Component/DivComponentWrapper.php | 6 --- .../Component/DivComponentWrapper3.php | 28 +++++++++++++ .../components/DivComponent5.html.twig | 1 + .../components/DivComponentWrapper3.html.twig | 9 +++++ ...mbedded_component_blocks_context.html.twig | 13 +++--- ...ed_component_hierarchy_exception.html.twig | 3 ++ .../Integration/EmbeddedComponentTest.php | 9 ++++- 9 files changed, 99 insertions(+), 13 deletions(-) create mode 100644 src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper3.php create mode 100644 src/TwigComponent/tests/Fixtures/templates/components/DivComponentWrapper3.html.twig create mode 100644 src/TwigComponent/tests/Fixtures/templates/embedded_component_hierarchy_exception.html.twig diff --git a/src/TwigComponent/doc/index.rst b/src/TwigComponent/doc/index.rst index 21f036a49b9..00d29d138f5 100644 --- a/src/TwigComponent/doc/index.rst +++ b/src/TwigComponent/doc/index.rst @@ -951,6 +951,46 @@ When overriding the ``alert_message`` block, you have access to the ``message`` {% endblock %} {% endcomponent %} + +.. versionadded:: 2.12 + + The ability to refer to the scope of higher components via the ``outerScope`` variable was added in 2.12. + +As mentioned before, variables from lower components are merged with those from upper components. When you need +access to some properties or functions from higher components, that can be done via the ``outerScope...`` variable: + +.. code-block:: twig + + {# templates/SuccessAlert.html.twig #} + {% set name = 'Fabien' %} + {% set message = 'Hello' %} + {% component Alert with { type: 'success', name: 'Bart' } %} + Hello {{ name }} {# Hello Bart #} + + {{ message }} {{ outerScope.name }} {# Hello Fabien #} + + {{ outerScope.this.someFunction }} {# this refers to SuccessAlert #} + + {{ outerScope.this.someProp }} {# references a "someProp" prop from SuccessAlert #} + {% endcomponent %} + +You can keep referring to components higher up as well. Just add another ``outerScope``. +Remember though that the ``outerScope`` reference only starts once you're INSIDE the (embedded) component. + +.. code-block:: twig + + {# templates/FancyProfileCard.html.twig #} + {% component Card %} + {% block header %} + {% component Alert with { message: outerScope.this.someProp } %} {# not yet INSIDE the Alert template #} + {% block content %} + {{ message }} {# same value as below, indirectly refers to FancyProfileCard::someProp #} + {{ outerScope.outerScope.this.someProp }} {# directly refers to FancyProfileCard::someProp #} + {% endblock %} + {% endcomponent %} + {% endblock %} + {% endcomponent %} + Component HTML Syntax --------------------- diff --git a/src/TwigComponent/src/ComponentRenderer.php b/src/TwigComponent/src/ComponentRenderer.php index bd7ba4cdd14..c8f3683f362 100644 --- a/src/TwigComponent/src/ComponentRenderer.php +++ b/src/TwigComponent/src/ComponentRenderer.php @@ -121,6 +121,9 @@ private function preRender(MountedComponent $mounted, array $context = []): PreR // first so values can be overridden $context, + // keep reference to old context + ['outerScope' => $context], + // add the component as "this" ['this' => $component], diff --git a/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper.php b/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper.php index cde65781fbf..880160e57a3 100644 --- a/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper.php +++ b/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper.php @@ -19,10 +19,4 @@ #[AsTwigComponent] final class DivComponentWrapper { - public string $divComponentWrapperName = 'bar'; - - public function someFunction(): string - { - return 'calling DivComponentWrapper'; - } } diff --git a/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper3.php b/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper3.php new file mode 100644 index 00000000000..f6223583fc0 --- /dev/null +++ b/src/TwigComponent/tests/Fixtures/Component/DivComponentWrapper3.php @@ -0,0 +1,28 @@ + + * + * 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 + */ +#[AsTwigComponent] +final class DivComponentWrapper3 +{ + public string $divComponentWrapperName = 'bar'; + + public function someFunction(): string + { + return 'calling DivComponentWrapper'; + } +} diff --git a/src/TwigComponent/tests/Fixtures/templates/components/DivComponent5.html.twig b/src/TwigComponent/tests/Fixtures/templates/components/DivComponent5.html.twig index afbfbadb0b5..5100af66bd2 100644 --- a/src/TwigComponent/tests/Fixtures/templates/components/DivComponent5.html.twig +++ b/src/TwigComponent/tests/Fixtures/templates/components/DivComponent5.html.twig @@ -2,6 +2,7 @@ I can access my own properties: {{ divComponentName }}. I can access the id of the Generic Element: {{ id }}. This refers to the Generic Element: {{ this.someFunction }}. + To access my own functions I can use outerScope.this: {{ outerScope.this.someFunction }}. I have access to outer context variables like {{ name }}. {{ block(outerBlocks.content) }} diff --git a/src/TwigComponent/tests/Fixtures/templates/components/DivComponentWrapper3.html.twig b/src/TwigComponent/tests/Fixtures/templates/components/DivComponentWrapper3.html.twig new file mode 100644 index 00000000000..e01bcda12a1 --- /dev/null +++ b/src/TwigComponent/tests/Fixtures/templates/components/DivComponentWrapper3.html.twig @@ -0,0 +1,9 @@ + + I can access the id from Generic Element as well: {{ id }}. + I can access the properties from DivComponent as well: {{ divComponentName }}. + And of course the properties from DivComponentWrapper: {{ divComponentWrapperName }}. + The less obvious thing is that 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 }}. + Calls to outerScope.this will be {{ outerScope.this.someFunction }}. + {{ block(outerBlocks.content) }} + diff --git a/src/TwigComponent/tests/Fixtures/templates/embedded_component_blocks_context.html.twig b/src/TwigComponent/tests/Fixtures/templates/embedded_component_blocks_context.html.twig index 96ffaab1540..c109b58a747 100644 --- a/src/TwigComponent/tests/Fixtures/templates/embedded_component_blocks_context.html.twig +++ b/src/TwigComponent/tests/Fixtures/templates/embedded_component_blocks_context.html.twig @@ -1,7 +1,8 @@ {% set name = 'Fabien' %} - - I can access the id from Generic Element as well: {{ id }}. - I can access the properties from DivComponent as well: {{ divComponentName }}. - The less obvious thing is that 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 }}. - + + Even I can access the id from Generic Element as well: {{ id }}. + Even I can access the properties from DivComponent as well: {{ divComponentName }}. + Even I can access the properties from DivComponentWrapper as well: {{ divComponentWrapperName }}. + Even I can access the functions of DivComponent via outerScope.this: {{ outerScope.this.someFunction }}. + Since we are nesting two levels deep, calls to outerScope.outerScope.this will be {{ outerScope.outerScope.this.someFunction }}. + diff --git a/src/TwigComponent/tests/Fixtures/templates/embedded_component_hierarchy_exception.html.twig b/src/TwigComponent/tests/Fixtures/templates/embedded_component_hierarchy_exception.html.twig new file mode 100644 index 00000000000..e0fdb26b38e --- /dev/null +++ b/src/TwigComponent/tests/Fixtures/templates/embedded_component_hierarchy_exception.html.twig @@ -0,0 +1,3 @@ + + {{ outerScope.this.foo }} + diff --git a/src/TwigComponent/tests/Integration/EmbeddedComponentTest.php b/src/TwigComponent/tests/Integration/EmbeddedComponentTest.php index 4a5cefe4a72..c0cd887d923 100644 --- a/src/TwigComponent/tests/Integration/EmbeddedComponentTest.php +++ b/src/TwigComponent/tests/Integration/EmbeddedComponentTest.php @@ -140,15 +140,22 @@ public function testPassingDownBlocksMultipleLevelsNeedsToBeDoneManually(): void /** * Rule 12: Blocks defined within an embedded component can access the context of the block they are replacing. + * Rule 13: Blocks defined within an embedded component can access the context of components up the hierarchy (up to their own level) via "outerScope". */ public function testBlockDefinitionCanAccessTheContextOfTheDestinationBlocks(): void { $this->assertStringContainsStringIgnoringIndentation( - '
I can access my own properties: foo.I can access the id of the Generic Element: symfonyIsAwesome.This refers to the Generic Element: calling GenericElement.I have access to outer context variables like Fabien.I can access the id from Generic Element as well: symfonyIsAwesome.I can access the properties from DivComponent as well: foo.The less obvious thing is that 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 calling GenericElement.The Generic Element default foo block
', + '
I can access my own properties: foo.I can access the id of the Generic Element: symfonyIsAwesome.This refers to the Generic Element: calling GenericElement.To access my own functions I can use outerScope.this: calling DivComponent.I have access to outer context variables like Fabien.I can access the id from Generic Element as well: symfonyIsAwesome.I can access the properties from DivComponent as well: foo.And of course the properties from DivComponentWrapper: bar.The less obvious thing is that 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 calling GenericElement.Calls to outerScope.this will be calling DivComponent.Even I can access the id from Generic Element as well: symfonyIsAwesome.Even I can access the properties from DivComponent as well: foo.Even I can access the properties from DivComponentWrapper as well: bar.Even I can access the functions of DivComponent via outerScope.this: calling DivComponent.Since we are nesting two levels deep, calls to outerScope.outerScope.this will be calling DivComponentWrapper.The Generic Element default foo block
', self::getContainer()->get(Environment::class)->render('embedded_component_blocks_context.html.twig') ); } + public function testAccessingTheHierarchyTooHighThrowsAnException(): void + { + $this->expectExceptionMessage('Key "this" for array with keys "app, __embedded" does not exist.'); + self::getContainer()->get(Environment::class)->render('embedded_component_hierarchy_exception.html.twig'); + } + public function testANonEmbeddedComponentRendersOuterBlocksEmpty(): void { $this->assertStringContainsStringIgnoringIndentation(