Add simple vue bindings

Author: Macavity

src/Compiler.php

@@ -13,6 +13,9 @@
 
 class Compiler
 {
+    protected const DOUBLE_CURLY_OPEN = '__DOUBLE_CURLY_OPEN__';
+    protected const DOUBLE_CURLY_CLOSE = '__DOUBLE_CURLY_CLOSE__';
+
     /** @var String[] */
     protected $components;
 
@@ -30,6 +33,8 @@ public function __construct(DOMDocument $document, LoggerInterface $logger)
         $this->logger = $logger;
         $this->document = $document;
         $this->lastCloseIf = null;
+
+        $this->logger->debug("\n--------- New Compiler Instance ----------\n");
     }
 
     /**
@@ -46,7 +51,7 @@ public function convert(): string
         $rootNode = $this->getRootNode($templateElement);
         $resultNode = $this->convertNode($rootNode);
 
-        return $this->document->saveHTML($resultNode);
+        return $this->replacePlaceholders($this->document->saveHTML($resultNode));
     }
 
     public function convertNode(DOMNode $node): DOMNode
@@ -95,7 +100,7 @@ private function handleAttributeBinding(DOMElement $node)
                 continue;
             }
 
-            $name = substr($attribute->name, 1);
+            $name = substr($attribute->name, strpos($attribute->name, ':') + 1);
             $value = $attribute->value;
             $this->logger->debug('- handle: ' . $name . ' = ' . $value);
 
@@ -110,17 +115,18 @@ private function handleAttributeBinding(DOMElement $node)
                     break;
                 default:
                     if ($value === 'true') {
+                        $this->logger->debug('- setAttribute '.$name);
                         $node->setAttribute($name, $name);
+                    } else {
+                        $this->logger->debug('- setAttribute "'.$name.'" with value');
+                        $node->setAttribute(
+                            $name,
+                            self::DOUBLE_CURLY_OPEN.$value.self::DOUBLE_CURLY_CLOSE
+                        );
                     }
-                    $node->setAttribute($name, $value);
             }
 
-            if (is_bool($value)) {
-                if ($value) {
-                    $this->logger->debug('=> setAttribute');
-                    $node->setAttribute($name, $name);
-                }
-            } elseif (is_array($value)) {
+            if (is_array($value)) {
                 if ($name === 'style') {
                     $styles = [];
                     foreach ($value as $prop => $setting) {
@@ -141,7 +147,7 @@ private function handleAttributeBinding(DOMElement $node)
                 }
             }
 
-            $this->logger->debug('=> remove ' . $attribute->name);
+            $this->logger->debug('=> remove original ' . $attribute->name);
             $node->removeAttribute($attribute->name);
         }
     }
@@ -251,11 +257,6 @@ private function stripEventHandlers(DOMElement $node)
         }
     }
 
-    private function isTextNode(DOMNode $node): bool
-    {
-        return $node instanceof DOMCharacterData;
-    }
-
     /**
      * @throws Exception
      */
@@ -282,4 +283,12 @@ private function getRootNode(DOMElement $element): \DOMNode
 
         return $firstTagNode;
     }
+
+    protected function replacePlaceholders(string $string)
+    {
+        $string = str_replace(self::DOUBLE_CURLY_OPEN, '{{', $string);
+        $string = str_replace(self::DOUBLE_CURLY_CLOSE, '}}', $string);
+
+        return $string;
+    }
 }

tests/AbstractTestCase.php

@@ -15,6 +15,7 @@ protected function createCompiler(string $template): Compiler
         $document = $this->createDocumentWithHtml($template);
         $compiler = new Compiler($document, $this->createLogger());
 
+
         return $compiler;
     }
 

tests/VueBindingsTest.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Macavity\VueToTwig\Tests;
+
+class VueBindingsTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     */
+    public function testBindings($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('vue-bind');
+    }
+}

tests/fixtures/vue-bind/bindings.twig

@@ -0,0 +1,6 @@
+<div>
+  <div>
+    <input type="radio" checked>
+    <img src="{{imageSrc}}">
+  </div>
+</div>

tests/fixtures/vue-bind/bindings.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <div>
+      <input type="radio" :checked="true">
+      <img :src="imageSrc">
+    </div>
+  </div>
+</template>