Update from Paneon/php-vue-to-twig

README.md

@@ -8,7 +8,7 @@ Compile vue files to twig templates with PHP
 
 |Directive|Implemented|
 |---------|:---------:|
-|v-text||
+|v-text|:white_check_mark:|
 |v-html|:white_check_mark:|
 |v-show|:white_check_mark:|
 |v-if|:white_check_mark:|

src/Compiler.php

@@ -121,7 +121,8 @@ public function convert(): string
         $html = $this->addVariableBlocks($html);
         $html = $this->replacePlaceholders($html);
 
-        $html = preg_replace('/\<template\>\s*(.*?)\s*\<\/template\>/ism', '$1', $html);
+        $html = preg_replace('/\<template\>\s*(.*)\s*\<\/template\>/ism', '$1', $html);
+        $html = preg_replace('/<\/?template[^>]*?>/i', '', $html);
 
         if ($this->stripWhitespace) {
             $html = $this->stripWhitespace($html);
@@ -137,6 +138,7 @@ public function convert(): string
     public function convertNode(DOMNode $node, int $level = 0): DOMNode
     {
         if($node instanceof DOMComment){
+            $this->handleCommentNode($node);
             return $node;
         }
         elseif($node instanceof DOMText){
@@ -150,8 +152,8 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
             $this->handleIf($node);
             $this->handleFor($node);
             $this->handleHtml($node);
+            $this->handleText($node);
             $this->stripEventHandlers($node);
-            //$this->handleRawHtml($node, $data);
             $this->handleDefaultSlot($node);
             $this->cleanupAttributes($node);
         }
@@ -184,11 +186,16 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
                 }
             }
 
+            foreach (iterator_to_array($node->childNodes) as $childNode) {
+                $this->convertNode($childNode, $level + 1);
+            }
+
             /*
              * Slots (Default)
              */
             if ($node->hasChildNodes()) {
                 $innerHtml = $this->innerHtmlOfNode($node);
+                $innerHtml = $this->replacePlaceholders($innerHtml);
                 $this->logger->debug('Add default slot:', [
                     'nodeValue' => $node->nodeValue,
                     'innerHtml' => $innerHtml,
@@ -412,14 +419,20 @@ protected function handleTextNode(DOMText $node)
     }
 
     private function cleanupAttributes(DOMElement $node) {
-        if ($node->hasAttribute('ref')) {
-            $node->removeAttribute('ref');
+        $removeAttributes = [];
+        /** @var DOMAttr $attribute */
+        foreach ($node->attributes as $attribute) {
+            if (
+                (preg_match('/^v-([a-z]*)/', $attribute->name, $matches) === 1 && $matches[1] !== 'bind')
+                || preg_match('/^[:]?ref$/', $attribute->name) === 1
+            ) {
+                $removeAttributes[] = $attribute->name;
+            }
         }
-        if ($node->hasAttribute(':ref')) {
-            $node->removeAttribute(':ref');
+        foreach ($removeAttributes as $removeAttribute) {
+            $node->removeAttribute($removeAttribute);
         }
     }
-
     private function handleIf(DOMElement $node): void
     {
         if (!$node->hasAttribute('v-if') &&
@@ -544,9 +557,22 @@ private function handleHtml(DOMElement $node)
         while ($node->hasChildNodes()) {
             $node->removeChild($node->firstChild);
         }
-        $node->appendChild(new DOMText('{{ ' . $html . '|raw }}'));
+        $node->appendChild(new DOMText('{{' . $html . '|raw}}'));
     }
 
+    private function handleText(DOMElement $node)
+    {
+        if (!$node->hasAttribute('v-text')) {
+            return;
+        }
+
+        $text = $node->getAttribute('v-text');
+        $node->removeAttribute('v-text');
+        while ($node->hasChildNodes()) {
+            $node->removeChild($node->firstChild);
+        }
+        $node->appendChild(new DOMText('{{' . $text . '}}'));
+    }
 
     protected function addDefaultsToVariable($varName, $string): string
     {
@@ -781,4 +807,12 @@ protected function handleRootNodeClassAttribute($node) {
         $node->setAttributeNode($attributeVClass);
         return $node;
     }
+
+    private function handleCommentNode(DOMComment $node)
+    {
+        $nodeValue = trim($node->nodeValue);
+        if (preg_match('/^(eslint-disable|@?todo)/i', $nodeValue) === 1) {
+            $node->parentNode->removeChild($node);
+        }
+    }
 }

tests/CleanupAttributesTest.php

@@ -6,7 +6,7 @@ class CleanupAttributesTest extends AbstractTestCase
 {
     public function testCleanupAttributes()
     {
-        $vueTemplate = '<template><div ref="reference">dummy</div></template>';
+        $vueTemplate = '<template><div v-foo="bar" ref="reference">dummy</div></template>';
 
         $expected = '<div class="{{class|default(\'\')}}">dummy</div>';
 

tests/CommentNodeTest.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+class CommentNodeTest extends AbstractTestCase
+{
+    public function testCommentNode()
+    {
+        $component = '<template><div><!-- info comment --></div></template>';
+        $expected = '<div class="{{class|default(\'\')}}"><!-- info comment --></div>';
+
+        $compiler = $this->createCompiler($component);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function testCommentNodeEslintDisable()
+    {
+        $component = '<template><div><!-- eslint-disable-next-line vue/no-v-html --></div></template>';
+        $expected = '<div class="{{class|default(\'\')}}"></div>';
+
+        $compiler = $this->createCompiler($component);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function testCommentNodeTodo()
+    {
+        $component = '<template><div><!-- todo change something --></div></template>';
+        $expected = '<div class="{{class|default(\'\')}}"></div>';
+
+        $compiler = $this->createCompiler($component);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+}

tests/VueTextTest.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+class VueTextTest extends AbstractTestCase
+{
+    public function testHtml()
+    {
+        $component = file_get_contents(__DIR__.'/fixtures/vue-text/text.vue');
+        $expected = file_get_contents(__DIR__.'/fixtures/vue-text/text.twig');
+
+        if(!$component){
+            self::fail('Component not found.');
+            return;
+        }
+
+        $compiler = $this->createCompiler($component);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+}

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

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

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

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

tests/fixtures/vue-bind/bindings.twig

@@ -6,5 +6,6 @@
     <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>

tests/fixtures/vue-bind/bindings.vue

@@ -2,11 +2,12 @@
   <div>
     <div>
       <input type="radio" :checked="true">
-      <img :src="imageSrc">
+      <img v-bind:src="imageSrc">
       <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>

tests/fixtures/vue-html/html.twig

@@ -1,6 +1,6 @@
 {% set rawHtml = '<strong>text</strong>' %}
 <div class="{{class|default('')}}">
   <span>
-    {{ rawHtml|raw }}
+    {{rawHtml|raw}}
   </span>
 </div>

tests/fixtures/vue-if/if-with-template.twig

@@ -0,0 +1,7 @@
+<div class="{{class|default('')}}">
+    {% if someVar %}
+        <h1>Headline</h1>
+    {% else %}
+        <h1>Other headline</h1>
+    {% endif %}
+</div>

tests/fixtures/vue-if/if-with-template.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <template v-if="someVar">
+            <h1>Headline</h1>
+        </template>
+        <template v-else>
+            <h1>Other headline</h1>
+        </template>
+    </div>
+</template>

tests/fixtures/vue-slot/include-child-component-with-default-slot.twig

@@ -1,7 +1,9 @@
 <div class="{{class|default('')}}">
   {% set slot_default_value %}
     <h4>My default slot title</h4>
-    <p>some text</p>
+    {% if true %}
+      <p>some text</p>
+    {% endif %}
   {% endset %}
   {% include "/templates/ChildComponent.twig" with { 'slot_default': slot_default_value, 'class': "" } %}
 </div>

tests/fixtures/vue-slot/include-child-component-with-default-slot.vue

@@ -2,7 +2,7 @@
   <div>
     <ChildComponent>
       <h4>My default slot title</h4>
-      <p>some text</p>
+      <p v-if="true">some text</p>
     </ChildComponent>
   </div>
 </template>

tests/fixtures/vue-text/text.twig

@@ -0,0 +1,6 @@
+{% set text = 'follow the white rabbit' %}
+<div class="{{class|default('')}}">
+  <span>
+    {{text}}
+  </span>
+</div>

tests/fixtures/vue-text/text.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <span v-text="text" />
+    </div>
+</template>
+
+<twig>
+  {% set text = 'follow the white rabbit' %}
+</twig>
+
+<script>
+    export default {
+        computed: {
+            text(){
+                return 'follow the white rabbit';
+            },
+        }
+    }
+</script>