Merge pull request #16 from Paneon/feature/template-strings

Feature/template strings

Author: Macavity

src/Compiler.php

@@ -224,7 +224,7 @@ private function handleAttributeBinding(DOMElement $node)
                 $templateStringContent = $matches['content'];
 
                 $templateStringContent = preg_replace(
-                    '/\$\{(.+)\}/',
+                    '/\$\{([^}]+)\}/',
                     '{{ $1 }}',
                     $templateStringContent
                 );
@@ -398,6 +398,8 @@ protected function sanitizeCondition(string $condition)
     {
         $condition = str_replace('&&', 'and', $condition);
         $condition = str_replace('||', 'or', $condition);
+        $condition = str_replace('!==', '!=', $condition);
+        $condition = preg_replace('/!([^=])/', 'not $1', $condition);
 
         foreach (Replacements::getConstants() as $constant => $value) {
             $condition = str_replace($value, Replacements::getSanitizedConstant($constant), $condition);

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

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

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

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

tests/fixtures/vue-if/simple-if-2.twig

@@ -2,4 +2,7 @@
   {% if someVar %}
     <div>Text</div>
   {% endif %}
+  {% if not someVar and mobile != true %}
+    <div>Mobile</div>
+  {% endif %}
 </div>

tests/fixtures/vue-if/simple-if-2.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
     <div v-if="someVar">Text</div>
+    <div v-if="!someVar && mobile !== true">Mobile</div>
   </div>
 </template>