Add support for setup functions

src/App.php

@@ -21,6 +21,8 @@ class App {
 	/** @var (Component|string|callable)[] */
 	private $components = [];
 
+	private $componentSetups = [];
+
 	/**
 	 * @param callable[] $methods The available methods.
 	 * The key is the method name, the value is the corresponding callable.
@@ -36,10 +38,17 @@ public function __construct( array $methods ) {
 	 * @param string $name The component name.
 	 * @param string|callable $template Either the template HTML as a string,
 	 * or a callable that will return the template HTML as a string when called with no arguments.
+	 * @param callable|null $setup An optional setup function.
+	 * If set, the callable is called with the array of data used to render the component,
+	 * and whichever array it returns is then used to actually render the template.
+	 * This can be used, for example, to add additional data (the equivalent of `computed` in JS).
 	 * @return void
 	 */
-	public function registerComponentTemplate( string $name, $template ): void {
+	public function registerComponentTemplate( string $name, $template, ?callable $setup = null ): void {
 		$this->components[$name] = $template;
+		if ( $setup !== null ) {
+			$this->componentSetups[$name] = $setup;
+		}
 	}
 
 	public function evaluateExpression( string $expression, array $data ) {
@@ -53,6 +62,10 @@ public function renderComponent( string $componentName, array $data ): string {
 	}
 
 	public function renderComponentToDOM( string $componentName, array $data ): DOMElement {
+		$setup = $this->componentSetups[$componentName] ?? null;
+		if ( $setup !== null ) {
+			$data = $setup( $data );
+		}
 		return $this->getComponent( $componentName )
 			->render( $data );
 	}

tests/php/AppTest.php

@@ -74,4 +74,66 @@ public function testComponentPropKebabCase(): void {
 		$this->assertSame( '<div><p>A B C</p><p>X Y Z</p></div>', $result );
 	}
 
+	public function testComputedProperties(): void {
+		$app = new App( [] );
+
+		$rootTemplate = <<< HTML
+<template>
+	<div>
+		<x-property :property-id="propertyId"></x-property>
+	</div>
+</template>
+<script>
+// import ...
+module.exports = exports = defineComponent( {
+	// name, components, props, ...
+	computed: {
+		propertyId() {
+			return statement.mainsnak.property;
+		}
+	}
+} );
+</script>
+HTML;
+		$app->registerComponentTemplate( 'root', $rootTemplate, function ( array $data ): array {
+			$data['propertyId'] = $data['statement']['mainsnak']['property'];
+			return $data;
+		} );
+
+		$propertyTemplate = <<< HTML
+<template>
+	<a :href="propertyUrl">{{ propertyLabel }}</a>
+</template>
+<script>
+// import ...
+module.exports = exports = defineComponent( {
+	// name, props, ...
+	computed: {
+		propertyUrl() {
+			return util.getPropertyUrl( this.propertyId );
+		},
+		propertyLabel() {
+			return labelsStore.getLabel( this.propertyId );
+		}
+	}
+} );
+</script>
+HTML;
+		$app->registerComponentTemplate( 'x-property', $propertyTemplate, function ( array $data ): array {
+			$propertyId = $data['propertyId'];
+			$data['propertyUrl'] = "https://wiki.example/wiki/Property:$propertyId";
+			$data['propertyLabel'] = "property $propertyId";
+			return $data;
+		} );
+
+		$result = $app->renderComponent( 'root',
+			[ 'statement' => [ 'mainsnak' => [ 'property' => 'P123' ] ] ] );
+
+		$expected = <<< HTML
+<div>
+		<a href="https://wiki.example/wiki/Property:P123">property P123</a></div>
+HTML;
+		$this->assertSame( $expected, $result );
+	}
+
 }