Improving fix for arbitrarily-nested components

giorgiopogliani · Jul 17, 2021 · ba54157 · ba54157
1 parent f0deb9e
commit ba54157
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/src/ComponentNode.php b/src/ComponentNode.php
@@ -30,7 +30,8 @@ public function compile(Compiler $compiler): void
 
         $compiler
             ->write(sprintf("if ($%s) {\n", $template))
-            ->write('$oldSlots = $slots ?? [];' . PHP_EOL)
+            ->write('$slotsStack = $slotsStack ?? [];' . PHP_EOL)
+            ->write('$slotsStack[] = $slots ?? [];' . PHP_EOL)
             ->write('$slots = [];' . PHP_EOL)
             ->write("ob_start();"  . PHP_EOL)
             ->subcompile($this->getNode('slot'))
@@ -42,7 +43,7 @@ public function compile(Compiler $compiler): void
 
         $compiler
             ->raw(");\n")
-            ->write('$slots = $oldSlots;' . PHP_EOL)
+            ->write('$slots = array_pop($slotsStack);' . PHP_EOL)
             ->write("}\n")
         ;
     }

diff --git a/tests/ComponentTest.php b/tests/ComponentTest.php
@@ -7,6 +7,8 @@
 
 class ComponentTest extends TestCase
 {
+    protected $twig;
+
     protected function setupTwig(): \Twig\Environment
     {
         $loader = new \Twig\Loader\FilesystemLoader(__DIR__ . '/templates');
@@ -20,12 +22,15 @@ protected function setupTwig(): \Twig\Environment
         return $twig;
     }
 
+    public function setUp(): void
+    {
+        $this->twig = $this->setupTwig();
+    }
+
     /** @test */
     public function render_simple_component()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_simple_component.twig');
+        $html = $this->twig->render('test_simple_component.twig');
 
         $this->assertEquals(<<<HTML
         <button class="bg-blue-600 text-white"> test </button>
@@ -35,9 +40,7 @@ public function render_simple_component()
     /** @test */
     public function render_simple_component_with_dash()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_simple_component_with_dash.twig');
+        $html = $this->twig->render('test_simple_component_with_dash.twig');
 
         $this->assertEquals(<<<HTML
         <button class="bg-blue-700 text-white"> test </button>
@@ -47,9 +50,7 @@ public function render_simple_component_with_dash()
     /** @test */
     public function render_simple_component_in_folder()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_simple_component_in_folder.twig');
+        $html = $this->twig->render('test_simple_component_in_folder.twig');
 
         $this->assertEquals(<<<HTML
         <button class="text-white bg-blue-800 rounded"> test </button>
@@ -59,9 +60,7 @@ public function render_simple_component_in_folder()
     /** @test */
     public function render_component_with_slots()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_with_slots.twig');
+        $html = $this->twig->render('test_with_slots.twig');
 
         $this->assertEquals(<<<HTML
         <div><span>test</span><div>test</div></div>
@@ -71,9 +70,7 @@ public function render_component_with_slots()
     /** @test */
     public function render_xtags_with_slots()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_xtags_with_slots.twig');
+        $html = $this->twig->render('test_xtags_with_slots.twig');
 
         $this->assertEquals(<<<HTML
         <div><span>test</span><div>test</div></div>
@@ -83,21 +80,28 @@ public function render_xtags_with_slots()
     /** @test */
     public function render_nested_xtags_with_slots()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_nested_xtags_with_slots.twig');
+        $html = $this->twig->render('test_nested_xtags_with_slots.twig');
 
         $this->assertEquals(<<<HTML
         <div><span>[outer name]</span><div>[inner name][inner slot]</div></div>
         HTML, $html);
     }
 
     /** @test */
-    public function render_component_with_xtags()
+    public function render_deeply_nested_xtags_with_slots()
     {
-        $twig = $this->setupTwig();
+        $html = $this->twig->render('test_deeply_nested_xtags_with_slots.twig');
+        $html = preg_replace('/\s{2,}/', '', $html); // ignore whitespace difference
 
-        $html = $twig->render('test_xtags_component.twig');
+        $this->assertEquals(<<<HTML
+        <div><span>A</span><div>BC<div>D<button class="text-white">E</button><div>FG</div></div></div></div>
+        HTML, $html);
+    }
+
+    /** @test */
+    public function render_component_with_xtags()
+    {
+        $html = $this->twig->render('test_xtags_component.twig');
 
         $this->assertEquals(<<<HTML
         <button class="text-white bg-blue-800 rounded"> test1 </button>
@@ -109,9 +113,7 @@ public function render_component_with_xtags()
     /** @test */
     public function render_component_with_attributes()
     {
-        $twig = $this->setupTwig();
-
-        $html = $twig->render('test_with_attributes.twig');
+        $html = $this->twig->render('test_with_attributes.twig');
 
         $this->assertEquals(<<<HTML
         <div>

diff --git a/tests/templates/test_deeply_nested_xtags_with_slots.twig b/tests/templates/test_deeply_nested_xtags_with_slots.twig
@@ -0,0 +1,15 @@
+<x-with-slots>
+    <x-slot name="name"><span>A</span></x-slot>
+    <x-with-slots>
+        <x-slot name="name">B</x-slot>
+        C
+        <x-with-slots>
+            <x-button>E</x-button>
+            <x-slot name="name">D</x-slot>
+            <x-with-slots>
+                <x-slot name="name">F</x-slot>
+                G
+            </x-with-slots>
+        </x-with-slots>
+    </x-with-slots>
+</x-with-slots>