Support single-file component inputs

lucaswerkmeister · lucaswerkmeister · commit 343a22a42cef · 2025-06-03T16:49:23.000+02:00
If the input contains a single root <template> and the other root elements are all <script> or <style>, then pick the <template> contents as the actual root element and only render its contents. This allows us to use SFC *.vue files as the input. The getRootNode() method is now obnoxiously long and should certainly be split up, I’m just not yet sure how. Maybe both parseHtml() and getRootNode() should be in a separate class, and Component’s responsibility starts at a DOMNode (with the current methods handleNode() + saveHTML()). (But keep in mind that v-html handling depends on parseHtml(), so if that moves to a separate class, Component still needs to be able to access it…) Bug: T395802
diff --git a/src/Component.php b/src/Component.php
@@ -99,13 +99,65 @@ private function getRootNode( DOMDocument $document ) {
 			throw new Exception( 'Empty document' );
 		}
 
+		// documentElement is the <html>, its child is the <body>, its children are the actual root nodes
 		$rootNodes = $document->documentElement->childNodes[0]->childNodes;
 
-		if ( $rootNodes->length > 1 ) {
-			throw new Exception( 'Template should have only one root node' );
+		// potentially pick just the <template> contents of a single-file component (SFC)
+		$onlyTemplateElement = null;
+		foreach ( $rootNodes as $node ) {
+			if ( $node->nodeType === XML_COMMENT_NODE ) {
+				// comment node, ignore
+				continue;
+			} elseif ( $node->nodeType === XML_TEXT_NODE ) {
+				if ( trim( $node->textContent ) === '' ) {
+					// whitespace-only text node, ignore
+					continue;
+				} else {
+					// not SFC
+					$onlyTemplateElement = null;
+					break;
+				}
+			}
+			if ( $node->tagName === 'template' ) {
+				if ( $onlyTemplateElement === null ) {
+					$onlyTemplateElement = $node;
+				} else {
+					// more than one <template>, handle as non-SFC and throw error below
+					$onlyTemplateElement = null;
+					break;
+				}
+			} elseif ( $node->tagName !== 'script' && $node->tagName !== 'style' ) {
+				// top-level tag other than <template>, <script> or <style> => not SFC
+				$onlyTemplateElement = null;
+				break;
+			}
+		}
+		if ( $onlyTemplateElement !== null ) {
+			$rootNodes = $onlyTemplateElement->childNodes;
+		}
+
+		// pick the only “substantial” child element as the root (ignore whitespace, comments)
+		$onlyRootElement = null;
+		foreach ( $rootNodes as $node ) {
+			if ( $node->nodeType === XML_COMMENT_NODE ) {
+				// comment node, ignore
+				continue;
+			} elseif ( $node->nodeType === XML_TEXT_NODE && trim( $node->textContent ) === '' ) {
+				// whitespace-only text node, ignore
+				continue;
+			}
+			if ( $onlyRootElement === null ) {
+				$onlyRootElement = $node;
+			} else {
+				throw new Exception( 'Template should only have one root node' );
+			}
 		}
 
-		return $rootNodes[0];
+		if ( $onlyRootElement !== null ) {
+			return $onlyRootElement;
+		} else {
+			throw new Exception( 'Template contained no root node' );
+		}
 	}
 
 	/**
diff --git a/tests/php/TemplatingTest.php b/tests/php/TemplatingTest.php
@@ -17,6 +17,39 @@ public function testJustASingleEmptyHtmlElement() {
 		$this->assertSame( '<div></div>', $result );
 	}
 
+	public function testSingleFileComponent_OnlyTemplate(): void {
+		$result = $this->createAndRender( '<template><div></div></template>', [] );
+
+		$this->assertSame( '<div></div>', $result );
+	}
+
+	public function testSingleFileComponent_TemplateAndScriptAndStyle(): void {
+		$template = <<< 'EOF'
+<template>
+	<!-- eslint-disable-next-line something -->
+	<div></div>
+</template>
+<script setup>
+const something = 'something';
+</script>
+<style scoped>
+.some-class {
+	font-weight: bold;
+}
+</style>
+EOF;
+		$result = $this->createAndRender( $template, [] );
+
+		$this->assertSame( '<div></div>', $result );
+	}
+
+	public function testSingleFileComponent_ScriptAndTemplateAndStyle(): void {
+		$template = '<script></script><template><div></div></template>';
+		$result = $this->createAndRender( $template, [] );
+
+		$this->assertSame( '<div></div>', $result );
+	}
+
 	public function testTemplateHasNoRootNodes_ThrowsAnException(): void {
 		$this->expectException( Exception::class );
 		$this->createAndRender( '', [] );
