Implement v-for

Author: Macavity

README.md

@@ -4,3 +4,28 @@
 
 Compile vue files to twig templates with PHP
 
+## Directives
+
+|Directive|Implemented|
+|---------|:---------:|
+|v-text||
+|v-html||
+|v-show|:white_check_mark:|
+|v-if|:white_check_mark:|
+|v-else|:white_check_mark:|
+|v-else-if|:white_check_mark:|
+|v-for|:white_check_mark:|
+|v-on|:white_check_mark:|
+|v-bind||
+|v-model||
+|v-pre||
+|v-cloak||
+|v-once||
+
+## Other Functionalities
+
+|Functionality|Implemented|
+|:------------|:---------:|
+|Slots||
+|Components||
+|Filters||

src/Compiler.php

@@ -66,10 +66,10 @@ public function convertNode(DOMNode $node): DOMNode
 //        }
 
         $this->stripEventHandlers($node);
-        //$this->handleFor($node);
+        $this->handleFor($node);
         //$this->handleRawHtml($node, $data);
 
-        //$this->handleAttributeBinding($node);
+        $this->handleAttributeBinding($node);
 
         foreach (iterator_to_array($node->childNodes) as $childNode) {
             $this->convertNode($childNode);
@@ -92,13 +92,16 @@ private function handleAttributeBinding(DOMElement $node)
     {
         /** @var DOMAttr $attribute */
         foreach (iterator_to_array($node->attributes) as $attribute) {
-            dump($attribute->name);
+
             if (strpos($attribute->name, 'v-bind:') !== 0 && strpos($attribute->name, ':') !== 0) {
-                dump("- skip");
+                var_dump("- skip: ". $attribute->name);
                 continue;
             }
 
             $name = substr($attribute->name, 1);
+            $value = $attribute->value;
+            var_dump('- handle: '.$name.' = '.$value);
+
             if (is_bool($value)) {
                 if ($value) {
                     $node->setAttribute($name, $name);
@@ -180,29 +183,45 @@ private function handleIf(DOMElement $node): void
         }
     }
 
-    private function handleFor(DOMNode $node)
+    private function handleFor(DOMElement $node)
     {
-        if ($this->isTextNode($node)) {
-            return;
-        }
-
         /** @var DOMElement $node */
         if (!$node->hasAttribute('v-for')) {
             return;
         }
 
-        [$itemName, $listName] = explode(' in ', $node->getAttribute('v-for'));
-
-        // Start For
-        if (strpos($itemName, ',') !== false) {
-            [$keyName, $itemName] = explode(',', $itemName);
-            $keyName = trim($keyName, ' (');
-            $itemName = trim($itemName, ') ');
-            $startFor = $this->document->createTextNode('{% for ' . $itemName . ' in ' . $listName . ' %}' .
-                '{% set ' . $keyName . ' = index0 %}');
-        } else {
-            $startFor = $this->document->createTextNode('{% for ' . $itemName . ' in ' . $listName . ' %}');
+        [$forLeft, $listName] = explode(' in ', $node->getAttribute('v-for'));
+
+        /*
+         * Variations:
+         * (1) item in array
+         * (2) key, item in array
+         * (3) key, item, index in object
+         */
+
+        // (1)
+        $forCommand = '{% for ' . $forLeft . ' in ' . $listName . ' %}';
+
+        if (strpos($forLeft, ',')) {
+            $forLeft = str_replace('(', '', $forLeft);
+            $forLeft = str_replace(')', '', $forLeft);
+
+            $forLeftArray = explode(',', $forLeft);
+
+            $forValue = $forLeftArray[0];
+            $forKey = $forLeftArray[1];
+            $forIndex = $forLeftArray[2] ?? null;
+
+            // (2)
+            $forCommand = '{% for ' . $forKey . ', ' . $forValue . ' in ' . $listName . ' %}';
+
+            if ($forIndex) {
+                // (3)
+                $forCommand .= ' {% set ' . $forIndex . ' = loop.index0 %}';
+            }
         }
+
+        $startFor = $this->document->createTextNode($forCommand);
         $node->parentNode->insertBefore($startFor, $node);
 
         // End For

tests/VueForTest.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Macavity\VueToTwig\Tests;
+
+use Macavity\VueToTwig\Compiler;
+
+class VueForTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     * @throws \Exception
+     */
+    public function testFor($html, $expected)
+    {
+        $document = $this->createDocumentWithHtml($html);
+        $compiler = new Compiler($document);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('vue-for');
+    }
+}

tests/fixtures/vue-for/replaces-v-for.twig

@@ -0,0 +1,24 @@
+<div>
+  {% for item in items %}
+    <div>
+      {{ item.text }}
+    </div>
+  {% endfor %}
+  {% for key, item in items %}
+    <div>A</div>
+  {% endfor %}
+  {% for key, val in object %}
+    <div>B</div>
+  {% endfor %}
+  {% for key, val in object %}
+    {% set index = loop.index0 %}
+    <div>C</div>
+  {% endfor %}
+  <div>
+    {% for item in items %}
+      <div>
+        {{ item.text }}
+      </div>
+    {% endfor %}
+  </div>
+</div>

tests/fixtures/vue-for/replaces-v-for.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div v-for="item in items">
+      {{ item.text }}
+    </div>
+    <div v-for="(item, key) in items">A</div>
+    <div v-for="(val, key) in object">B</div>
+    <div v-for="(val, key, index) in object">C</div>
+    <div>
+      <div v-for="item in items" :key="item.id">
+        {{ item.text }}
+      </div>
+    </div>
+  </div>
+</template>