Merge pull request #85 from tronsha/bugfix/class-for-component-on-root

Fix include component on root

Author: tronsha

src/Compiler.php

@@ -350,7 +350,7 @@ 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(), $level === 1),
                     $this->vBind
                 )
             );
@@ -414,7 +414,7 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
      *
      * @return Property[]
      */
-    private function preparePropertiesForInclude(array $variables): array
+    private function preparePropertiesForInclude(array $variables, bool $isRootNode = false): array
     {
         $values = [];
         $hasScopedStyleAttribute = false;
@@ -457,11 +457,15 @@ private function preparePropertiesForInclude(array $variables): array
             if ($attribute === 'style') {
                 $glue = ' ~ "; " ~ ';
             }
-            $variables[] = new Property(
-                $attribute,
-                $values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""',
-                false
-            );
+            $value = $values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""';
+            if ($isRootNode) {
+                $value = $value . $glue . $attribute . '|default(\'\')';
+            }
+            $variables[] = new Property($attribute, $value, false);
+        }
+
+        if ($isRootNode) {
+            $variables[] = new Property('dataScopedStyleAttribute', 'dataScopedStyleAttribute|default(\'\')', false);
         }
 
         return $variables;

tests/fixtures/vue-slot/include-child-component-with-component-on-root.twig

@@ -0,0 +1 @@
+{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'class': "foo" ~ " " ~ class|default(''), 'style': "color: black" ~ "; " ~ style|default(''), 'dataScopedStyleAttribute': dataScopedStyleAttribute|default('') } %}

tests/fixtures/vue-slot/include-child-component-with-component-on-root.vue

@@ -0,0 +1,12 @@
+<template>
+  <ChildComponent class="foo" style="color: black" />
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>