fix(view): render doctype and html tags properly (#910)

brendt · web-flow · commit dff38842dd55 · 2025-02-24T11:03:48.000+01:00
diff --git a/src/Tempest/Core/src/Kernel.php b/src/Tempest/Core/src/Kernel.php
@@ -20,7 +20,7 @@
 
 final class Kernel
 {
-    public const VERSION = '1.0.0-alpha.5';
+    public const string VERSION = '1.0.0-alpha.5';
 
     public readonly Container $container;
 
diff --git a/src/Tempest/View/src/Elements/ElementFactory.php b/src/Tempest/View/src/Elements/ElementFactory.php
@@ -5,6 +5,7 @@
 namespace Tempest\View\Elements;
 
 use Dom\Comment;
+use Dom\DocumentType;
 use Dom\Element as DomElement;
 use Dom\Node;
 use Dom\Text;
@@ -22,8 +23,7 @@ final class ElementFactory
     public function __construct(
         private readonly ViewConfig $viewConfig,
         private readonly Container $container,
-    ) {
-    }
+    ) {}
 
     public function setViewCompiler(TempestViewCompiler $compiler): self
     {
@@ -42,6 +42,12 @@ public function make(Node $node): ?Element
 
     private function makeElement(Node $node, ?Element $parent): ?Element
     {
+        if ($node instanceof DocumentType) {
+            $content = $node->ownerDocument->saveHTML($node);
+
+            return new RawElement(tag: null, content: $content);
+        }
+
         if ($node instanceof Text) {
             if (trim($node->textContent) === '') {
                 return null;
diff --git a/src/Tempest/View/src/Elements/RawElement.php b/src/Tempest/View/src/Elements/RawElement.php
@@ -14,7 +14,7 @@ final class RawElement implements Element
     public function __construct(
         private readonly ?string $tag,
         private readonly string $content,
-        array $attributes,
+        array $attributes = [],
     ) {
         $this->attributes = $attributes;
     }
diff --git a/src/Tempest/View/src/Renderers/TempestViewCompiler.php b/src/Tempest/View/src/Renderers/TempestViewCompiler.php
@@ -80,7 +80,7 @@ private function retrieveTemplate(string $path): string
         return file_get_contents($searchPath);
     }
 
-    private function parseDom(string $template): NodeList
+    private function parseDom(string $template): HTMLDocument|NodeList
     {
         $template = str($template)
 
@@ -104,6 +104,12 @@ private function parseDom(string $template): NodeList
                 },
             );
 
+        if ($template->startsWith(['<html', '<!DOCTYPE', '<!doctype'])) {
+            // If we're rendering a full HTML document, we'll parse it as is
+            return HTMLDocument::createFromString($template->toString(), LIBXML_NOERROR | HTML_NO_DEFAULT_NS);
+        }
+
+        // If we're rendering an HTML snippet, we'll wrap it in a div, and return the resulting nodelist
         $dom = HTMLDocument::createFromString("<div id='tempest_render'>{$template}</div>", LIBXML_NOERROR | HTML_NO_DEFAULT_NS);
 
         return $dom->getElementById('tempest_render')->childNodes;
@@ -112,11 +118,15 @@ private function parseDom(string $template): NodeList
     /**
      * @return Element[]
      */
-    private function mapToElements(NodeList $nodeList): array
+    private function mapToElements(HTMLDocument|NodeList $nodes): array
     {
         $elements = [];
 
-        foreach ($nodeList as $node) {
+        if ($nodes instanceof HTMLDocument) {
+            $nodes = $nodes->childNodes;
+        }
+
+        foreach ($nodes as $node) {
             $element = $this->elementFactory->make($node);
 
             if ($element === null) {
diff --git a/tests/Integration/View/TempestViewRendererTest.php b/tests/Integration/View/TempestViewRendererTest.php
@@ -474,4 +474,32 @@ public function test_self_closing_component_tags_are_compiled(): void
             str_replace(PHP_EOL, '', $this->render('<x-foo foo="bar" :baz="$hello"/><x-foo foo="bar" :baz="$hello"/>')),
         );
     }
+
+    public function test_html_tags(): void
+    {
+        $view = <<<'HTML'
+            <!doctype html> 
+            <html lang="en"> 
+            <!-- test comment -->
+            <head> 
+                <title>Tempest</title>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <link href="/main.css" rel="stylesheet">
+            </head> 
+            <body class="flex justify-center items-center">
+            
+            <h1 class="text-5xl font-bold text-[#4f95d1]">Tempest</h1>
+            </body> 
+            </html> 
+            HTML;
+
+        $html = $this->render($view);
+
+        $this->assertStringContainsString('<!DOCTYPE html>', $html);
+        $this->assertStringContainsString('<html lang="en">', $html);
+        $this->assertStringContainsString('<head>', $html);
+        $this->assertStringContainsString('<body', $html);
+        $this->assertStringContainsString('<!-- test comment -->', $html);
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`
`21`	`21`	`final class Kernel`
`22`	`22`	`{`
`23`		`- public const VERSION = '1.0.0-alpha.5';`
	`23`	`+ public const string VERSION = '1.0.0-alpha.5';`
`24`	`24`
`25`	`25`	`public readonly Container $container;`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ final class RawElement implements Element`
`14`	`14`	`public function __construct(`
`15`	`15`	`private readonly ?string $tag,`
`16`	`16`	`private readonly string $content,`
`17`		`- array $attributes,`
	`17`	`+ array $attributes = [],`
`18`	`18`	`) {`
`19`	`19`	`$this->attributes = $attributes;`
`20`	`20`	`}`