Merge pull request #81 from tronsha/feature/v-bind

Add v-bind support

Author: tronsha

src/Compiler.php

@@ -111,6 +111,11 @@ class Compiler
      */
     protected $includeAttributes = ['class', 'style'];
 
+    /**
+     * @var string|null
+     */
+    protected $vBind = null;
+
     /**
      * @var string[]
      */
@@ -345,7 +350,8 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
             $include = $this->document->createTextNode(
                 $this->builder->createIncludePartial(
                     $usedComponent->getPath(),
-                    $this->preparePropertiesForInclude($usedComponent->getProperties())
+                    $this->preparePropertiesForInclude($usedComponent->getProperties()),
+                    $this->vBind
                 )
             );
 
@@ -440,6 +446,9 @@ private function preparePropertiesForInclude(array $variables): array
                     'dataScopedStyleAttribute|default(\'\')',
                     false
                 );
+            } elseif ($name === 'vBind') {
+                $this->vBind = $value;
+                unset($variables[$key]);
             }
         }
 
@@ -1334,7 +1343,7 @@ protected function handleNamedSlotsInclude(DOMNode $node, Component $usedCompone
         foreach ($node->childNodes as $childNode) {
             if ($childNode instanceof DOMElement && $childNode->tagName === 'template') {
                 foreach ($childNode->attributes as $attribute) {
-                    if ($attribute instanceof DOMAttr && preg_match('/v-slot(?::([a-z]+)?)/i', $attribute->nodeName, $matches)) {
+                    if ($attribute instanceof DOMAttr && preg_match('/v-slot(?::([a-z0-9_-]+)?)/i', $attribute->nodeName, $matches)) {
                         $slotName = $matches[1] ?? Slot::SLOT_DEFAULT_NAME;
                         $this->addSlot($slotName, $childNode, $usedComponent);
                         $removeNodes[] = $childNode;

src/Utils/TwigBuilder.php

@@ -153,11 +153,17 @@ public function createBlock(string $content): string
     /**
      * @param Property[] $variables
      */
-    public function createIncludePartial(string $partialPath, array $variables = []): string
+    public function createIncludePartial(string $partialPath, array $variables = [], ?string $vBind = null): string
     {
         $serializedProperties = $this->serializeComponentProperties($variables);
 
-        return $this->createBlock('include "' . $partialPath . '" with ' . $serializedProperties);
+        $content = 'include "' . $partialPath . '" with ' . $serializedProperties;
+
+        if ($vBind) {
+            $content .= '|merge(' . trim($vBind, '"') . ')';
+        }
+
+        return $this->createBlock($content);
     }
 
     /**

tests/fixtures/vue-component/component-with-v-bind.twig

@@ -0,0 +1,3 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% include "/templates/ChildComponent.twig" with { 'bar': "baz", 'slot_default': "", 'class': "", 'style': "" }|merge(foo) %}
+</div>

tests/fixtures/vue-component/component-with-v-bind.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <ChildComponent v-bind="foo" bar="baz" />
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithVBind',
+    };
+</script>