WIP SKETCH: Add support for callable components

We’ll use this for Codex-PHP integration.

TODO: The callable component also needs access to the component node’s
children (e.g. the “text” in <cdx-button>text</cdx-button>.

Author: lucaswerkmeister

src/App.php

@@ -21,6 +21,8 @@ class App {
 	/** @var (Component|string|callable)[] */
 	private $components = [];
 
+	private $callableComponents = [];
+
 	/**
 	 * @param callable[] $methods The available methods.
 	 * The key is the method name, the value is the corresponding callable.
@@ -42,6 +44,10 @@ public function registerComponentTemplate( string $name, $template ): void {
 		$this->components[$name] = $template;
 	}
 
+	public function registerComponentCallable( string $name, callable $callable ): void {
+		$this->callableComponents[$name] = $callable;
+	}
+
 	public function evaluateExpression( string $expression, array $data ) {
 		return $this->expressionParser->parse( $expression )
 			->evaluate( $data );
@@ -53,6 +59,12 @@ public function renderComponent( string $componentName, array $data ): string {
 	}
 
 	public function renderComponentToDOM( string $componentName, array $data ): DOMElement {
+		$callableComponent = $this->callableComponents[$componentName] ?? null;
+		if ( $callableComponent !== null ) {
+			$html = $callableComponent( $data );
+			$document = $this->htmlParser->parseHtml( $html );
+			return $this->htmlParser->getRootNode( $document );
+		}
 		return $this->getComponent( $componentName )
 			->render( $data );
 	}

tests/php/AppTest.php

@@ -49,4 +49,14 @@ public function testNestedComponents(): void {
 		$this->assertSame( '<div><p><span>text</span></p></div>', $result );
 	}
 
+	public function testCallableComponent(): void {
+		$app = new App( [] );
+		$app->registerComponentTemplate( 'root', '<div><x-a :a="rootVar"></x-a></div>' );
+		$app->registerComponentCallable( 'x-a', fn ( $data ) => '<p>' . strtoupper( $data['a'] ) . '</p>' );
+
+		$result = $app->renderComponent( 'root', [ 'rootVar' => 'text' ] );
+
+		$this->assertSame( '<div><p>TEXT</p></div>', $result );
+	}
+
 }