Bugfix/attribute handling

src/Compiler.php

@@ -388,6 +388,7 @@ private function handleAttributeBinding(DOMElement $node)
 
                 $dynamicValues[] = $templateStringContent;
             } else {
+                $value = $this->builder->refactorCondition($value);
                 $this->logger->debug(sprintf('- setAttribute "%s" with value "%s"', $name, $value));
                 $dynamicValues[] =
                     Replacements::getSanitizedConstant('DOUBLE_CURLY_OPEN') .
@@ -579,12 +580,16 @@ private function transformCamelCaseToCSS(string $property): string
 
     private function stripEventHandlers(DOMElement $node)
     {
+        $removeAttributes = [];
         /** @var DOMAttr $attribute */
         foreach ($node->attributes as $attribute) {
             if (strpos($attribute->name, 'v-on:') === 0 || strpos($attribute->name, '@') === 0) {
-                $node->removeAttribute($attribute->name);
+                $removeAttributes[] = $attribute->name;
             }
         }
+        foreach ($removeAttributes as $removeAttribute) {
+            $node->removeAttribute($removeAttribute);
+        }
     }
 
     protected function implodeAttributeValue(string $attribute, array $values, string $oldValue): string

src/Utils/TwigBuilder.php

@@ -171,6 +171,41 @@ public function sanitizeAttributeValue(string $value): string
 
     public function refactorCondition(string $condition): string
     {
+        $refactoredCondition = '';
+        $charsCount = mb_strlen($condition, 'UTF-8');
+        $quoteChar = null;
+        $lastChar = null;
+        $buffer = '';
+
+        for ($i = 0; $i < $charsCount; $i++) {
+            $char = mb_substr($condition, $i, 1, 'UTF-8');
+            if ($quoteChar === null && ($char === '"' || $char === '\'')) {
+                $quoteChar = $char;
+                if ($buffer !== '') {
+                    $refactoredCondition .= $this->refactorConditionPart($buffer);
+                    $buffer = '';
+                }
+                $refactoredCondition .= $char;
+            } elseif ($quoteChar === $char && $lastChar !== '\\') {
+                $quoteChar = null;
+                $refactoredCondition .= $char;
+            } else {
+                if ($quoteChar === null) {
+                    $buffer .= $char;
+                } else {
+                    $refactoredCondition .= $char;
+                }
+            }
+            $lastChar = $char;
+        }
+        if ($buffer !== '') {
+            $refactoredCondition .= $this->refactorConditionPart($buffer);
+        }
+
+        return $refactoredCondition;
+    }
+
+    private function refactorConditionPart($condition) {
         $condition = str_replace('===', '==', $condition);
         $condition = str_replace('!==', '!=', $condition);
         $condition = str_replace('&&', 'and', $condition);
@@ -179,6 +214,8 @@ public function refactorCondition(string $condition): string
         $condition = str_replace('.length', '|length', $condition);
         $condition = str_replace('.trim', '|trim', $condition);
 
+//        $condition = $this->convertConcat($condition);
+
         foreach (Replacements::getConstants() as $constant => $value) {
             $condition = str_replace($value, Replacements::getSanitizedConstant($constant), $condition);
         }
@@ -188,9 +225,74 @@ public function refactorCondition(string $condition): string
 
     public function refactorTextNode(string $content): string
     {
-        $content = str_replace('.length', '|length', $content);
-        $content = str_replace('.trim', '|trim', $content);
+        $refactoredContent = '';
+        $charsCount = mb_strlen($content, 'UTF-8');
+        $open = false;
+        $lastChar = null;
+        $quoteChar = null;
+        $buffer = '';
+
+        for ($i = 0; $i < $charsCount; $i++) {
+            $char = mb_substr($content, $i, 1, 'UTF-8');
+            if ($open === false) {
+                $refactoredContent .= $char;
+                if ($char === '{' && $lastChar === '{') {
+                    $open = true;
+                }
+            } else {
+                $buffer .= $char;
+                if ($quoteChar === null && ($char === '"' || $char === '\'')) {
+                    $quoteChar = $char;
+                } elseif ($quoteChar === $char && $lastChar !== '\\') {
+                    $quoteChar = null;
+                }
+                if ($quoteChar === null && $char === '}' && $lastChar === '}') {
+                    $open = false;
+                    $buffer = $this->convertTemplateString(trim($buffer, '}'));
+                    $refactoredContent .= $this->refactorCondition($buffer) . '}}';
+                    $buffer = '';
+                }
+            }
+            $lastChar = $char;
+        }
 
+        return $refactoredContent;
+    }
+
+    private function convertConcat($content) {
+        if (preg_match_all('/(\S*)(\s*\+\s*(\S+))+/', $content, $matches, PREG_SET_ORDER )) {
+            foreach ($matches as $match) {
+                $parts = explode('+', $match[0]);
+                $lastPart = null;
+                $convertedContent = '';
+                foreach ($parts as $part) {
+                    $part = trim($part);
+                    if ($lastPart !== null) {
+                        if (is_numeric($lastPart) && is_numeric($part)) {
+                            $convertedContent .= ' + ' . $part;
+                        } else {
+                            $convertedContent .= ' ~ ' . $part;
+                        }
+                    } else {
+                        $convertedContent = $part;
+                    }
+                    $lastPart = $part;
+                }
+                $content = str_replace($match[0], $convertedContent, $content);
+            }
+        }
+
+        return $content;
+    }
+
+    private function convertTemplateString($content) {
+        if (preg_match_all('/\`([^\`]+)\`/', $content, $matches, PREG_SET_ORDER )) {
+            foreach ($matches as $match) {
+                $match[1] = str_replace('${', '\' ~ ', $match[1]);
+                $match[1] = str_replace('}', ' ~ \'', $match[1]);
+                $content = str_replace($match[0], '\'' . $match[1] . '\'', $content);
+            }
+        }
         return $content;
     }
 

tests/TextNodeTest.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+class TextNodeTest extends AbstractTestCase
+{
+    public function testTextNode()
+    {
+        $html = '<template><div>foo {{ bar.trim }}</div></template>';
+        $expected = '<div class="{{class|default(\'\')}}">foo {{ bar|trim }}</div>';
+
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function testTextNodeNoReplace()
+    {
+        $html = '<template><div>foo.trim {{ \'foo === bar\' }}</div></template>';
+        $expected = '<div class="{{class|default(\'\')}}">foo.trim {{ \'foo === bar\' }}</div>';
+
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function testTextNodeDontCloseInQuote()
+    {
+        $html = '<template><div>{{ \'}}\' || foo.length }}</div></template>';
+        $expected = '<div class="{{class|default(\'\')}}">{{ \'}}\' or foo|length }}</div>';
+
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function testTextNodeWithTemplateString()
+    {
+        $html = '<template><div>{{ `Var = ${var}` }}</div></template>';
+        $expected = '<div class="{{class|default(\'\')}}">{{ \'Var = \' ~ var ~ \'\' }}</div>';
+
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+
+    public function testTextNodeNumbers()
+    {
+        $html = '<template><div>{{ 1 + 1 }}</div></template>';
+        $expected = '<div class="{{class|default(\'\')}}">{{ 1 + 1 }}</div>';
+
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+}

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

@@ -3,4 +3,7 @@
     Hello World
   </div>
   <div class="{{ isTrue ? 'a' : 'b' }}"></div>
+  <div style="{{'display: none !important'}}">
+    Hidden
+  </div>
 </div>

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

@@ -4,6 +4,9 @@
       Hello World
     </div>
     <div :class="`${isTrue ? 'a' : 'b'}`"></div>
+    <div :style="'display: none !important'">
+      Hidden
+    </div>
   </div>
 </template>
 

tests/fixtures/vue-bind/bindings.twig

@@ -5,5 +5,6 @@
     <img src="{{imageSrc}}">
     <div class="a b c"></div>
     <div title="Title" class="category-filter-list categories {{ isSomething ? 'block ' }} {{ not isSomething ? 'block2 ' }}"></div>
+    <div class="{{getClasses(not hasSomething)}}"></div>
   </div>
 </div>

tests/fixtures/vue-bind/bindings.vue

@@ -6,6 +6,7 @@
       <img :src="imageSrc">
       <div :class="['a', 'b', 'c']"></div>
       <div title="Title" :class="{ 'block': isSomething, 'block2': !isSomething}" class="category-filter-list categories"></div>
+      <div :class="getClasses(!hasSomething)" ></div>
       </div>
   </div>
 </template>