@studiometa/js-toolkit 3.0.0-alpha.9 → 3.0.0-beta.1

package/services/ResizeService.d.ts

@@ -0,0 +1,29 @@
+import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
+import { AbstractService } from './AbstractService.js';
+import type { Features } from '../Base/features.js';
+export interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {
+    width: number;
+    height: number;
+    ratio: number;
+    orientation: 'square' | 'landscape' | 'portrait';
+    breakpoint: string;
+    breakpoints: string[];
+    activeBreakpoints: Record<keyof U, boolean>;
+}
+export type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> = ServiceInterface<ResizeServiceProps<U>>;
+export declare class ResizeService<T extends Features['breakpoints'] = Features['breakpoints']> extends AbstractService<ResizeServiceProps> {
+    static config: ServiceConfig;
+    breakpoints: T;
+    props: ResizeServiceProps<T>;
+    constructor(breakpoints: T);
+    /**
+     * Update props.
+     */
+    updateProps(): ResizeServiceProps<T>;
+    onResizeDebounce: (...args: unknown[]) => void;
+    handleEvent(): void;
+}
+/**
+ * Use the resize service.
+ */
+export declare function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(breakpoints?: T): ResizeServiceInterface<T>;

package/services/ResizeService.js

@@ -0,0 +1,66 @@
+import { AbstractService } from "./AbstractService.js";
+import { features } from "../Base/features.js";
+import debounce from "../utils/debounce.js";
+class ResizeService extends AbstractService {
+  static config = [[() => window, [["resize"]]]];
+  breakpoints;
+  props = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    ratio: window.innerWidth / window.innerHeight,
+    orientation: "square",
+    get breakpoint() {
+      return Object.keys(this.activeBreakpoints).toReversed().find((name) => this.activeBreakpoints[name]);
+    },
+    get breakpoints() {
+      return Object.keys(this.activeBreakpoints);
+    },
+    activeBreakpoints: {}
+  };
+  constructor(breakpoints) {
+    super();
+    this.breakpoints = breakpoints;
+    Object.defineProperty(this.props, "activeBreakpoints", {
+      get: () => {
+        const activeBreakpoints = {};
+        for (const [name, breakpoint] of Object.entries(
+          this.breakpoints ?? features.get("breakpoints")
+        )) {
+          activeBreakpoints[name] = window.matchMedia(`(min-width: ${breakpoint})`).matches;
+        }
+        return activeBreakpoints;
+      }
+    });
+  }
+  /**
+   * Update props.
+   */
+  updateProps() {
+    const { props } = this;
+    props.width = window.innerWidth;
+    props.height = window.innerHeight;
+    props.ratio = window.innerWidth / window.innerHeight;
+    props.orientation = "square";
+    if (props.ratio > 1) {
+      props.orientation = "landscape";
+    }
+    if (props.ratio < 1) {
+      props.orientation = "portrait";
+    }
+    return props;
+  }
+  onResizeDebounce = debounce(() => {
+    this.trigger(this.updateProps());
+  }, 100);
+  handleEvent() {
+    this.onResizeDebounce();
+  }
+}
+function useResize(breakpoints) {
+  return ResizeService.getInstance(breakpoints, breakpoints);
+}
+export {
+  ResizeService,
+  useResize
+};
+//# sourceMappingURL=ResizeService.js.map

package/services/ResizeService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/ResizeService.ts"],
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport debounce from '../utils/debounce.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n  width: number;\n  height: number;\n  ratio: number;\n  orientation: 'square' | 'landscape' | 'portrait';\n  breakpoint: string;\n  breakpoints: string[];\n  activeBreakpoints: Record<keyof U, boolean>;\n}\n\nexport type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> =\n  ServiceInterface<ResizeServiceProps<U>>;\n\nexport class ResizeService<\n  T extends Features['breakpoints'] = Features['breakpoints'],\n> extends AbstractService<ResizeServiceProps> {\n  static config: ServiceConfig = [[() => window, [['resize']]]];\n\n  breakpoints: T;\n\n  props: ResizeServiceProps<T> = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n    ratio: window.innerWidth / window.innerHeight,\n    orientation: 'square',\n    get breakpoint() {\n      return Object.keys(this.activeBreakpoints)\n        .toReversed()\n        .find((name) => this.activeBreakpoints[name]);\n    },\n    get breakpoints() {\n      return Object.keys(this.activeBreakpoints);\n    },\n    activeBreakpoints: {} as Record<keyof T, boolean>,\n  };\n\n  constructor(breakpoints: T) {\n    super();\n    this.breakpoints = breakpoints;\n\n    Object.defineProperty(this.props, 'activeBreakpoints', {\n      get: () => {\n        const activeBreakpoints = {};\n\n        for (const [name, breakpoint] of Object.entries(\n          this.breakpoints ?? features.get('breakpoints'),\n        )) {\n          activeBreakpoints[name] = window.matchMedia(`(min-width: ${breakpoint})`).matches;\n        }\n\n        return activeBreakpoints as Record<keyof T, boolean>;\n      },\n    });\n  }\n\n  /**\n   * Update props.\n   */\n  updateProps(): ResizeServiceProps<T> {\n    const { props } = this;\n\n    props.width = window.innerWidth;\n    props.height = window.innerHeight;\n    props.ratio = window.innerWidth / window.innerHeight;\n    props.orientation = 'square';\n\n    if (props.ratio > 1) {\n      props.orientation = 'landscape';\n    }\n\n    if (props.ratio < 1) {\n      props.orientation = 'portrait';\n    }\n\n    return props;\n  }\n\n  onResizeDebounce = debounce(() => {\n    this.trigger(this.updateProps());\n  }, 100);\n\n  handleEvent() {\n    this.onResizeDebounce();\n  }\n}\n\n/**\n * Use the resize service.\n */\nexport function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n  breakpoints?: T,\n): ResizeServiceInterface<T> {\n  return ResizeService.getInstance(breakpoints, breakpoints);\n}\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAEhC,SAAS,gBAAgB;AACzB,OAAO,cAAc;AAed,MAAM,sBAEH,gBAAoC;AAAA,EAC5C,OAAO,SAAwB,CAAC,CAAC,MAAM,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,EAE5D;AAAA,EAEA,QAA+B;AAAA,IAC7B,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,OAAO,OAAO,aAAa,OAAO;AAAA,IAClC,aAAa;AAAA,IACb,IAAI,aAAa;AACf,aAAO,OAAO,KAAK,KAAK,iBAAiB,EACtC,WAAW,EACX,KAAK,CAAC,SAAS,KAAK,kBAAkB,IAAI,CAAC;AAAA,IAChD;AAAA,IACA,IAAI,cAAc;AAChB,aAAO,OAAO,KAAK,KAAK,iBAAiB;AAAA,IAC3C;AAAA,IACA,mBAAmB,CAAC;AAAA,EACtB;AAAA,EAEA,YAAY,aAAgB;AAC1B,UAAM;AACN,SAAK,cAAc;AAEnB,WAAO,eAAe,KAAK,OAAO,qBAAqB;AAAA,MACrD,KAAK,MAAM;AACT,cAAM,oBAAoB,CAAC;AAE3B,mBAAW,CAAC,MAAM,UAAU,KAAK,OAAO;AAAA,UACtC,KAAK,eAAe,SAAS,IAAI,aAAa;AAAA,QAChD,GAAG;AACD,4BAAkB,IAAI,IAAI,OAAO,WAAW,eAAe,UAAU,GAAG,EAAE;AAAA,QAC5E;AAEA,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,cAAqC;AACnC,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,mBAAmB,SAAS,MAAM;AAChC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA,EAEN,cAAc;AACZ,SAAK,iBAAiB;AAAA,EACxB;AACF;AAKO,SAAS,UACd,aAC2B;AAC3B,SAAO,cAAc,YAAY,aAAa,WAAW;AAC3D;",
+  "names": []
+}

package/services/{scroll.d.ts → ScrollService.d.ts}

@@ -1,5 +1,5 @@
-import type { ServiceInterface } from './index.js';
-export type ScrollService = ServiceInterface<ScrollServiceProps>;
+import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
+import { AbstractService } from './AbstractService.js';
 export interface ScrollServiceProps {
     x: number;
     y: number;
@@ -42,6 +42,17 @@ export interface ScrollServiceProps {
     isDown: boolean;
     isLeft: boolean;
 }
+export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
+export declare class ScrollService extends AbstractService<ScrollServiceProps> {
+    static config: ServiceConfig;
+    props: ScrollServiceProps;
+    updateProps(): ScrollServiceProps;
+    onScrollDebounced: (...args: unknown[]) => void;
+    /**
+     * Scroll handler.
+     */
+    handleEvent(): void;
+}
 /**
  * Use the scroll service.
  *
@@ -53,4 +64,4 @@ export interface ScrollServiceProps {
  * props();
  * ```
  */
-export default function useScroll(): ScrollService;
+export declare function useScroll(): ScrollServiceInterface;

package/services/ScrollService.js

@@ -0,0 +1,90 @@
+import { AbstractService } from "./AbstractService.js";
+import debounce from "../utils/debounce.js";
+import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
+class ScrollService extends AbstractService {
+  static config = [[() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
+  props = {
+    x: window.scrollX,
+    y: window.scrollY,
+    changed: {
+      x: false,
+      y: false
+    },
+    changedX: false,
+    changedY: false,
+    last: {
+      x: window.scrollX,
+      y: window.scrollY
+    },
+    lastX: window.scrollX,
+    lastY: window.scrollY,
+    delta: {
+      x: 0,
+      y: 0
+    },
+    deltaX: 0,
+    deltaY: 0,
+    max: {
+      x: document.scrollingElement.scrollWidth - window.innerWidth,
+      y: document.scrollingElement.scrollHeight - window.innerHeight
+    },
+    maxX: document.scrollingElement.scrollWidth - window.innerWidth,
+    maxY: document.scrollingElement.scrollHeight - window.innerHeight,
+    progress: {
+      x: 0,
+      y: 0
+    },
+    progressX: 0,
+    progressY: 0,
+    direction: {
+      x: "NONE",
+      y: "NONE"
+    },
+    isUp: false,
+    isRight: false,
+    isDown: false,
+    isLeft: false
+  };
+  updateProps() {
+    const { props } = this;
+    const yLast = props.y;
+    const xLast = props.x;
+    props.y = window.scrollY;
+    props.x = window.scrollX;
+    props.changed.x = props.changedX = props.x !== xLast;
+    props.changed.y = props.changedY = props.y !== yLast;
+    props.last.x = props.lastX = xLast;
+    props.last.y = props.lastY = yLast;
+    props.delta.x = props.deltaX = props.x - xLast;
+    props.delta.y = props.deltaY = props.y - yLast;
+    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;
+    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;
+    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
+    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
+    props.isUp = props.y < yLast;
+    props.isRight = props.x > xLast;
+    props.isDown = props.y > yLast;
+    props.isLeft = props.x < xLast;
+    props.direction.x = props.isRight ? "RIGHT" : props.isLeft ? "LEFT" : "NONE";
+    props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
+    return props;
+  }
+  onScrollDebounced = debounce(() => {
+    this.trigger(this.updateProps());
+  }, 100);
+  /**
+   * Scroll handler.
+   */
+  handleEvent() {
+    this.trigger(this.updateProps());
+    this.onScrollDebounced();
+  }
+}
+function useScroll() {
+  return ScrollService.getInstance();
+}
+export {
+  ScrollService,
+  useScroll
+};
+//# sourceMappingURL=ScrollService.js.map

package/services/ScrollService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/ScrollService.ts"],
+  "sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport debounce from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface ScrollServiceProps {\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  changedX: boolean;\n  changedY: boolean;\n  last: { x: number; y: number };\n  lastX: number;\n  lastY: number;\n  delta: { x: number; y: number };\n  deltaX: number;\n  deltaY: number;\n  progress: { x: number; y: number };\n  progressX: number;\n  progressY: number;\n  max: { x: number; y: number };\n  maxX: number;\n  maxY: number;\n  direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n  isUp: boolean;\n  isRight: boolean;\n  isDown: boolean;\n  isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n  static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n  props: ScrollServiceProps = {\n    x: window.scrollX,\n    y: window.scrollY,\n    changed: {\n      x: false,\n      y: false,\n    },\n    changedX: false,\n    changedY: false,\n    last: {\n      x: window.scrollX,\n      y: window.scrollY,\n    },\n    lastX: window.scrollX,\n    lastY: window.scrollY,\n    delta: {\n      x: 0,\n      y: 0,\n    },\n    deltaX: 0,\n    deltaY: 0,\n    max: {\n      x: document.scrollingElement.scrollWidth - window.innerWidth,\n      y: document.scrollingElement.scrollHeight - window.innerHeight,\n    },\n    maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n    maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n    progress: {\n      x: 0,\n      y: 0,\n    },\n    progressX: 0,\n    progressY: 0,\n    direction: {\n      x: 'NONE',\n      y: 'NONE',\n    },\n    isUp: false,\n    isRight: false,\n    isDown: false,\n    isLeft: false,\n  };\n\n  updateProps(): ScrollServiceProps {\n    const { props } = this;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    props.y = window.scrollY;\n    props.x = window.scrollX;\n    props.changed.x = props.changedX = props.x !== xLast;\n    props.changed.y = props.changedY = props.y !== yLast;\n    props.last.x = props.lastX = xLast;\n    props.last.y = props.lastY = yLast;\n    props.delta.x = props.deltaX = props.x - xLast;\n    props.delta.y = props.deltaY = props.y - yLast;\n    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n    props.isUp = props.y < yLast;\n    props.isRight = props.x > xLast;\n    props.isDown = props.y > yLast;\n    props.isLeft = props.x < xLast;\n    /* eslint-disable no-nested-ternary */\n    props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n    props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n    /* eslint-enable no-nested-ternary */\n\n    return props;\n  }\n\n  onScrollDebounced = debounce(() => {\n    this.trigger(this.updateProps());\n  }, 100);\n\n  /**\n   * Scroll handler.\n   */\n  handleEvent() {\n    this.trigger(this.updateProps());\n    this.onScrollDebounced();\n  }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport function useScroll(): ScrollServiceInterface {\n  return ScrollService.getInstance();\n}\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAChC,OAAO,cAAc;AACrB,SAAS,qCAAqC;AA6BvC,MAAM,sBAAsB,gBAAoC;AAAA,EACrE,OAAO,SAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,UAAU,6BAA6B,CAAC,CAAC,CAAC;AAAA,EAE7F,QAA4B;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,GAAG,OAAO;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,MACH,GAAG,SAAS,iBAAiB,cAAc,OAAO;AAAA,MAClD,GAAG,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACrD;AAAA,IACA,MAAM,SAAS,iBAAiB,cAAc,OAAO;AAAA,IACrD,MAAM,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACtD,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EAEA,cAAkC;AAChC,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAEpB,UAAM,IAAI,OAAO;AACjB,UAAM,IAAI,OAAO;AACjB,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,cAAc,OAAO;AAC1E,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,eAAe,OAAO;AAC3E,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,UAAU,MAAM,IAAI;AAC1B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,SAAS,MAAM,IAAI;AAEzB,UAAM,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,SAAS,SAAS;AACtE,UAAM,UAAU,IAAI,MAAM,SAAS,SAAS,MAAM,OAAO,OAAO;AAGhE,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB,SAAS,MAAM;AACjC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA;AAAA;AAAA;AAAA,EAKN,cAAc;AACZ,SAAK,QAAQ,KAAK,YAAY,CAAC;AAC/B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAaO,SAAS,YAAoC;AAClD,SAAO,cAAc,YAAY;AACnC;",
+  "names": []
+}

package/services/index.d.ts

@@ -1,41 +1,8 @@
-import type { DragServiceProps } from './drag.js';
-import type { KeyServiceProps } from './key.js';
-import type { LoadServiceProps } from './load.js';
-import type { PointerServiceProps } from './pointer.js';
-import type { RafServiceProps } from './raf.js';
-import type { ResizeServiceProps } from './resize.js';
-import type { ScrollServiceProps } from './scroll.js';
-export interface ServiceInterface<T> {
-    /**
-     * Remove a function from the resize service by its key.
-     */
-    remove(key: string): void;
-    /**
-     * Add a callback to the service. The callback will receive the current service props as parameter.
-     */
-    add(key: string, callback: (props: T) => void): void;
-    /**
-     * Test if the service has alreaydy a callback for the given key.
-     */
-    has(key: string): boolean;
-    /**
-     * Get the service's props.
-     */
-    props(): T;
-}
-export type DragServiceInterface = ServiceInterface<DragServiceProps>;
-export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
-export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
-export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
-export type RafServiceInterface = ServiceInterface<RafServiceProps>;
-export type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> = ServiceInterface<ResizeServiceProps<T>>;
-export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
-export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
-export { default as useDrag } from './drag.js';
-export { default as useKey } from './key.js';
-export { default as useLoad } from './load.js';
-export { default as usePointer } from './pointer.js';
-export { default as useRaf } from './raf.js';
-export { default as useResize } from './resize.js';
-export { default as useScroll } from './scroll.js';
-export { useService } from './service.js';
+export * from './AbstractService.js';
+export * from './DragService.js';
+export * from './KeyService.js';
+export * from './LoadService.js';
+export * from './PointerService.js';
+export * from './RafService.js';
+export * from './ResizeService.js';
+export * from './ScrollService.js';

package/services/index.js

@@ -1,19 +1,9 @@
-import { default as default2 } from "./drag.js";
-import { default as default3 } from "./key.js";
-import { default as default4 } from "./load.js";
-import { default as default5 } from "./pointer.js";
-import { default as default6 } from "./raf.js";
-import { default as default7 } from "./resize.js";
-import { default as default8 } from "./scroll.js";
-import { useService } from "./service.js";
-export {
-  default2 as useDrag,
-  default3 as useKey,
-  default4 as useLoad,
-  default5 as usePointer,
-  default6 as useRaf,
-  default7 as useResize,
-  default8 as useScroll,
-  useService
-};
+export * from "./AbstractService.js";
+export * from "./DragService.js";
+export * from "./KeyService.js";
+export * from "./LoadService.js";
+export * from "./PointerService.js";
+export * from "./RafService.js";
+export * from "./ResizeService.js";
+export * from "./ScrollService.js";
 //# sourceMappingURL=index.js.map

package/services/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/index.ts"],
-  "sourcesContent": ["import type { DragServiceProps } from './drag.js';\nimport type { KeyServiceProps } from './key.js';\nimport type { LoadServiceProps } from './load.js';\nimport type { PointerServiceProps } from './pointer.js';\nimport type { RafServiceProps } from './raf.js';\nimport type { ResizeServiceProps } from './resize.js';\nimport type { ScrollServiceProps } from './scroll.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\nexport type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> =\n  ServiceInterface<ResizeServiceProps<T>>;\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport type {\n  DragServiceProps,\n  KeyServiceProps,\n  LoadServiceProps,\n  PointerServiceProps,\n  RafServiceProps,\n  ResizeServiceProps,\n  ScrollServiceProps,\n};\n\nexport { default as useDrag } from './drag.js';\nexport { default as useKey } from './key.js';\nexport { default as useLoad } from './load.js';\nexport { default as usePointer } from './pointer.js';\nexport { default as useRaf } from './raf.js';\nexport { default as useResize } from './resize.js';\nexport { default as useScroll } from './scroll.js';\nexport { useService } from './service.js';\n"],
-  "mappings": "AA8CA,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA4B;AACrC,SAAS,kBAAkB;",
-  "names": ["default"]
+  "sourcesContent": ["export * from './AbstractService.js';\nexport * from './DragService.js';\nexport * from './KeyService.js';\nexport * from './LoadService.js';\nexport * from './PointerService.js';\nexport * from './RafService.js';\nexport * from './ResizeService.js';\nexport * from './ScrollService.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
 }

package/services/utils.d.ts

@@ -0,0 +1,14 @@
+export declare const ONCE_CAPTURE_EVENT_OPTIONS: {
+    once: boolean;
+    capture: boolean;
+};
+export declare const PASSIVE_CAPTURE_EVENT_OPTIONS: {
+    passive: boolean;
+    capture: boolean;
+};
+export declare const PASSIVE_EVENT_OPTIONS: {
+    passive: boolean;
+};
+export declare const CAPTURE_EVENT_OPTIONS: {
+    capture: boolean;
+};

package/services/utils.js

@@ -0,0 +1,11 @@
+const ONCE_CAPTURE_EVENT_OPTIONS = { once: true, capture: true };
+const PASSIVE_CAPTURE_EVENT_OPTIONS = { passive: true, capture: true };
+const PASSIVE_EVENT_OPTIONS = { passive: true };
+const CAPTURE_EVENT_OPTIONS = { capture: true };
+export {
+  CAPTURE_EVENT_OPTIONS,
+  ONCE_CAPTURE_EVENT_OPTIONS,
+  PASSIVE_CAPTURE_EVENT_OPTIONS,
+  PASSIVE_EVENT_OPTIONS
+};
+//# sourceMappingURL=utils.js.map

package/services/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/utils.ts"],
+  "sourcesContent": ["export const ONCE_CAPTURE_EVENT_OPTIONS = { once: true, capture: true };\nexport const PASSIVE_CAPTURE_EVENT_OPTIONS = { passive: true, capture: true };\nexport const PASSIVE_EVENT_OPTIONS = { passive: true };\nexport const CAPTURE_EVENT_OPTIONS = { capture: true };\n"],
+  "mappings": "AAAO,MAAM,6BAA6B,EAAE,MAAM,MAAM,SAAS,KAAK;AAC/D,MAAM,gCAAgC,EAAE,SAAS,MAAM,SAAS,KAAK;AACrE,MAAM,wBAAwB,EAAE,SAAS,KAAK;AAC9C,MAAM,wBAAwB,EAAE,SAAS,KAAK;",
+  "names": []
+}

package/tsconfig.build.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../packages/global.d.ts","../packages/js-toolkit/index.ts","../packages/js-toolkit/base/base.ts","../packages/js-toolkit/base/features.ts","../packages/js-toolkit/base/index.ts","../packages/js-toolkit/base/types.ts","../packages/js-toolkit/base/utils.ts","../packages/js-toolkit/base/managers/abstractmanager.ts","../packages/js-toolkit/base/managers/childrenmanager.ts","../packages/js-toolkit/base/managers/eventsmanager.ts","../packages/js-toolkit/base/managers/optionsmanager.ts","../packages/js-toolkit/base/managers/refsmanager.ts","../packages/js-toolkit/base/managers/responsiveoptionsmanager.ts","../packages/js-toolkit/base/managers/servicesmanager.ts","../packages/js-toolkit/base/managers/index.ts","../packages/js-toolkit/decorators/index.ts","../packages/js-toolkit/decorators/withbreakpointmanager.ts","../packages/js-toolkit/decorators/withbreakpointobserver.ts","../packages/js-toolkit/decorators/withdrag.ts","../packages/js-toolkit/decorators/withextraconfig.ts","../packages/js-toolkit/decorators/withfreezedoptions.ts","../packages/js-toolkit/decorators/withintersectionobserver.ts","../packages/js-toolkit/decorators/withmountonmediaquery.ts","../packages/js-toolkit/decorators/withmountwheninview.ts","../packages/js-toolkit/decorators/withmountwhenprefersmotion.ts","../packages/js-toolkit/decorators/withname.ts","../packages/js-toolkit/decorators/withrelativepointer.ts","../packages/js-toolkit/decorators/withresponsiveoptions.ts","../packages/js-toolkit/decorators/withscrolledinview/index.ts","../packages/js-toolkit/decorators/withscrolledinview/types.ts","../packages/js-toolkit/decorators/withscrolledinview/utils.ts","../packages/js-toolkit/decorators/withscrolledinview/withscrolledinview.ts","../packages/js-toolkit/helpers/createapp.ts","../packages/js-toolkit/helpers/getclosestparent.ts","../packages/js-toolkit/helpers/getdirectchildren.ts","../packages/js-toolkit/helpers/getinstancefromelement.ts","../packages/js-toolkit/helpers/importoninteraction.ts","../packages/js-toolkit/helpers/importonmediaquery.ts","../packages/js-toolkit/helpers/importwhenidle.ts","../packages/js-toolkit/helpers/importwhenprefersmotion.ts","../packages/js-toolkit/helpers/importwhenvisible.ts","../packages/js-toolkit/helpers/index.ts","../packages/js-toolkit/helpers/utils.ts","../packages/js-toolkit/services/abstractservice.ts","../packages/js-toolkit/services/dragservice.ts","../packages/js-toolkit/services/keyservice.ts","../packages/js-toolkit/services/loadservice.ts","../packages/js-toolkit/services/pointerservice.ts","../packages/js-toolkit/services/rafservice.ts","../packages/js-toolkit/services/resizeservice.ts","../packages/js-toolkit/services/scrollservice.ts","../packages/js-toolkit/services/index.ts","../packages/js-toolkit/services/utils.ts","../packages/js-toolkit/utils/queue.ts","../packages/js-toolkit/utils/smartqueue.ts","../packages/js-toolkit/utils/debounce.ts","../packages/js-toolkit/utils/getcomponentresolver.ts","../packages/js-toolkit/utils/has.ts","../packages/js-toolkit/utils/history.ts","../packages/js-toolkit/utils/index.ts","../packages/js-toolkit/utils/is.ts","../packages/js-toolkit/utils/keycodes.ts","../packages/js-toolkit/utils/loadelement.ts","../packages/js-toolkit/utils/memo.ts","../packages/js-toolkit/utils/memoize.ts","../packages/js-toolkit/utils/nextframe.ts","../packages/js-toolkit/utils/nextmicrotask.ts","../packages/js-toolkit/utils/nexttick.ts","../packages/js-toolkit/utils/noop.ts","../packages/js-toolkit/utils/random.ts","../packages/js-toolkit/utils/scheduler.ts","../packages/js-toolkit/utils/scrollto.ts","../packages/js-toolkit/utils/throttle.ts","../packages/js-toolkit/utils/trapfocus.ts","../packages/js-toolkit/utils/tween.ts","../packages/js-toolkit/utils/wait.ts","../packages/js-toolkit/utils/collide/boundingrecttocircle.ts","../packages/js-toolkit/utils/collide/collidecirclecircle.ts","../packages/js-toolkit/utils/collide/collidecirclerect.ts","../packages/js-toolkit/utils/collide/collidepointcircle.ts","../packages/js-toolkit/utils/collide/collidepointrect.ts","../packages/js-toolkit/utils/collide/colliderectrect.ts","../packages/js-toolkit/utils/collide/index.ts","../packages/js-toolkit/utils/css/animate.ts","../packages/js-toolkit/utils/css/classes.ts","../packages/js-toolkit/utils/css/getoffsetsizes.ts","../packages/js-toolkit/utils/css/index.ts","../packages/js-toolkit/utils/css/matrix.ts","../packages/js-toolkit/utils/css/styles.ts","../packages/js-toolkit/utils/css/transform.ts","../packages/js-toolkit/utils/css/transition.ts","../packages/js-toolkit/utils/css/utils.ts","../packages/js-toolkit/utils/dom/ancestors.ts","../packages/js-toolkit/utils/dom/index.ts","../packages/js-toolkit/utils/math/clamp.ts","../packages/js-toolkit/utils/math/clamp01.ts","../packages/js-toolkit/utils/math/createeases.ts","../packages/js-toolkit/utils/math/createrange.ts","../packages/js-toolkit/utils/math/damp.ts","../packages/js-toolkit/utils/math/ease.ts","../packages/js-toolkit/utils/math/index.ts","../packages/js-toolkit/utils/math/inertiafinalvalue.ts","../packages/js-toolkit/utils/math/lerp.ts","../packages/js-toolkit/utils/math/map.ts","../packages/js-toolkit/utils/math/mean.ts","../packages/js-toolkit/utils/math/round.ts","../packages/js-toolkit/utils/object/getallproperties.ts","../packages/js-toolkit/utils/string/changecase.ts","../packages/js-toolkit/utils/string/endswith.ts","../packages/js-toolkit/utils/string/index.ts","../packages/js-toolkit/utils/string/startswith.ts","../packages/js-toolkit/utils/string/withleadingcharacters.ts","../packages/js-toolkit/utils/string/withleadingslash.ts","../packages/js-toolkit/utils/string/withtrailingcharacters.ts","../packages/js-toolkit/utils/string/withtrailingslash.ts","../packages/js-toolkit/utils/string/withoutleadingcharacters.ts","../packages/js-toolkit/utils/string/withoutleadingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withoutleadingslash.ts","../packages/js-toolkit/utils/string/withouttrailingcharacters.ts","../packages/js-toolkit/utils/string/withouttrailingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withouttrailingslash.ts"],"version":"5.6.3"}

package/utils/index.d.ts

@@ -24,3 +24,4 @@ export * from './dom/index.js';
 export * from './wait.js';
 export * from './random.js';
 export * from './memo.js';
+export * from './loadElement.js';

package/utils/index.js

@@ -28,6 +28,7 @@ export * from "./dom/index.js";
 export * from "./wait.js";
 export * from "./random.js";
 export * from "./memo.js";
+export * from "./loadElement.js";
 export {
   Queue,
   SmartQueue,

package/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/index.ts"],
-  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport * from './trapFocus.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { nextTick } from './nextTick.js';\nexport { nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\nexport * from './random.js';\nexport * from './memo.js';\n"],
-  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAoB,WAAXA,gBAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAAuC;AAChD,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport * from './trapFocus.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { nextTick } from './nextTick.js';\nexport { nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\nexport * from './random.js';\nexport * from './memo.js';\nexport * from './loadElement.js';\n"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAoB,WAAXA,gBAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAAuC;AAChD,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/utils/loadElement.d.ts

@@ -0,0 +1,42 @@
+export type LoadableElements = {
+    embed: HTMLEmbedElement;
+    iframe: HTMLIFrameElement;
+    img: HTMLImageElement;
+    link: HTMLLinkElement;
+    script: HTMLScriptElement;
+    track: HTMLTrackElement;
+};
+export type LoadableElementsNames = keyof LoadableElements;
+export type LoadElementsOptions = {
+    /**
+     * An HTML element where the created element will be appended.
+     */
+    appendTo?: HTMLElement;
+};
+export type LoadElementsReturnType<T extends LoadableElementsNames> = Promise<{
+    event: Event;
+    element: LoadableElements[T];
+}>;
+/**
+ * Load the given source for the given type of element.
+ * @todo manage memo
+ */
+export declare function loadElement<T extends LoadableElementsNames>(src: string, type: T, { appendTo }?: LoadElementsOptions): LoadElementsReturnType<T>;
+/**
+ * Load the given source as an `<img>` element.
+ */
+export declare function loadImage(src: string, options?: LoadElementsOptions): LoadElementsReturnType<"img">;
+/**
+ * Load the given source as an `<iframe>` element.
+ */
+export declare function loadIframe(src: string, options?: LoadElementsOptions): LoadElementsReturnType<"iframe">;
+/**
+ * Load the given source as a `<link>` element.
+ */
+export declare function loadLink(src: string, options?: LoadElementsOptions): LoadElementsReturnType<"link">;
+/**
+ * Load the given source as a `<script>` element. The generated element is
+ * appended to `document.head` by default, as a script element needs
+ * to be inserted in the DOM to load.
+ */
+export declare function loadScript(src: string, options?: LoadElementsOptions): LoadElementsReturnType<"script">;

package/utils/loadElement.js

@@ -0,0 +1,33 @@
+function loadElement(src, type, { appendTo = null } = {}) {
+  return new Promise((resolve, reject) => {
+    const eventOptions = { once: true };
+    const prop = type === "link" ? "href" : "src";
+    const element = document.createElement(type);
+    element.addEventListener("load", (event) => resolve({ event, element }), eventOptions);
+    element.addEventListener("error", (event) => reject({ event, element }), eventOptions);
+    element[prop] = src;
+    if (appendTo) {
+      appendTo.append(element);
+    }
+  });
+}
+function loadImage(src, options) {
+  return loadElement(src, "img", options);
+}
+function loadIframe(src, options) {
+  return loadElement(src, "iframe", options);
+}
+function loadLink(src, options) {
+  return loadElement(src, "link", options);
+}
+function loadScript(src, options) {
+  return loadElement(src, "script", { appendTo: document.head, ...options });
+}
+export {
+  loadElement,
+  loadIframe,
+  loadImage,
+  loadLink,
+  loadScript
+};
+//# sourceMappingURL=loadElement.js.map

package/utils/loadElement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/utils/loadElement.ts"],
+  "sourcesContent": ["export type LoadableElements = {\n  embed: HTMLEmbedElement;\n  iframe: HTMLIFrameElement;\n  img: HTMLImageElement;\n  link: HTMLLinkElement;\n  script: HTMLScriptElement;\n  track: HTMLTrackElement;\n};\n\nexport type LoadableElementsNames = keyof LoadableElements;\n\nexport type LoadElementsOptions = {\n  /**\n   * An HTML element where the created element will be appended.\n   */\n  appendTo?: HTMLElement;\n};\n\nexport type LoadElementsReturnType<T extends LoadableElementsNames> = Promise<{\n  event: Event;\n  element: LoadableElements[T];\n}>;\n\n/**\n * Load the given source for the given type of element.\n * @todo manage memo\n */\nexport function loadElement<T extends LoadableElementsNames>(\n  src: string,\n  type: T,\n  { appendTo = null }: LoadElementsOptions = {},\n): LoadElementsReturnType<T> {\n  return new Promise((resolve, reject) => {\n    const eventOptions = { once: true };\n    const prop = type === 'link' ? 'href' : 'src';\n    const element = document.createElement(type);\n    element.addEventListener('load', (event) => resolve({ event, element }), eventOptions);\n    element.addEventListener('error', (event) => reject({ event, element }), eventOptions);\n    element[prop] = src;\n    if (appendTo) {\n      appendTo.append(element);\n    }\n  });\n}\n\n/**\n * Load the given source as an `<img>` element.\n */\nexport function loadImage(src: string, options?: LoadElementsOptions) {\n  return loadElement(src, 'img', options);\n}\n\n/**\n * Load the given source as an `<iframe>` element.\n */\nexport function loadIframe(src: string, options?: LoadElementsOptions) {\n  return loadElement(src, 'iframe', options);\n}\n\n/**\n * Load the given source as a `<link>` element.\n */\nexport function loadLink(src: string, options?: LoadElementsOptions) {\n  return loadElement(src, 'link', options);\n}\n\n/**\n * Load the given source as a `<script>` element. The generated element is\n * appended to `document.head` by default, as a script element needs\n * to be inserted in the DOM to load.\n */\nexport function loadScript(src: string, options?: LoadElementsOptions) {\n  return loadElement(src, 'script', { appendTo: document.head, ...options });\n}\n"],
+  "mappings": "AA2BO,SAAS,YACd,KACA,MACA,EAAE,WAAW,KAAK,IAAyB,CAAC,GACjB;AAC3B,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,UAAM,eAAe,EAAE,MAAM,KAAK;AAClC,UAAM,OAAO,SAAS,SAAS,SAAS;AACxC,UAAM,UAAU,SAAS,cAAc,IAAI;AAC3C,YAAQ,iBAAiB,QAAQ,CAAC,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC,GAAG,YAAY;AACrF,YAAQ,iBAAiB,SAAS,CAAC,UAAU,OAAO,EAAE,OAAO,QAAQ,CAAC,GAAG,YAAY;AACrF,YAAQ,IAAI,IAAI;AAChB,QAAI,UAAU;AACZ,eAAS,OAAO,OAAO;AAAA,IACzB;AAAA,EACF,CAAC;AACH;AAKO,SAAS,UAAU,KAAa,SAA+B;AACpE,SAAO,YAAY,KAAK,OAAO,OAAO;AACxC;AAKO,SAAS,WAAW,KAAa,SAA+B;AACrE,SAAO,YAAY,KAAK,UAAU,OAAO;AAC3C;AAKO,SAAS,SAAS,KAAa,SAA+B;AACnE,SAAO,YAAY,KAAK,QAAQ,OAAO;AACzC;AAOO,SAAS,WAAW,KAAa,SAA+B;AACrE,SAAO,YAAY,KAAK,UAAU,EAAE,UAAU,SAAS,MAAM,GAAG,QAAQ,CAAC;AAC3E;",
+  "names": []
+}

package/utils/tween.js

@@ -2,7 +2,7 @@ import { cubicBezier } from "@motionone/easing";
 import { lerp, map, clamp01, damp, inertiaFinalValue } from "./math/index.js";
 import { isDefined, isArray, isNumber } from "./is.js";
 import { noop, noopValue as linear } from "./noop.js";
-import useRaf from "../services/raf.js";
+import { useRaf } from "../services/index.js";
 let id = 0;
 const DEFAULT_PROGRESS_PRECISION = 1e-4;
 function normalizeEase(ease) {

package/utils/tween.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/tween.ts"],
-  "sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue } from './math/index.js';\nimport { isDefined, isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport useRaf from '../services/raf.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 0.0001;\n\nexport type BezierCurve = [number, number, number, number];\n\n/**\n * Controls for a tween.\n */\nexport interface Tween {\n  /**\n   * Start the tween from the beginning.\n   */\n  start: () => void;\n  /**\n   * Finish the tween and set its state to the end.\n   */\n  finish: () => void;\n  /**\n   * Pause the tween.\n   */\n  pause: () => void;\n  /**\n   * Start the tween from the current paused progress.\n   */\n  play: () => void;\n  /**\n   * Set and get the tween's progress.\n   */\n  progress: (progress?: number) => number;\n}\n\nexport interface TweenOptions {\n  /**\n   * The duration, in seconds.\n   * Defaults to `1`.\n   */\n  duration?: number;\n  /**\n   * The delay, in seconds.\n   * Defaults to `0`.\n   */\n  delay?: number;\n  /**\n   * The easing function or bezier curve to use.\n   * Defaults to a linear easing function.\n   */\n  easing?: EasingFunction | BezierCurve;\n  /**\n   * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.\n   */\n  smooth?: true | number;\n  /**\n   * The precision for when to consider the tween finished.\n   * Defaults to `0.0001`.\n   */\n  precision?: number;\n  /**\n   * A callback executed on start.\n   */\n  onStart?: (progress: number) => void;\n  /**\n   * A callback executed each time the progress is updated.\n   */\n  onProgress?: (progress: number) => void;\n  /**\n   * A callback executed when the tween is finished.\n   */\n  onFinish?: (progress: number) => void;\n}\n\n/**\n * Normalize a easing function with default fallbacks.\n */\nexport function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction {\n  if (!isDefined(ease)) {\n    return linear;\n  }\n\n  if (isArray(ease)) {\n    return cubicBezier(...ease);\n  }\n\n  return ease;\n}\n\n/**\n * Tween from 0 to 1.\n */\nexport function tween(callback: (progress: number) => unknown, options: TweenOptions = {}): Tween {\n  const raf = useRaf();\n\n  let progressValue = 0;\n  let easedProgress = 0;\n\n  const isSmooth = isDefined(options.smooth) && (isNumber(options.smooth) || options.smooth);\n  const smoothFactor = isNumber(options.smooth) ? options.smooth : 0.1;\n  const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;\n  const ease = normalizeEase(options.easing);\n\n  let delay = options.delay ?? 0;\n  delay *= 1000;\n  let duration = options.duration ?? 1;\n  duration *= 1000;\n\n  /* eslint-disable @typescript-eslint/no-use-before-define */\n  let startTime = getStartTime();\n  let endTime = getEndTime(startTime);\n  /* eslint-enable @typescript-eslint/no-use-before-define */\n\n  const key = `tw-${id}`;\n  id += 1;\n\n  const { onStart = noop, onProgress = noop, onFinish = noop } = options;\n  let isRunning = false;\n\n  /**\n   * Pause the animation.\n   */\n  function pause() {\n    isRunning = false;\n    raf.remove(key);\n  }\n\n  /**\n   * Set the progress value.\n   */\n  function progress(newProgress: number) {\n    if (!isDefined(newProgress)) {\n      return easedProgress;\n    }\n\n    progressValue = newProgress;\n    easedProgress = isSmooth\n      ? damp(progressValue, easedProgress, smoothFactor, precision)\n      : ease(progressValue);\n\n    // Stop when reaching precision\n    if (Math.abs(1 - easedProgress) < precision) {\n      progressValue = 1;\n      easedProgress = 1;\n    }\n\n    callback(easedProgress);\n    onProgress(easedProgress);\n\n    if (easedProgress === 1) {\n      pause();\n      requestAnimationFrame(() => onFinish(easedProgress));\n    }\n\n    return easedProgress;\n  }\n\n  /**\n   * Loop for rendering the animation.\n   */\n  function tick(props: { time: number }) {\n    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));\n  }\n\n  function getStartTime() {\n    return performance.now() + delay;\n  }\n\n  function getEndTime(time: number) {\n    return isSmooth ? inertiaFinalValue(time, 1) : time + duration;\n  }\n\n  /**\n   * Play the animation.\n   */\n  function start() {\n    onStart(0);\n    startTime = getStartTime();\n    endTime = getEndTime(startTime);\n    progressValue = 0;\n    easedProgress = 0;\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  /**\n   * Play a paused animation.\n   */\n  function play() {\n    if (isRunning) {\n      return;\n    }\n\n    startTime = getStartTime() - lerp(0, duration, progressValue);\n    endTime = getEndTime(startTime);\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  return {\n    start,\n    finish: () => progress(1),\n    pause,\n    play,\n    progress,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,MAAM,KAAK,SAAS,MAAM,yBAAyB;AAC5D,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,MAAM,aAAa,cAAc;AAC1C,OAAO,YAAY;AAGnB,IAAI,KAAK;AACT,MAAM,6BAA6B;AAwE5B,SAAS,cAAc,MAAoD;AAChF,MAAI,CAAC,UAAU,IAAI,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,GAAG;AACjB,WAAO,YAAY,GAAG,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAKO,SAAS,MAAM,UAAyC,UAAwB,CAAC,GAAU;AAChG,QAAM,MAAM,OAAO;AAEnB,MAAI,gBAAgB;AACpB,MAAI,gBAAgB;AAEpB,QAAM,WAAW,UAAU,QAAQ,MAAM,MAAM,SAAS,QAAQ,MAAM,KAAK,QAAQ;AACnF,QAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,QAAQ,SAAS;AACjE,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,OAAO,cAAc,QAAQ,MAAM;AAEzC,MAAI,QAAQ,QAAQ,SAAS;AAC7B,WAAS;AACT,MAAI,WAAW,QAAQ,YAAY;AACnC,cAAY;AAGZ,MAAI,YAAY,aAAa;AAC7B,MAAI,UAAU,WAAW,SAAS;AAGlC,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM;AAEN,QAAM,EAAE,UAAU,MAAM,aAAa,MAAM,WAAW,KAAK,IAAI;AAC/D,MAAI,YAAY;AAKhB,WAAS,QAAQ;AACf,gBAAY;AACZ,QAAI,OAAO,GAAG;AAAA,EAChB;AAKA,WAAS,SAAS,aAAqB;AACrC,QAAI,CAAC,UAAU,WAAW,GAAG;AAC3B,aAAO;AAAA,IACT;AAEA,oBAAgB;AAChB,oBAAgB,WACZ,KAAK,eAAe,eAAe,cAAc,SAAS,IAC1D,KAAK,aAAa;AAGtB,QAAI,KAAK,IAAI,IAAI,aAAa,IAAI,WAAW;AAC3C,sBAAgB;AAChB,sBAAgB;AAAA,IAClB;AAEA,aAAS,aAAa;AACtB,eAAW,aAAa;AAExB,QAAI,kBAAkB,GAAG;AACvB,YAAM;AACN,4BAAsB,MAAM,SAAS,aAAa,CAAC;AAAA,IACrD;AAEA,WAAO;AAAA,EACT;AAKA,WAAS,KAAK,OAAyB;AACrC,aAAS,QAAQ,IAAI,MAAM,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC;AAAA,EAC7D;AAEA,WAAS,eAAe;AACtB,WAAO,YAAY,IAAI,IAAI;AAAA,EAC7B;AAEA,WAAS,WAAW,MAAc;AAChC,WAAO,WAAW,kBAAkB,MAAM,CAAC,IAAI,OAAO;AAAA,EACxD;AAKA,WAAS,QAAQ;AACf,YAAQ,CAAC;AACT,gBAAY,aAAa;AACzB,cAAU,WAAW,SAAS;AAC9B,oBAAgB;AAChB,oBAAgB;AAChB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAKA,WAAS,OAAO;AACd,QAAI,WAAW;AACb;AAAA,IACF;AAEA,gBAAY,aAAa,IAAI,KAAK,GAAG,UAAU,aAAa;AAC5D,cAAU,WAAW,SAAS;AAC9B,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,SAAS,CAAC;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { cubicBezier } from '@motionone/easing';\nimport { lerp, map, clamp01, damp, inertiaFinalValue } from './math/index.js';\nimport { isDefined, isArray, isNumber } from './is.js';\nimport { noop, noopValue as linear } from './noop.js';\nimport { useRaf } from '../services/index.js';\nimport type { EasingFunction } from './math/createEases.js';\n\nlet id = 0;\nconst DEFAULT_PROGRESS_PRECISION = 0.0001;\n\nexport type BezierCurve = [number, number, number, number];\n\n/**\n * Controls for a tween.\n */\nexport interface Tween {\n  /**\n   * Start the tween from the beginning.\n   */\n  start: () => void;\n  /**\n   * Finish the tween and set its state to the end.\n   */\n  finish: () => void;\n  /**\n   * Pause the tween.\n   */\n  pause: () => void;\n  /**\n   * Start the tween from the current paused progress.\n   */\n  play: () => void;\n  /**\n   * Set and get the tween's progress.\n   */\n  progress: (progress?: number) => number;\n}\n\nexport interface TweenOptions {\n  /**\n   * The duration, in seconds.\n   * Defaults to `1`.\n   */\n  duration?: number;\n  /**\n   * The delay, in seconds.\n   * Defaults to `0`.\n   */\n  delay?: number;\n  /**\n   * The easing function or bezier curve to use.\n   * Defaults to a linear easing function.\n   */\n  easing?: EasingFunction | BezierCurve;\n  /**\n   * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.\n   */\n  smooth?: true | number;\n  /**\n   * The precision for when to consider the tween finished.\n   * Defaults to `0.0001`.\n   */\n  precision?: number;\n  /**\n   * A callback executed on start.\n   */\n  onStart?: (progress: number) => void;\n  /**\n   * A callback executed each time the progress is updated.\n   */\n  onProgress?: (progress: number) => void;\n  /**\n   * A callback executed when the tween is finished.\n   */\n  onFinish?: (progress: number) => void;\n}\n\n/**\n * Normalize a easing function with default fallbacks.\n */\nexport function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction {\n  if (!isDefined(ease)) {\n    return linear;\n  }\n\n  if (isArray(ease)) {\n    return cubicBezier(...ease);\n  }\n\n  return ease;\n}\n\n/**\n * Tween from 0 to 1.\n */\nexport function tween(callback: (progress: number) => unknown, options: TweenOptions = {}): Tween {\n  const raf = useRaf();\n\n  let progressValue = 0;\n  let easedProgress = 0;\n\n  const isSmooth = isDefined(options.smooth) && (isNumber(options.smooth) || options.smooth);\n  const smoothFactor = isNumber(options.smooth) ? options.smooth : 0.1;\n  const precision = options.precision ?? DEFAULT_PROGRESS_PRECISION;\n  const ease = normalizeEase(options.easing);\n\n  let delay = options.delay ?? 0;\n  delay *= 1000;\n  let duration = options.duration ?? 1;\n  duration *= 1000;\n\n  /* eslint-disable @typescript-eslint/no-use-before-define */\n  let startTime = getStartTime();\n  let endTime = getEndTime(startTime);\n  /* eslint-enable @typescript-eslint/no-use-before-define */\n\n  const key = `tw-${id}`;\n  id += 1;\n\n  const { onStart = noop, onProgress = noop, onFinish = noop } = options;\n  let isRunning = false;\n\n  /**\n   * Pause the animation.\n   */\n  function pause() {\n    isRunning = false;\n    raf.remove(key);\n  }\n\n  /**\n   * Set the progress value.\n   */\n  function progress(newProgress: number) {\n    if (!isDefined(newProgress)) {\n      return easedProgress;\n    }\n\n    progressValue = newProgress;\n    easedProgress = isSmooth\n      ? damp(progressValue, easedProgress, smoothFactor, precision)\n      : ease(progressValue);\n\n    // Stop when reaching precision\n    if (Math.abs(1 - easedProgress) < precision) {\n      progressValue = 1;\n      easedProgress = 1;\n    }\n\n    callback(easedProgress);\n    onProgress(easedProgress);\n\n    if (easedProgress === 1) {\n      pause();\n      requestAnimationFrame(() => onFinish(easedProgress));\n    }\n\n    return easedProgress;\n  }\n\n  /**\n   * Loop for rendering the animation.\n   */\n  function tick(props: { time: number }) {\n    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));\n  }\n\n  function getStartTime() {\n    return performance.now() + delay;\n  }\n\n  function getEndTime(time: number) {\n    return isSmooth ? inertiaFinalValue(time, 1) : time + duration;\n  }\n\n  /**\n   * Play the animation.\n   */\n  function start() {\n    onStart(0);\n    startTime = getStartTime();\n    endTime = getEndTime(startTime);\n    progressValue = 0;\n    easedProgress = 0;\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  /**\n   * Play a paused animation.\n   */\n  function play() {\n    if (isRunning) {\n      return;\n    }\n\n    startTime = getStartTime() - lerp(0, duration, progressValue);\n    endTime = getEndTime(startTime);\n    isRunning = true;\n\n    raf.add(key, tick);\n  }\n\n  return {\n    start,\n    finish: () => progress(1),\n    pause,\n    play,\n    progress,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,MAAM,KAAK,SAAS,MAAM,yBAAyB;AAC5D,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,MAAM,aAAa,cAAc;AAC1C,SAAS,cAAc;AAGvB,IAAI,KAAK;AACT,MAAM,6BAA6B;AAwE5B,SAAS,cAAc,MAAoD;AAChF,MAAI,CAAC,UAAU,IAAI,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,GAAG;AACjB,WAAO,YAAY,GAAG,IAAI;AAAA,EAC5B;AAEA,SAAO;AACT;AAKO,SAAS,MAAM,UAAyC,UAAwB,CAAC,GAAU;AAChG,QAAM,MAAM,OAAO;AAEnB,MAAI,gBAAgB;AACpB,MAAI,gBAAgB;AAEpB,QAAM,WAAW,UAAU,QAAQ,MAAM,MAAM,SAAS,QAAQ,MAAM,KAAK,QAAQ;AACnF,QAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,QAAQ,SAAS;AACjE,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,OAAO,cAAc,QAAQ,MAAM;AAEzC,MAAI,QAAQ,QAAQ,SAAS;AAC7B,WAAS;AACT,MAAI,WAAW,QAAQ,YAAY;AACnC,cAAY;AAGZ,MAAI,YAAY,aAAa;AAC7B,MAAI,UAAU,WAAW,SAAS;AAGlC,QAAM,MAAM,MAAM,EAAE;AACpB,QAAM;AAEN,QAAM,EAAE,UAAU,MAAM,aAAa,MAAM,WAAW,KAAK,IAAI;AAC/D,MAAI,YAAY;AAKhB,WAAS,QAAQ;AACf,gBAAY;AACZ,QAAI,OAAO,GAAG;AAAA,EAChB;AAKA,WAAS,SAAS,aAAqB;AACrC,QAAI,CAAC,UAAU,WAAW,GAAG;AAC3B,aAAO;AAAA,IACT;AAEA,oBAAgB;AAChB,oBAAgB,WACZ,KAAK,eAAe,eAAe,cAAc,SAAS,IAC1D,KAAK,aAAa;AAGtB,QAAI,KAAK,IAAI,IAAI,aAAa,IAAI,WAAW;AAC3C,sBAAgB;AAChB,sBAAgB;AAAA,IAClB;AAEA,aAAS,aAAa;AACtB,eAAW,aAAa;AAExB,QAAI,kBAAkB,GAAG;AACvB,YAAM;AACN,4BAAsB,MAAM,SAAS,aAAa,CAAC;AAAA,IACrD;AAEA,WAAO;AAAA,EACT;AAKA,WAAS,KAAK,OAAyB;AACrC,aAAS,QAAQ,IAAI,MAAM,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC;AAAA,EAC7D;AAEA,WAAS,eAAe;AACtB,WAAO,YAAY,IAAI,IAAI;AAAA,EAC7B;AAEA,WAAS,WAAW,MAAc;AAChC,WAAO,WAAW,kBAAkB,MAAM,CAAC,IAAI,OAAO;AAAA,EACxD;AAKA,WAAS,QAAQ;AACf,YAAQ,CAAC;AACT,gBAAY,aAAa;AACzB,cAAU,WAAW,SAAS;AAC9B,oBAAgB;AAChB,oBAAgB;AAChB,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAKA,WAAS,OAAO;AACd,QAAI,WAAW;AACb;AAAA,IACF;AAEA,gBAAY,aAAa,IAAI,KAAK,GAAG,UAAU,aAAa;AAC5D,cAAU,WAAW,SAAS;AAC9B,gBAAY;AAEZ,QAAI,IAAI,KAAK,IAAI;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,MAAM,SAAS,CAAC;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }