feat(view): access view component attributes (#1008)

Author: brendt

src/Tempest/Support/tests/JavaScript/PackageManagerTest.php

@@ -27,6 +27,7 @@ public function test_can_detect_package_manager(string $fixture, ?PackageManager
             actual: PackageManager::detect(cwd: __DIR__ . "/Fixtures/{$fixture}"),
         );
     }
+
     #[TestWith(['bun-lock', 'bun dev'])]
     #[TestWith(['bun-lockb', 'bun dev'])]
     #[TestWith(['npm', 'npm run dev'])]

src/Tempest/View/src/Attributes/DataAttribute.php

@@ -23,11 +23,9 @@ public function apply(Element $element): Element
     {
         $value = str($element->getAttribute($this->name));
 
-        // Render {{ and {!! tags
-        if ($value->startsWith(['{{', '{!!']) && $value->endsWith(['}}', '!!}'])) {
-            $value = new TextElement($value->toString())->compile();
-            $element->setAttribute($this->name, $value);
-        }
+        $value = new TextElement($value->toString())->compile();
+
+        $element->setAttribute($this->name, $value);
 
         // Data attributes should only be parsed for view components
         if ($element->unwrap(ViewComponentElement::class) === null) {

src/Tempest/View/src/Elements/ViewComponentElement.php

@@ -17,13 +17,18 @@ final class ViewComponentElement implements Element
 {
     use IsElement;
 
+    private array $dataAttributes = [];
+
     public function __construct(
         private readonly Environment $environment,
         private readonly TempestViewCompiler $compiler,
         private readonly ViewComponent $viewComponent,
         array $attributes,
     ) {
         $this->attributes = $attributes;
+        $this->dataAttributes = arr($attributes)
+            ->filter(fn ($value, $key) => ! str_starts_with($key, ':'))
+            ->toArray();
     }
 
     public function getViewComponent(): ViewComponent
@@ -84,16 +89,25 @@ public function compile(): string
             ->toArray();
 
         $compiled = str($this->viewComponent->compile($this))
-            // Add dynamic slots to the current scope
             ->prepend(
+                // Add attributes to the current scope
+                '<?php $_previousAttributes = $attributes ?? null; ?>',
+                sprintf('<?php $attributes = \Tempest\Support\arr(%s); ?>', var_export($this->dataAttributes, true)), // @mago-expect best-practices/no-debug-symbols Set the new value of $attributes for this view component
+
+                // Add dynamic slots to the current scope
                 '<?php $_previousSlots = $slots ?? null; ?>', // Store previous slots in temporary variable to keep scope
-                sprintf('<?php $slots = %s; ?>', var_export($slots, true)), // @mago-expect best-practices/no-debug-symbols Set the new value of $slots for this view component
+                sprintf('<?php $slots = \Tempest\Support\arr(%s); ?>', var_export($slots, true)), // @mago-expect best-practices/no-debug-symbols Set the new value of $slots for this view component
             )
-            // Cleanup slots after the view component and restore slots from previous scope
             ->append(
-                '<?php unset($slots); ?>', // Unset current $slots
-                '<?php $slots = $_previousSlots ?? null; ?>', // Restore previous $slots
-                '<?php unset($_previousSlots); ?>', // Cleanup temporary $_previousSlots
+                // Restore previous slots
+                '<?php unset($slots); ?>',
+                '<?php $slots = $_previousSlots ?? null; ?>',
+                '<?php unset($_previousSlots); ?>',
+
+                // Restore previous attributes
+                '<?php unset($attributes); ?>',
+                '<?php $attributes = $_previousAttributes ?? null; ?>',
+                '<?php unset($_previousAttributes); ?>',
             )
             // Compile slots
             ->replaceRegex(

tests/Integration/View/TempestViewRendererDataPassingTest.php

@@ -264,7 +264,7 @@ public function test_boolean_attributes(): void
 
         $this->assertSame(
             '<textarea autofocus></textarea>',
-            $this->render('<textarea autofocus></textarea>')
+            $this->render('<textarea autofocus></textarea>'),
         );
     }
 
@@ -290,4 +290,21 @@ public function test_expression_attribute_in_raw_element(): void
             $html,
         );
     }
+
+    public function test_echo_in_attributes(): void
+    {
+        $this->assertSame(
+            '<div class="hi hi hi"></div>',
+            $this->render(<<<HTML
+            <div class="hi {{ 'hi' }} hi">
+            HTML),
+        );
+
+        $this->assertSame(
+            '<div class="hi hi hi"></div>',
+            $this->render(<<<HTML
+            <div class="hi {!! 'hi' !!} hi">
+            HTML),
+        );
+    }
 }

tests/Integration/View/ViewComponentTest.php

@@ -547,7 +547,6 @@ public function test_custom_components_in_head(): void
         HTML, $html);
     }
 
-
     public function test_head_injection(): void
     {
         $this->registerViewComponent('x-custom-link', <<<'HTML'
@@ -574,4 +573,19 @@ public function test_head_injection(): void
         </body></html>
         HTML, $html);
     }
+
+    public function test_attributes_variable_in_view_component(): void
+    {
+        $this->registerViewComponent('x-test', <<<'HTML'
+        <div class="foo {{ $attributes['class'] }}" style="font-weight: bold; {{ $attributes['style'] }}"></div>
+        HTML);
+
+        $html = $this->render(<<<'HTML'
+        <x-test class="baz" style="text-decoration: underline;"></x-test>
+        HTML);
+
+        $this->assertStringEqualsStringIgnoringLineEndings(<<<'HTML'
+        <div class="foo baz" style="font-weight: bold; text-decoration: underline;"></div>
+        HTML, $html);
+    }
 }