Skip to content

Commit 32c971d

Browse files
tronshatronsha
authored
Merge pull request #94 from tronsha/master
Fix array binding
2 parents a8129b3 + 5527836 commit 32c971d

7 files changed

+107
-46
lines changed

‎src/Compiler.php‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -165,9 +165,6 @@ public function setBanner($strings): void
165165
$this->banner = $strings;
166166
}
167167

168-
/**
169-
* @param string|null $path
170-
*/
171168
public function setRelativePath(?string $path): void
172169
{
173170
$this->relativePath = $path;
@@ -729,65 +726,35 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
729726
$dynamicValues = [];
730727

731728
$regexArrayBinding = '/^\[([^\]]+)\]$/';
732-
$regexArrayElements = '/((?:[\'"])(?<elements>[^\'"])[\'"])/';
733729
$regexTemplateString = '/^`(?P<content>.+)`$/';
734730
$regexObjectBinding = '/^\{(?<elements>[^\}]+)\}$/';
735-
$regexObjectElements = '/["\']?(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
736731

737732
if ($value === 'true') {
738733
$this->logger->debug('- setAttribute ' . $name);
739734
if ($node) {
740735
$node->setAttribute($name, $name);
741736
}
742-
} elseif (preg_match($regexArrayBinding, $value, $matches)) {
737+
} elseif (preg_match($regexArrayBinding, $value, $match)) {
743738
$this->logger->debug('- array binding ', ['value' => $value]);
744-
745-
if (preg_match_all($regexArrayElements, $value, $arrayMatch)) {
746-
$value = $arrayMatch['elements'];
747-
$this->logger->debug('- ', ['match' => $arrayMatch]);
748-
} else {
749-
$value = [];
750-
}
751-
752-
if ($name === 'style') {
753-
foreach ($value as $prop => $setting) {
754-
if ($setting) {
755-
$prop = strtolower($this->transformCamelCaseToCSS($prop));
756-
$dynamicValues[] = sprintf('%s:%s', $prop, $setting);
757-
}
758-
}
759-
} elseif ($name === 'class') {
760-
foreach ($value as $className) {
761-
$dynamicValues[] = $className;
739+
$elements = explode(',', $match[1]);
740+
foreach ($elements as $element) {
741+
$element = trim($element);
742+
if (preg_match('/^`(.*)`$/', $element, $match)) {
743+
$dynamicValues[] = $this->handleTemplateStringBinding($match[1], $twigOutput);
744+
} elseif (preg_match('/^\{(.*)\}$/', $element, $match)) {
745+
$this->handleObjectBinding([$match[1]], $dynamicValues, $twigOutput);
746+
} else {
747+
$dynamicValues[] = trim($element, '"\'');
762748
}
763749
}
764750
} elseif (preg_match($regexObjectBinding, $value, $matches)) {
765751
$this->logger->debug('- object binding ', ['value' => $value]);
766-
767752
$items = explode(',', $matches['elements']);
768-
769-
foreach ($items as $item) {
770-
if (preg_match($regexObjectElements, $item, $matchElement)) {
771-
$dynamicValues[] = $this->builder->prepareBindingOutput(
772-
$this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . ' \'',
773-
$twigOutput
774-
);
775-
}
776-
}
753+
$this->handleObjectBinding($items, $dynamicValues, $twigOutput);
777754
} elseif (preg_match($regexTemplateString, $value, $matches)) {
778755
// <div :class="`abc ${someDynamicClass}`">
779-
$templateStringContent = $matches['content'];
780-
781-
preg_match_all('/\${([^}]+)}/', $templateStringContent, $matches, PREG_SET_ORDER);
782-
foreach ($matches as $match) {
783-
$templateStringContent = str_replace(
784-
$match[0],
785-
$this->builder->prepareBindingOutput($this->builder->refactorCondition($match[1]), $twigOutput),
786-
$templateStringContent
787-
);
788-
}
789-
790-
$dynamicValues[] = $templateStringContent;
756+
$this->logger->debug('- template string binding ', ['value' => $value]);
757+
$dynamicValues[] = $this->handleTemplateStringBinding($matches['content'], $twigOutput);
791758
} else {
792759
$value = $this->builder->refactorCondition($value);
793760
$this->logger->debug(sprintf('- setAttribute "%s" with value "%s"', $name, $value));
@@ -803,6 +770,40 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
803770
return $dynamicValues;
804771
}
805772

773+
/**
774+
* @param string[] $items
775+
* @param string[] $dynamicValues
776+
* @throws ReflectionException
777+
*/
778+
protected function handleObjectBinding(array $items, array &$dynamicValues, bool $twigOutput): void
779+
{
780+
$regexObjectElements = '/["\']?(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
781+
foreach ($items as $item) {
782+
if (preg_match($regexObjectElements, $item, $matchElement)) {
783+
$dynamicValues[] = $this->builder->prepareBindingOutput(
784+
$this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . ' \'',
785+
$twigOutput
786+
);
787+
}
788+
}
789+
}
790+
791+
/**
792+
* @throws ReflectionException
793+
*/
794+
protected function handleTemplateStringBinding(string $templateStringContent, bool $twigOutput): string
795+
{
796+
preg_match_all('/\${([^}]+)}/', $templateStringContent, $matches, PREG_SET_ORDER);
797+
foreach ($matches as $match) {
798+
$templateStringContent = str_replace(
799+
$match[0],
800+
$this->builder->prepareBindingOutput($this->builder->refactorCondition($match[1]), $twigOutput),
801+
$templateStringContent
802+
);
803+
}
804+
return $templateStringContent;
805+
}
806+
806807
/**
807808
* @throws ReflectionException
808809
*/

‎tests/fixtures/vue-bind/binding-with-array-with-object-binding.twig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% set isDisabled = isDisabled|default(false) %}
2+
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
3+
<div class="a {{ isDisabled ? 'a--disabled ' }} b">
4+
Foo
5+
</div>
6+
</div>

‎tests/fixtures/vue-bind/binding-with-array-with-object-binding.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<div :class="['a', { 'a--disabled': isDisabled }, 'b' ]">
4+
Foo
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
isDisabled: {
13+
type: Boolean,
14+
default: false,
15+
},
16+
},
17+
};
18+
</script>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% set isDisabled = isDisabled|default(false) %}
2+
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
3+
<div class="a b {{ isDisabled ? 'b--disabled' : '' }}">
4+
Foo
5+
</div>
6+
</div>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<div :class="['a', `b ${isDisabled ? 'b--disabled' : ''}`]">
4+
Foo
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
isDisabled: {
13+
type: Boolean,
14+
default: false,
15+
},
16+
},
17+
};
18+
</script>

‎tests/fixtures/vue-bind/binding-with-array.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
2+
<div class="foo foo__bar foo__bar--baz">
3+
Foo
4+
</div>
5+
</div>

‎tests/fixtures/vue-bind/binding-with-array.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>
3+
<div :class="['foo', 'foo__bar', 'foo__bar--baz']">
4+
Foo
5+
</div>
6+
</div>
7+
</template>

0 commit comments

Comments
 (0)