feat(view): support expression attribute fallthrough

Author: xHeaven

packages/view/src/Elements/ViewComponentElement.php

@@ -40,7 +40,9 @@ public function __construct(
         array $attributes,
     ) {
         $this->attributes = $attributes;
-        $this->viewComponentAttributes = arr($attributes);
+
+        $this->viewComponentAttributes = arr($attributes)
+            ->mapWithKeys(fn (string $value, string $key) => yield str($key)->ltrim(':')->toString() => $value);
 
         $this->dataAttributes = arr($attributes)
             ->filter(fn (string $_, string $key) => ! str_starts_with($key, ':'))
@@ -96,50 +98,10 @@ public function compile(): string
 
         $compiled = str($this->viewComponent->contents);
 
-        // Fallthrough attributes
-        $compiled = $compiled
-            ->replaceRegex(
-                regex: '/^<(?<tag>[\w-]+)(.*?["\s])?>/', // Match the very first opening tag, this will never fail.
-                replace: function ($matches) {
-                    /** @var \Tempest\View\Parser\Token $token */
-                    $token = TempestViewParser::ast($matches[0])[0];
-
-                    $attributes = arr($token->htmlAttributes)->map(fn (string $value) => new MutableString($value));
-
-                    foreach (['class', 'style', 'id'] as $attributeName) {
-                        if (! isset($this->dataAttributes[$attributeName])) {
-                            continue;
-                        }
-
-                        $attributes[$attributeName] ??= new MutableString();
-
-                        if ($attributeName === 'id') {
-                            $attributes[$attributeName] = new MutableString(' ' . $this->dataAttributes[$attributeName]);
-                        } else {
-                            $attributes[$attributeName]->append(' ' . $this->dataAttributes[$attributeName]);
-                        }
-                    }
+        $compiled = $this->applyFallthroughAttributes($compiled);
 
-                    return sprintf(
-                        '<%s%s>',
-                        $matches['tag'],
-                        $attributes
-                            ->map(function (MutableString $value, string $key) {
-                                return sprintf('%s="%s"', $key, $value->trim());
-                            })
-                            ->implode(' ')
-                            ->when(
-                                fn (ImmutableString $string) => $string->isNotEmpty(),
-                                fn (ImmutableString $string) => $string->prepend(' '),
-                            ),
-                    );
-                },
-            );
-
-        // Add scoped variables
         $compiled = $compiled
             ->prepend(
-                // Open the current scope
                 sprintf(
                     '<?php (function ($attributes, $slots, $scopedVariables %s %s) { extract($scopedVariables, EXTR_SKIP); ?>',
                     $this->dataAttributes->isNotEmpty() ? ', ' . $this->dataAttributes->map(fn (string $_value, string $key) => "\${$key}")->implode(', ') : '',
@@ -148,10 +110,9 @@ public function compile(): string
                 ),
             )
             ->append(
-                // Close and call the current scope
                 sprintf(
                     '<?php })(attributes: %s, slots: %s, scopedVariables: [%s] + ($scopedVariables ?? $this->currentView?->data ?? []) %s %s) ?>',
-                    ViewObjectExporter::export($this->viewComponentAttributes),
+                    $this->exportAttributesArray(),
                     ViewObjectExporter::export($slots),
                     $this->scopedVariables->isNotEmpty()
                         ? $this->scopedVariables->map(fn (string $name) => "'{$name}' => \${$name}")->implode(', ')
@@ -165,7 +126,6 @@ public function compile(): string
                 ),
             );
 
-        // Compile slots
         $compiled = $compiled->replaceRegex(
             regex: '/<x-slot\s*(name="(?<name>[\w-]+)")?((\s*\/>)|>(?<default>(.|\n)*?)<\/x-slot>)/',
             replace: function ($matches) use ($slots) {
@@ -222,4 +182,77 @@ private function getSlotElement(string $name): SlotElement|CollectionElement|nul
 
         return null;
     }
+
+    private function applyFallthroughAttributes(ImmutableString $compiled): ImmutableString
+    {
+        return $compiled->replaceRegex(
+            regex: '/^<(?<tag>[\w-]+)(.*?["\s])?>/',
+            replace: function (array $matches): string {
+                /** @var Token $token */
+                $token = TempestViewParser::ast($matches[0])[0];
+
+                $attributes = arr($token->htmlAttributes)
+                    ->map(fn (string $value) => new MutableString($value));
+
+                foreach (['class', 'style', 'id'] as $name) {
+                    $attributes = $this->applyFallthroughAttribute($attributes, $name);
+                }
+
+                $attributeString = $attributes
+                    ->map(fn (MutableString $value, string $key) => sprintf('%s="%s"', $key, $value->trim()))
+                    ->implode(' ')
+                    ->when(
+                        fn (ImmutableString $s) => $s->isNotEmpty(),
+                        fn (ImmutableString $s) => $s->prepend(' '),
+                    );
+
+                return sprintf('<%s%s>', $matches['tag'], $attributeString);
+            },
+        );
+    }
+
+    private function applyFallthroughAttribute(ImmutableArray $attributes, string $name): ImmutableArray
+    {
+        $hasDataAttribute = isset($this->dataAttributes[$name]);
+        $hasExpressionAttribute = isset($this->expressionAttributes[$name]);
+
+        if (! $hasDataAttribute && ! $hasExpressionAttribute) {
+            return $attributes;
+        }
+
+        $attributes[$name] ??= new MutableString();
+
+        if ($name === 'id') {
+            if ($hasDataAttribute) {
+                $attributes[$name] = new MutableString($this->dataAttributes[$name]);
+            } elseif ($hasExpressionAttribute) {
+                $attributes[$name] = new MutableString(sprintf('<?= $%s ?>', $name));
+            }
+        } else {
+            if ($hasDataAttribute) {
+                $attributes[$name]->append(' ' . $this->dataAttributes[$name]);
+            }
+            if ($hasExpressionAttribute) {
+                $attributes[$name]->append(sprintf(' <?= $%s ?>', $name));
+            }
+        }
+
+        return $attributes;
+    }
+
+    private function exportAttributesArray(): string
+    {
+        $entries = [];
+
+        foreach ($this->viewComponentAttributes as $key => $value) {
+            $camelKey = str($key)->camel()->toString();
+            $isExpression = isset($this->expressionAttributes[$camelKey]);
+
+            $entries[] = $isExpression
+                ? sprintf("'%s' => %s", $key, $value)
+                : sprintf("'%s' => %s", $key, ViewObjectExporter::exportValue($value));
+        }
+
+        return sprintf('new \%s([%s])', ImmutableArray::class, implode(', ', $entries));
+    }
 }

packages/view/tests/FallthroughAttributesTest.php

@@ -3,11 +3,7 @@
 namespace Tempest\View\Tests;
 
 use PHPUnit\Framework\TestCase;
-use Tempest\View\Exceptions\ViewComponentPathWasInvalid;
-use Tempest\View\Exceptions\ViewComponentPathWasNotFound;
 use Tempest\View\Renderers\TempestViewRenderer;
-use Tempest\View\ViewCache;
-use Tempest\View\ViewComponent;
 use Tempest\View\ViewConfig;
 
 use function Tempest\view;

packages/view/tests/Fixtures/fallthrough.view.php

@@ -1,7 +1,7 @@
-<?php 
-    $componentClass = 'component-class';
-    $componentStyle = 'display: block;';
+<?php
+$componentClass = 'component-class';
+$componentStyle = 'display: block;';
 ?><x-fallthrough-test class="component-class" />
 <x-fallthrough-test :class="$componentClass" />
 <x-fallthrough-dynamic-test c="component-class" s="display: block;" />
-<x-fallthrough-dynamic-test :c="$componentClass" :s="$componentStyle"/>
+<x-fallthrough-dynamic-test :c="$componentClass" :s="$componentStyle"/>

packages/view/tests/Fixtures/x-fallthrough-dynamic-test.view.php

@@ -1 +1 @@
-<div :class="$attributes->get('c')" :style="$attributes->get('s')"></div>
+<div :class="$attributes->get('c')" :style="$attributes->get('s')"></div>

packages/view/tests/Fixtures/x-fallthrough-test.view.php

@@ -1 +1 @@
-<div class="in-component"></div>
+<div class="in-component"></div>