Refactoring

Author: David-Desmaisons

src/core/componentBuilderHelper.js

@@ -24,7 +24,7 @@ function getComponentAttributes({ $attrs, componentData }) {
   return { ...attributes, ...attrs, ...props };
 }
 
-function getSortableOption({ $attrs, callBackBuilder }) {
+function createSortableOption({ $attrs, callBackBuilder }) {
   const options = {
     draggable: ">*"
   };
@@ -43,4 +43,14 @@ function getSortableOption({ $attrs, callBackBuilder }) {
   return options;
 }
 
-export { getComponentAttributes, getSortableOption };
+function getValidSortableEntries(value) {
+  return Object.entries(value)
+    .map(([key, value]) => [camelize(key), value])
+    .filter(([key, _]) => !isReadOnlyEvent(key));
+}
+
+export {
+  getComponentAttributes,
+  createSortableOption,
+  getValidSortableEntries
+};

src/vuedraggable.js

@@ -1,14 +1,12 @@
 import Sortable from "sortablejs";
 import { insertNodeAt, removeNode } from "./util/htmlHelper";
 import { console } from "./util/console";
-import { camelize } from "./util/string";
 import { isHtmlTag, isTransition as isTransitionName } from "./util/tags";
 import {
   getComponentAttributes,
-  getSortableOption
+  createSortableOption,
+  getValidSortableEntries
 } from "./core/componentBuilderHelper";
-import { isReadOnlyEvent } from "./core/sortableEvents";
-
 import { h, defineComponent, nextTick, resolveComponent } from "vue";
 
 function computeVmIndex(vNodes, element) {
@@ -172,7 +170,7 @@ const draggableComponent = defineComponent({
         `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${tag}`
       );
     }
-    const sortableOptions = getSortableOption({
+    const sortableOptions = createSortableOption({
       $attrs,
       callBackBuilder: {
         manageAndEmit: event => manageAndEmit.call(this, event),
@@ -231,11 +229,8 @@ const draggableComponent = defineComponent({
 
     updateOptions(newOptionValue) {
       const { _sortable } = this;
-      Object.entries(newOptionValue).forEach(([key, value]) => {
-        const normalizedKey = camelize(key);
-        if (!isReadOnlyEvent(normalizedKey)) {
-          _sortable.option(normalizedKey, value);
-        }
+      getValidSortableEntries(newOptionValue).forEach(([key, value]) => {
+        _sortable.option(key, value);
       });
     },
 

tests/unit/core/componentBuilderHelper.spec.js

@@ -1,6 +1,6 @@
 import {
   getComponentAttributes,
-  getSortableOption,
+  createSortableOption,
 } from "@/core/componentBuilderHelper";
 
 describe("getComponentAttributes", () => {
@@ -64,7 +64,7 @@ describe("getComponentAttributes", () => {
   });
 });
 
-describe("getSortableOption", () => {
+describe("createSortableOption", () => {
   test.each([
     [{ $attrs: {}, callBackBuilder: {} }, { draggable: ">*" }],
     [{ $attrs: { onStart: 23 }, callBackBuilder: {} }, { draggable: ">*" }],
@@ -146,7 +146,7 @@ describe("getSortableOption", () => {
       },
     ],
   ])("for %o returns %o", (value, expected) => {
-    const actual = getSortableOption(value);
+    const actual = createSortableOption(value);
     expect(actual).toEqual(expected);
   });
 });