SHODEVS2-122 add first test case (child component without properties)

Author: Pia Sinzig

src/Compiler.php

@@ -14,7 +14,7 @@
 class Compiler
 {
 
-    /** @var String[] */
+    /** @var Component[] */
     protected $components;
 
     /** @var DOMDocument */
@@ -31,6 +31,7 @@ public function __construct(DOMDocument $document, LoggerInterface $logger)
         $this->logger = $logger;
         $this->document = $document;
         $this->lastCloseIf = null;
+        $this->components = [];
 
         $this->logger->debug("\n--------- New Compiler Instance ----------\n");
     }
@@ -70,6 +71,13 @@ public function convertNode(DOMNode $node): DOMNode
             $this->logger->warning("Document node found.");
         }
 
+        if (in_array($node->nodeName, array_keys($this->components))) {
+            $currentComponent = $this->components[$node->nodeName];
+            $include = $this->document->createTextNode('{% include "'.$currentComponent->getPath().'" %}');
+            $node->parentNode->insertBefore($include, $node);
+            $node->parentNode->removeChild($node);
+        }
+
         $this->stripEventHandlers($node);
         $this->handleFor($node);
         //$this->handleRawHtml($node, $data);
@@ -282,14 +290,16 @@ private function getRootNode(DOMElement $element): \DOMNode
         foreach ($nodes as $node) {
             if ($node->nodeType === XML_TEXT_NODE) {
                 continue;
+            } else if ($node->nodeName === 'script' || $node->nodeName === 'style') {
+                continue;
             } else {
                 $tagNodes++;
                 $firstTagNode = $node;
             }
         }
 
         if ($tagNodes > 1) {
-            throw new Exception('Template should have only one root node');
+            //throw new Exception('Template should have only one root node');
         }
 
         return $firstTagNode;
@@ -315,4 +325,9 @@ protected function replacePlaceholders(string $string)
 
         return $string;
     }
-}
+
+    public function registerComponent(string $componentName, string $componentPath)
+    {
+        $this->components[strtolower($componentName)] = new Component($componentName, $componentPath);
+    }
+}

src/Component.php

@@ -8,33 +8,29 @@
 
 class Component
 {
-    /** @var string */
-    protected $assetPath;
-
-    /** @var string */
-    protected $targetPath;
-
-    /** @var string */
-    protected $fileName;
-
-    /** @var DOMDocument */
-    protected $document;
-
-    protected $templateHtml;
-    protected $data;
-    protected $templateElement;
-    protected $rootElement;
-
     /** @var String[] */
     protected $components = [];
+    /**
+     * @var string
+     */
+    protected $name;
+    /**
+     * @var string
+     */
+    protected $path;
 
-    public function __construct(string $assetPath = '', string $targetPath = '')
+    public function __construct(string $name = '', string $path = '')
     {
-        $this->assetPath = $assetPath;
-        $this->targetPath = $targetPath;
+        $this->name = $name;
+        $this->path = $path;
+    }
+
+    public function getName(){
+        return $this->name;
+    }
 
-        $this->fileName = '';
-        $this->document = new DOMDocument();
+    public function getPath(){
+        return $this->path;
     }
 
     /**
@@ -59,4 +55,4 @@ public function registerComponents($name, $path)
     {
         $this->components[$name] = $path;
     }
-}
+}

tests/VueComponentTest.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+class VueComponentTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     * @throws \Exception
+     */
+    public function testComponent($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+
+        $compiler->registerComponent('ChildComponent', '/templates/ChildComponent.twig');
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('vue-component');
+    }
+}

tests/fixtures/vue-component/component-with-child.twig

@@ -0,0 +1,3 @@
+<div>
+  {% include "/templates/ChildComponent.twig" %}
+</div>

tests/fixtures/vue-component/component-with-child.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <ChildComponent/>
+  </div>
+</template>
+<script>
+    export default {
+        name: 'component-with-child.vue',
+        component: {
+            ChildComponent,
+        }
+    };
+</script>