Improving solution

Author: David-Desmaisons

src/core/componentStructure.js

@@ -34,12 +34,25 @@ class ComponentStructure {
     };
     this.transitionMode = isTransition(defaultNodes);
     this.externalComponent = root.externalComponent;
+    this.rootTransition = root.transition;
     this.tag = root.tag;
-    this.noneFunctional =
-      this.externalComponent && typeof this.tag !== "function";
     this.setHtmlRoot($el);
   }
 
+  get _domChildrenFromNodes() {
+    return this._getChildrenNodes().map(getHtmlElementFromNode);
+  }
+
+  get _isRootComponent() {
+    return this.externalComponent || this.rootTransition;
+  }
+
+  render(h, attributes) {
+    const { tag, children, _isRootComponent } = this;
+    const option = !_isRootComponent ? children : { default: () => children };
+    return h(tag, attributes, option);
+  }
+
   setHtmlRoot($el) {
     if (!$el) {
       return;
@@ -52,21 +65,12 @@ class ComponentStructure {
     return this;
   }
 
-  get _domChildrenFromNodes() {
-    return this._getChildrenNodes().map(getHtmlElementFromNode);
-  }
-
   _getChildrenNodes() {
     const {
-      noneFunctional,
       transitionMode,
       nodes: { default: defaultNodes }
     } = this;
 
-    if (noneFunctional) {
-      return defaultNodes[0].children;
-    }
-
     if (!transitionMode) {
       return defaultNodes.length === 1 && defaultNodes[0].el.nodeType === 3
         ? defaultNodes[0].children

src/core/renderHelper.js

@@ -21,8 +21,10 @@ function computeNodes(slots) {
 }
 
 function getRootInformation(tag) {
-  const externalComponent = !isHtmlTag(tag) && !isTransition(tag);
+  const transition = isTransition(tag);
+  const externalComponent = !isHtmlTag(tag) && !transition;
   return {
+    transition,
     externalComponent,
     tag: externalComponent ? resolveComponent(tag) : tag
   };

src/vuedraggable.js

@@ -75,7 +75,7 @@ const draggableComponent = defineComponent({
     const componentStructure = computeComponentStructure({ $slots, tag, $el });
     this.componentStructure = componentStructure;
     const attributes = getComponentAttributes({ $attrs, componentData });
-    return h(componentStructure.tag, attributes, componentStructure.children);
+    return componentStructure.render(h, attributes);
   },
 
   created() {

tests/unit/vuedraggable.spec.js

@@ -192,13 +192,6 @@ describe("draggable.vue when initialized with list", () => {
       const expectedRegex = new RegExp(`^<${tag}>.*<\/${tag}>$`);
       expect(wrapper.html()).toMatch(expectedRegex);
     });
-
-    it("set noneFunctional to false ", () => {
-      const {
-        componentStructure: { noneFunctional }
-      } = vm;
-      expect(noneFunctional).toBe(false);
-    });
   });
 
   it("computes indexes", async () => {
@@ -308,36 +301,6 @@ describe("draggable.vue when initialized with list", () => {
     });
   });
 
-  describe("when creating a component", () => {
-    test.each([
-      ["Fake", true, Fake],
-      ["FakeFunctional", false, FakeFunctional]
-    ])(
-      "when using component with tag %p compute noneFunctionalComponentMode as %p ",
-      (_, expectedNoneFunctionalComponentMode, component) => {
-        wrapper = mount(draggable, {
-          propsData: {
-            tag: "child"
-          },
-          slots: {
-            default: () => []
-          },
-          global: {
-            components: {
-              child: component
-            }
-          }
-        });
-        const {
-          vm: {
-            componentStructure: { noneFunctional }
-          }
-        } = wrapper;
-        expect(noneFunctional).toBe(expectedNoneFunctionalComponentMode);
-      }
-    );
-  });
-
   it("keeps a reference to Sortable instance", () => {
     expect(vm._sortable).toBe(SortableFake);
   });