Merge pull request #7 from Paneon/feature/6

#6 Handle template strings

Author: Macavity

src/Compiler.php

@@ -173,6 +173,23 @@ private function handleAttributeBinding(DOMElement $node)
                     $node->setAttribute($name, implode(' ', $classes));
                 }
             }
+            /*
+             * <div :class="`abc ${someDynamicClass}`">
+             */
+            elseif(preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
+                $templateStringContent = $matches['content'];
+
+                $templateStringContent = preg_replace(
+                    '/\$\{(.+)\}/',
+                    '{{ $1 }}',
+                    $templateStringContent
+                );
+
+                $node->setAttribute($name, $templateStringContent);
+            }
+            else {
+                $this->logger->warning('- No Handling for: '.$value);
+            }
 
             $this->logger->debug('=> remove original '.$attribute->name);
             $node->removeAttribute($attribute->name);
@@ -303,17 +320,22 @@ private function getRootNode(DOMElement $element): \DOMNode
         $tagNodes = 0;
         $firstTagNode = null;
 
+        /** @var DOMNode $node */
         foreach ($nodes as $node) {
             if ($node->nodeType === XML_TEXT_NODE) {
                 continue;
-            } else {
+            }
+            elseif(in_array($node->nodeName, ['script', 'style'])) {
+                continue;
+            }
+            else {
                 $tagNodes++;
                 $firstTagNode = $node;
             }
         }
 
         if ($tagNodes > 1) {
-            throw new Exception('Template should have only one root node');
+            //throw new Exception('Template should have only one root node');
         }
 
         return $firstTagNode;

tests/fixtures/vue-bind/binding-with-template-string.twig

@@ -0,0 +1,5 @@
+<div class="block">
+  <div class="block block--{{ modifier }}" style="fill: {{ color }}">
+    Hello World
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-template-string.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="block">
+    <div :class="`block block--${modifier}`" :style="`fill: ${color}`">
+      Hello World
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+      props: {
+          modifier: {
+              type: String,
+              required: true,
+          },
+      },
+  };
+</script>