Merge pull request #11 from Paneon/feature/SHODVES2-122

SHODEVS2-122 extend compiler with template strings in components

Author: Macavity

src/Utils/TwigBuilder.php

@@ -92,7 +92,9 @@ public function createBlock($content)
 
     /**
      * @param string $partialPath
-     * @param Property[]  $variables
+     * @param Property[] $variables
+     *
+     * @return string
      */
     public function createIncludePartial(string $partialPath, array $variables = [])
     {
@@ -104,9 +106,26 @@ public function createIncludePartial(string $partialPath, array $variables = [])
 
         /** @var Property $property */
         foreach ($variables as $property) {
-            $props[] = $property->getName().': '.$property->getValue();
+            if($property->getName() !== 'key') {
+                $value = $this->checkPropertyValue($property->getValue());
+                $props[] = $property->getName().': '.$value;
+            }
         }
 
         return $this->createBlock('include "'.$partialPath.'" with { '.implode(', ', $props).' }');
     }
+
+    public function checkPropertyValue($value)
+    {
+        if (preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
+            $templateStringContent = '"'.$matches['content'].'"';
+            $value = preg_replace(
+                '/\$\{(.+)\}/',
+                '{{ $1 }}',
+                $templateStringContent
+            );
+        }
+
+        return $value;
+    }
 }

tests/VueComponentBindingTest.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+class VueComponentBindingTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     * @throws \Exception
+     */
+    public function testComponentBinding($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $compiler->registerComponent('ChildComponent', '/templates/ChildComponent.twig');
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('vue-component');
+    }
+}

tests/fixtures/vue-component/component-with-child-binding.twig

@@ -0,0 +1,3 @@
+<div>
+  {% include "/templates/ChildComponent.twig" with { style: "fill:{{ color }};", test: "test" } %}
+</div>

tests/fixtures/vue-component/component-with-child-binding.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <ChildComponent :style="`fill:${color};`" :key=testkey test="test" />
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child-binding.vue',
+        component: {
+            ChildComponent,
+        }
+    };
+</script>