Rename properties of partials to camelCase

Author: Macavity

src/Compiler.php

@@ -101,17 +101,21 @@ public function convertNode(DOMNode $node): DOMNode
                 break;
         }
 
+        $this->handleFor($node);
+        $this->stripEventHandlers($node);
+        //$this->handleRawHtml($node, $data);
+
         if (in_array($node->nodeName, array_keys($this->components))) {
             $currentComponent = $this->components[$node->nodeName];
-            $this->handleIf($node);
-            $this->handleFor($node);
 
             if ($node->hasAttributes()) {
                 /** @var DOMAttr $attribute */
                 foreach ($node->attributes as $attribute) {
                     if (strpos($attribute->name, 'v-bind:') === 0 || strpos($attribute->name, ':') === 0) {
                         $name = substr($attribute->name, strpos($attribute->name, ':') + 1);
-                        $currentComponent->addProperty($name, $attribute->value, true);
+                        $value = $this->refactorTemplateString($attribute->value);
+
+                        $currentComponent->addProperty($name, $value, true);
                     } else {
                         $currentComponent->addProperty($attribute->name, '"'.$attribute->value.'"', false);
                     }
@@ -127,13 +131,10 @@ public function convertNode(DOMNode $node): DOMNode
 
             $node->parentNode->insertBefore($include, $node);
             $node->parentNode->removeChild($node);
+
             return $node;
         }
 
-        $this->stripEventHandlers($node);
-        $this->handleFor($node);
-        //$this->handleRawHtml($node, $data);
-
         $this->handleAttributeBinding($node);
 
         foreach (iterator_to_array($node->childNodes) as $childNode) {
@@ -222,7 +223,7 @@ private function handleAttributeBinding(DOMElement $node)
 
                 $node->setAttribute($name, $templateStringContent);
             } else {
-                $this->logger->warning('- No Handling for: '.$value);
+                $this->logger->debug('- No Handling for: '.$value);
             }
 
             $this->logger->debug('=> remove original '.$attribute->name);
@@ -422,4 +423,18 @@ protected function addBanner(string $html)
 
         return $html;
     }
+
+    public function refactorTemplateString($value)
+    {
+        if (preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
+            $templateStringContent = '"'.$matches['content'].'"';
+            $value = preg_replace(
+                '/\$\{(.+)\}/',
+                '{{ $1 }}',
+                $templateStringContent
+            );
+        }
+
+        return $value;
+    }
 }

src/Component.php

@@ -44,31 +44,27 @@ public function getProperties(): array
         return $this->properties;
     }
 
-    /**
-     * @param string $fileName
-     *
-     * @return Component
-     */
-    public function loadFile(string $fileName): self
-    {
-        $this->fileName = $fileName;
-
-        @$this->document->loadHTMLFile($this->assetPath . $fileName);
-        $this->templateElement = $this->document->getElementsByTagName('template')->item(0);
-
-        $this->rootElement = $this->getRootNode($this->templateElement);
-        $this->templateHtml = $this->getInnerHtml($this->templateElement);
-
-        return $this;
-    }
-
     public function registerComponents(string $name, string $path)
     {
         $this->components[$name] = $path;
     }
 
     public function addProperty(string $name, string $value, bool $isBinding = false) {
-        $this->properties[] = new Property($name, $value, $isBinding);
+        $this->properties[] = new Property(
+            $this->kebabToCamelCase($name),
+            $value,
+            $isBinding
+        );
     }
 
+    public function kebabToCamelCase($string, $capitalizeFirstCharacter = false)
+    {
+        $str = str_replace('-', '', ucwords($string, '-'));
+
+        if (!$capitalizeFirstCharacter) {
+            $str = lcfirst($str);
+        }
+
+        return $str;
+    }
 }

src/Utils/TwigBuilder.php

@@ -106,31 +106,29 @@ public function createIncludePartial(string $partialPath, array $variables = [])
             return $this->createBlock('include "'.$partialPath.'"');
         }
 
+        $serializedProperties = $this->serializeComponentProperties($variables);
+
+        return $this->createBlock('include "'.$partialPath.'" with '.$serializedProperties);
+    }
+
+    /**
+     * @param Property[] $properties
+     * @return string
+     */
+    public function serializeComponentProperties(array $properties): string
+    {
         $props = [];
 
         /** @var Property $property */
-        foreach ($variables as $property) {
-            if($property->getName() !== 'key') {
-                $value = $this->checkPropertyValue($property->getValue());
-                $props[] = $property->getName().': '.$value;
+        foreach ($properties as $property) {
+            if($property->getName() === 'key') {
+                continue;
             }
-        }
 
-        return $this->createBlock('include "'.$partialPath.'" with { '.implode(', ', $props).' }');
-    }
-
-    public function checkPropertyValue($value)
-    {
-        if (preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
-            $templateStringContent = '"'.$matches['content'].'"';
-            $value = preg_replace(
-                '/\$\{(.+)\}/',
-                '{{ $1 }}',
-                $templateStringContent
-            );
+            $props[] = '\''.$property->getName().'\''.': '.$property->getValue();
         }
 
-        return $value;
+        return '{ '.implode(', ', $props).' }';
     }
 
     public function refactorCondition(string $condition): string

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

@@ -1,3 +1,3 @@
 <div>
-  {% include "/templates/ChildComponent.twig" with { style: "fill:{{ color }};", test: "test" } %}
+  {% include "/templates/ChildComponent.twig" with { 'style': "fill:{{ color }};", 'test': "test" } %}
 </div>

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

@@ -1,3 +1,3 @@
 <div>
-  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { string: "string", product: productA } %}{% endfor %}
+  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA } %}{% endfor %}
 </div>

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

@@ -1,3 +1,3 @@
 <div>
-  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { string: "string", product: productA } %}{% endif %}
+  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA } %}{% endif %}
 </div>

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

@@ -1,3 +1,3 @@
 <div>
-  {% include "/templates/ChildComponent.twig" with { product: testProduct, string: "Test" } %}
+  {% include "/templates/ChildComponent.twig" with { 'product': testProduct, 'testA': "Hello", 'string': "Test" } %}
 </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ChildComponent :product="testProduct" string="Test" />
+    <ChildComponent :product="testProduct" test-a="Hello" string="Test" />
   </div>
 </template>