Refactoring

Author: David-Desmaisons

src/core/componentStructure.js

@@ -40,6 +40,10 @@ class ComponentStructure {
     this._checkCoherence();
   }
 
+  get _domChildrenFromNodes() {
+    return this._getChildrenNodes().map(getHtmlElementFromNode);
+  }
+
   _checkCoherence() {
     if (this.noneFunctional && this.transitionMode) {
       throw new Error(
@@ -48,7 +52,7 @@ class ComponentStructure {
     }
   }
 
-  getChildrenNodes() {
+  _getChildrenNodes() {
     const {
       noneFunctional,
       transitionMode,
@@ -77,19 +81,17 @@ class ComponentStructure {
 
   computeIndexes() {
     const {
+      _domChildrenFromNodes,
       transitionMode,
       offsets: { footer: footerOffset }
     } = this;
 
-    const domChildrenFromNodes = this.getChildrenNodes().map(
-      getHtmlElementFromNode
-    );
     const domChildren = this.rootContainer.children;
     const footerIndex = domChildren.length - footerOffset;
     const rawIndexes = [...domChildren].map((elt, idx) =>
       idx >= footerIndex
-        ? domChildrenFromNodes.length
-        : domChildrenFromNodes.indexOf(elt)
+        ? _domChildrenFromNodes.length
+        : _domChildrenFromNodes.indexOf(elt)
     );
     return transitionMode ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
   }
@@ -102,6 +104,10 @@ class ComponentStructure {
     this.rootContainer = getRootContainer(this);
     return this;
   }
+
+  computeVmIndex(htmlElement) {
+    return this._domChildrenFromNodes.indexOf(htmlElement);
+  }
 }
 
 export { ComponentStructure };

src/vuedraggable.js

@@ -9,18 +9,6 @@ import {
 import { computeComponentStructure } from "./core/renderHelper";
 import { h, defineComponent, nextTick } from "vue";
 
-function computeVmIndex(vNodes, htmlElement) {
-  const domElements = vNodes.map(({ el }) => el);
-  const index = domElements.indexOf(htmlElement);
-  if (index === -1) {
-    throw new Error("node not found", {
-      nodes: domElements,
-      htmlElement
-    });
-  }
-  return index;
-}
-
 function emit(evtName, evtData) {
   nextTick(() => this.$emit(evtName.toLowerCase(), evtData));
 }
@@ -136,8 +124,11 @@ const draggableComponent = defineComponent({
       deep: true
     },
 
-    realList() {
-      this.computeIndexes();
+    realList: {
+      handler() {
+        this.computeIndexes();
+      },
+      deep: true
     }
   },
 
@@ -156,8 +147,7 @@ const draggableComponent = defineComponent({
     },
 
     getUnderlyingVm(htmlElement) {
-      const childrenNodes = this.componentStructure.getChildrenNodes();
-      const index = computeVmIndex(childrenNodes, htmlElement);
+      const index = this.componentStructure.computeVmIndex(htmlElement);
       if (index === -1) {
         //Edge case during move callback: related element might be
         //an element different from collection