Use outerScope variable instead of Hierarchy object

Author: sneakyvv

src/TwigComponent/src/ComponentRenderer.php

@@ -116,21 +116,16 @@ private function preRender(MountedComponent $mounted, array $context = []): PreR
         }
 
         $component = $mounted->getComponent();
-
-        // add the "parent" component when rendering a nested embedded component
-        if (isset($context[PreRenderEvent::EMBEDDED]) && true === $context[PreRenderEvent::EMBEDDED] && isset($context['this'])) {
-            $hierarchy = $context['this'] instanceof Hierarchy ? $context['this'] : new Hierarchy($context['this']);
-            if (isset($context['this'])) {
-                $hierarchy = $hierarchy->add($component);
-            }
-        }
         $metadata = $this->factory->metadataFor($mounted->getName());
         $variables = array_merge(
             // first so values can be overridden
             $context,
 
+            // keep reference to old context
+            ['outerScope' => $context],
+
             // add the component as "this"
-            ['this' => $hierarchy ?? $component],
+            ['this' => $component],
 
             // add computed properties proxy
             ['computed' => new ComputedPropertiesProxy($component)],

src/TwigComponent/src/Hierarchy.php

@@ -2,7 +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 this.parent: {{ this.parent.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) }}
 </twig:GenericElement>

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

@@ -4,6 +4,6 @@
     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 this.parent will be {{ this.parent.someFunction }}.
+    Calls to outerScope.this will be {{ outerScope.this.someFunction }}.
     {{ block(outerBlocks.content) }}
 </twig:DivComponent5>

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

@@ -3,6 +3,6 @@
     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 this.parent: {{ this.parent.someFunction }}.
-    Since we are nesting two levels deep, calls to this.parent.parent will be {{ this.parent.parent.someFunction }}.
+    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 }}.
 </twig:DivComponentWrapper3>

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

@@ -1,3 +1,3 @@
 <twig:GenericElement element="div" class="divComponent">
-    {{  this.parent.foo }}
+    {{  outerScope.this.foo }}
 </twig:GenericElement>

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

@@ -140,19 +140,19 @@ 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 "this.parent".
+     * 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(
-            '<div class="divComponent">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 this.parent: 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 this.parent 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 this.parent: calling DivComponent.Since we are nesting two levels deep, calls to this.parent.parent will be calling DivComponentWrapper.<span class="foo">The Generic Element default foo block</span></div>',
+            '<div class="divComponent">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.<span class="foo">The Generic Element default foo block</span></div>',
             self::getContainer()->get(Environment::class)->render('embedded_component_blocks_context.html.twig')
         );
     }
 
     public function testAccessingTheHierarchyTooHighThrowsAnException(): void
     {
-        $this->expectExceptionMessage('Neither the property "parent" nor one of the methods "parent()", "getparent()"/"isparent()"/"hasparent()" or "__call()" exist');
+        $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');
     }