Merge pull request #79 from tronsha/bugfix/slot_default

Fix for slot_default inheritance

Author: tronsha

src/Compiler.php

@@ -332,6 +332,8 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
                 if ($node->hasChildNodes() && !$usedComponent->hasSlot(Slot::SLOT_DEFAULT_NAME)) {
                     $this->addSlot(Slot::SLOT_DEFAULT_NAME, $node, $usedComponent);
                 }
+            } else {
+                $usedComponent->addEmptyDefaultSlot();
             }
 
             // Include Partial

src/Models/Component.php

@@ -90,6 +90,11 @@ public function addSlot(string $name, string $value): Slot
         return $this->slots[$name];
     }
 
+    public function addEmptyDefaultSlot(): void
+    {
+        $this->properties[] = new Property(Slot::SLOT_PREFIX . Slot::SLOT_DEFAULT_NAME, '""', false);
+    }
+
     public function kebabToCamelCase(string $string, bool $capitalizeFirstCharacter = false): string
     {
         $str = str_replace('-', '', ucwords($string, '-'));

tests/fixtures/style-block-scoped/style-block-scoped-with-child-binding.twig

@@ -5,6 +5,6 @@
 </style>
 <div class="root {{ class|default('') }}" data-v-7ac31a851ab0c4c52bc569b6f256bfe4 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
   <div class="foo" data-v-7ac31a851ab0c4c52bc569b6f256bfe4>
-    {% include "/templates/ChildComponent.twig" with { 'dataScopedStyleAttribute': "data-v-7ac31a851ab0c4c52bc569b6f256bfe4", 'class': "", 'style': "" } %}
+    {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-7ac31a851ab0c4c52bc569b6f256bfe4", 'class': "", 'style': "" } %}
   </div>
 </div>

tests/fixtures/vue-component/component-with-child-binding.twig

@@ -1,8 +1,8 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% include "/templates/ChildComponent.twig" with { 'test': "test", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}
-  {% include "/templates/ChildComponent.twig" with { 'ariaLabelledby': "foo-" ~ ( _uid ) ~ "", 'class': "", 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'test': "test", 'slot_default': "", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'ariaLabelledby': "foo-" ~ ( _uid ) ~ "", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-child.twig

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

tests/fixtures/vue-component/component-with-for.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'class': "", 'style': "" } %}{% endfor %}
+  {% for a in listOfProducts %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'slot_default': "", 'class': "", 'style': "" } %}{% endfor %}
 </div>

tests/fixtures/vue-component/component-with-if.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'class': "", 'style': "" } %}{% endif %}
+  {% if a > 5 %}{% include "/templates/ChildComponent.twig" with { 'string': "string", 'product': productA, 'slot_default': "", 'class': "", 'style': "" } %}{% endif %}
 </div>

tests/fixtures/vue-component/component-with-inline-condition-prop.twig

@@ -2,5 +2,5 @@
   {% include "/templates/ChildComponent.twig" with {
     'product': testProduct,
     'showSomething': index > 5 and a == true,
-    'testA': "Hello", 'string': "Test", 'class': "", 'style': "" } %}
+    'testA': "Hello", 'string': "Test", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-component/component-with-prop.twig

@@ -1,3 +1,3 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
-  {% include "/templates/ChildComponent.twig" with { 'product': testProduct, 'testA': "Hello", 'string': "Test", 'class': "", 'style': "" } %}
+  {% include "/templates/ChildComponent.twig" with { 'product': testProduct, 'testA': "Hello", 'string': "Test", 'slot_default': "", 'class': "", 'style': "" } %}
 </div>

tests/fixtures/vue-slot/include-child-component-without-default-slot.twig

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