Feature/v text

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

@@ -150,6 +150,7 @@ 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);
@@ -543,9 +544,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
     {

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-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-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>