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

Fix named slots

Author: tronsha

src/Compiler.php

@@ -1310,7 +1310,9 @@ protected function handleSlots(DOMElement $node): void
         $slotFallback = $node->hasChildNodes() ? $this->innerHtmlOfNode($node) : null;
 
         $slotName = Slot::SLOT_PREFIX;
-        $slotName .= $node->getAttribute('name') ? $node->getAttribute('name') : Slot::SLOT_DEFAULT_NAME;
+        $slotName .= $node->getAttribute('name')
+            ? str_replace('-', '_', $node->getAttribute('name'))
+            : Slot::SLOT_DEFAULT_NAME;
         $slotFallbackKey = $slotName . '_fallback';
 
         if ($slotFallback) {
@@ -1344,7 +1346,7 @@ protected function handleNamedSlotsInclude(DOMNode $node, Component $usedCompone
             if ($childNode instanceof DOMElement && $childNode->tagName === 'template') {
                 foreach ($childNode->attributes as $attribute) {
                     if ($attribute instanceof DOMAttr && preg_match('/v-slot(?::([a-z0-9_-]+)?)/i', $attribute->nodeName, $matches)) {
-                        $slotName = $matches[1] ?? Slot::SLOT_DEFAULT_NAME;
+                        $slotName = $matches[1] ? str_replace('-', '_', $matches[1]) : Slot::SLOT_DEFAULT_NAME;
                         $this->addSlot($slotName, $childNode, $usedComponent);
                         $removeNodes[] = $childNode;
                     }

tests/fixtures/vue-slot/component-has-named-slots-2.twig

@@ -0,0 +1,3 @@
+<div class="container {{ class|default('') }}" style="{{ style|default('') }}">
+  {{ slot_foo_bar|default('') }}
+</div>

tests/fixtures/vue-slot/component-has-named-slots-2.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="container">
+    <slot name="foo-bar" />
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BaseLayout',
+  };
+</script>

tests/fixtures/vue-slot/include-child-component-with-named-slots-2.twig

@@ -0,0 +1,5 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  {% set slot_foo_bar_value %}baz{% endset %}
+  {% set slot_default_value %}{% endset %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_foo_bar': slot_foo_bar_value, 'slot_default': slot_default_value, 'class': "", 'style': "" } %}
+</div>

tests/fixtures/vue-slot/include-child-component-with-named-slots-2.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ChildComponent>
+      <template v-slot:foo-bar>
+        baz
+      </template>
+    </ChildComponent>
+  </div>
+</template>
+<script>
+    export default {
+        name: 'ComponentWithSlot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>