fix(view): : is replaced by - and @ is removed (#1125)

Co-authored-by: brendt <[email protected]>

Author: erikaraujo

composer.json

@@ -13,6 +13,7 @@
         "ext-readline": "*",
         "ext-simplexml": "*",
         "filp/whoops": "^2.15",
+        "giggsey/libphonenumber-for-php-lite": "^9.0",
         "guzzlehttp/guzzle": "^7.8",
         "laminas/laminas-diactoros": "^3.3",
         "monolog/monolog": "^3.7.0",
@@ -34,8 +35,7 @@
         "symfony/var-exporter": "^7.1",
         "tempest/highlight": "^2.11.2",
         "vlucas/phpdotenv": "^5.6",
-        "voku/portable-ascii": "^2.0.3",
-        "giggsey/libphonenumber-for-php-lite": "^9.0"
+        "voku/portable-ascii": "^2.0.3"
     },
     "require-dev": {
         "aidan-casey/mock-client": "dev-master",

src/Tempest/View/src/Elements/ElementFactory.php

@@ -66,22 +66,7 @@ private function makeElement(Token $token, ?Element $parent): ?Element
             return new RawElement(tag: null, content: $token->compile());
         }
 
-        $attributes = [];
-
-        foreach ($token->htmlAttributes as $name => $value) {
-            $name = str($name)
-                ->trim()
-                ->before('=')
-                ->camel()
-                ->toString();
-
-            $value = str($value)
-                ->afterFirst('"')
-                ->beforeLast('"')
-                ->toString();
-
-            $attributes[$name] = $value;
-        }
+        $attributes = $token->htmlAttributes;
 
         foreach ($token->phpAttributes as $index => $content) {
             $attributes[] = new PhpAttribute((string) $index, $content);

src/Tempest/View/src/Elements/GenericElement.php

@@ -38,14 +38,6 @@ public function compile(): string
         $attributes = [];
 
         foreach ($this->getAttributes() as $name => $value) {
-            $name = str($name);
-
-            if ($name->startsWith(':')) {
-                $name = ':' . $name->kebab()->toString();
-            } else {
-                $name = $name->kebab()->toString();
-            }
-
             if ($value) {
                 $attributes[] = $name . '="' . $value . '"';
             } else {

src/Tempest/View/src/Elements/PhpDataElement.php

@@ -26,15 +26,14 @@ public function getWrappingElement(): Element
 
     public function compile(): string
     {
-        $name = ltrim($this->name, ':');
+        $variableName = str($this->name)->ltrim(':')->camel()->toString();
         $isExpression = str_starts_with($this->name, ':');
-
         $value = $this->value ?? '';
 
         // We'll declare the variable in PHP right before the actual element
         $variableDeclaration = sprintf(
             '$%s ??= %s ?? null;',
-            $name,
+            $variableName,
             $isExpression
                 ? ($value ?: 'null')
                 : var_export($value, true), // @mago-expect best-practices/no-debug-symbols
@@ -44,17 +43,22 @@ public function compile(): string
         // where the variable is only available to that specific element.
         $variableRemoval = sprintf(
             'unset($%s);',
-            $name,
+            $variableName,
         );
 
         // Support for boolean attributes. When an expression attribute has a falsy value, it won't be rendered at all.
         // When it's "true", it will only render the attribute name and not the "true" value
         $coreElement = $this->unwrap(GenericElement::class);
 
         if ($isExpression && $coreElement) {
+            $attributeName = ltrim($this->name, ':');
+
             $coreElement
-                ->addRawAttribute(new RawConditionalAttribute($name, $coreElement->getAttribute($name))->compile())
-                ->unsetAttribute($name);
+                ->addRawAttribute(new RawConditionalAttribute(
+                    name: $attributeName,
+                    value: $coreElement->getAttribute($attributeName),
+                )->compile())
+                ->unsetAttribute($attributeName);
         }
 
         return sprintf(

tests/Integration/View/TempestViewRendererTest.php

@@ -547,6 +547,34 @@ public function test_view_processors(): void
         $this->assertStringEqualsStringIgnoringLineEndings('<div>test</div>', $html);
     }
 
+    public function test_with_at_symbol_in_html_tag(): void
+    {
+        $rendered = $this->render(
+            view('<button @click="foo">test</button>'),
+        );
+
+        $this->assertStringEqualsStringIgnoringLineEndings(
+            <<<HTML
+            <button @click="foo">test</button>
+            HTML,
+            $rendered,
+        );
+    }
+
+    public function test_with_colon_symbol_in_html_tag(): void
+    {
+        $rendered = $this->render(
+            view('<button x-on:click="foo">test</button>'),
+        );
+
+        $this->assertStringEqualsStringIgnoringLineEndings(
+            <<<HTML
+            <button x-on:click="foo">test</button>
+            HTML,
+            $rendered,
+        );
+    }
+
     private function assertSnippetsMatch(string $expected, string $actual): void
     {
         $expected = str_replace([PHP_EOL, ' '], '', $expected);