Support sub-components

This is a bit odd in that Component doesn’t even know which components
are registered in the app; sub-component handling is triggered iff the
tag name contains a hyphen. I think this is reasonable, but we might
still end up changing it.

Note that the sub-component must be a descendent of the template root
note; a template cannot just consist of a call to a sub-component. (If
it does, Component::render() crashes when trying to remove the $rootNode
from the cloneOwner because it’s already been replaced in
handleComponent().)

Author: lucaswerkmeister

src/Component.php

@@ -54,11 +54,13 @@ private function handleNode( DOMNode $node, array $data ) {
 			$this->handleRawHtml( $node, $data );
 
 			if ( !$this->isRemovedFromTheDom( $node ) ) {
-				$this->handleAttributeBinding( $node, $data );
-				$this->handleIf( $node->childNodes, $data );
+				if ( !$this->handleComponent( $node, $data ) ) {
+					$this->handleAttributeBinding( $node, $data );
+					$this->handleIf( $node->childNodes, $data );
 
-				foreach ( iterator_to_array( $node->childNodes ) as $childNode ) {
-					$this->handleNode( $childNode, $data );
+					foreach ( iterator_to_array( $node->childNodes ) as $childNode ) {
+						$this->handleNode( $childNode, $data );
+					}
 				}
 			}
 		}
@@ -105,6 +107,30 @@ private function replaceMustacheVariables( DOMNode $node, array $data ) {
 		}
 	}
 
+	/** @return bool true if it was a component, false otherwise */
+	private function handleComponent( DOMElement $node, array $data ): bool {
+		if ( strpos( $node->tagName, '-' ) === false ) {
+			return false;
+		}
+		$componentName = $node->tagName;
+
+		$componentData = [];
+		foreach ( $node->attributes as $attribute ) {
+			if ( str_starts_with( $attribute->name, ':' ) ) { // TODO also v-bind: ?
+				$name = substr( $attribute->name, 1 );
+				$value = $this->app->evaluateExpression( $attribute->value, $data );
+			} else {
+				$name = $attribute->name;
+				$value = $attribute->value;
+			}
+			$componentData[$name] = $value;
+		}
+		$rendered = $this->app->renderComponentToDOM( $componentName, $componentData );
+		// TODO use adoptNode() instead of importNode() in PHP 8.3+ (see php-src commit ed6df1f0ad)
+		$node->replaceWith( $node->ownerDocument->importNode( $rendered, true ) );
+		return true;
+	}
+
 	private function handleAttributeBinding( DOMElement $node, array $data ) {
 		/** @var DOMAttr $attribute */
 		foreach ( iterator_to_array( $node->attributes ) as $attribute ) {

src/HtmlParser.php

@@ -43,10 +43,12 @@ public function parseHtml( string $html ): DOMDocument {
 
 		$exception = null;
 		foreach ( $errors as $error ) {
-			if ( str_starts_with( $error->message, 'Tag template invalid' ) ) {
+			$msg = $error->message;
+			if ( str_starts_with( $msg, 'Tag ' ) && str_ends_with( $msg, " invalid\n" ) ) {
+				// discard "Tag xyz invalid" messages from libxml2 < 2.14.0(?)
 				continue;
 			}
-			$exception = new Exception( $error->message, $error->code, $exception );
+			$exception = new Exception( $msg, $error->code, $exception );
 		}
 		if ( $exception !== null ) {
 			throw $exception;

tests/php/AppTest.php

@@ -38,4 +38,27 @@ public function testAppInitsComponentLazily(): void {
 		$this->assertTrue( $called );
 	}
 
+	public function testNestedComponents(): void {
+		$app = new App( [] );
+		$app->registerComponentTemplate( 'root', '<div><x-a :a="rootVar"></x-a></div>' );
+		$app->registerComponentTemplate( 'x-a', '<p><x-b :b="a"></x-b></p>' );
+		$app->registerComponentTemplate( 'x-b', '<span>{{ b }}</span>' );
+
+		$result = $app->renderComponent( 'root', [ 'rootVar' => 'text' ] );
+
+		$this->assertSame( '<div><p><span>text</span></p></div>', $result );
+	}
+
+	public function testNestedComponentObjectProp(): void {
+		$app = new App( [] );
+		$app->registerComponentTemplate( 'root', '<div><x-a :obj="rootObj"></x-a></div>' );
+		$app->registerComponentTemplate( 'x-a', '<p>obj = { a: {{ obj.a }}, b: {{ obj.b }} }</p>' );
+
+		$result = $app->renderComponent( 'root', [
+			'rootObj' => [ 'a' => 'A', 'b' => 'B' ],
+		] );
+
+		$this->assertSame( '<div><p>obj = { a: A, b: B }</p></div>', $result );
+	}
+
 }