Merge pull request #77 from tronsha/bugfix/binding-with-template-string-4

Added more support for binding with template string

Author: tronsha

src/Compiler.php

@@ -675,6 +675,12 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
         } else {
             $value = $this->builder->refactorCondition($value);
             $this->logger->debug(sprintf('- setAttribute "%s" with value "%s"', $name, $value));
+            if (substr_count($value, '`')) {
+                preg_match_all('/`[^`]+`/', $value, $matches);
+                foreach ($matches as $match) {
+                    $value = str_replace($match[0], $this->refactorTemplateString($match[0]), $value);
+                }
+            }
             $dynamicValues[] = $this->builder->prepareBindingOutput($value, $twigOutput);
         }
 
@@ -1080,7 +1086,7 @@ public function refactorTemplateString(string $value): string
         if (preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
             $templateStringContent = '"' . $matches['content'] . '"';
             $value = preg_replace(
-                '/\${(.+)}/',
+                '/\${([^{}]+)}/',
                 '" ~ ( $1 ) ~ "',
                 $templateStringContent
             );

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

@@ -0,0 +1,9 @@
+{% set foo = foo|default('') %}
+<div class="block {{ class|default('') }}" style="{{ style|default('') }}">
+  <div style="width: {{ size }}px; height: {{ size }}px;">
+    Foo
+  </div>
+  <div style='{{ foo ? foo : "width: " ~ ( size ) ~ "px; height: " ~ ( size ) ~ "px;" }};'>
+    Bar
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="block">
+    <div :style="`width: ${size}px; height: ${size}px;`">
+      Foo
+    </div>
+    <div :style="foo ? foo : `width: ${size}px; height: ${size}px;`">
+      Bar
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+      props: {
+        foo: {
+          type: String,
+          default: '',
+        },
+        size: {
+              type: Number,
+              required: true,
+          },
+      },
+  };
+</script>