Refactoring

Author: David-Desmaisons

src/core/renderHelper.js

@@ -6,18 +6,32 @@ function getSlot(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) {
   const [header, defaultNodes, footer] = [
     "header",
     "default",
     "footer"
   ].map(name => getSlot(slots, name));
+  const transitionMode = isTransition(defaultNodes);
   return {
     children: [...header, ...defaultNodes, ...footer],
+    transitionMode,
     nodes: {
       header,
       footer,
       default: defaultNodes
+    },
+    offsets: {
+      header: header.length,
+      footer: footer.length
     }
   };
 }
@@ -33,18 +47,11 @@ function solveTag(tag) {
 
 function computeRenderContext({ $slots, tag }) {
   const childrenAndNodes = computeChildrenAndNodes($slots);
-  const {
-    nodes: { header, footer }
-  } = childrenAndNodes;
   const tagInformation = solveTag(tag);
 
   return {
     ...tagInformation,
-    ...childrenAndNodes,
-    offsets: {
-      header: header.length,
-      footer: footer.length
-    }
+    ...childrenAndNodes
   };
 }
 

src/vuedraggable.js

@@ -8,7 +8,7 @@ import {
   getValidSortableEntries
 } from "./core/componentBuilderHelper";
 import { computeRenderContext } from "./core/renderHelper";
-import { h, defineComponent, nextTick, resolveComponent } from "vue";
+import { h, defineComponent, nextTick } from "vue";
 
 function computeVmIndex(vNodes, element) {
   const domElements = vNodes.map(({ el }) => el);
@@ -53,14 +53,6 @@ function manageAndEmit(evtName) {
   };
 }
 
-function isTransition(slots) {
-  if (!slots || slots.length !== 1) {
-    return false;
-  }
-  const [{ type }] = slots;
-  return !!type && (isTransitionName(type) || isTransitionName(type.name));
-}
-
 let draggingElement = null;
 
 const props = {
@@ -104,7 +96,6 @@ const draggableComponent = defineComponent({
 
   data() {
     return {
-      transitionMode: false,
       noneFunctionalComponentMode: false
     };
   },
@@ -117,7 +108,6 @@ const draggableComponent = defineComponent({
     const mainNode = h(renderContext.tag, attributes, renderContext.children);
 
     this.renderContext = renderContext;
-    this.transitionMode = isTransition(renderContext.nodes.default);
     this.noneFunctionalComponentMode =
       renderContext.externalComponent && typeof mainNode.type !== "function";
     return mainNode;
@@ -137,7 +127,7 @@ const draggableComponent = defineComponent({
       $attrs,
       rootContainer,
       noneFunctionalComponentMode,
-      transitionMode
+      renderContext: { transitionMode }
     } = this;
     if (noneFunctionalComponentMode && transitionMode) {
       throw new Error(
@@ -164,7 +154,10 @@ const draggableComponent = defineComponent({
 
   computed: {
     rootContainer() {
-      const { $el, transitionMode } = this;
+      const {
+        $el,
+        renderContext: { transitionMode }
+      } = this;
       if (!transitionMode) {
         return $el;
       }
@@ -209,8 +202,8 @@ const draggableComponent = defineComponent({
     getChildrenNodes() {
       const {
         noneFunctionalComponentMode,
-        transitionMode,
         renderContext: {
+          transitionMode,
           nodes: { default: defaultNodes }
         }
       } = this;
@@ -240,7 +233,7 @@ const draggableComponent = defineComponent({
         this.visibleIndexes = computeIndexes(
           this.getChildrenNodes(),
           this.rootContainer.children,
-          this.transitionMode,
+          this.renderContext.transitionMode,
           this.renderContext.offsets.footer
         );
       });

tests/unit/vuedraggable.spec.js

@@ -969,7 +969,7 @@ describe("draggable.vue when initialized with modelValue", () => {
   });
 
   it("transition mode should be false", () => {
-    expect(vm.transitionMode).toBe(false);
+    expect(vm.renderContext.transitionMode).toBe(false);
   });
 
   describe("when initiating a drag operation", () => {
@@ -1124,7 +1124,7 @@ describe("draggable.vue when initialized with a transition group", () => {
   });
 
   it("transition mode should be true", () => {
-    expect(vm.transitionMode).toBe(true);
+    expect(vm.renderContext.transitionMode).toBe(true);
   });
 
   it("renders correctly", () => {