@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.13

package/index.d.ts

@@ -1,21 +1,4 @@
-import Base from "./Base/index.js";
-import { createApp } from "./helpers/index.js";
-import { importOnInteraction } from "./helpers/index.js";
-import { importWhenIdle } from "./helpers/index.js";
-import { importWhenVisible } from "./helpers/index.js";
-import { useDrag } from "./services/index.js";
-import { useKey } from "./services/index.js";
-import { useLoad } from "./services/index.js";
-import { usePointer } from "./services/index.js";
-import { useRaf } from "./services/index.js";
-import { useResize } from "./services/index.js";
-import { useScroll } from "./services/index.js";
-import { withBreakpointManager } from "./decorators/index.js";
-import { withBreakpointObserver } from "./decorators/index.js";
-import { withDrag } from "./decorators/index.js";
-import { withExtraConfig } from "./decorators/index.js";
-import { withIntersectionObserver } from "./decorators/index.js";
-import { withMountWhenInView } from "./decorators/index.js";
-import { withScrolledInView } from "./decorators/index.js";
-import { withVue2 } from "./decorators/index.js";
-export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+export { default as Base } from "./Base/index.js";
+export * from "./decorators/index.js";
+export * from "./helpers/index.js";
+export * from "./services/index.js";

package/index.js

@@ -1,5 +1,7 @@
-import Base from './Base/index.js';
-import { withDrag, withBreakpointManager, withBreakpointObserver, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 } from './decorators/index.js';
-import { createApp, importOnInteraction, importWhenIdle, importWhenVisible } from './helpers/index.js';
-import { useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll } from './services/index.js';
-export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+import { default as default2 } from "./Base/index.js";
+export * from "./decorators/index.js";
+export * from "./helpers/index.js";
+export * from "./services/index.js";
+export {
+  default2 as Base
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.13",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,27 @@
   "homepage": "https://github.com/studiometa/js-toolkit#readme",
   "type": "module",
   "sideEffects": false,
-  "unpkg": "./index.umd.js",
   "main": "./index.js",
   "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./utils": {
+      "import": "./utils/index.js",
+      "require": "./utils/index.cjs",
+      "types": "./utils/index.d.ts"
+    }
+  },
   "keywords": [
     "js-toolkit",
     "component",
     "studiometa",
     "toolkit"
   ],
-  "types": "index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
     "deepmerge": "^4.2.2"

package/services/Service.cjs

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/Service.js
+var Service_exports = {};
+__export(Service_exports, {
+  default: () => Service
+});
+var Service = class {
+  constructor() {
+    this.callbacks = /* @__PURE__ */ new Map();
+    this.isInit = false;
+  }
+  props;
+  updateProps(...args) {
+    this.props = args;
+    throw new Error("The `updateProps` method must be implemented.");
+  }
+  init() {
+    throw new Error("The `init` method must be implemented.");
+  }
+  kill() {
+    throw new Error("The `kill` method must be implemented.");
+  }
+  add(key, callback) {
+    if (this.has(key)) {
+      throw new Error(`A callback with the key \`${key}\` has already been registered.`);
+    }
+    if (this.callbacks.size === 0 && !this.isInit) {
+      this.init();
+      this.isInit = true;
+    }
+    this.callbacks.set(key, callback);
+  }
+  has(key) {
+    return this.callbacks.has(key);
+  }
+  get(key) {
+    return this.callbacks.get(key);
+  }
+  remove(key) {
+    this.callbacks.delete(key);
+    if (this.callbacks.size === 0 && this.isInit) {
+      this.kill();
+      this.isInit = false;
+    }
+  }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      callback(...args);
+    });
+    return this;
+  }
+};
+module.exports = __toCommonJS(Service_exports);

package/services/Service.d.ts

@@ -5,33 +5,39 @@ export default class Service {
     callbacks: Map<any, any>;
     isInit: boolean;
     /**
-     * Getter to get the services properties.
-     * This getter MUST be implementer by the service extending this class.
-     * @return {Object}
+     * @type {unknown}
      */
-    get props(): any;
+    props: unknown;
+    /**
+     * Method to update the services properties.
+     * This method MUST be implemented by the service extending this class.
+     *
+     * @param {...any} args
+     * @return {this['props']}
+     */
+    updateProps(...args: any[]): unknown;
     /**
      * Method to initialize the service behaviors.
      * This method MUST be implemented by the service extending this class.
      *
-     * @return {Service} The current instance
+     * @return {void}
      */
-    init(): Service;
+    init(): void;
     /**
      * Method to kill the service behaviors.
      * This method MUST be implemented by the service extending this class.
      *
-     * @return {Service} The current instance
+     * @return {void}
      */
-    kill(): Service;
+    kill(): void;
     /**
      * Add a callback.
      *
      * @param  {String}   key      The callback's identifier
      * @param  {Function} callback The callback function
-     * @return {this} The current instance
+     * @return {void}
      */
-    add(key: string, callback: Function): this;
+    add(key: string, callback: Function): void;
     /**
      * Test if a callback with the given key has already been added.
      *
@@ -42,22 +48,21 @@ export default class Service {
     /**
      * Get the callback tied to the given key.
      *
-     * @param  {String}   key The identifier to get
+     * @param  {string}   key The identifier to get
      * @return {Function}     The callback function
      */
     get(key: string): Function;
     /**
      * Remove the callback tied to the given key.
      *
-     * @param  {String} key The identifier to remove
-     * @return {Service}    The current instance
+     * @param {string} key The identifier to remove
      */
-    remove(key: string): Service;
+    remove(key: string): void;
     /**
      * Trigger each added callback with the given arguments.
      *
-     * @param  {Array}   args All the arguments to apply to the callback
-     * @return {Service}      The current instance
+     * @param  {...any}   args All the arguments to apply to the callback
+     * @return {this}      The current instance
      */
-    trigger(...args: any[]): Service;
+    trigger(...args: any[]): this;
 }

package/services/Service.js

@@ -1,63 +1,49 @@
-export default class Service {
+class Service {
   constructor() {
-    this.callbacks = new Map();
+    this.callbacks = /* @__PURE__ */ new Map();
     this.isInit = false;
   }
-
-  get props() {
-    throw new Error('The `props` getter must be implemented.');
+  props;
+  updateProps(...args) {
+    this.props = args;
+    throw new Error("The `updateProps` method must be implemented.");
   }
-
   init() {
-    throw new Error('The `init` method must be implemented.');
+    throw new Error("The `init` method must be implemented.");
   }
-
   kill() {
-    throw new Error('The `kill` method must be implemented.');
+    throw new Error("The `kill` method must be implemented.");
   }
-
   add(key, callback) {
     if (this.has(key)) {
-      throw new Error("A callback with the key `".concat(key, "` has already been registered."));
+      throw new Error(`A callback with the key \`${key}\` has already been registered.`);
     }
-
     if (this.callbacks.size === 0 && !this.isInit) {
       this.init();
       this.isInit = true;
     }
-
     this.callbacks.set(key, callback);
-    return this;
   }
-
   has(key) {
     return this.callbacks.has(key);
   }
-
   get(key) {
     return this.callbacks.get(key);
   }
-
   remove(key) {
     this.callbacks.delete(key);
-
     if (this.callbacks.size === 0 && this.isInit) {
       this.kill();
       this.isInit = false;
     }
-
-    return this;
   }
-
-  trigger() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  trigger(...args) {
     this.callbacks.forEach(function forEachCallback(callback) {
       callback(...args);
     });
     return this;
   }
-
-}
+}
+export {
+  Service as default
+};

package/services/drag.cjs

@@ -0,0 +1,194 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/drag.js
+var drag_exports = {};
+__export(drag_exports, {
+  default: () => useDrag
+});
+var import_Service = __toESM(require("./Service.cjs"), 1);
+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);
+var MODES = {
+  START: "start",
+  DRAG: "drag",
+  DROP: "drop",
+  INERTIA: "inertia",
+  STOP: "stop"
+};
+var instanceIds = 0;
+var Drag = class extends import_Service.default {
+  id;
+  props = {
+    target: null,
+    mode: void 0,
+    isGrabbing: false,
+    hasInertia: false,
+    x: 0,
+    y: 0,
+    delta: {
+      x: 0,
+      y: 0
+    },
+    origin: {
+      x: 0,
+      y: 0
+    },
+    distance: {
+      x: 0,
+      y: 0
+    },
+    final: {
+      x: 0,
+      y: 0
+    }
+  };
+  options = {
+    dampFactor: 0.85
+  };
+  constructor(target, options = {}) {
+    super();
+    instanceIds += 1;
+    this.id = `drag-${instanceIds}`;
+    this.props.target = target;
+    this.options = { ...this.options, ...options };
+    this.pointerHandler = this.pointerHandler.bind(this);
+    this.rafHandler = this.rafHandler.bind(this);
+    return this;
+  }
+  init() {
+    const options = { passive: true };
+    this.props.target.addEventListener("mousedown", this, options);
+    this.props.target.addEventListener("touchstart", this, options);
+    const pointer = (0, import_pointer.default)();
+    pointer.add(this.id, this.pointerHandler);
+    return this;
+  }
+  kill() {
+    this.props.target.removeEventListener("mousemove", this);
+    this.props.target.removeEventListener("touchmove", this);
+    const pointer = (0, import_pointer.default)();
+    pointer.remove(this.id);
+    return this;
+  }
+  handleEvent(event) {
+    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();
+      }
+    }
+  }
+  updateProps() {
+    return this.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);
+  }
+  return drag;
+}
+module.exports = __toCommonJS(drag_exports);

package/services/drag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Use the pointer.
+ * Use the drag service.
  *
  * ```js
  * import { useDrag } from '@studiometa/js-toolkit/services';
@@ -12,10 +12,10 @@
  *
  * @param {HTMLElement} target
  * @param {DragServiceOptions} options
- * @return {ServiceInterface & DragService}
+ * @return {DragService}
  */
-export default function useDrag(target: HTMLElement, options: DragServiceOptions): ServiceInterface & DragService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService;
+export type DragService = import('./index').ServiceInterface<DragServiceProps>;
 export type PointerServiceProps = import('./pointer.js').PointerServiceProps;
 export type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
 export type DragServiceProps = {
@@ -75,17 +75,3 @@ export type DragServiceProps = {
 export type DragServiceOptions = {
     dampFactor?: number | undefined;
 };
-export type DragService = {
-    /**
-     *   Add a callback function to the service. The key must be the HTML element targeted by the drag.
-     */
-    add: (target: HTMLElement, callback: (props: DragServiceProps) => void, options?: DragServiceOptions) => void;
-    /**
-     *   Remove a callback function to the service.
-     */
-    remove: (target: HTMLElement) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => DragServiceProps;
-};