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

Add support for dynamic classes using object binding

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