SHODEVS2-122 add second test case (child component with properties)

Author: Pia Sinzig

src/Compiler.php

@@ -73,7 +73,32 @@ public function convertNode(DOMNode $node): DOMNode
 
         if (in_array($node->nodeName, array_keys($this->components))) {
             $currentComponent = $this->components[$node->nodeName];
-            $include = $this->document->createTextNode('{% include "'.$currentComponent->getPath().'" %}');
+            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();
+                    } else {
+                        $props[] = $property->getName().': "'.$property->getValue().'"';
+                    }
+                }
+            }
+            $propsString = '';
+            if (count($props) > 0) {
+                $propsString = 'with { '.implode(', ', $props).' } ';
+            }
+            $include = $this->document->createTextNode('{% include "'.$currentComponent->getPath().'" '.$propsString.'%}');
             $node->parentNode->insertBefore($include, $node);
             $node->parentNode->removeChild($node);
         }

src/Component.php

@@ -19,6 +19,9 @@ class Component
      */
     protected $path;
 
+    /** @var Property[] */
+    protected $properties = [];
+
     public function __construct(string $name = '', string $path = '')
     {
         $this->name = $name;
@@ -33,6 +36,14 @@ public function getPath(){
         return $this->path;
     }
 
+    /**
+     * @return Property[]
+     */
+    public function getProperties(): array
+    {
+        return $this->properties;
+    }
+
     /**
      * @param string $fileName
      *
@@ -51,8 +62,13 @@ public function loadFile(string $fileName): self
         return $this;
     }
 
-    public function registerComponents($name, $path)
+    public function registerComponents(string $name, string $path)
     {
         $this->components[$name] = $path;
     }
+
+    public function addProperty(string $name, string $value, bool $isBinding = false) {
+        $this->properties[] = new Property($name, $value, $isBinding);
+    }
+
 }

src/Property.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Paneon\VueToTwig;
+
+class Property
+{
+    /**
+     * @var string
+     */
+    protected $name;
+    /**
+     * @var string
+     */
+    protected $value;
+    /**
+     * @var bool
+     */
+    protected $isBinding;
+
+    public function __construct(string $name, string $value, bool $isBinding)
+    {
+        $this->name = $name;
+        $this->value = $value;
+        $this->isBinding = $isBinding;
+    }
+
+    /**
+     * @return string
+     */
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    /**
+     * @return string
+     */
+    public function getValue(): string
+    {
+        return $this->value;
+    }
+
+    /**
+     * @return bool
+     */
+    public function isBinding(): bool
+    {
+        return $this->isBinding;
+    }
+
+}

tests/fixtures/vue-component/component-with-prop.twig

@@ -0,0 +1,3 @@
+<div>
+  {% include "/templates/ChildComponent.twig" with { product: testProduct, string: "Test" } %}
+</div>

tests/fixtures/vue-component/component-with-prop.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <ChildComponent :product="testProduct" string="Test" />
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithPropVue',
+    };
+</script>