Support v-for="(item, index)"

This adds rudimentary support for iterating over a value with the
optional second argument for the index. (Because lists and objects are
so similar in PHP, this also doubles as support for iterating over an
object with the optional second argument for the key; the optional third
argument for the index in that case is not supported, though.)

Note that, due to the limited JS evaluation in this templating engine,
there’s not a whole lot you can do with the index. In the WikibaseLexeme
use case, the index is only actually used in a part of the template
that’s never server-side rendered; the loop still has to be declared
using the index form even for the PHP renderer, though.

The unrelated change from v-else="" to v-else in the fixtures was
generated by `npm run-script populate-fixtures`, presumably due to a
newer Vue.js version now being used – we don’t commit the
package-lock.json (yet?). I figured I might as well add it, since one of
the fixtures is changed anyways to test the feature.

Author: lucaswerkmeister

src/Component.php

@@ -240,10 +240,21 @@ private function handleFor( DOMNode $node, array $data ) {
 			list( $itemName, $listName ) = explode( ' in ', $node->getAttribute( 'v-for' ) );
 			$node->removeAttribute( 'v-for' );
 
-			foreach ( $data[$listName] as $item ) {
+			if ( preg_match( '/\((?P<itemName>[^,]+)\s*,\s*(?P<keyName>[^\)]+)\)/', $itemName, $matches ) ) {
+				$itemName = $matches['itemName'];
+				$keyName = $matches['keyName'];
+			} else {
+				$keyName = null;
+			}
+
+			foreach ( $data[$listName] as $key => $item ) {
 				$newNode = $node->cloneNode( true );
 				$node->parentNode->insertBefore( $newNode, $node );
-				$this->handleNode( $newNode, array_merge( $data, [ $itemName => $item ] ) );
+				$newData = array_merge( $data, [ $itemName => $item ] );
+				if ( $keyName !== null ) {
+					$newData[$keyName] = $key;
+				}
+				$this->handleNode( $newNode, $newData );
 			}
 
 			$this->removeNode( $node );

tests/integration/fixture/gloss_widget.html

@@ -3,14 +3,14 @@
         <div class="wikibase-lexeme-sense-glosses-list">
             <table class="wikibase-lexeme-sense-glosses-table">
                 <tbody>
-                <tr v-for="gloss in glosses" class="wikibase-lexeme-sense-gloss">
+                <tr v-for="(gloss, index) in glosses" class="wikibase-lexeme-sense-gloss">
                     <td class="wikibase-lexeme-sense-gloss-language">
                         <span v-if="!inEditMode">{{gloss.language}}</span>
-                        <input v-else="" class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
+                        <input v-else class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
                     </td>
                     <td class="wikibase-lexeme-sense-gloss-value">
                         <span v-if="!inEditMode" :dir="gloss.language|directionality" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
-                        <input v-else="" class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving">
+                        <input v-else class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving" :autofocus="index == glosses.length - 1">
                     </td>
                 </tr>
                 </tbody>

tests/integration/fixture/lemma_widget.html

@@ -7,7 +7,7 @@
                 <span class="lemma-widget_lemma-language">{{lemma.language}}</span>
             </li>
         </ul>
-        <div v-else="">
+        <div v-else>
             <div class="lemma-widget_edit-area">
                 <ul class="lemma-widget_lemma-list">
                     <li v-for="lemma in lemmas" class="lemma-widget_lemma-edit-box">

tests/php/TemplatingTest.php

@@ -271,6 +271,30 @@ public function templateWithForLoopMustache_RendersCorrectValues() {
 		assertThat( $result, is( equalTo( '<p><a>1</a><a>2</a></p>' ) ) );
 	}
 
+	/**
+	 * @test
+	 */
+	public function templateWithForLoopWithIndex_RendersValuesAndIndices() {
+		$result = $this->createAndRender(
+			'<p><a v-for="(item, index) in list">{{index}}: {{item}}</a></p>',
+			[ 'list' => [ 10, 20 ] ]
+		);
+
+		assertThat( $result, is( equalTo( '<p><a>0: 10</a><a>1: 20</a></p>' ) ) );
+	}
+
+	/**
+	 * @test
+	 */
+	public function templateWithForLoopWithKey_RendersValuesAndKeys() {
+		$result = $this->createAndRender(
+			'<p><a v-for="(item, key) in list">{{key}}: {{item}}</a></p>',
+			[ 'list' => [ 'ten' => 10, 'twenty' => 20 ] ]
+		);
+
+		assertThat( $result, is( equalTo( '<p><a>ten: 10</a><a>twenty: 20</a></p>' ) ) );
+	}
+
 	/**
 	 * @test
 	 */