add slots variables

Author: WebMamba

src/TwigComponent/src/Twig/SlotNode.php

@@ -43,7 +43,7 @@ public function compile(Compiler $compiler): void
             ->write('ob_start();')
             ->subcompile($this->getNode('body'))
             ->write('$body = ob_get_clean();'.\PHP_EOL)
-            ->write("\$slots['$name'] = new ".ComponentSlot::class.'($body, ');
+            ->write("\$slotsStack['$name'] = new ".ComponentSlot::class.'($body, ');
 
         if ($this->hasNode('variables')) {
             $compiler->subcompile($this->getNode('variables'));

src/TwigComponent/src/Twig/TwigComponentNode.php

@@ -41,16 +41,8 @@ public function compile(Compiler $compiler): void
     {
         $compiler->addDebugInfo($this);
 
-        $template = $compiler->getVarName();
-        $compiler->write(sprintf('$%s = ', $template));
-        $this->addGetTemplate($compiler);
-
         $compiler
-            ->raw(';')
-            ->write(sprintf("if ($%s) {\n", $template))
             ->write('$slotsStack = $slotsStack ?? [];'.\PHP_EOL)
-            ->write('$slotsStack[] = $slots ?? [];'.\PHP_EOL)
-            ->write('$slots = [];'.\PHP_EOL)
         ;
 
         if ($this->getAttribute('componentMetadata') instanceof ComponentMetadata) {
@@ -63,11 +55,15 @@ public function compile(Compiler $compiler): void
             ->write('$slot = ob_get_clean();'.\PHP_EOL)
         ;
 
-        $compiler->raw(sprintf('$%s->display(', $template));
+        $compiler
+            ->write("\$slotsStack['content'] = new  ".ComponentSlot::class." (\$slot);\n")
+        ;
+
+        $this->addGetTemplate($compiler);
+        $compiler->raw('->display(');
 
         $this->addTemplateArguments($compiler);
         $compiler->raw(");\n");
-        $compiler->write("}\n");
     }
 
     protected function addTemplateArguments(Compiler $compiler)
@@ -76,7 +72,6 @@ protected function addTemplateArguments(Compiler $compiler)
             ->indent(1)
             ->write("\n")
             ->write("array_merge(\n")
-            ->write('$slots,'.\PHP_EOL)
         ;
 
         if ($this->getAttribute('componentMetadata') instanceof ComponentMetadata) {
@@ -85,8 +80,9 @@ protected function addTemplateArguments(Compiler $compiler)
 
         $compiler
             ->write('$context,[')
-            ->write("'slot' => new  ".ComponentSlot::class." (\$slot),\n")
-            ->write("'attributes' => new ".AttributeBag::class.'(');
+            ->write("'slots' => \$slotsStack,")
+            ->write("'attributes' => new ".AttributeBag::class.'(')
+        ;
 
         if ($this->hasNode('variables')) {
             $compiler->subcompile($this->getNode('variables'));

src/TwigComponent/src/Twig/TwigPreLexer.php

@@ -76,6 +76,12 @@ public function preLexComponents(string $input): string
                     continue;
                 }
 
+                if ('slot' === $componentName) {
+                    $output .= $this->consumeSlot($componentName);
+
+                    continue;
+                }
+
                 // if we're already inside a component,
                 // *and* we've just found a new component, then we should try to
                 // open the default block
@@ -95,9 +101,9 @@ public function preLexComponents(string $input): string
                     // use the simpler component() format, so that the system doesn't think
                     // this is an "embedded" component with blocks
                     // see https://github.com/symfony/ux/issues/810
-                    $output .= "{{ component('{$componentName}'".($attributes ? ", { {$attributes} }" : '').') }}';
+                    $output .= "{% twig_component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}{% end_twig_component %}';
                 } else {
-                    $output .= "{% component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
+                    $output .= "{% twig_component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
                 }
 
                 continue;
@@ -121,7 +127,7 @@ public function preLexComponents(string $input): string
                     $output .= '{% endblock %}';
                 }
 
-                $output .= '{% endcomponent %}';
+                $output .= '{% end_twig_component %}';
 
                 continue;
             }
@@ -410,6 +416,82 @@ private function consumeUntilEndBlock(): string
         return substr($this->input, $start, $this->position - $start);
     }
 
+    private function consumeSlot(string $componentName): string
+    {
+        $attributes = $this->consumeAttributes($componentName);
+        $this->consume('>');
+
+        $slotName = '';
+        foreach (explode(', ', $attributes) as $attr) {
+            [$key, $value] = explode(': ', $attr);
+            if ('name' === $key) {
+                $slotName = trim($value, "'");
+                break;
+            }
+        }
+
+        if (empty($slotName)) {
+            throw new SyntaxError('Expected block name.', $this->line);
+        }
+
+        $output = "{% slot {$slotName} %}";
+
+        $closingTag = '</twig:slot>';
+        if (!$this->doesStringEventuallyExist($closingTag)) {
+            throw new SyntaxError("Expected closing tag '{$closingTag}' for block '{$slotName}'.", $this->line);
+        }
+        $slotContents = $this->consumeUntilEndSlot();
+
+        $subLexer = new self($this->line);
+        $output .= $subLexer->preLexComponents($slotContents);
+
+        $this->consume($closingTag);
+        $output .= '{% endslot %}';
+
+        return $output;
+    }
+
+    private function consumeUntilEndSlot(): string
+    {
+        $start = $this->position;
+
+        $depth = 1;
+        while ($this->position < $this->length) {
+            if ('</twig:slot' === substr($this->input, $this->position, 11)) {
+                if (1 === $depth) {
+                    break;
+                } else {
+                    --$depth;
+                }
+            }
+
+            if ('{% endslot %}' === substr($this->input, $this->position, 13)) {
+                if (1 === $depth) {
+                    // in this case, we want to advanced ALL the way beyond the endblock
+                    $this->position += 14;
+                    break;
+                } else {
+                    --$depth;
+                }
+            }
+
+            if ('<twig:slot' === substr($this->input, $this->position, 10)) {
+                ++$depth;
+            }
+
+            if ('{% slot' === substr($this->input, $this->position, 7)) {
+                ++$depth;
+            }
+
+            if ("\n" === $this->input[$this->position]) {
+                ++$this->line;
+            }
+            ++$this->position;
+        }
+
+        return substr($this->input, $start, $this->position - $start);
+    }
+
     private function consumeAttributeValue(string $quote): string
     {
         $parts = [];

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

@@ -1,6 +1,9 @@
 <div class='container' style='background: {{ color|default('blue') }}'>
+    {% block header %}
+        <p>You have an alert!</p>
+    {% endblock %}
     <div class='content'>
-        {{ slot }}
+        {{ slots.content }}
     </div>
-    {{ footer|default('')|raw }}
+    {{ slots.footer|default('')|raw }}
 </div>

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

@@ -1 +1 @@
-<button {{ attributes.merge({ class: 'btn' })|raw }}>{{ slot }}</button>
+<button {{ attributes.merge({ class: 'btn' })|raw }}>{{ slots.content }}</button>

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

@@ -1 +1 @@
-<div class='container warning'><twig:Button>{{ slot }}</twig:Button><p>Danger Zone</p></div>
+<div class='container warning'><twig:Button>{{ slots.content }}</twig:Button><p>Danger Zone</p></div>

src/TwigComponent/tests/Fixtures/templates/slot/render_mix_of_slot_and_blocks.html.twig

@@ -0,0 +1,10 @@
+<twig:Alarm>
+   {% block header %}
+       {{ parent() }}
+       <p>A new message</p>
+   {% endblock %}
+    <p>Hey!</p>
+    <twig:slot name="footer">
+        from @bob
+    </twig:slot>
+</twig:Alarm>

src/TwigComponent/tests/Integration/TwigComponentExtensionTest.php

@@ -98,4 +98,13 @@ public function testCanRenderEmbeddedComponent(): void
         $this->assertStringContainsString('custom th (key)', $output);
         $this->assertStringContainsString('custom td (1)', $output);
     }
+
+    public function testCanRenderMixOfBlockAndSlot(): void
+    {
+        $output = self::getContainer()->get(Environment::class)->render('slot/render_mix_of_slot_and_blocks.html.twig');
+
+        $this->assertStringContainsString('<p>You have an alert!</p>', $output);
+        $this->assertStringContainsString('Hey!', $output);
+        $this->assertStringContainsString('from @bob', $output);
+    }
 }