Refactoring

Author: David-Desmaisons

src/core/componentStructure.js

@@ -0,0 +1,36 @@
+import { isTransition as isTransitionName } from "../util/tags";
+
+function isTransition(nodes) {
+  if (nodes.length !== 1) {
+    return false;
+  }
+  const [{ type }] = nodes;
+  return !!type && (isTransitionName(type) || isTransitionName(type.name));
+}
+
+class ComponentStructure {
+  constructor({ nodes: { header, default: defaultNodes, footer }, root }) {
+    this.nodes = { header, default: defaultNodes, footer };
+    this.children = [...header, ...defaultNodes, ...footer];
+    this.offsets = {
+      header: header.length,
+      footer: footer.length
+    };
+    this.transitionMode = isTransition(defaultNodes);
+    this.externalComponent = root.externalComponent;
+    this.tag = root.tag;
+    this.noneFunctional =
+      this.externalComponent && typeof this.tag !== "function";
+  }
+
+  checkCoherence() {
+    if (this.noneFunctional && this.transitionMode) {
+      throw new Error(
+        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.tag}`
+      );
+    }
+    return this;
+  }
+}
+
+export { ComponentStructure };

src/core/renderHelper.js

@@ -1,59 +1,37 @@
-import { isHtmlTag, isTransition as isTransitionName } from "../util/tags";
+import { ComponentStructure } from "./componentStructure";
+import { isHtmlTag, isTransition } from "../util/tags";
 import { resolveComponent } from "vue";
 
 function getSlot(slots, key) {
   const slotValue = slots[key];
   return slotValue ? slotValue() : [];
 }
 
-function isTransition(nodes) {
-  if (nodes.length !== 1) {
-    return false;
-  }
-  const [{ type }] = nodes;
-  return !!type && (isTransitionName(type) || isTransitionName(type.name));
-}
-
-function computeChildrenAndNodes(slots) {
+function computeNodes(slots) {
   const [header, defaultNodes, footer] = [
     "header",
     "default",
-    "footer"
-  ].map(name => getSlot(slots, name));
-  const transitionMode = isTransition(defaultNodes);
+    "footer",
+  ].map((name) => getSlot(slots, name));
   return {
-    children: [...header, ...defaultNodes, ...footer],
-    transitionMode,
-    nodes: {
-      header,
-      footer,
-      default: defaultNodes
-    },
-    offsets: {
-      header: header.length,
-      footer: footer.length
-    }
+    header,
+    footer,
+    default: defaultNodes,
   };
 }
 
-function resolveTag(tag) {
-  const externalComponent = !isHtmlTag(tag) && !isTransitionName(tag);
-  const realRoot = externalComponent ? resolveComponent(tag) : tag;
+function getRootInformation(tag) {
+  const externalComponent = !isHtmlTag(tag) && !isTransition(tag);
   return {
-    tag: realRoot,
     externalComponent,
-    noneFunctional: externalComponent && typeof realRoot !== "function"
+    tag: externalComponent ? resolveComponent(tag) : tag
   };
 }
 
-function computeRenderContext({ $slots, tag }) {
-  const childrenAndNodes = computeChildrenAndNodes($slots);
-  const tagInformation = resolveTag(tag);
-
-  return {
-    ...tagInformation,
-    ...childrenAndNodes
-  };
+function computeComponentStructure({ $slots, tag }) {
+  const nodes = computeNodes($slots);
+  const root = getRootInformation(tag);
+  return new ComponentStructure({ nodes, root });
 }
 
-export { computeRenderContext };
+export { computeComponentStructure };

src/vuedraggable.js

@@ -6,7 +6,7 @@ import {
   createSortableOption,
   getValidSortableEntries
 } from "./core/componentBuilderHelper";
-import { computeRenderContext } from "./core/renderHelper";
+import { computeComponentStructure } from "./core/renderHelper";
 import { h, defineComponent, nextTick } from "vue";
 
 function computeVmIndex(vNodes, htmlElement) {
@@ -99,17 +99,14 @@ const draggableComponent = defineComponent({
 
   render() {
     const { $slots, $attrs, tag, componentData } = this;
-    const renderContext = computeRenderContext({ $slots, tag });
+    const componentStructure = computeComponentStructure({
+      $slots,
+      tag
+    }).checkCoherence();
+    this.componentStructure = componentStructure;
     const attributes = getComponentAttributes({ $attrs, componentData });
 
-    if (renderContext.noneFunctional && renderContext.transitionMode) {
-      throw new Error(
-        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${tag}`
-      );
-    }
-
-    this.renderContext = renderContext;
-    return h(renderContext.tag, attributes, renderContext.children);
+    return h(componentStructure.tag, attributes, componentStructure.children);
   },
 
   created() {
@@ -145,7 +142,7 @@ const draggableComponent = defineComponent({
     rootContainer() {
       const {
         $el,
-        renderContext: { transitionMode }
+        componentStructure: { transitionMode }
       } = this;
       if (!transitionMode) {
         return $el;
@@ -190,7 +187,7 @@ const draggableComponent = defineComponent({
 
     getChildrenNodes() {
       const {
-        renderContext: {
+        componentStructure: {
           noneFunctional,
           transitionMode,
           nodes: { default: defaultNodes }
@@ -222,7 +219,7 @@ const draggableComponent = defineComponent({
         this.visibleIndexes = computeIndexes(
           this.getChildrenNodes(),
           this.rootContainer.children,
-          this.renderContext
+          this.componentStructure
         );
       });
     },

tests/unit/vuedraggable.spec.js

@@ -198,7 +198,7 @@ describe("draggable.vue when initialized with list", () => {
 
     it("set noneFunctional to false ", () => {
       const {
-        renderContext: { noneFunctional }
+        componentStructure: { noneFunctional }
       } = vm;
       expect(noneFunctional).toBe(false);
     });
@@ -342,7 +342,7 @@ describe("draggable.vue when initialized with list", () => {
         });
         const {
           vm: {
-            renderContext: { noneFunctional }
+            componentStructure: { noneFunctional }
           }
         } = wrapper;
         expect(noneFunctional).toBe(expectedNoneFunctionalComponentMode);
@@ -971,7 +971,7 @@ describe("draggable.vue when initialized with modelValue", () => {
   });
 
   it("transition mode should be false", () => {
-    expect(vm.renderContext.transitionMode).toBe(false);
+    expect(vm.componentStructure.transitionMode).toBe(false);
   });
 
   describe("when initiating a drag operation", () => {
@@ -1126,7 +1126,7 @@ describe("draggable.vue when initialized with a transition group", () => {
   });
 
   it("transition mode should be true", () => {
-    expect(vm.renderContext.transitionMode).toBe(true);
+    expect(vm.componentStructure.transitionMode).toBe(true);
   });
 
   it("renders correctly", () => {