Add support for v-for attributes on template tags

Sometimes it is useful to be able to iterate in a template without
adding additional levels of HTML nesting to the DOM. Vue supports
iterating with `v-for` attributes on `template` elements for this
use case.

Add support for `v-for` loops with `template` tags.

Bug: T396098

Author: codders

src/Component.php

@@ -94,6 +94,40 @@ private function convertDataValueToString( $value ) {
 		return json_encode( $value );
 	}
 
+	private function safeModifyChildren( DOMNode $parent, DOMNode $oldNode, array $newNodes, bool $insert = false ) {
+		// TODO To work around the double-free, we detach all the children of the parent node and
+		// re-attach them in the correct sequence, replacing the target node with our newly-imported
+		// node. Once `mwcli` has moved off this outdated version of PHP (T388411) we should be able
+		// to remove this workaround. T398821
+		$children = [];
+		foreach ( iterator_to_array( $parent->childNodes ) as $child ) {
+			if ( $child === $oldNode ) {
+				$children = array_merge( $children, $newNodes );
+			}
+			if ( $insert || $child !== $oldNode ) {
+				$children[] = $child;
+			}
+			$child->remove();
+		}
+
+		foreach ( $children as $child ) {
+			$parent->appendChild( $child );
+		}
+	}
+
+	private function safeReplaceNode( DOMNode $parent, DOMNode $oldNode, array $newNodes ) {
+		$this->safeModifyChildren( $parent, $oldNode, $newNodes, false );
+	}
+
+	private function safeInsertBefore( DOMNode $parent, DOMNode $oldNode, array $newNodes ) {
+		$this->safeModifyChildren( $parent, $oldNode, $newNodes, true );
+	}
+
+	private function replaceNodeWithChildren( DOMNode $node ) {
+		$children = iterator_to_array( $node->childNodes );
+		$this->safeReplaceNode( $node->parentNode, $node, $children );
+	}
+
 	/**
 	 * @param DOMNode $node
 	 * @param array $data
@@ -145,24 +179,7 @@ private function handleComponent( DOMElement $node, array $data ): bool {
 		if ( $node != $importNode ) {
 			$node->replaceWith( $importNode );
 		} else {
-			// TODO To work around the double-free, we detach all the children of the parent node and
-			// re-attach them in the correct sequence, replacing the target node with our newly-imported
-			// node. Once `mwcli` has moved off this outdated version of PHP (T388411) we should be able
-			// to remove this workaround. T398821
-			$parent = $node->parentNode;
-			$children = [];
-			foreach ( iterator_to_array( $parent->childNodes ) as $child ) {
-				if ( $child !== $node ) {
-					$children[] = $child;
-				} else {
-					$children[] = $importNode;
-				}
-				$child->remove();
-			}
-
-			foreach ( $children as $child ) {
-				$parent->appendChild( $child );
-			}
+			$this->safeReplaceNode( $node->parentNode, $node, [ $importNode ] );
 		}
 		return true;
 	}
@@ -286,14 +303,18 @@ private function handleFor( DOMNode $node, array $data ) {
 
 		/** @var DOMElement $node */
 		if ( $node->hasAttribute( 'v-for' ) ) {
+			$parentNode = $node->parentNode;
 			list( $itemName, $listName ) = explode( ' in ', $node->getAttribute( 'v-for' ) );
 			$node->removeAttribute( 'v-for' );
 			$node->removeAttribute( ':key' );
 
 			foreach ( $this->app->evaluateExpression( $listName, $data ) as $item ) {
 				$newNode = $node->cloneNode( true );
-				$node->parentNode->insertBefore( $newNode, $node );
+				$this->safeInsertBefore( $parentNode, $node, [ $newNode ] );
 				$this->handleNode( $newNode, array_merge( $data, [ $itemName => $item ] ) );
+				if ( $newNode->tagName === 'template' ) {
+					$this->replaceNodeWithChildren( $newNode );
+				}
 			}
 
 			$this->removeNode( $node );
@@ -324,7 +345,9 @@ private function handleRawHtml( DOMNode $node, array $data ) {
 	}
 
 	private function removeNode( DOMElement $node ) {
-		$node->parentNode->removeChild( $node );
+		if ( $node->parentNode ) {
+			$node->parentNode->removeChild( $node );
+		}
 	}
 
 	/**

tests/integration/fixture/template_tags.html

@@ -0,0 +1,16 @@
+<template id="template" type="text/x-template">
+<div>
+    <p></p>
+    <div v-html="link"></div>
+    <template v-for="item in items">
+        <p>{{ item }}</p>
+    </template>
+</div>
+</template>
+<script id="data" type="application/json">
+    {"condition":true , "link":"<a href=\"URL\">link</a>", "items": [ 1, 2, 3 ] }
+</script>
+<div id="result">
+	<!-- generated by `npm run-script populate-fixtures` -->
+	<div><p></p><div><a href="URL">link</a></div><!--[--><p>1</p><p>2</p><p>3</p><!--]--></div>
+</div>

tests/php/TemplatingTest.php

@@ -255,6 +255,39 @@ public function testTemplateWithForLoopAndSingleElementInArrayToIterate_Rendered
 		$this->assertSame( '<p><a></a></p>', $result );
 	}
 
+	public function testTemplateWithForLoopUsingTemplateElement_DropsTemplateTags() {
+		$result = $this->createAndRender(
+			'<p><template v-for="item in list">{{ item }}</template></p>',
+			[ 'list' => [ 1, 2 ] ]
+		);
+
+		$this->assertSame( '<p>12</p>', $result );
+	}
+
+	public function testTemplateWithNestedForLoopUsingTemplateElement_DropsTemplateTags() {
+		$result = $this->createAndRender(
+			'<p><template v-for="sublist in list">' .
+			'<template v-for="item in sublist">{{item}}</template></template></p>',
+			[ 'list' => [ [ 1, 2 ], [ 3, 4 ] ] ]
+		);
+
+		$this->assertSame( '<p>1234</p>', $result );
+	}
+
+	public function testTemplateWithForLoopUsingTemplateElement_RendersMultipleChildren() {
+		$result = $this->createAndRender(
+			'<dl><template v-for="item in list">' .
+			'<dt>{{item.dt}}</dt><dd>{{item.dd}}</dd></template></dl>',
+			[ 'list' => [
+				[ 'dt' => 'cat', 'dd' => 'a feline animal' ],
+				[ 'dt' => 'dog', 'dd' => 'a canine animal' ],
+			] ]
+		);
+
+		$this->assertSame( '<dl><dt>cat</dt><dd>a feline animal</dd>' .
+			'<dt>dog</dt><dd>a canine animal</dd></dl>', $result );
+	}
+
 	public function testTemplateWithForLoopAndMemberExpressionForData_RenderedOnce() {
 		$result = $this->createAndRender(
 			'<p><a v-for="item in list.data"></a></p>',