Merge pull request #80 from tronsha/bugfix/slot-fallback

Fix slot fallback

Author: tronsha

src/Compiler.php

@@ -116,6 +116,11 @@ class Compiler
      */
     protected $attributesWithIf = ['checked', 'selected', 'disabled'];
 
+    /**
+     * @var array
+     */
+    protected $slotFallbackCounter = [];
+
     /**
      * Compiler constructor.
      */
@@ -1297,10 +1302,18 @@ protected function handleSlots(DOMElement $node): void
 
         $slotName = Slot::SLOT_PREFIX;
         $slotName .= $node->getAttribute('name') ? $node->getAttribute('name') : Slot::SLOT_DEFAULT_NAME;
+        $slotFallbackKey = $slotName . '_fallback';
 
         if ($slotFallback) {
-            $this->addVariable($slotName . '_fallback', $slotFallback);
-            $variable = $this->builder->createVariableOutput($slotName, $slotName . '_fallback');
+            if (isset($this->slotFallbackCounter[$slotFallbackKey])) {
+                ++$this->slotFallbackCounter[$slotFallbackKey];
+                $slotFallbackName = $slotFallbackKey . '_' . $this->slotFallbackCounter[$slotFallbackKey];
+            } else {
+                $this->slotFallbackCounter[$slotFallbackKey] = 1;
+                $slotFallbackName = $slotFallbackKey;
+            }
+            $this->addVariable($slotFallbackName, $slotFallback);
+            $variable = $this->builder->createVariableOutput($slotName, $slotFallbackName);
         } else {
             $variable = $this->builder->createVariableOutput($slotName);
         }

tests/fixtures/vue-slot/component-has-two-default-slots-with-fallback-value.twig

@@ -0,0 +1,11 @@
+{% set slot_default_fallback %}{{ text }}{% endset %}
+{% set slot_default_fallback_2 %}{{ text }}{% endset %}
+{% if true %}
+<a href="#" class="{{ class|default('') }}" style="{{ style|default('') }}">
+    {{ slot_default|default(slot_default_fallback) }}
+</a>
+{% else %}
+<button class="{{ class|default('') }}" style="{{ style|default('') }}">
+    {{ slot_default|default(slot_default_fallback_2) }}
+</button>
+{% endif %}

tests/fixtures/vue-slot/component-has-two-default-slots-with-fallback-value.vue

@@ -0,0 +1,13 @@
+<template>
+  <a v-if="true" href="#">
+    <slot>{{ text }}</slot>
+  </a>
+  <button v-else>
+    <slot>{{ text }}</slot>
+  </button>
+</template>
+<script>
+    export default {
+        name: 'ComponentWithTowDefaultSlots',
+    };
+</script>