Merge pull request #53 from tronsha/bugfix/nested-if

Fix nested if

Author: tronsha

src/Compiler.php

@@ -19,14 +19,13 @@
 
 class Compiler
 {
-
     /** @var Component[] */
     protected $components;
 
     /** @var DOMDocument */
     protected $document;
 
-    /** @var DOMText|null */
+    /** @var DOMText[]|null */
     protected $lastCloseIf;
 
     /** @var LoggerInterface */
@@ -66,7 +65,7 @@ public function __construct(DOMDocument $document, LoggerInterface $logger)
         $this->builder = new TwigBuilder();
         $this->document = $document;
         $this->logger = $logger;
-        $this->lastCloseIf = null;
+        $this->lastCloseIf = [];
         $this->components = [];
         $this->banner = [];
         $this->properties = [];
@@ -155,7 +154,7 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
             $this->logger->warning("Document node found.");
         } elseif ($node instanceof DOMElement) {
             $this->replaceShowWithIf($node);
-            $this->handleIf($node);
+            $this->handleIf($node, $level);
             $this->handleFor($node);
             $this->handleHtml($node);
             $this->handleText($node);
@@ -464,7 +463,7 @@ private function cleanupAttributes(DOMElement $node): void
         }
     }
 
-    private function handleIf(DOMElement $node): void
+    private function handleIf(DOMElement $node, int $level): void
     {
         if (!$node->hasAttribute('v-if') &&
             !$node->hasAttribute('v-else-if') &&
@@ -488,7 +487,7 @@ private function handleIf(DOMElement $node): void
             $closeIf = $this->document->createTextNode($this->builder->createEndIf());
             $node->parentNode->insertBefore($closeIf, $node->nextSibling);
 
-            $this->lastCloseIf = $closeIf;
+            $this->lastCloseIf[$level] = $closeIf;
 
             $node->removeAttribute('v-if');
             $node->removeAttribute('data-twig-if');
@@ -501,23 +500,23 @@ private function handleIf(DOMElement $node): void
             }
 
             // Replace old endif with else
-            $this->lastCloseIf->textContent = $this->builder->createElseIf($condition);
+            $this->lastCloseIf[$level]->textContent = $this->builder->createElseIf($condition);
 
             // Close with new endif
             $closeIf = $this->document->createTextNode($this->builder->createEndIf());
             $node->parentNode->insertBefore($closeIf, $node->nextSibling);
-            $this->lastCloseIf = $closeIf;
+            $this->lastCloseIf[$level] = $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();
+            $this->lastCloseIf[$level]->textContent = $this->builder->createElse();
 
             // Close with new endif
             $closeIf = $this->document->createTextNode($this->builder->createEndIf());
             $node->parentNode->insertBefore($closeIf, $node->nextSibling);
-            $this->lastCloseIf = $closeIf;
+            $this->lastCloseIf[$level] = $closeIf;
 
             $node->removeAttribute('v-else');
         }

tests/fixtures/vue-if/if-elseif-else-with-nested-if.twig

@@ -0,0 +1,19 @@
+<div class="{{class|default('')}}">
+  {% if someCondition %}
+    <div>
+      <h1>Headline</h1>
+    </div>
+  {% elseif someOtherCondition %}
+  <div>
+    {% if yetAnotherCondition %}
+      <h2>Headline 2.1</h2>
+    {% else %}
+      <h2>Headline 2.2</h2>
+    {% endif %}
+  </div>
+  {% else %}
+  <div>
+    <h3>Headline 3</h3>
+  </div>
+  {% endif %}
+</div>

tests/fixtures/vue-if/if-elseif-else-with-nested-if.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <div v-if="someCondition">
+      <h1>Headline</h1>
+    </div>
+    <div v-else-if="someOtherCondition">
+      <h2 v-if="yetAnotherCondition">Headline 2.1</h2>
+      <h2 v-else>Headline 2.2</h2>
+    </div>
+    <div v-else>
+      <h3>Headline 3</h3>
+    </div>
+  </div>
+</template>