Add support for v-else-if attributes

php-vuejs-templating already supports `v-if` and `v-else` attributes.
Add support for `v-else-if` to complete the conditional node support.

Bug: T398318

Author: codders

src/Component.php

@@ -57,7 +57,7 @@ private function handleNode( DOMNode $node, array $data ) {
 			if ( !$this->isRemovedFromTheDom( $node ) ) {
 				if ( !$this->handleComponent( $node, $data ) ) {
 					$this->handleAttributeBinding( $node, $data );
-					$this->handleIf( $node->childNodes, $data );
+					$this->handleConditionalNodes( $node->childNodes, $data );
 
 					foreach ( iterator_to_array( $node->childNodes ) as $childNode ) {
 						$this->handleNode( $childNode, $data );
@@ -186,33 +186,64 @@ private function handleAttributeBinding( DOMElement $node, array $data ) {
 		}
 	}
 
+	private function handleIf(
+		DOMNode $node,
+		array $data,
+		bool $previousIfCondition,
+		array &$nodesToRemove
+	): bool {
+		$conditionString = $node->getAttribute( 'v-if' );
+		$node->removeAttribute( 'v-if' );
+		$condition = $this->app->evaluateExpression( $conditionString, $data );
+
+		if ( !$condition ) {
+			$nodesToRemove[] = $node;
+		}
+
+		return $condition;
+	}
+
+	private function handleElseIf(
+		DOMNode $node,
+		array $data,
+		bool $previousIfCondition,
+		array &$nodesToRemove
+	): bool {
+		$conditionString = $node->getAttribute( 'v-else-if' );
+		$node->removeAttribute( 'v-else-if' );
+		if ( !$previousIfCondition ) {
+			$condition = $this->app->evaluateExpression( $conditionString, $data );
+
+			if ( !$condition ) {
+				$nodesToRemove[] = $node;
+			}
+			return $condition;
+		}
+		$nodesToRemove[] = $node;
+		return $previousIfCondition;
+	}
+
 	/**
 	 * @param DOMNodeList $nodes
 	 * @param array $data
 	 */
-	private function handleIf( DOMNodeList $nodes, array $data ) {
+	private function handleConditionalNodes( DOMNodeList $nodes, array $data ) {
 		// Iteration of iterator breaks if we try to remove items while iterating, so defer node
 		// removing until finished iterating.
 		$nodesToRemove = [];
+		$previousIfCondition = false;
 		foreach ( $nodes as $node ) {
 			if ( $this->isTextNode( $node ) ) {
 				continue;
 			}
 
 			/** @var DOMElement $node */
 			if ( $node->hasAttribute( 'v-if' ) ) {
-				$conditionString = $node->getAttribute( 'v-if' );
-				$node->removeAttribute( 'v-if' );
-				$condition = $this->app->evaluateExpression( $conditionString, $data );
-
-				if ( !$condition ) {
-					$nodesToRemove[] = $node;
-				}
-
-				$previousIfCondition = $condition;
+				$previousIfCondition = $this->handleIf( $node, $data, $previousIfCondition, $nodesToRemove );
+			} elseif ( $node->hasAttribute( 'v-else-if' ) ) {
+				$previousIfCondition = $this->handleElseIf( $node, $data, $previousIfCondition, $nodesToRemove );
 			} elseif ( $node->hasAttribute( 'v-else' ) ) {
 				$node->removeAttribute( 'v-else' );
-
 				if ( $previousIfCondition ) {
 					$nodesToRemove[] = $node;
 				}

tests/php/TemplatingTest.php

@@ -192,6 +192,36 @@ public function testTemplateWithIfElseBlockAndNontruthfulCondition_ElseIsDisplay
 		$this->assertSame( '<p><a>else</a></p>', $result );
 	}
 
+	public function testTemplateWithElseIfBlockAndTruthfulCondition_IfAndElseRemoved() {
+		$result = $this->createAndRender(
+			'<p><a v-if="variable">if</a><a v-else-if="other_variable">else if</a>' .
+				'<a v-else>else</a></p>',
+			[ 'variable' => false, 'other_variable' => true ]
+		);
+
+		$this->assertSame( '<p><a>else if</a></p>', $result );
+	}
+
+	public function testTemplateWithElseIfBlockAndTruthfulCondition_OnlyFirstElseIfShows() {
+		$result = $this->createAndRender(
+			'<p><a v-if="variable">if</a><a v-else-if="other_variable">else if</a>' .
+				'<a v-else-if="still_another">another else</a><a v-else>else</a></p>',
+			[ 'variable' => false, 'other_variable' => true, 'still_another' => true ]
+		);
+
+		$this->assertSame( '<p><a>else if</a></p>', $result );
+	}
+
+	public function testTemplateWithElseIfBlockAndTruthfulIfAndElseIfCondition_IfElseRemoved() {
+		$result = $this->createAndRender(
+			'<p><a v-if="variable">if</a><a v-else-if="other_variable">else if</a>' .
+				'<a v-else>else</a></p>',
+			[ 'variable' => true, 'other_variable' => true ]
+		);
+
+		$this->assertSame( '<p><a>if</a></p>', $result );
+	}
+
 	public function testTemplateWithForLoopAndEmptyArrayToIterate_NotRendered() {
 		$result = $this->createAndRender( '<p><a v-for="item in list"></a></p>', [ 'list' => [] ] );