Merge pull request #46 from tronsha/bugfix/attribute-handling

tronsha · web-flow · commit f0b3427140f0 · 2020-03-10T10:46:37.000+01:00
Fix attribute handling
diff --git a/src/Compiler.php b/src/Compiler.php
@@ -395,6 +395,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') .
@@ -605,12 +606,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
diff --git a/src/Utils/TwigBuilder.php b/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;
     }
 
diff --git a/tests/TextNodeTest.php b/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);
+    }
+}
diff --git a/tests/fixtures/vue-bind/binding-with-template-string.twig b/tests/fixtures/vue-bind/binding-with-template-string.twig
@@ -3,4 +3,5 @@
     Hello World
   </div>
   <div class="{{ isTrue ? 'a' : 'b' }}"></div>
+  <div style="{{ isTrue ? 'display: block;' : 'display: none !important;' }}"></div>
 </div>
diff --git a/tests/fixtures/vue-bind/binding-with-template-string.vue b/tests/fixtures/vue-bind/binding-with-template-string.vue
@@ -4,6 +4,7 @@
       Hello World
     </div>
     <div :class="`${isTrue ? 'a' : 'b'}`"></div>
+    <div :style="`${isTrue ? 'display: block;' : 'display: none !important;'}`"></div>
   </div>
 </template>
 
diff --git a/tests/fixtures/vue-bind/bindings.twig b/tests/fixtures/vue-bind/bindings.twig
@@ -5,5 +5,7 @@
     <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 style="{{'display: none !important'}}">Hidden</div>
   </div>
 </div>
diff --git a/tests/fixtures/vue-bind/bindings.vue b/tests/fixtures/vue-bind/bindings.vue
@@ -6,6 +6,8 @@
       <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 :style="'display: none !important'">Hidden</div>
       </div>
   </div>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -395,6 +395,7 @@ private function handleAttributeBinding(DOMElement $node)`
`395`	`395`
`396`	`396`	`$dynamicValues[] = $templateStringContent;`
`397`	`397`	`} else {`
	`398`	`+ $value = $this->builder->refactorCondition($value);`
`398`	`399`	`$this->logger->debug(sprintf('- setAttribute "%s" with value "%s"', $name, $value));`
`399`	`400`	`$dynamicValues[] =`
`400`	`401`	`Replacements::getSanitizedConstant('DOUBLE_CURLY_OPEN') .`
`@@ -605,12 +606,16 @@ private function transformCamelCaseToCSS(string $property): string`
`605`	`606`
`606`	`607`	`private function stripEventHandlers(DOMElement $node)`
`607`	`608`	`{`
	`609`	`+ $removeAttributes = [];`
`608`	`610`	`/** @var DOMAttr $attribute */`
`609`	`611`	`foreach ($node->attributes as $attribute) {`
`610`	`612`	`if (strpos($attribute->name, 'v-on:') === 0 \|\| strpos($attribute->name, '@') === 0) {`
`611`		`- $node->removeAttribute($attribute->name);`
	`613`	`+ $removeAttributes[] = $attribute->name;`
`612`	`614`	`}`
`613`	`615`	`}`
	`616`	`+ foreach ($removeAttributes as $removeAttribute) {`
	`617`	`+ $node->removeAttribute($removeAttribute);`
	`618`	`+ }`
`614`	`619`	`}`
`615`	`620`
`616`	`621`	`protected function implodeAttributeValue(string $attribute, array $values, string $oldValue): string`