@studiometa/js-toolkit 2.2.1 → 2.3.0

package/decorators/withVue2.js

@@ -1,22 +1,27 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-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 {
+  return class WithVue2 extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithVue`,
+      refs: [...BaseClass.config?.refs ?? [], "vue"]
+    };
+    $vue;
+    static vueConfig;
     constructor(element) {
-      var _a2;
       super(element);
-      __publicField(this, "$vue");
-      const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
+      const vueConfig = this.vueConfig ?? 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", () => {
@@ -29,11 +34,7 @@ var withVue2_default = (BaseClass, Vue) => {
         this.$vue.$destroy();
       });
     }
-  }, __publicField(_c, "config", {
-    ...BaseClass.config,
-    name: `${BaseClass.config.name}WithVue`,
-    refs: [...(_b = (_a = BaseClass.config) == null ? void 0 : _a.refs) != null ? _b : [], "vue"]
-  }), __publicField(_c, "vueConfig"), _c;
+  };
 };
 export {
   withVue2_default as default

package/helpers/getInstanceFromElement.cjs

@@ -23,10 +23,9 @@ __export(getInstanceFromElement_exports, {
 });
 module.exports = __toCommonJS(getInstanceFromElement_exports);
 function getInstanceFromElement(element, Constructor) {
-  var _a;
   if (!element.__base__) {
     return null;
   }
-  return (_a = element.__base__.get(Constructor)) != null ? _a : null;
+  return element.__base__.get(Constructor) ?? null;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/helpers/getInstanceFromElement.js

@@ -1,9 +1,8 @@
 function getInstanceFromElement(element, Constructor) {
-  var _a;
   if (!element.__base__) {
     return null;
   }
-  return (_a = element.__base__.get(Constructor)) != null ? _a : null;
+  return element.__base__.get(Constructor) ?? null;
 }
 export {
   getInstanceFromElement as default

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) => {
@@ -33,7 +34,7 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
     });
   };
   return new Promise((resolve) => {
-    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {
       capture: true,
       passive: true,

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) => {
@@ -9,7 +10,7 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
     });
   };
   return new Promise((resolve) => {
-    const elements = getTargetElements(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {
       capture: true,
       passive: true,

package/helpers/importWhenIdle.cjs

@@ -31,8 +31,7 @@ function importWhenIdle(fn, options) {
     });
   };
   return new Promise((resolve) => {
-    var _a;
-    const timeout = (_a = options == null ? void 0 : options.timeout) != null ? _a : 1;
+    const timeout = options?.timeout ?? 1;
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {
         resolver(resolve);
@@ -42,7 +41,7 @@ function importWhenIdle(fn, options) {
         setTimeout(() => {
           resolver(resolve);
         }, 0);
-      }, { timeout: options == null ? void 0 : options.timeout });
+      }, { timeout: options?.timeout });
     }
   });
 }

package/helpers/importWhenIdle.js

@@ -7,8 +7,7 @@ function importWhenIdle(fn, options) {
     });
   };
   return new Promise((resolve) => {
-    var _a;
-    const timeout = (_a = options == null ? void 0 : options.timeout) != null ? _a : 1;
+    const timeout = options?.timeout ?? 1;
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {
         resolver(resolve);
@@ -18,7 +17,7 @@ function importWhenIdle(fn, options) {
         setTimeout(() => {
           resolver(resolve);
         }, 0);
-      }, { timeout: options == null ? void 0 : options.timeout });
+      }, { timeout: options?.timeout });
     }
   });
 }

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();
       }
     });
@@ -43,7 +44,7 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }

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();
       }
     });
@@ -19,7 +20,7 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = getTargetElements(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }

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.1",
+  "version": "2.3.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;

package/services/drag.d.ts

@@ -20,52 +20,52 @@ export type PointerServiceProps = import('./pointer.js').PointerServiceProps;
 export type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
 export type DragServiceProps = {
     /**
-     *   The current mode of the dragging logic.
+     * The current mode of the dragging logic.
      */
     mode: DragLifecycle;
     /**
-     *   The target element of the drag.
+     * The target element of the drag.
      */
     target: HTMLElement;
     /**
-     *   Whether the user is currently grabbing the targeted element or not.
+     * Whether the user is currently grabbing the targeted element or not.
      */
     isGrabbing: boolean;
     /**
-     *   Whether the drag currently has inertia or not.
+     * Whether the drag currently has inertia or not.
      */
     hasInertia: boolean;
     /**
-     *   The current horizontal position in the viewport.
+     * The current horizontal position in the viewport.
      */
     x: number;
     /**
-     *   The current vertical position in the viewport.
+     * The current vertical position in the viewport.
      */
     y: number;
     /**
-     *   The delta between the current position and the last.
+     * The delta between the current position and the last.
      */
     delta: {
         x: number;
         y: number;
     };
     /**
-     *   The initial position where the dragging started.
+     * The initial position where the dragging started.
      */
     origin: {
         x: number;
         y: number;
     };
     /**
-     *   The distance from the current position to the origin.
+     * The distance from the current position to the origin.
      */
     distance: {
         x: number;
         y: number;
     };
     /**
-     *   The final position that will be reached at the end of the inertia.
+     * The final position that will be reached at the end of the inertia.
      */
     final: {
         x: number;