fix(view): pass scoped variables down view components (#1467)

Author: brendt

packages/view/src/Elements/ViewComponentElement.php

@@ -141,7 +141,7 @@ public function compile(): string
             ->prepend(
                 // Open the current scope
                 sprintf(
-                    '<?php (function ($attributes, $slots %s %s %s) { extract($this->currentView?->data ?? [], EXTR_SKIP); ?>',
+                    '<?php (function ($attributes, $slots, $scopedVariables %s %s) { extract($scopedVariables, EXTR_SKIP); ?>',
                     $this->dataAttributes->isNotEmpty() ? (', ' . $this->dataAttributes->map(fn (string $_value, string $key) => "\${$key}")->implode(', ')) : '',
                     $this->expressionAttributes->isNotEmpty() ? (', ' . $this->expressionAttributes->map(fn (string $_value, string $key) => "\${$key}")->implode(', ')) : '',
                     $this->scopedVariables->isNotEmpty() ? (', ' . $this->scopedVariables->map(fn (string $name) => "\${$name}")->implode(', ')) : '',
@@ -150,18 +150,18 @@ public function compile(): string
             ->append(
                 // Close and call the current scope
                 sprintf(
-                    '<?php })(%s, %s %s %s %s) ?>',
-                    'attributes: ' . ViewObjectExporter::export($this->viewComponentAttributes),
-                    'slots: ' . ViewObjectExporter::export($slots),
+                    '<?php })(attributes: %s, slots: %s, scopedVariables: [%s] + ($scopedVariables ?? $this->currentView?->data ?? []) %s %s) ?>',
+                    ViewObjectExporter::export($this->viewComponentAttributes),
+                    ViewObjectExporter::export($slots),
+                    $this->scopedVariables->isNotEmpty()
+                        ? $this->scopedVariables->map(fn (string $name) => "'{$name}' => \${$name}")->implode(', ')
+                        : '',
                     $this->dataAttributes->isNotEmpty()
                         ? (', ' . $this->dataAttributes->map(fn (mixed $value, string $key) => "{$key}: " . ViewObjectExporter::exportValue($value))->implode(', '))
                         : '',
                     $this->expressionAttributes->isNotEmpty()
                         ? (', ' . $this->expressionAttributes->map(fn (mixed $value, string $key) => "{$key}: " . $value)->implode(', '))
                         : '',
-                    $this->scopedVariables->isNotEmpty()
-                        ? (', ' . $this->scopedVariables->map(fn (string $name) => "{$name}: \${$name}")->implode(', '))
-                        : '',
                 ),
             );
 

tests/Integration/Http/GenericResponseSenderTest.php

@@ -82,6 +82,7 @@ public function test_file_response(): void
         $response = new File(path: $path);
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $content = ob_get_clean();
 
         $this->assertSame(file_get_contents($path), $content);
@@ -94,6 +95,7 @@ public function test_download_response(): void
         $response = new Download(path: $path);
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $content = ob_get_clean();
 
         $this->assertSame(file_get_contents($path), $content);
@@ -109,6 +111,7 @@ public function test_sending_of_array_to_json(): void
 
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
 
         $this->assertSame('{"key":"value"}', $output);
@@ -129,6 +132,7 @@ public function jsonSerialize(): mixed
 
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
 
         $this->assertSame('{"key":"value"}', $output);
@@ -145,6 +149,7 @@ public function test_view_body(): void
 
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
 
         $this->assertStringContainsString('Hello Brent!', $output);
@@ -156,6 +161,7 @@ public function test_stream(): void
         $response = new EventStream(fn () => yield 'hello');
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
         ob_start();
 
@@ -172,6 +178,7 @@ public function test_stream_with_custom_event(): void
         });
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
         ob_start();
 
@@ -190,6 +197,7 @@ public function test_stream_with_custom_id(): void
         });
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
         ob_start();
 
@@ -208,6 +216,7 @@ public function test_stream_with_custom_retry(): void
         });
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
         ob_start();
 
@@ -223,13 +232,17 @@ public function test_stream_with_custom_implementation(): void
         $response = new EventStream(function () {
             yield new class implements ServerSentEvent {
                 public ?int $id = 1;
+
                 public null|Duration|int $retryAfter = null;
+
                 public ?string $event = 'custom';
+
                 public JsonSerializable|Stringable|string|iterable $data = ['foo', 'bar'];
             };
         });
         $responseSender = $this->container->get(GenericResponseSender::class);
         $responseSender->send($response);
+
         $output = ob_get_clean();
         ob_start();
 

tests/Integration/View/ViewComponentTest.php

@@ -960,4 +960,23 @@ public function test_view_variables_are_passed_into_the_component(): void
 
         $this->assertSnippetsMatch('test', $html);
     }
+
+    public function test_capture_outer_scope_view_component_variables(): void
+    {
+        $this->registerViewComponent('x-a', '<x-slot />');
+        $this->registerViewComponent('x-b', '<x-slot />');
+
+        $html = $this->render(
+            <<<'HTML'
+            <x-a :foreach="$items as $item">
+                <x-b> 
+                    {{ $item }}
+                </x-b>
+            </x-a>
+            HTML,
+            items: ['a', 'b'],
+        );
+
+        $this->assertSnippetsMatch('a b', $html);
+    }
 }