Support single-file component inputs

lucaswerkmeister · lucaswerkmeister · commit 84311aecb35f · 2025-06-02T18:21:00.000+02:00
If the input starts with a <template> element, 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 to use SFC *.vue files as the input. Note that this requires the <template> to be the first child, rather than e.g. between the <script> and <style>. (Also, it doesn’t allow any other nodes on the root level, not even comments. Though whitespace apparently gets stripped out by libxml, so that’s fine.) This is kind of justifiable because it’s enforced by eslint-config-wikimedia via the vue/component-tags-order rule, but still probably worth fixing later. Bug: T395802
diff --git a/src/Component.php b/src/Component.php
@@ -99,13 +99,51 @@ 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->item( 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)
+		if ( $rootNodes->item( 0 )->tagName === 'template' ) {
+			$sfc = true;
+			for ( $i = 1; $i < $rootNodes->length; $i++ ) {
+				$otherNode = $rootNodes->item( $i );
+				if ( $otherNode->nodeType !== XML_ELEMENT_NODE ) {
+					$sfc = false;
+					break;
+				}
+				if ( $otherNode->tagName !== 'script' && $otherNode->tagName !== 'style' ) {
+					$sfc = false;
+					break;
+				}
+			}
+			if ( $sfc ) {
+				$rootNodes = $rootNodes->item( 0 )->childNodes;
+			}
+		}
+
+		// pick the only “substantial” child element as the root (ignore whitespace, comments)
+		$onlyRootElement = null;
+		for ( $i = 0; $i < $rootNodes->length; $i++ ) {
+			$node = $rootNodes->item( $i );
+			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->item( 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,32 @@ 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 testTemplateHasNoRootNodes_ThrowsAnException(): void {
 		$this->expectException( Exception::class );
 		$this->createAndRender( '', [] );
