From 27133b3f6432620e7e17d7e3bdbb43dbb4e0d2a3 Mon Sep 17 00:00:00 2001
From: Arthur Taylor <arthur.taylor@wikimedia.de>
Date: Tue, 15 Jul 2025 10:29:50 +0200
Subject: [PATCH] Add support for Javascript expressions in `v-html` attributes

`v-html` attributes currently only support direct references to
top-level variables in the template data.

Use the Peast Javascript expression parsing support to make it
possible to evaluate expressions in `v-html` attributes.

Bug: T396098
---
 src/Component.php            | 4 ++--
 tests/php/TemplatingTest.php | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Component.php b/src/Component.php
index 0ea82b1..54fa4c9 100644
--- a/src/Component.php
+++ b/src/Component.php
@@ -316,10 +316,10 @@ private function handleRawHtml( DOMNode $node, array $data ) {
 
 		/** @var DOMElement $node */
 		if ( $node->hasAttribute( 'v-html' ) ) {
-			$variableName = $node->getAttribute( 'v-html' );
+			$htmlExpression = $node->getAttribute( 'v-html' );
 			$node->removeAttribute( 'v-html' );
 
-			$this->appendHTML( $node, $data[$variableName] );
+			$this->appendHTML( $node, $this->app->evaluateExpression( $htmlExpression, $data ) );
 		}
 	}
 
diff --git a/tests/php/TemplatingTest.php b/tests/php/TemplatingTest.php
index 6657042..cdf6972 100644
--- a/tests/php/TemplatingTest.php
+++ b/tests/php/TemplatingTest.php
@@ -102,6 +102,15 @@ public function testTemplateWithVhtmlVariable_ReplacesVariableWithGivenValue() {
 		$this->assertSame( '<div><div><p>some value</p></div></div>', $result );
 	}
 
+	public function testTemplateWithVhtmlVariableNestedData_ReplacesVariableWithGivenValue() {
+		$result = $this->createAndRender(
+			'<div><div v-html="value.html"></div></div>',
+			[ 'value' => [ 'html' => '<p>some value</p>' ] ]
+		);
+
+		$this->assertSame( '<div><div><p>some value</p></div></div>', $result );
+	}
+
 	public function testTemplateWithVhtmlVariableAndAttributeBinding_ReplacesBoth(): void {
 		$result = $this->createAndRender(
 			'<div><div :data-a="a" v-html="html"></div></div>',