Merge pull request #10 from Paneon/develop

Develop

Author: Macavity

README.md

@@ -16,9 +16,9 @@ Compile vue files to twig templates with PHP
 |v-else-if|:white_check_mark:|
 |v-for|:white_check_mark:|
 |v-on|:white_check_mark:|
-|v-bind||
-|v-bind:style||
-|v-bind:class||
+|v-bind|partially working|
+|v-bind:style|partially working|
+|v-bind:class|partially working|
 |v-model||
 |v-pre||
 |v-cloak||
@@ -30,7 +30,7 @@ Compile vue files to twig templates with PHP
 |Functionality|Implemented|
 |:------------|:---------:|
 |Slots||
-|Components||
+|Components|:white_check_mark:|
 |Filters||
 
 

src/Compiler.php

@@ -105,32 +105,26 @@ public function convertNode(DOMNode $node): DOMNode
             $currentComponent = $this->components[$node->nodeName];
             $this->handleIf($node);
             $this->handleFor($node);
+
             if ($node->hasAttributes()) {
                 /** @var DOMAttr $attribute */
                 foreach ($node->attributes as $attribute) {
                     if (strpos($attribute->name, 'v-bind:') === 0 || strpos($attribute->name, ':') === 0) {
-                        $currentComponent->addProperty($attribute->name, $attribute->value, true);
-                    } else {
-                        $currentComponent->addProperty($attribute->name, $attribute->value, false);
-                    }
-                }
-            }
-            $props = [];
-            if (count($currentComponent->getProperties()) > 0) {
-                foreach ($currentComponent->getProperties() as $property) {
-                    if ($property->isBinding()){
-                        $propName = substr($property->getName(), 1); //delete ':'
-                        $props[] = $propName.': '.$property->getValue();
+                        $name = substr($attribute->name, strpos($attribute->name, ':') + 1);
+                        $currentComponent->addProperty($name, $attribute->value, true);
                     } else {
-                        $props[] = $property->getName().': "'.$property->getValue().'"';
+                        $currentComponent->addProperty($attribute->name, '"'.$attribute->value.'"', false);
                     }
                 }
             }
-            $propsString = '';
-            if (count($props) > 0) {
-                $propsString = 'with { '.implode(', ', $props).' } ';
-            }
-            $include = $this->document->createTextNode('{% include "'.$currentComponent->getPath().'" '.$propsString.'%}');
+
+            $include = $this->document->createTextNode(
+                $this->builder->createIncludePartial(
+                    $currentComponent->getPath(),
+                    $currentComponent->getProperties()
+                )
+            );
+
             $node->parentNode->insertBefore($include, $node);
             $node->parentNode->removeChild($node);
             return $node;

src/Utils/TwigBuilder.php

@@ -2,6 +2,8 @@
 
 namespace Paneon\VueToTwig\Utils;
 
+use Paneon\VueToTwig\Property;
+
 class TwigBuilder
 {
     protected const OPEN = 0;
@@ -57,19 +59,17 @@ public function createForKeyInList(string $key, string $list)
 
     public function createFor(string $list, ?string $item = null, ?string $key = null)
     {
-        if($item !== null && $key !== null) {
-            return $this->createBlock( 'for '.$key.', '.$item.' in '.$list);
-        }
-        elseif($item !== null) {
+        if ($item !== null && $key !== null) {
+            return $this->createBlock('for '.$key.', '.$item.' in '.$list);
+        } elseif ($item !== null) {
             return $this->createForItemInList($item, $list);
-        }
-        elseif($key !== null) {
+        } elseif ($key !== null) {
             return $this->createForKeyInList($key, $list);
         }
 
         return null;
     }
-    
+
     public function createEndFor()
     {
         return $this->createBlock('endfor');
@@ -89,4 +89,24 @@ public function createBlock($content)
     {
         return $this->options['tag_block'][self::OPEN].' '.$content.' '.$this->options['tag_block'][self::CLOSE];
     }
+
+    /**
+     * @param string $partialPath
+     * @param Property[]  $variables
+     */
+    public function createIncludePartial(string $partialPath, array $variables = [])
+    {
+        if (empty($variables)) {
+            return $this->createBlock('include "'.$partialPath.'"');
+        }
+
+        $props = [];
+
+        /** @var Property $property */
+        foreach ($variables as $property) {
+            $props[] = $property->getName().': '.$property->getValue();
+        }
+
+        return $this->createBlock('include "'.$partialPath.'" with { '.implode(', ', $props).' }');
+    }
 }