Merge pull request #15 from Paneon/feature/SHODEVS2-26

SHODEVS2-26 add attribute handling for data-twig-if

Author: Macavity

src/Compiler.php

@@ -78,7 +78,7 @@ public function convert(): string
 
         $html = $this->replacePlaceholders($html);
 
-        if($this->stripWhitespace) {
+        if ($this->stripWhitespace) {
             $html = $this->stripWhitespace($html);
         }
 
@@ -248,7 +248,12 @@ private function handleIf(DOMElement $node): void
         }
 
         if ($node->hasAttribute('v-if')) {
-            $condition = $node->getAttribute('v-if');
+
+            if ($node->hasAttribute('data-twig-if')) {
+                $condition = $node->getAttribute('data-twig-if');
+            } else {
+                $condition = $node->getAttribute('v-if');
+            }
             $condition = $this->sanitizeCondition($condition);
 
             // Open with if
@@ -262,8 +267,14 @@ private function handleIf(DOMElement $node): void
             $this->lastCloseIf = $closeIf;
 
             $node->removeAttribute('v-if');
+            $node->removeAttribute('data-twig-if');
         } elseif ($node->hasAttribute('v-else-if')) {
-            $condition = $node->getAttribute('v-else-if');
+
+            if ($node->hasAttribute('data-twig-if')) {
+                $condition = $node->getAttribute('data-twig-if');
+            } else {
+                $condition = $node->getAttribute('v-else-if');
+            }
             $condition = $this->sanitizeCondition($condition);
 
             // Replace old endif with else
@@ -275,6 +286,7 @@ private function handleIf(DOMElement $node): void
             $this->lastCloseIf = $closeIf;
 
             $node->removeAttribute('v-else-if');
+            $node->removeAttribute('data-twig-if');
         } elseif ($node->hasAttribute('v-else')) {
             // Replace old endif with else
             $this->lastCloseIf->textContent = $this->builder->createElse();

tests/fixtures/vue-if/if-data-twig.twig

@@ -0,0 +1,11 @@
+<div>
+  {% if array|length %}
+    <div>
+      <h1>Headline</h1>
+    </div>
+  {% elseif array|length < 100 %}
+    <div>
+      <h1>Headline</h1>
+    </div>
+  {% endif %}
+</div>

tests/fixtures/vue-if/if-data-twig.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <div v-if="array.length" data-twig-if="array|length">
+      <h1>Headline</h1>
+    </div>
+    <div v-else-if="array.length < 100" data-twig-if="array|length < 100">
+      <h1>Headline</h1>
+    </div>
+  </div>
+</template>