@studiometa/js-toolkit 3.0.0-alpha.8 → 3.0.0-beta.0

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": []
 }

package/services/drag.d.ts

@@ -1,75 +0,0 @@
-import type { ServiceInterface } from './index.js';
-export type DragService = ServiceInterface<DragServiceProps>;
-type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
-export interface DragServiceProps {
-    /**
-     * The current mode of the dragging logic.
-     */
-    mode: DragLifecycle;
-    /**
-     * The target element of the drag.
-     */
-    target: HTMLElement;
-    /**
-     * Whether the user is currently grabbing the targeted element or not.
-     */
-    isGrabbing: boolean;
-    /**
-     * Whether the drag currently has inertia or not.
-     */
-    hasInertia: boolean;
-    /**
-     * The current horizontal position in the viewport.
-     */
-    x: number;
-    /**
-     * The current vertical position in the viewport.
-     */
-    y: number;
-    /**
-     * The delta between the current position and the last.
-     */
-    delta: {
-        x: number;
-        y: number;
-    };
-    /**
-     * The initial position where the dragging started.
-     */
-    origin: {
-        x: number;
-        y: number;
-    };
-    /**
-     * 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.
-     */
-    final: {
-        x: number;
-        y: number;
-    };
-}
-export interface DragServiceOptions {
-    dampFactor?: number;
-    dragTreshold?: number;
-}
-/**
- * Use the drag service.
- *
- * ```js
- * import { useDrag } from '@studiometa/js-toolkit/services';
- * const { add, remove, props } = useDrag();
- * const draggableElement = document.querySelector('.draggable');
- * add(draggableElement, (props) => {}, { factor: 0.8 });
- * remove(draggableElement);
- * props(draggableElement);
- * ```
- */
-export default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService;
-export {};

package/services/drag.js

@@ -1,199 +0,0 @@
-import { useService } from "./service.js";
-import useRaf from "./raf.js";
-import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
-import { isDefined } from "../utils/index.js";
-const MODES = {
-  START: "start",
-  DRAG: "drag",
-  DROP: "drop",
-  INERTIA: "inertia",
-  STOP: "stop"
-};
-let count = 0;
-const targetEvents = ["pointerdown"];
-const windowEvents = ["pointerup", "touchend"];
-const passiveEventOptions = { passive: true };
-function getEventPosition(event) {
-  const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;
-  return {
-    x: eventOrTouch.clientX,
-    y: eventOrTouch.clientY
-  };
-}
-function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
-  count += 1;
-  const id = `drag-${count}`;
-  let previousEvent;
-  function shouldPreventClick() {
-    return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
-  }
-  function start(x, y) {
-    if (props.isGrabbing) {
-      return;
-    }
-    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);
-    document.addEventListener("touchmove", handleEvent, passiveEventOptions);
-    document.addEventListener("mousemove", handleEvent, passiveEventOptions);
-  }
-  function drop() {
-    document.removeEventListener("touchmove", handleEvent);
-    document.removeEventListener("mousemove", handleEvent);
-    props.isGrabbing = false;
-    props.mode = MODES.DROP;
-    props.hasInertia = true;
-    props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);
-    props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);
-    trigger(props);
-    setTimeout(() => {
-      const raf = useRaf();
-      raf.remove(id);
-      raf.add(id, rafHandler);
-    }, 0);
-  }
-  function stop() {
-    useRaf().remove(id);
-    props.isGrabbing = false;
-    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 drag(event) {
-    if (props.isGrabbing) {
-      const position = getEventPosition(event);
-      props.x = position.x;
-      props.y = position.y;
-      if (previousEvent) {
-        const previousPosition = getEventPosition(previousEvent);
-        props.delta.x = position.x - previousPosition.x;
-        props.delta.y = position.y - previousPosition.y;
-      }
-      props.final.x = position.x;
-      props.final.y = position.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);
-      previousEvent = event;
-    }
-  }
-  function handleEvent(event) {
-    switch (event.type) {
-      case "dragstart":
-        event.preventDefault();
-        break;
-      case "click":
-        if (shouldPreventClick()) {
-          event.stopImmediatePropagation();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        break;
-      case "pointerup":
-      case "touchend":
-        drop();
-        break;
-      case "touchmove":
-      case "mousemove":
-        drag(event);
-        break;
-      default:
-        if (event.button === 0) {
-          start(event.x, event.y);
-        }
-    }
-  }
-  const { add, remove, has, trigger, props } = useService({
-    props: {
-      target,
-      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
-      }
-    },
-    init() {
-      for (const event of targetEvents) {
-        target.addEventListener(event, handleEvent, passiveEventOptions);
-      }
-      for (const event of windowEvents) {
-        window.addEventListener(event, handleEvent, passiveEventOptions);
-      }
-      target.addEventListener("dragstart", handleEvent, { capture: true });
-      target.addEventListener("click", handleEvent, { capture: true });
-    },
-    kill() {
-      for (const event of targetEvents) {
-        target.removeEventListener(event, handleEvent);
-      }
-      for (const event of windowEvents) {
-        window.removeEventListener(event, handleEvent);
-      }
-      target.removeEventListener("dragstart", handleEvent);
-      target.removeEventListener("click", handleEvent);
-    }
-  });
-  return {
-    add,
-    remove,
-    has,
-    props: () => props
-  };
-}
-const instances = /* @__PURE__ */ new WeakMap();
-function useDrag(target, options) {
-  if (!instances.has(target)) {
-    instances.set(target, createDragService(target, options));
-  }
-  return instances.get(target);
-}
-export {
-  useDrag as default
-};
-//# sourceMappingURL=drag.js.map

package/services/drag.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/js-toolkit/services/drag.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport useRaf from './raf.js';\nimport inertiaFinalValue from '../utils/math/inertiaFinalValue.js';\nimport { isDefined } from '../utils/index.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type DragService = ServiceInterface<DragServiceProps>;\n\ntype DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';\n\nexport interface DragServiceProps {\n  /**\n   * The current mode of the dragging logic.\n   */\n  mode: DragLifecycle;\n  /**\n   * The target element of the drag.\n   */\n  target: HTMLElement;\n  /**\n   * Whether the user is currently grabbing the targeted element or not.\n   */\n  isGrabbing: boolean;\n  /**\n   * Whether the drag currently has inertia or not.\n   */\n  hasInertia: boolean;\n  /**\n   * The current horizontal position in the viewport.\n   */\n  x: number;\n  /**\n   * The current vertical position in the viewport.\n   */\n  y: number;\n  /**\n   * The delta between the current position and the last.\n   */\n  delta: { x: number; y: number };\n  /**\n   * The initial position where the dragging started.\n   */\n  origin: { x: number; y: number };\n  /**\n   * The distance from the current position to the origin.\n   */\n  distance: { x: number; y: number };\n  /**\n   * The final position that will be reached at the end of the inertia.\n   */\n  final: { x: number; y: number };\n}\n\nexport interface DragServiceOptions {\n  dampFactor?: number;\n  dragTreshold?: number;\n}\n\nconst MODES: Record<Uppercase<DragLifecycle>, DragLifecycle> = {\n  START: 'start',\n  DRAG: 'drag',\n  DROP: 'drop',\n  INERTIA: 'inertia',\n  STOP: 'stop',\n};\n\nlet count = 0;\nconst targetEvents = ['pointerdown'];\nconst windowEvents = ['pointerup', 'touchend'];\nconst passiveEventOptions = { passive: true };\n\n/**\n * Get the client value for the given axis.\n */\nfunction getEventPosition(event: MouseEvent | TouchEvent): { x: number; y: number } {\n  // @ts-ignore\n  const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;\n  return {\n    x: eventOrTouch.clientX,\n    y: eventOrTouch.clientY,\n  };\n}\n\n/**\n * Get drag service.\n */\nfunction createDragService(\n  target: HTMLElement,\n  { dampFactor = 0.85, dragTreshold = 10 }: DragServiceOptions = {},\n): DragService {\n  count += 1;\n  const id = `drag-${count}`;\n  let previousEvent;\n\n  /**\n   * Test if we should allow click on links and buttons.\n   */\n  function shouldPreventClick(): boolean {\n    return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;\n  }\n\n  /**\n   * Start the drag.\n   *\n   * @param {number} x The initial horizontal position.\n   * @param {number} y The initial vertical position.\n   * @returns {void}\n   */\n  function start(x: number, y: number) {\n    if (props.isGrabbing) {\n      return;\n    }\n\n    // Reset state\n    props.x = x;\n    props.y = y;\n    props.origin.x = x;\n    props.origin.y = y;\n    props.delta.x = 0;\n    props.delta.y = 0;\n    props.distance.x = 0;\n    props.distance.y = 0;\n    props.final.x = x;\n    props.final.y = y;\n\n    props.mode = MODES.START;\n\n    // Enable grabbing\n    props.isGrabbing = true;\n\n    trigger(props);\n\n    document.addEventListener('touchmove', handleEvent, passiveEventOptions);\n    document.addEventListener('mousemove', handleEvent, passiveEventOptions);\n  }\n\n  /**\n   * Stop the drag, or drop.\n   */\n  function drop() {\n    document.removeEventListener('touchmove', handleEvent);\n    document.removeEventListener('mousemove', handleEvent);\n    props.isGrabbing = false;\n    props.mode = MODES.DROP;\n\n    props.hasInertia = true;\n    props.final.x = inertiaFinalValue(props.x, props.delta.x, dampFactor);\n    props.final.y = inertiaFinalValue(props.y, props.delta.y, dampFactor);\n\n    trigger(props);\n\n    setTimeout(() => {\n      const raf = useRaf();\n      raf.remove(id);\n      raf.add(id, rafHandler);\n    }, 0);\n  }\n\n  /**\n   * Stop the drag.\n   */\n  function stop() {\n    useRaf().remove(id);\n    props.isGrabbing = false;\n    props.hasInertia = false;\n    props.mode = MODES.STOP;\n    trigger(props);\n  }\n\n  /**\n   * Raf service handler.\n   */\n  function rafHandler() {\n    if (!props.isGrabbing) {\n      props.x += props.delta.x;\n      props.y += props.delta.y;\n      props.distance.x = props.x - props.origin.x;\n      props.distance.y = props.y - props.origin.y;\n\n      props.delta.x *= dampFactor;\n      props.delta.y *= dampFactor;\n\n      if (props.mode !== MODES.INERTIA) {\n        props.mode = MODES.INERTIA;\n      }\n\n      trigger(props);\n\n      if (Math.abs(props.delta.x) < 0.1 && Math.abs(props.delta.y) < 0.1) {\n        stop();\n      }\n    }\n  }\n\n  /**\n   * Pointer service handler.\n   */\n  function drag(event: TouchEvent | MouseEvent) {\n    if (props.isGrabbing) {\n      const position = getEventPosition(event);\n      props.x = position.x;\n      props.y = position.y;\n\n      if (previousEvent) {\n        const previousPosition = getEventPosition(previousEvent);\n        props.delta.x = position.x - previousPosition.x;\n        props.delta.y = position.y - previousPosition.y;\n      }\n\n      props.final.x = position.x;\n      props.final.y = position.y;\n      props.distance.x = props.x - props.origin.x;\n      props.distance.y = props.y - props.origin.y;\n\n      if (props.mode !== MODES.DRAG) {\n        props.mode = MODES.DRAG;\n      }\n\n      trigger(props);\n      previousEvent = event;\n    }\n  }\n\n  /**\n   * Handle any event.\n   */\n  function handleEvent(event: MouseEvent | PointerEvent | DragEvent) {\n    switch (event.type) {\n      case 'dragstart':\n        event.preventDefault();\n        break;\n      case 'click':\n        if (shouldPreventClick()) {\n          event.stopImmediatePropagation();\n          event.stopPropagation();\n          event.preventDefault();\n        }\n        break;\n      case 'pointerup':\n      case 'touchend':\n        drop();\n        break;\n      case 'touchmove':\n      case 'mousemove':\n        drag(event);\n        break;\n      default:\n        if (event.button === 0) {\n          start(event.x, event.y);\n        }\n    }\n  }\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      target,\n      mode: undefined,\n      isGrabbing: false,\n      hasInertia: false,\n      x: 0,\n      y: 0,\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      origin: {\n        x: 0,\n        y: 0,\n      },\n      distance: {\n        x: 0,\n        y: 0,\n      },\n      final: {\n        x: 0,\n        y: 0,\n      },\n    } as DragServiceProps,\n    init() {\n      for (const event of targetEvents) {\n        target.addEventListener(event, handleEvent, passiveEventOptions);\n      }\n      for (const event of windowEvents) {\n        window.addEventListener(event, handleEvent, passiveEventOptions);\n      }\n      target.addEventListener('dragstart', handleEvent, { capture: true });\n      target.addEventListener('click', handleEvent, { capture: true });\n    },\n    kill() {\n      for (const event of targetEvents) {\n        target.removeEventListener(event, handleEvent);\n      }\n      for (const event of windowEvents) {\n        window.removeEventListener(event, handleEvent);\n      }\n      target.removeEventListener('dragstart', handleEvent);\n      target.removeEventListener('click', handleEvent);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances: WeakMap<HTMLElement, DragService | undefined> = new WeakMap();\n\n/**\n * Use the drag service.\n *\n * ```js\n * import { useDrag } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useDrag();\n * const draggableElement = document.querySelector('.draggable');\n * add(draggableElement, (props) => {}, { factor: 0.8 });\n * remove(draggableElement);\n * props(draggableElement);\n * ```\n */\nexport default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService {\n  if (!instances.has(target)) {\n    instances.set(target, createDragService(target, options));\n  }\n\n  return instances.get(target);\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/services/key.d.ts

@@ -1,21 +0,0 @@
-import type { ServiceInterface } from './index.js';
-export type KeyService = ServiceInterface<KeyServiceProps>;
-export interface KeyServiceProps {
-    event: KeyboardEvent;
-    triggered: number;
-    direction: 'up' | 'down' | 'none';
-    isUp: boolean;
-    isDown: boolean;
-    ENTER: boolean;
-    SPACE: boolean;
-    TAB: boolean;
-    ESC: boolean;
-    LEFT: boolean;
-    UP: boolean;
-    RIGHT: boolean;
-    DOWN: boolean;
-}
-/**
- * Use the keyboard service.
- */
-export default function useKey(): KeyService;

package/services/key.js

@@ -1,65 +0,0 @@
-import { useService } from "./service.js";
-import keyCodes from "../utils/keyCodes.js";
-function getInitialKeyCodes() {
-  return Object.fromEntries(Object.keys(keyCodes).map((key2) => [key2, false]));
-}
-function createKeyService() {
-  let previousEvent;
-  function updateProps(event) {
-    props.event = event;
-    for (const [name, code] of Object.entries(keyCodes)) {
-      props[name] = code === event.keyCode;
-    }
-    if (!previousEvent) {
-      props.triggered = 0;
-    }
-    if (props.event.type === "keydown" && previousEvent?.type === "keydown") {
-      props.triggered += 1;
-    } else {
-      props.triggered = 1;
-    }
-    previousEvent = props.event;
-    props.direction = props.event.type === "keydown" ? "down" : "up";
-    props.isUp = props.event.type === "keyup";
-    props.isDown = props.event.type === "keydown";
-    return props;
-  }
-  function onKey(event) {
-    trigger(updateProps(event));
-  }
-  const { add, remove, has, trigger, props } = useService({
-    props: {
-      event: null,
-      triggered: 0,
-      isUp: false,
-      isDown: false,
-      direction: "none",
-      ...getInitialKeyCodes()
-    },
-    init() {
-      document.addEventListener("keydown", onKey);
-      document.addEventListener("keyup", onKey);
-    },
-    kill() {
-      document.removeEventListener("keydown", onKey);
-      document.removeEventListener("keyup", onKey);
-    }
-  });
-  return {
-    add,
-    remove,
-    has,
-    props: () => props
-  };
-}
-let key;
-function useKey() {
-  if (!key) {
-    key = createKeyService();
-  }
-  return key;
-}
-export {
-  useKey as default
-};
-//# sourceMappingURL=key.js.map

package/services/key.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/js-toolkit/services/key.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport keyCodes from '../utils/keyCodes.js';\nimport type { ServiceInterface } from './index.js';\n\n/**\n * Get initial key codes.\n */\nfunction getInitialKeyCodes(): Record<keyof typeof keyCodes, false> {\n  return Object.fromEntries(Object.keys(keyCodes).map((key) => [key, false])) as Record<\n    keyof typeof keyCodes,\n    false\n  >;\n}\n\nexport type KeyService = ServiceInterface<KeyServiceProps>;\n\nexport interface KeyServiceProps {\n  event: KeyboardEvent;\n  triggered: number;\n  direction: 'up' | 'down' | 'none';\n  isUp: boolean;\n  isDown: boolean;\n  ENTER: boolean;\n  SPACE: boolean;\n  TAB: boolean;\n  ESC: boolean;\n  LEFT: boolean;\n  UP: boolean;\n  RIGHT: boolean;\n  DOWN: boolean;\n}\n\n/**\n * Create key service.\n */\nfunction createKeyService(): KeyService {\n  let previousEvent;\n\n  /**\n   * Update props.\n   */\n  function updateProps(event: KeyboardEvent): KeyServiceProps {\n    props.event = event;\n\n    for (const [name, code] of Object.entries(keyCodes)) {\n      props[name] = code === event.keyCode;\n    }\n\n    if (!previousEvent) {\n      props.triggered = 0;\n    }\n\n    if (props.event.type === 'keydown' && previousEvent?.type === 'keydown') {\n      props.triggered += 1;\n    } else {\n      props.triggered = 1;\n    }\n\n    previousEvent = props.event;\n\n    props.direction = props.event.type === 'keydown' ? 'down' : 'up';\n    props.isUp = props.event.type === 'keyup';\n    props.isDown = props.event.type === 'keydown';\n\n    return props;\n  }\n\n  /**\n   * Trigger callbacks on keyboard event.\n   */\n  function onKey(event: KeyboardEvent) {\n    trigger(updateProps(event));\n  }\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      event: null,\n      triggered: 0,\n      isUp: false,\n      isDown: false,\n      direction: 'none',\n      ...getInitialKeyCodes(),\n    } as KeyServiceProps,\n    init() {\n      document.addEventListener('keydown', onKey);\n      document.addEventListener('keyup', onKey);\n    },\n    kill() {\n      document.removeEventListener('keydown', onKey);\n      document.removeEventListener('keyup', onKey);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet key;\n\n/**\n * Use the keyboard service.\n */\nexport default function useKey(): KeyService {\n  if (!key) {\n    key = createKeyService();\n  }\n\n  return key;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAMrB,SAAS,qBAA2D;AAClE,SAAO,OAAO,YAAY,OAAO,KAAK,QAAQ,EAAE,IAAI,CAACA,SAAQ,CAACA,MAAK,KAAK,CAAC,CAAC;AAI5E;AAuBA,SAAS,mBAA+B;AACtC,MAAI;AAKJ,WAAS,YAAY,OAAuC;AAC1D,UAAM,QAAQ;AAEd,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACnD,YAAM,IAAI,IAAI,SAAS,MAAM;AAAA,IAC/B;AAEA,QAAI,CAAC,eAAe;AAClB,YAAM,YAAY;AAAA,IACpB;AAEA,QAAI,MAAM,MAAM,SAAS,aAAa,eAAe,SAAS,WAAW;AACvE,YAAM,aAAa;AAAA,IACrB,OAAO;AACL,YAAM,YAAY;AAAA,IACpB;AAEA,oBAAgB,MAAM;AAEtB,UAAM,YAAY,MAAM,MAAM,SAAS,YAAY,SAAS;AAC5D,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,UAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,WAAO;AAAA,EACT;AAKA,WAAS,MAAM,OAAsB;AACnC,YAAQ,YAAY,KAAK,CAAC;AAAA,EAC5B;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,MAAM,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,OAAO;AAAA,MACP,WAAW;AAAA,MACX,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,GAAG,mBAAmB;AAAA,IACxB;AAAA,IACA,OAAO;AACL,eAAS,iBAAiB,WAAW,KAAK;AAC1C,eAAS,iBAAiB,SAAS,KAAK;AAAA,IAC1C;AAAA,IACA,OAAO;AACL,eAAS,oBAAoB,WAAW,KAAK;AAC7C,eAAS,oBAAoB,SAAS,KAAK;AAAA,IAC7C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,SAAsC;AAC3C,MAAI,CAAC,KAAK;AACR,UAAM,iBAAiB;AAAA,EACzB;AAEA,SAAO;AACT;",
-  "names": ["key"]
-}

package/services/load.d.ts

@@ -1,11 +0,0 @@
-import type { ServiceInterface } from './index.js';
-export type LoadService = ServiceInterface<LoadServiceProps>;
-export interface LoadServiceProps {
-    time: DOMHighResTimeStamp;
-}
-/**
- * Use the load service.
- *
- * @returns {LoadService}
- */
-export default function useLoad(): any;

package/services/load.js

@@ -1,38 +0,0 @@
-import { useService } from "./service.js";
-function createLoadService() {
-  function onLoad() {
-    props.time = window.performance.now();
-    trigger(props);
-  }
-  const { add, remove, has, props, trigger } = useService({
-    /**
-     * @type {LoadServiceProps}
-     */
-    props: {
-      time: performance.now()
-    },
-    init() {
-      window.addEventListener("load", onLoad);
-    },
-    kill() {
-      window.removeEventListener("load", onLoad);
-    }
-  });
-  return {
-    add,
-    remove,
-    has,
-    props: () => props
-  };
-}
-let load;
-function useLoad() {
-  if (!load) {
-    load = createLoadService();
-  }
-  return load;
-}
-export {
-  useLoad as default
-};
-//# sourceMappingURL=load.js.map

package/services/load.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../packages/js-toolkit/services/load.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type LoadService = ServiceInterface<LoadServiceProps>;\n\nexport interface LoadServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\n/**\n * Get load service.\n *\n * @returns {LoadService}\n */\nfunction createLoadService() {\n  /**\n   * Trigger on load\n   *\n   * @returns {void}\n   */\n  function onLoad() {\n    // eslint-disable-next-line no-use-before-define\n    props.time = window.performance.now();\n    // eslint-disable-next-line no-use-before-define\n    trigger(props);\n  }\n\n  const { add, remove, has, props, trigger } = useService({\n    /**\n     * @type {LoadServiceProps}\n     */\n    props: {\n      time: performance.now(),\n    },\n    init() {\n      window.addEventListener('load', onLoad);\n    },\n    kill() {\n      window.removeEventListener('load', onLoad);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet load;\n\n/**\n * Use the load service.\n *\n * @returns {LoadService}\n */\nexport default function useLoad() {\n  if (!load) {\n    load = createLoadService();\n  }\n\n  return load;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAc3B,SAAS,oBAAoB;AAM3B,WAAS,SAAS;AAEhB,UAAM,OAAO,OAAO,YAAY,IAAI;AAEpC,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,QAAQ,IAAI,WAAW;AAAA;AAAA;AAAA;AAAA,IAItD,OAAO;AAAA,MACL,MAAM,YAAY,IAAI;AAAA,IACxB;AAAA,IACA,OAAO;AACL,aAAO,iBAAiB,QAAQ,MAAM;AAAA,IACxC;AAAA,IACA,OAAO;AACL,aAAO,oBAAoB,QAAQ,MAAM;AAAA,IAC3C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAOW,SAAR,UAA2B;AAChC,MAAI,CAAC,MAAM;AACT,WAAO,kBAAkB;AAAA,EAC3B;AAEA,SAAO;AACT;",
-  "names": []
-}