Continuing refactoring

Author: David-Desmaisons

src/core/componentStructure.js

@@ -1,3 +1,4 @@
+import { nextTick } from "vue";
 import { isTransition as isTransitionName } from "../util/tags";
 
 const getHtmlElementFromNode = ({ el }) => el;
@@ -40,6 +41,18 @@ class ComponentStructure {
     this._checkCoherence();
   }
 
+  setHtmlRoot($el) {
+    if (!$el) {
+      return;
+    }
+    this.$el = $el;
+    this.rootContainer = getRootContainer(this);
+    nextTick(() => {
+      this.visibleIndexes = this._computeIndexes();
+    });
+    return this;
+  }
+
   get _domChildrenFromNodes() {
     return this._getChildrenNodes().map(getHtmlElementFromNode);
   }
@@ -79,7 +92,7 @@ class ComponentStructure {
       .filter(node => !!node.transition);
   }
 
-  computeIndexes() {
+  _computeIndexes() {
     const {
       _domChildrenFromNodes,
       transitionMode,
@@ -96,17 +109,16 @@ class ComponentStructure {
     return transitionMode ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
   }
 
-  setHtmlRoot($el) {
-    if (!$el) {
-      return;
-    }
-    this.$el = $el;
-    this.rootContainer = getRootContainer(this);
-    return this;
+  computeVmIndex(domElement) {
+    return this._domChildrenFromNodes.indexOf(domElement);
   }
 
-  computeVmIndex(htmlElement) {
-    return this._domChildrenFromNodes.indexOf(htmlElement);
+  getVmIndexFromDomIndex(domIndex) {
+    const { visibleIndexes } = this;
+    const numberIndexes = visibleIndexes.length;
+    return domIndex > numberIndexes - 1
+      ? numberIndexes
+      : visibleIndexes[domIndex];
   }
 }
 

src/vuedraggable.js

@@ -98,12 +98,9 @@ const draggableComponent = defineComponent({
         manage: event => manage.call(this, event)
       }
     });
-    const {
-      componentStructure: { rootContainer }
-    } = this;
+    const { rootContainer } = componentStructure;
     this._sortable = new Sortable(rootContainer, sortableOptions);
     rootContainer.__draggable_component__ = this;
-    this.computeIndexes();
   },
 
   beforeUnmount() {
@@ -112,42 +109,26 @@ const draggableComponent = defineComponent({
 
   computed: {
     realList() {
-      return this.list ? this.list : this.modelValue;
+      const { list } = this;
+      return list ? list : this.modelValue;
     }
   },
 
   watch: {
     $attrs: {
       handler(newOptionValue) {
-        this.updateOptions(newOptionValue);
-      },
-      deep: true
-    },
-
-    realList: {
-      handler() {
-        this.computeIndexes();
+        const { _sortable } = this;
+        getValidSortableEntries(newOptionValue).forEach(([key, value]) => {
+          _sortable.option(key, value);
+        });
       },
       deep: true
     }
   },
 
   methods: {
-    updateOptions(newOptionValue) {
-      const { _sortable } = this;
-      getValidSortableEntries(newOptionValue).forEach(([key, value]) => {
-        _sortable.option(key, value);
-      });
-    },
-
-    computeIndexes() {
-      nextTick(() => {
-        this.visibleIndexes = this.componentStructure.computeIndexes();
-      });
-    },
-
-    getUnderlyingVm(htmlElement) {
-      const index = this.componentStructure.computeVmIndex(htmlElement);
+    getUnderlyingVm(domElement) {
+      const index = this.componentStructure.computeVmIndex(domElement);
       if (index === -1) {
         //Edge case during move callback: related element might be
         //an element different from collection
@@ -163,9 +144,7 @@ const draggableComponent = defineComponent({
     },
 
     emitChanges(evt) {
-      nextTick(() => {
-        this.$emit("change", evt);
-      });
+      nextTick(() => this.$emit("change", evt));
     },
 
     alterList(onList) {
@@ -204,9 +183,7 @@ const draggableComponent = defineComponent({
     },
 
     getVmIndexFromDomIndex(domIndex) {
-      const indexes = this.visibleIndexes;
-      const numberIndexes = indexes.length;
-      return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
+      return this.componentStructure.getVmIndexFromDomIndex(domIndex);
     },
 
     onDragStart(evt) {
@@ -223,7 +200,6 @@ const draggableComponent = defineComponent({
       removeNode(evt.item);
       const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
       this.spliceList(newIndex, 0, element);
-      this.computeIndexes();
       const added = { element, newIndex };
       this.emitChanges({ added });
     },
@@ -291,7 +267,6 @@ const draggableComponent = defineComponent({
     },
 
     onDragEnd() {
-      this.computeIndexes();
       draggingElement = null;
     }
   }

tests/unit/vuedraggable.spec.js

@@ -48,10 +48,8 @@ function resetMocks() {
 }
 
 describe("draggable.vue when initialized with list", () => {
-  let computeIndexesSpy;
   beforeEach(() => {
     resetMocks();
-    computeIndexesSpy = jest.spyOn(draggable.methods, "computeIndexes");
 
     items = ["a", "b", "c"];
     wrapper = mount(draggable, {
@@ -206,16 +204,7 @@ describe("draggable.vue when initialized with list", () => {
 
   it("computes indexes", async () => {
     await nextTick();
-    expect(vm.visibleIndexes).toEqual([-1, 0, 1, 2, 3]);
-  });
-
-  it("update indexes", async () => {
-    await nextTick();
-
-    computeIndexesSpy.mockClear();
-    wrapper.setProps({ list: ["c", "d", "e", "f", "g"] });
-    await nextTick();
-    expect(computeIndexesSpy).toHaveBeenCalledTimes(1);
+    expect(vm.componentStructure.visibleIndexes).toEqual([-1, 0, 1, 2, 3]);
   });
 
   it("set realList", () => {
@@ -658,25 +647,26 @@ describe("draggable.vue when initialized with list", () => {
         expect(wrapper.emitted().end).toEqual([[endEvt]]);
       });
     });
+  });
 
-    describe("when re-rendering", () => {
-      const updatedRender= "<div><header></header><div>a</div><div>b</div><div>c</div><div>d</div><footer></footer></div>";
-      beforeEach(async () => {
-        items.push("d");
-        wrapper.setProps({
-          list: [...items]
-        });
-        await nextTick();
+  describe("when re-rendering", () => {
+    const updatedRender= "<div><header></header><div>a</div><div>b</div><div>c</div><div>d</div><footer></footer></div>";
+    beforeEach(async () => {
+      items.push("d");
+      wrapper.setProps({
+        list: [...items]
       });
+      vm.$forceUpdate();
+      await nextTick();
+    });
 
-      it("updates the rendered elements", () => {
-        expect(wrapper.html()).toEqual(updatedRender);
-      });
+    it("updates the rendered elements", () => {
+      expect(wrapper.html()).toEqual(updatedRender);
+    });
 
-      it("updates indexes", async () => {
-        await nextTick();
-        expect(vm.visibleIndexes).toEqual([-1, 0, 1, 2, 3, 4]);
-      });
+    it("updates indexes", async () => {
+      await nextTick();
+      expect(vm.componentStructure.visibleIndexes).toEqual([-1, 0, 1, 2, 3, 4]);
     });
   });
 
@@ -948,11 +938,8 @@ describe("draggable.vue when initialized with list", () => {
 });
 
 describe("draggable.vue when initialized with modelValue", () => {
-  let computeIndexesSpy;
-
   beforeEach(() => {
     Sortable.mockClear();
-    computeIndexesSpy = jest.spyOn(draggable.methods, "computeIndexes");
 
     items = ["a", "b", "c"];
     wrapper = mount(draggable, {
@@ -970,22 +957,13 @@ describe("draggable.vue when initialized with modelValue", () => {
 
   it("computes indexes", async () => {
     await nextTick();
-    expect(vm.visibleIndexes).toEqual([0, 1, 2]);
+    expect(vm.componentStructure.visibleIndexes).toEqual([0, 1, 2]);
   });
 
   it("renders correctly", () => {
     expectHTML(wrapper, initialRenderRaw);
   });
 
-  it("update indexes", async () => {
-    await nextTick();
-    computeIndexesSpy.mockClear();
-
-    wrapper.setProps({ modelValue: ["c", "d", "e", "f", "g"] });
-    await nextTick();
-    expect(computeIndexesSpy).toHaveBeenCalledTimes(1);
-  });
-
   it("set realList", () => {
     expect(vm.realList).toEqual(["a", "b", "c"]);
   });
@@ -1138,7 +1116,7 @@ describe("draggable.vue when initialized with a transition group", () => {
 
   it("computes indexes", async () => {
     await nextTick();
-    expect(vm.visibleIndexes).toEqual([0, 1, 2]);
+    expect(vm.componentStructure.visibleIndexes).toEqual([0, 1, 2]);
   });
 
   it("set realList", () => {