Refactoring

Author: David-Desmaisons

src/core/componentBuilderHelper.js

@@ -1,12 +1,14 @@
 import { capitalize } from "../util/string";
 import { camelize } from "../util/string";
-import { events } from "./sortableEvents";
+import { events, isReadOnlyEvent } from "./sortableEvents";
+
+function isHtmlAttribute(value) {
+  return ["id", "class"].includes(value) || value.startsWith("data-");
+}
 
 function getComponentAttributes($attrs, componentData) {
   const attributes = Object.entries($attrs)
-    .filter(
-      ([key, _]) => ["id", "class"].includes(key) || key.startsWith("data-")
-    )
+    .filter(([key, _]) => isHtmlAttribute(key))
     .reduce((res, [key, value]) => {
       res[key] = value;
       return res;
@@ -22,27 +24,22 @@ function getComponentAttributes($attrs, componentData) {
   return { ...attributes, ...attrs, ...props };
 }
 
-function getDraggableOption({
-  $attrs,
-  callBackBuilder: { manageAndEmit, emit, manage }
-}) {
+function getSortableOption({ $attrs, callBackBuilder }) {
   const options = {
     draggable: ">*"
   };
-  Object.entries($attrs).forEach(([key, value]) => {
-    options[camelize(key)] = value;
-  });
-  const builders = {
-    emit,
-    manageAndEmit,
-    manage
-  };
-  Object.entries(builders).forEach(([eventType, eventBuilder]) => {
+  Object.entries($attrs)
+    .map(([key, value]) => [camelize(key), value])
+    .filter(([key, _]) => !isHtmlAttribute(key) && !isReadOnlyEvent(key))
+    .forEach(([key, value]) => {
+      options[key] = value;
+    });
+  Object.entries(callBackBuilder).forEach(([eventType, eventBuilder]) => {
     events[eventType].forEach(event => {
       options[`on${event}`] = eventBuilder(event);
     });
   });
   return options;
 }
 
-export { getComponentAttributes, getDraggableOption };
+export { getComponentAttributes, getSortableOption };

src/core/sortableEvents.js

@@ -1,7 +1,7 @@
 const manageAndEmit = ["Start", "Add", "Remove", "Update", "End"];
 const emit = ["Choose", "Unchoose", "Sort", "Filter", "Clone"];
 const manage = ["Move"];
-const readonlyProperties = [...manage, ...manageAndEmit, ...emit].map(
+const eventHandlerNames = [...manage, ...manageAndEmit, ...emit].map(
   evt => `on${evt}`
 );
 
@@ -12,7 +12,7 @@ const events = {
 };
 
 function isReadOnlyEvent(eventName) {
-  return readonlyProperties.indexOf(eventName) !== -1;
+  return eventHandlerNames.indexOf(eventName) !== -1;
 }
 
 export { events, isReadOnlyEvent };

src/vuedraggable.js

@@ -5,7 +5,7 @@ import { camelize } from "./util/string";
 import { isHtmlTag, isTransition as isTransitionName } from "./util/tags";
 import {
   getComponentAttributes,
-  getDraggableOption
+  getSortableOption
 } from "./core/componentBuilderHelper";
 import { isReadOnlyEvent } from "./core/sortableEvents";
 
@@ -179,7 +179,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 = getDraggableOption({
+    const sortableOptions = getSortableOption({
       $attrs,
       callBackBuilder: {
         manageAndEmit: event => manageAndEmit.call(this, event),