Use textContent, not wholeText, to process text nodes

The wholeText property contains the text of the current text node
together with any text nodes adjacent to it. Given that we’re processing
each text node separately, this doesn’t make sense and means we’re
potentially processing the same text multiple times – we should just
process textContent instead, which is the node’s own text.

I initially thought this bug wouldn’t be reproducible in practice
without manually constructing a DOM with two adjacent text nodes, but
then I realized a v-if with a false condition can easily produce such a
DOM naturally, hence the test case.

Author: lucaswerkmeister

src/Component.php

@@ -88,7 +88,7 @@ private function stripEventHandlers( DOMNode $node ) {
 	 */
 	private function replaceMustacheVariables( DOMNode $node, array $data ) {
 		if ( $node instanceof DOMText ) {
-			$text = $node->wholeText;
+			$text = $node->textContent;
 
 			$regex = '/\{\{(?P<expression>.*?)\}\}/x';
 			preg_match_all( $regex, $text, $matches );
@@ -100,7 +100,7 @@ private function replaceMustacheVariables( DOMNode $node, array $data ) {
 				$text = str_replace( $matches[0][$index], $value, $text );
 			}
 
-			if ( $text !== $node->wholeText ) {
+			if ( $text !== $node->textContent ) {
 				$newNode = $node->ownerDocument->createTextNode( $text );
 				$node->parentNode->replaceChild( $newNode, $node );
 			}

tests/php/TemplatingTest.php

@@ -272,6 +272,15 @@ public function testTemplateWithMethodAccessInAttributeBindingInsideTheLoop_Corr
 		$this->assertSame( '<p><a attr1="VALUE1"></a><a attr1="VALUE2"></a></p>', $result );
 	}
 
+	public function testMustacheAfterVIf(): void {
+		$result = $this->createAndRender(
+			'<p>a: {{ a }} <span v-if="b">b: {{ b }} </span>c: {{c }}</p>',
+			[ 'a' => 'A', 'b' => false, 'c' => 'C' ]
+		);
+
+		$this->assertSame( '<p>a: A c: C</p>', $result );
+	}
+
 	/**
 	 * @param string $template HTML
 	 * @param array $data