@studiometa/js-toolkit 2.2.2 → 2.4.0

package/decorators/withBreakpointObserver.js

@@ -5,6 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import useResize from "../services/resize.js";
+import { isDev } from "../utils/index.js";
 function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
   const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
@@ -25,7 +26,9 @@ function testConflictingBreakpointConfiguration(instance) {
   }
 }
 function addToResize(key, instance) {
-  testConflictingBreakpointConfiguration(instance);
+  if (isDev) {
+    testConflictingBreakpointConfiguration(instance);
+  }
   const { add, has } = useResize();
   if (!has(key)) {
     add(key, function onResize({ breakpoint }) {
@@ -46,7 +49,10 @@ function withBreakpointObserver(BaseClass) {
       const { remove, props } = useResize();
       const { name } = this.$options;
       if (!props().breakpoint) {
-        throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+        if (isDev) {
+          throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+        }
+        return;
       }
       const key = `BreakpointObserver-${this.$id}`;
       const mutationObserver = new MutationObserver(([mutation]) => {

package/decorators/withVue2.cjs

@@ -27,6 +27,7 @@ __export(withVue2_exports, {
   default: () => withVue2_default
 });
 module.exports = __toCommonJS(withVue2_exports);
+var import_utils = require("../utils/index.cjs");
 var withVue2_default = (BaseClass, Vue) => {
   var _a, _b, _c;
   return _c = class extends BaseClass {
@@ -36,10 +37,16 @@ var withVue2_default = (BaseClass, Vue) => {
       __publicField(this, "$vue");
       const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
       if (!vueConfig) {
-        throw new Error("[withVue] You must define a `vueConfig` object.");
+        if (import_utils.isDev) {
+          throw new Error("[withVue] You must define a `vueConfig` object.");
+        }
+        return;
       }
-      if (typeof vueConfig.render !== "function") {
-        throw new Error("[withVue] You must define a `render` function in vueConfig.");
+      if (!(0, import_utils.isFunction)(vueConfig.render)) {
+        if (import_utils.isDev) {
+          throw new Error("[withVue] You must define a `render` function in vueConfig.");
+        }
+        return;
       }
       this.$vue = new Vue(vueConfig);
       this.$on("mounted", () => {

package/decorators/withVue2.js

@@ -4,6 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+import { isDev, isFunction } from "../utils/index.js";
 var withVue2_default = (BaseClass, Vue) => {
   var _a, _b, _c;
   return _c = class extends BaseClass {
@@ -13,10 +14,16 @@ var withVue2_default = (BaseClass, Vue) => {
       __publicField(this, "$vue");
       const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
       if (!vueConfig) {
-        throw new Error("[withVue] You must define a `vueConfig` object.");
+        if (isDev) {
+          throw new Error("[withVue] You must define a `vueConfig` object.");
+        }
+        return;
       }
-      if (typeof vueConfig.render !== "function") {
-        throw new Error("[withVue] You must define a `render` function in vueConfig.");
+      if (!isFunction(vueConfig.render)) {
+        if (isDev) {
+          throw new Error("[withVue] You must define a `render` function in vueConfig.");
+        }
+        return;
       }
       this.$vue = new Vue(vueConfig);
       this.$on("mounted", () => {

package/helpers/getDirectChildren.cjs

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/helpers/getDirectChildren.js
+var getDirectChildren_exports = {};
+__export(getDirectChildren_exports, {
+  getDirectChildren: () => getDirectChildren,
+  isDirectChild: () => isDirectChild
+});
+module.exports = __toCommonJS(getDirectChildren_exports);
+var import_utils = require("../utils/index.cjs");
+function getDirectChildren(parentInstance, parentName, childrenName) {
+  const children = parentInstance.$children[childrenName];
+  const nestedParents = parentInstance.$children[parentName];
+  if (!(0, import_utils.isArray)(children)) {
+    return [];
+  }
+  if (!(0, import_utils.isArray)(nestedParents) || nestedParents.length <= 0) {
+    return children;
+  }
+  return children.filter((child) => {
+    return nestedParents.every((nestedParent) => {
+      const nestedChildren = nestedParent.$children[childrenName];
+      return (0, import_utils.isArray)(nestedChildren) ? !nestedChildren.includes(child) : true;
+    });
+  });
+}
+function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
+  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
+}
+if (module.exports.default) module.exports = module.exports.default;

package/helpers/getDirectChildren.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @typedef {import('../Base/index.js').default} Base
+ */
+/**
+ * Get direct children from a parent when working with nested components.
+ *
+ * @template {Base} T
+ * @param   {Base} parentInstance
+ * @param   {string} parentName
+ * @param   {string} childrenName
+ * @returns {Array<T>}
+ */
+export function getDirectChildren<T extends import("../Base/index.js").default>(parentInstance: Base, parentName: string, childrenName: string): T[];
+/**
+ * Test if a component instance is a direct child from the given component.
+ *
+ * @param   {Base}    parentInstance
+ * @param   {string}  parentName
+ * @param   {string}  childrenName
+ * @param   {Base}    childInstance
+ * @returns {boolean}
+ */
+export function isDirectChild(parentInstance: Base, parentName: string, childrenName: string, childInstance: Base): boolean;
+export type Base = import('../Base/index.js').default;

package/helpers/getDirectChildren.js

@@ -0,0 +1,24 @@
+import { isArray } from "../utils/index.js";
+function getDirectChildren(parentInstance, parentName, childrenName) {
+  const children = parentInstance.$children[childrenName];
+  const nestedParents = parentInstance.$children[parentName];
+  if (!isArray(children)) {
+    return [];
+  }
+  if (!isArray(nestedParents) || nestedParents.length <= 0) {
+    return children;
+  }
+  return children.filter((child) => {
+    return nestedParents.every((nestedParent) => {
+      const nestedChildren = nestedParent.$children[childrenName];
+      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;
+    });
+  });
+}
+function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
+  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
+}
+export {
+  getDirectChildren,
+  isDirectChild
+};

package/helpers/importOnInteraction.cjs

@@ -23,8 +23,9 @@ __export(importOnInteraction_exports, {
 });
 module.exports = __toCommonJS(importOnInteraction_exports);
 var import_utils = require("./utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
-  const normalizedEvents = typeof events === "string" ? [events] : events;
+  const normalizedEvents = (0, import_utils2.isString)(events) ? [events] : events;
   let ResolvedClass;
   const resolver = (resolve) => {
     fn().then((module2) => {

package/helpers/importOnInteraction.js

@@ -1,6 +1,7 @@
 import { getTargetElements } from "./utils.js";
+import { isString } from "../utils/index.js";
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
-  const normalizedEvents = typeof events === "string" ? [events] : events;
+  const normalizedEvents = isString(events) ? [events] : events;
   let ResolvedClass;
   const resolver = (resolve) => {
     fn().then((module) => {

package/helpers/importWhenVisible.cjs

@@ -23,13 +23,14 @@ __export(importWhenVisible_exports, {
 });
 module.exports = __toCommonJS(importWhenVisible_exports);
 var import_utils = require("./utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module2) => {
       ResolvedClass = "default" in module2 ? module2.default : module2;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if ((0, import_utils2.isFunction)(cb)) {
         cb();
       }
     });

package/helpers/importWhenVisible.js

@@ -1,11 +1,12 @@
 import { getTargetElements } from "./utils.js";
+import { isFunction } from "../utils/index.js";
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module) => {
       ResolvedClass = "default" in module ? module.default : module;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if (isFunction(cb)) {
         cb();
       }
     });

package/helpers/index.cjs

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
@@ -30,6 +31,7 @@ __export(helpers_exports, {
 });
 module.exports = __toCommonJS(helpers_exports);
 var import_createApp = __toESM(require("./createApp.cjs"), 1);
+__reExport(helpers_exports, require("./getDirectChildren.cjs"), module.exports);
 var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);

package/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export { default as createApp } from "./createApp.js";
+export * from "./getDirectChildren.js";
 export { default as getInstanceFromElement } from "./getInstanceFromElement.js";
 export { default as importOnInteraction } from "./importOnInteraction.js";
 export { default as importWhenIdle } from "./importWhenIdle.js";

package/helpers/index.js

@@ -1,4 +1,5 @@
 import { default as default2 } from "./createApp.js";
+export * from "./getDirectChildren.js";
 import { default as default3 } from "./getInstanceFromElement.js";
 import { default as default4 } from "./importOnInteraction.js";
 import { default as default5 } from "./importWhenIdle.js";

package/helpers/utils.cjs

@@ -23,11 +23,12 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../Base/utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if ((0, import_utils2.isString)(nameOrSelectorOrElement)) {
     return (0, import_utils.getComponentElements)(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!(0, import_utils2.isArray)(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/helpers/utils.js

@@ -1,9 +1,10 @@
 import { getComponentElements } from "../Base/utils.js";
+import { isString, isArray } from "../utils/index.js";
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if (isString(nameOrSelectorOrElement)) {
     return getComponentElements(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!isArray(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.2.2",
+  "version": "2.4.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -41,5 +41,8 @@
   "dependencies": {
     "@motionone/easing": "^10.9.0",
     "deepmerge": "^4.2.2"
+  },
+  "devDependencies": {
+    "vue": "2.6"
   }
 }

package/services/drag.cjs

@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/services/drag.js
 var drag_exports = {};
@@ -30,7 +25,7 @@ __export(drag_exports, {
   default: () => useDrag
 });
 module.exports = __toCommonJS(drag_exports);
-var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_service = require("./service.cjs");
 var import_pointer = __toESM(require("./pointer.cjs"), 1);
 var import_raf = __toESM(require("./raf.cjs"), 1);
 var import_inertiaFinalValue = __toESM(require("../utils/math/inertiaFinalValue.cjs"), 1);
@@ -41,13 +36,103 @@ var MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-var id = 0;
-var Drag = class extends import_Service.default {
-  constructor(target, options = {}) {
-    super();
-    __publicField(this, "id");
-    __publicField(this, "props", {
-      target: null,
+var count = 0;
+function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
+  count += 1;
+  const id = `drag-${count}`;
+  function shouldPreventClick() {
+    return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
+  }
+  function start(x, y) {
+    props.x = x;
+    props.y = y;
+    props.origin.x = x;
+    props.origin.y = y;
+    props.delta.x = 0;
+    props.delta.y = 0;
+    props.distance.x = 0;
+    props.distance.y = 0;
+    props.final.x = x;
+    props.final.y = y;
+    props.mode = MODES.START;
+    props.isGrabbing = true;
+    trigger(props);
+  }
+  function drop() {
+    props.isGrabbing = false;
+    props.mode = MODES.DROP;
+    props.hasInertia = true;
+    props.final.x = (0, import_inertiaFinalValue.default)(props.x, props.delta.x, dampFactor);
+    props.final.y = (0, import_inertiaFinalValue.default)(props.y, props.delta.y, dampFactor);
+    trigger(props);
+    setTimeout(() => {
+      const raf = (0, import_raf.default)();
+      raf.remove(id);
+      raf.add(id, rafHandler);
+    }, 0);
+  }
+  function stop() {
+    (0, import_raf.default)().remove(id);
+    props.hasInertia = false;
+    props.mode = MODES.STOP;
+    trigger(props);
+  }
+  function rafHandler() {
+    if (!props.isGrabbing) {
+      props.x += props.delta.x;
+      props.y += props.delta.y;
+      props.distance.x = props.x - props.origin.x;
+      props.distance.y = props.y - props.origin.y;
+      props.delta.x *= dampFactor;
+      props.delta.y *= dampFactor;
+      if (props.mode !== MODES.INERTIA) {
+        props.mode = MODES.INERTIA;
+      }
+      trigger(props);
+      if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {
+        stop();
+      }
+    }
+  }
+  function pointerHandler(pointerProps) {
+    if (props.isGrabbing) {
+      props.x = pointerProps.x;
+      props.y = pointerProps.y;
+      props.delta.x = pointerProps.delta.x;
+      props.delta.y = pointerProps.delta.y;
+      props.final.x = pointerProps.x;
+      props.final.y = pointerProps.y;
+      props.distance.x = props.x - props.origin.x;
+      props.distance.y = props.y - props.origin.y;
+      if (props.mode !== MODES.DRAG) {
+        props.mode = MODES.DRAG;
+      }
+      trigger(props);
+      if (!pointerProps.isDown) {
+        drop();
+      }
+    }
+  }
+  function handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (shouldPreventClick()) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      return;
+    }
+    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+    start(x, y);
+  }
+  const { add, remove, has, trigger, props } = (0, import_service.useService)({
+    props: {
+      target,
       mode: void 0,
       isGrabbing: false,
       hasInertia: false,
@@ -69,144 +154,37 @@ var Drag = class extends import_Service.default {
         x: 0,
         y: 0
       }
-    });
-    __publicField(this, "options", {
-      dampFactor: 0.85,
-      dragTreshold: 10
-    });
-    id += 1;
-    this.id = `drag-${id}`;
-    this.props.target = target;
-    this.options = { ...this.options, ...options };
-    this.pointerHandler = this.pointerHandler.bind(this);
-    this.rafHandler = this.rafHandler.bind(this);
-  }
-  init() {
-    const options = { passive: true };
-    this.props.target.addEventListener("mousedown", this, options);
-    this.props.target.addEventListener("touchstart", this, options);
-    this.props.target.addEventListener("dragstart", this, { capture: true });
-    this.props.target.addEventListener("click", this, { capture: true });
-    const pointer = (0, import_pointer.default)();
-    pointer.add(this.id, this.pointerHandler);
-    return this;
-  }
-  kill() {
-    this.props.target.removeEventListener("mousedown", this);
-    this.props.target.removeEventListener("touchstart", this);
-    this.props.target.removeEventListener("dragstart", this);
-    this.props.target.removeEventListener("click", this);
-    const pointer = (0, import_pointer.default)();
-    pointer.remove(this.id);
-    return this;
-  }
-  handleEvent(event) {
-    if (event.type === "dragstart") {
-      event.preventDefault();
-      return;
-    }
-    if (event.type === "click") {
-      if (this.__shouldPreventClick) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-      }
-      return;
-    }
-    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    this.start(x, y);
-  }
-  start(x, y) {
-    this.props.x = x;
-    this.props.y = y;
-    this.props.origin.x = x;
-    this.props.origin.y = y;
-    this.props.delta.x = 0;
-    this.props.delta.y = 0;
-    this.props.distance.x = 0;
-    this.props.distance.y = 0;
-    this.props.final.x = x;
-    this.props.final.y = y;
-    this.props.mode = MODES.START;
-    this.props.isGrabbing = true;
-    this.trigger(this.props);
-  }
-  drop() {
-    this.props.isGrabbing = false;
-    this.props.mode = MODES.DROP;
-    this.props.hasInertia = true;
-    this.props.final.x = (0, import_inertiaFinalValue.default)(this.props.x, this.props.delta.x, this.options.dampFactor);
-    this.props.final.y = (0, import_inertiaFinalValue.default)(this.props.y, this.props.delta.y, this.options.dampFactor);
-    this.trigger(this.props);
-    setTimeout(() => {
-      const raf = (0, import_raf.default)();
-      raf.remove(this.id);
-      raf.add(this.id, this.rafHandler);
-    }, 0);
-  }
-  stop() {
-    (0, import_raf.default)().remove(this.id);
-    this.props.hasInertia = false;
-    this.props.mode = MODES.STOP;
-    this.trigger(this.props);
-  }
-  rafHandler() {
-    if (!this.props.isGrabbing) {
-      this.props.x += this.props.delta.x;
-      this.props.y += this.props.delta.y;
-      this.props.distance.x = this.props.x - this.props.origin.x;
-      this.props.distance.y = this.props.y - this.props.origin.y;
-      this.props.delta.x *= this.options.dampFactor;
-      this.props.delta.y *= this.options.dampFactor;
-      if (this.props.mode !== MODES.INERTIA) {
-        this.props.mode = MODES.INERTIA;
-      }
-      this.trigger(this.props);
-      if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
-        this.stop();
-      }
-    }
-  }
-  pointerHandler(props) {
-    if (this.props.isGrabbing) {
-      this.props.x = props.x;
-      this.props.y = props.y;
-      this.props.delta.x = props.delta.x;
-      this.props.delta.y = props.delta.y;
-      this.props.final.x = props.x;
-      this.props.final.y = props.y;
-      this.props.distance.x = this.props.x - this.props.origin.x;
-      this.props.distance.y = this.props.y - this.props.origin.y;
-      if (this.props.mode !== MODES.DRAG) {
-        this.props.mode = MODES.DRAG;
-      }
-      this.trigger(this.props);
-      if (!props.isDown) {
-        this.drop();
-      }
+    },
+    init() {
+      const options = { passive: true };
+      props.target.addEventListener("mousedown", handleEvent, options);
+      props.target.addEventListener("touchstart", handleEvent, options);
+      props.target.addEventListener("dragstart", handleEvent, { capture: true });
+      props.target.addEventListener("click", handleEvent, { capture: true });
+      const pointer = (0, import_pointer.default)();
+      pointer.add(id, pointerHandler);
+    },
+    kill() {
+      props.target.removeEventListener("mousedown", handleEvent);
+      props.target.removeEventListener("touchstart", handleEvent);
+      props.target.removeEventListener("dragstart", handleEvent);
+      props.target.removeEventListener("click", handleEvent);
+      const pointer = (0, import_pointer.default)();
+      pointer.remove(id);
     }
-  }
-  updateProps() {
-    return this.props;
-  }
-  get __shouldPreventClick() {
-    return Math.abs(this.props.distance.x) > this.options.dragTreshold || Math.abs(this.props.distance.y) > this.options.dragTreshold;
-  }
-};
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
+}
 var instances = /* @__PURE__ */ new WeakMap();
 function useDrag(target, options) {
-  let drag = instances.get(target);
-  if (!drag) {
-    const instance = new Drag(target, options);
-    drag = {
-      add: instance.add.bind(instance),
-      remove: instance.remove.bind(instance),
-      has: instance.has.bind(instance),
-      props: instance.updateProps.bind(instance)
-    };
-    instances.set(target, drag);
+  if (!instances.has(target)) {
+    instances.set(target, createDragService(target, options));
   }
-  return drag;
+  return instances.get(target);
 }
 if (module.exports.default) module.exports = module.exports.default;