@studiometa/js-toolkit 2.2.0 → 2.2.3

package/Base/index.cjs

@@ -36,10 +36,9 @@ var import_RefsManager = __toESM(require("./managers/RefsManager.cjs"), 1);
 var import_ServicesManager = __toESM(require("./managers/ServicesManager.cjs"), 1);
 var import_EventsManager = __toESM(require("./managers/EventsManager.cjs"), 1);
 var import_OptionsManager = __toESM(require("./managers/OptionsManager.cjs"), 1);
+var import_noop = require("../utils/noop.cjs");
 var id = 0;
 var isDev = typeof __DEV__ !== "undefined" && __DEV__;
-function noop() {
-}
 function createAndTestManagers(instance) {
   [
     {
@@ -152,10 +151,10 @@ var Base = class extends EventTarget {
     return this.__children;
   }
   get $log() {
-    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;
+    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : import_noop.noop;
   }
   get __debug() {
-    return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
+    return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : import_noop.noop;
   }
   get __managers() {
     return {

package/Base/index.js

@@ -10,10 +10,9 @@ import RefsManager from "./managers/RefsManager.js";
 import ServicesManager from "./managers/ServicesManager.js";
 import EventsManager from "./managers/EventsManager.js";
 import OptionsManager from "./managers/OptionsManager.js";
+import { noop } from "../utils/noop.js";
 let id = 0;
 const isDev = typeof __DEV__ !== "undefined" && __DEV__;
-function noop() {
-}
 function createAndTestManagers(instance) {
   [
     {

package/Base/managers/ServicesManager.cjs

@@ -37,7 +37,7 @@ var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
 var import_key = __toESM(require("../../services/key.cjs"), 1);
 var import_load = __toESM(require("../../services/load.cjs"), 1);
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
-var import_utils = require("../utils.cjs");
+var import_utils = require("../../utils/index.cjs");
 var SERVICES_MAP = {
   scrolled: import_scroll.default,
   resized: import_resize.default,
@@ -59,7 +59,7 @@ var ServicesManager = class extends import_AbstractManager.default {
     };
   }
   has(service) {
-    if (!(((0, import_utils.hasMethod)(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
+    if (!(((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
     const { has } = this.__services[service]();
@@ -72,9 +72,8 @@ var ServicesManager = class extends import_AbstractManager.default {
     if (this.has(service)) {
       return this.disable.bind(this, service);
     }
-    if (!((0, import_utils.hasMethod)(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
-      return function noop() {
-      };
+    if (!((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
+      return import_utils.noop;
     }
     const { add } = this.__services[service]();
     const self = this;

package/Base/managers/ServicesManager.js

@@ -11,7 +11,7 @@ import useScroll from "../../services/scroll.js";
 import useKey from "../../services/key.js";
 import useLoad from "../../services/load.js";
 import AbstractManager from "./AbstractManager.js";
-import { hasMethod } from "../utils.js";
+import { noop, isFunction } from "../../utils/index.js";
 const SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
@@ -33,7 +33,7 @@ class ServicesManager extends AbstractManager {
     };
   }
   has(service) {
-    if (!((hasMethod(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
+    if (!((isFunction(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
     const { has } = this.__services[service]();
@@ -46,9 +46,8 @@ class ServicesManager extends AbstractManager {
     if (this.has(service)) {
       return this.disable.bind(this, service);
     }
-    if (!(hasMethod(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
-      return function noop() {
-      };
+    if (!(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
+      return noop;
     }
     const { add } = this.__services[service]();
     const self = this;

package/Base/utils.cjs

@@ -19,13 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/js-toolkit/Base/utils.js
 var utils_exports = {};
 __export(utils_exports, {
-  getComponentElements: () => getComponentElements,
-  hasMethod: () => hasMethod
+  getComponentElements: () => getComponentElements
 });
 module.exports = __toCommonJS(utils_exports);
-function hasMethod(obj, name) {
-  return typeof obj[name] === "function";
-}
 function getComponentElements(nameOrSelector, element = document) {
   const selector = `[data-component="${nameOrSelector}"]`;
   let elements = [];

package/Base/utils.d.ts

@@ -1,14 +1,6 @@
 /**
  * @typedef {import('./index.js').default} Base
  */
-/**
- * Test if an object has a method.
- *
- * @param  {Object}  obj  The object to test
- * @param  {string}  name The method's name
- * @returns {boolean}
- */
-export function hasMethod(obj: any, name: string): boolean;
 /**
  * Get a list of elements based on the name of a component.
  *

package/Base/utils.js

@@ -1,6 +1,3 @@
-function hasMethod(obj, name) {
-  return typeof obj[name] === "function";
-}
 function getComponentElements(nameOrSelector, element = document) {
   const selector = `[data-component="${nameOrSelector}"]`;
   let elements = [];
@@ -14,6 +11,5 @@ function getComponentElements(nameOrSelector, element = document) {
   return elements;
 }
 export {
-  getComponentElements,
-  hasMethod
+  getComponentElements
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

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;