Refactoring

Author: David-Desmaisons

src/core/renderHelper.js

@@ -36,7 +36,7 @@ function computeChildrenAndNodes(slots) {
   };
 }
 
-function solveTag(tag) {
+function resolveTag(tag) {
   const externalComponent = !isHtmlTag(tag) && !isTransitionName(tag);
   const realRoot = externalComponent ? resolveComponent(tag) : tag;
   return {
@@ -48,7 +48,7 @@ function solveTag(tag) {
 
 function computeRenderContext({ $slots, tag }) {
   const childrenAndNodes = computeChildrenAndNodes($slots);
-  const tagInformation = solveTag(tag);
+  const tagInformation = resolveTag(tag);
 
   return {
     ...tagInformation,

src/vuedraggable.js

@@ -9,27 +9,31 @@ import {
 import { computeRenderContext } from "./core/renderHelper";
 import { h, defineComponent, nextTick } from "vue";
 
-function computeVmIndex(vNodes, element) {
+function computeVmIndex(vNodes, htmlElement) {
   const domElements = vNodes.map(({ el }) => el);
-  const index = domElements.indexOf(element);
+  const index = domElements.indexOf(htmlElement);
   if (index === -1) {
     throw new Error("node not found", {
       nodes: domElements,
-      element
+      htmlElement
     });
   }
   return index;
 }
 
-function computeIndexes(vNodes, domChildren, isTransition, footerOffset) {
+function computeIndexes(
+  vNodes,
+  domChildren,
+  { transitionMode, offsets: { footer: footerOffset } }
+) {
   const domChildrenFromNodes = vNodes.map(({ el }) => el);
   const footerIndex = domChildren.length - footerOffset;
   const rawIndexes = [...domChildren].map((elt, idx) =>
     idx >= footerIndex
       ? domChildrenFromNodes.length
       : domChildrenFromNodes.indexOf(elt)
   );
-  return isTransition ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
+  return transitionMode ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
 }
 
 function emit(evtName, evtData) {
@@ -93,17 +97,9 @@ const draggableComponent = defineComponent({
 
   props,
 
-  data() {
-    return {
-      noneFunctionalComponentMode: false
-    };
-  },
-
   render() {
     const { $slots, $attrs, tag, componentData } = this;
     const renderContext = computeRenderContext({ $slots, tag });
-    this.renderContext = renderContext;
-    this.noneFunctionalComponentMode = renderContext.noneFunctional;
     const attributes = getComponentAttributes({ $attrs, componentData });
 
     if (renderContext.noneFunctional && renderContext.transitionMode) {
@@ -112,6 +108,7 @@ const draggableComponent = defineComponent({
       );
     }
 
+    this.renderContext = renderContext;
     return h(renderContext.tag, attributes, renderContext.children);
   },
 
@@ -193,13 +190,13 @@ const draggableComponent = defineComponent({
 
     getChildrenNodes() {
       const {
-        noneFunctionalComponentMode,
         renderContext: {
+          noneFunctional,
           transitionMode,
           nodes: { default: defaultNodes }
         }
       } = this;
-      if (noneFunctionalComponentMode) {
+      if (noneFunctional) {
         //TODO check
         return defaultNodes[0].children;
         //return this.$children[0].$slots.default();
@@ -225,8 +222,7 @@ const draggableComponent = defineComponent({
         this.visibleIndexes = computeIndexes(
           this.getChildrenNodes(),
           this.rootContainer.children,
-          this.renderContext.transitionMode,
-          this.renderContext.offsets.footer
+          this.renderContext
         );
       });
     },
@@ -366,8 +362,8 @@ const draggableComponent = defineComponent({
       };
       const sendEvent = {
         ...evt,
-        ...{ relatedContext },
-        ...{ draggedContext }
+        relatedContext,
+        draggedContext
       };
       return move(sendEvent, originalEvent);
     },

tests/unit/vuedraggable.spec.js

@@ -196,9 +196,11 @@ describe("draggable.vue when initialized with list", () => {
       expect(wrapper.html()).toMatch(expectedRegex);
     });
 
-    it("set noneFunctionalComponentMode to false ", () => {
-      const { noneFunctionalComponentMode } = vm;
-      expect(noneFunctionalComponentMode).toBe(false);
+    it("set noneFunctional to false ", () => {
+      const {
+        renderContext: { noneFunctional }
+      } = vm;
+      expect(noneFunctional).toBe(false);
     });
   });
 
@@ -339,11 +341,11 @@ describe("draggable.vue when initialized with list", () => {
           }
         });
         const {
-          vm: { noneFunctionalComponentMode }
+          vm: {
+            renderContext: { noneFunctional }
+          }
         } = wrapper;
-        expect(noneFunctionalComponentMode).toBe(
-          expectedNoneFunctionalComponentMode
-        );
+        expect(noneFunctional).toBe(expectedNoneFunctionalComponentMode);
       }
     );
   });