Merge pull request #18 from Paneon/feature/required-props

Add support for dynamic classes using object binding

Author: Macavity

.gitignore

@@ -9,3 +9,4 @@
 # PHPUnit
 .phpcs-cache
 
+node_modules

src/Compiler.php

@@ -92,11 +92,9 @@ public function convert(): string
     public function convertNode(DOMNode $node): DOMNode
     {
         switch ($node->nodeType) {
+            // We don't need to handle either of these node-types
             case XML_TEXT_NODE:
-                $this->logger->debug('Text node found', ['name' => $node->nodeName]);
-                // fall through to next case, because we don't need to handle either of these node-types
             case XML_COMMENT_NODE:
-                $this->logger->debug('Comment node found', ['name' => $node->nodeName]);
                 return $node;
             case XML_ELEMENT_NODE:
                 /** @var DOMElement $node */
@@ -184,25 +182,29 @@ private function handleAttributeBinding(DOMElement $node)
             switch ($name) {
                 case 'key':
                     // Not necessary in twig
-                    $this->logger->debug('- skip: key');
                     return;
                 case 'style':
                     break;
                 case 'class':
                     break;
             }
 
+            $regexArrayBinding = '/^\[([^\]]+)\]$/';
+            $regexArrayElements = '/((?:[\'"])(?<elements>[^\'"])[\'"])/';
+            $regexTemplateString = '/^`(?P<content>.+)`$/';
+            $regexObjectBinding = '/^\{(?<elements>[^\}]+)\}$/';
+            $regexObjectElements = '/["\']?(?<class>[^"\']+)["\']?:\s*(?<condition>[^,]+)/x';
+
             if ($value === 'true') {
                 $this->logger->debug('- setAttribute ' . $name);
                 $node->setAttribute($name, $name);
-            } elseif (preg_match('/^\[([^\]]+)\]$/', $value, $matches)) {
-                $this->logger->debug('- is array '.$value);
+            } elseif (preg_match($regexArrayBinding, $value, $matches)) {
+                $this->logger->debug('- array binding ', ['value' => $value]);
 
-                if(preg_match_all('/((?:[\'"])(?<elements>[^\'"])[\'"])/', $value, $arrayMatch)){
+                if (preg_match_all($regexArrayElements, $value, $arrayMatch)) {
                     $value = $arrayMatch['elements'];
                     $this->logger->debug('- ', ['match' => $arrayMatch]);
-                }
-                else {
+                } else {
                     $value = [];
                 }
 
@@ -218,8 +220,23 @@ private function handleAttributeBinding(DOMElement $node)
                         $dynamicValues[] = $className;
                     }
                 }
-            }
-            elseif (preg_match('/^`(?P<content>.+)`$/', $value, $matches)) {
+            } elseif (preg_match($regexObjectBinding, $value, $matches)) {
+                $this->logger->debug('- object binding ', ['value' => $value]);
+
+                $items = explode(',', $matches['elements']);
+                $this->logger->debug(print_r($items,true));
+
+                foreach ($items as $item) {
+                    if(preg_match($regexObjectElements, $item, $matchElement)){
+                        $dynamicValues[] = sprintf(
+                            '{{ %s ? \'%s\' }}',
+                            $this->builder->refactorCondition($matchElement['condition']),
+                            $matchElement['class']
+                        );
+                    }
+                }
+
+            } elseif (preg_match($regexTemplateString, $value, $matches)) {
                 /*
                  * <div :class="`abc ${someDynamicClass}`">
                  */
@@ -262,7 +279,6 @@ private function handleIf(DOMElement $node): void
             } else {
                 $condition = $node->getAttribute('v-if');
             }
-            $condition = $this->sanitizeCondition($condition);
 
             // Open with if
             $openIf = $this->document->createTextNode($this->builder->createIf($condition));
@@ -283,7 +299,6 @@ private function handleIf(DOMElement $node): void
             } else {
                 $condition = $node->getAttribute('v-else-if');
             }
-            $condition = $this->sanitizeCondition($condition);
 
             // Replace old endif with else
             $this->lastCloseIf->textContent = $this->builder->createElseIf($condition);
@@ -402,29 +417,15 @@ private function getRootNode(DOMElement $element): \DOMNode
         return $firstTagNode;
     }
 
-    protected function sanitizeCondition(string $condition)
-    {
-        $condition = str_replace('&&', 'and', $condition);
-        $condition = str_replace('||', 'or', $condition);
-        $condition = str_replace('!==', '!=', $condition);
-        $condition = preg_replace('/!([^=])/', 'not $1', $condition);
-
-        foreach (Replacements::getConstants() as $constant => $value) {
-            $condition = str_replace($value, Replacements::getSanitizedConstant($constant), $condition);
-        }
-
-        return $condition;
-    }
-
     protected function implodeAttributeValue(string $attribute, array $values, string $oldValue): string
     {
         $glue = ' ';
 
-        if($attribute === 'style') {
+        if ($attribute === 'style') {
             $glue = '; ';
         }
 
-        if(!empty($oldValue)) {
+        if (!empty($oldValue)) {
             $values = array_merge([$oldValue], $values);
         }
 

src/Utils/TwigBuilder.php

@@ -2,6 +2,7 @@
 
 namespace Paneon\VueToTwig\Utils;
 
+use Paneon\VueToTwig\Models\Replacements;
 use Paneon\VueToTwig\Property;
 
 class TwigBuilder
@@ -135,6 +136,14 @@ public function refactorCondition(string $condition): string
     {
         $condition = str_replace('===', '==', $condition);
         $condition = str_replace('!==', '!=', $condition);
+        $condition = str_replace('&&', 'and', $condition);
+        $condition = str_replace('||', 'or', $condition);
+        $condition = preg_replace('/!([^=])/', 'not $1', $condition);
+        $condition = str_replace('.length', '|length', $condition);
+
+        foreach (Replacements::getConstants() as $constant => $value) {
+            $condition = str_replace($value, Replacements::getSanitizedConstant($constant), $condition);
+        }
 
         return $condition;
     }

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

@@ -2,4 +2,5 @@
   <div class="block block--{{ modifier }}" style="fill: {{ color }}">
     Hello World
   </div>
+  <div class="{{ isTrue ? 'a' : 'b' }}"></div>
 </div>

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

@@ -3,6 +3,7 @@
     <div :class="`block block--${modifier}`" :style="`fill: ${color}`">
       Hello World
     </div>
+    <div :class="`${isTrue ? 'a' : 'b'}`"></div>
   </div>
 </template>
 

tests/fixtures/vue-bind/bindings.twig

@@ -3,5 +3,6 @@
     <input type="radio" checked>
     <img src="{{imageSrc}}">
     <div class="a b c"></div>
+    <div class="category-filter-list categories {{ isSomething ? 'block' }} {{ not isSomething ? 'block2' }}"></div>
   </div>
 </div>

tests/fixtures/vue-bind/bindings.vue

@@ -4,6 +4,7 @@
       <input type="radio" :checked="true">
       <img :src="imageSrc">
       <div :class="['a', 'b', 'c']"></div>
-    </div>
+      <div :class="{ 'block': isSomething, 'block2': !isSomething}" class="category-filter-list categories"></div>
+      </div>
   </div>
-</template>
+</template>

tests/fixtures/vue-bind/xbinding-props.vue

@@ -0,0 +1,23 @@
+<template>
+<div>
+  <div>
+    <p>{{ title }}</p>
+    <p v-if="req">Boolean</p>
+  </div>
+</div>
+</template>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: 'Default title'
+            },
+            req: {
+                type: Boolean,
+                required: true,
+            },
+        },
+    }
+</script>

tests/fixtures/vue-if/if-strict-equal.twig

@@ -2,4 +2,7 @@
   {% if a == 1 %}
   <div>Text</div>
   {% endif %}
+  {% if a|length %}
+    <div>Text</div>
+  {% endif %}
 </div>

tests/fixtures/vue-if/if-strict-equal.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
     <div v-if="a === 1">Text</div>
+    <div v-if="a.length">Text</div>
   </div>
 </template>