fix(view): self-closing view component tags (#818)

Author: brendt

src/Tempest/View/src/Renderers/TempestViewCompiler.php

@@ -12,6 +12,7 @@
 use Tempest\View\Element;
 use Tempest\View\Elements\ElementFactory;
 use function Tempest\path;
+use function Tempest\Support\str;
 use const Dom\HTML_NO_DEFAULT_NS;
 
 final readonly class TempestViewCompiler
@@ -81,11 +82,27 @@ private function retrieveTemplate(string $path): string
 
     private function parseDom(string $template): NodeList
     {
-        $template = str_replace(
-            search: array_keys(self::TOKEN_MAPPING),
-            replace: array_values(self::TOKEN_MAPPING),
-            subject: $template,
-        );
+        $template = str($template)
+
+            // Escape PHP tags
+            ->replace(
+                search: array_keys(self::TOKEN_MAPPING),
+                replace: array_values(self::TOKEN_MAPPING),
+            )
+
+            // Convert self-closing tags
+            ->replaceRegex(
+                regex: '/<x-(?<element>.*?)\/>/',
+                replace: function (array $match) {
+                    $closingTag = str($match['element'])->before(' ')->toString();
+
+                    return sprintf(
+                        '<x-%s></x-%s>',
+                        $match['element'],
+                        $closingTag,
+                    );
+                },
+            );
 
         $dom = HTMLDocument::createFromString("<div id='tempest_render'>{$template}</div>", LIBXML_NOERROR | HTML_NO_DEFAULT_NS);
 

tests/Integration/View/TempestViewRendererTest.php

@@ -439,4 +439,24 @@ public function test_slot_with_comment(): void
             ),
         );
     }
+
+    public function test_self_closing_component_tags_are_compiled(): void
+    {
+        $this->registerViewComponent('x-foo', '<div>foo</div>');
+
+        $this->assertStringEqualsStringIgnoringLineEndings(
+            '<div>foo</div><div>foo</div>',
+            str_replace(PHP_EOL, '', $this->render('<x-foo /><x-foo />')),
+        );
+
+        $this->assertStringEqualsStringIgnoringLineEndings(
+            '<div>foo</div><div>foo</div>',
+            str_replace(PHP_EOL, '', $this->render('<x-foo/><x-foo/>')),
+        );
+
+        $this->assertStringEqualsStringIgnoringLineEndings(
+            '<div>foo</div><div>foo</div>',
+            str_replace(PHP_EOL, '', $this->render('<x-foo foo="bar" :baz="$hello"/><x-foo foo="bar" :baz="$hello"/>')),
+        );
+    }
 }