@studiometa/js-toolkit 2.2.2 → 2.4.0

package/services/scroll.cjs

@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/services/scroll.js
 var scroll_exports = {};
@@ -30,12 +25,41 @@ __export(scroll_exports, {
   default: () => useScroll
 });
 module.exports = __toCommonJS(scroll_exports);
-var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_service = require("./service.cjs");
 var import_debounce = __toESM(require("../utils/debounce.cjs"), 1);
-var Scroll = class extends import_Service.default {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "props", {
+function createScrollService() {
+  function updateProps() {
+    const yLast = props.y;
+    const xLast = props.x;
+    if (window.pageYOffset !== props.y) {
+      props.y = window.pageYOffset;
+    }
+    if (window.pageXOffset !== props.x) {
+      props.x = window.pageXOffset;
+    }
+    props.changed.x = props.x !== xLast;
+    props.changed.y = props.y !== yLast;
+    props.last.x = xLast;
+    props.last.y = yLast;
+    props.delta.x = props.x - xLast;
+    props.delta.y = props.y - yLast;
+    props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    props.progress.x = props.max.x === 0 ? 1 : props.x / props.max.x;
+    props.progress.y = props.max.y === 0 ? 1 : props.y / props.max.y;
+    props.direction.x = props.x > xLast ? "RIGHT" : props.x < xLast ? "LEFT" : "NONE";
+    props.direction.y = props.y > yLast ? "DOWN" : props.y < yLast ? "UP" : "NONE";
+    return props;
+  }
+  const onScrollDebounced = (0, import_debounce.default)(() => {
+    trigger(updateProps());
+  }, 100);
+  function onScroll() {
+    trigger(updateProps());
+    onScrollDebounced();
+  }
+  const { add, remove, has, props, trigger } = (0, import_service.useService)({
+    props: {
       x: window.pageXOffset,
       y: window.pageYOffset,
       changed: {
@@ -62,71 +86,25 @@ var Scroll = class extends import_Service.default {
         x: "NONE",
         y: "NONE"
       }
-    });
-  }
-  init() {
-    this.updateProps();
-    document.addEventListener("scroll", this, { passive: true, capture: true });
-    return this;
-  }
-  get debouncedHandler() {
-    const debounced = (0, import_debounce.default)(() => {
-      this.updateProps();
-      this.trigger(this.props);
-    }, 100);
-    Object.defineProperty(this, "debouncedHandler", {
-      value: debounced
-    });
-    return debounced;
-  }
-  handleEvent() {
-    this.updateProps();
-    this.trigger(this.props);
-    this.debouncedHandler();
-  }
-  kill() {
-    document.removeEventListener("scroll", this);
-    return this;
-  }
-  updateProps() {
-    const yLast = this.props.y;
-    const xLast = this.props.x;
-    if (window.pageYOffset !== this.props.y) {
-      this.props.y = window.pageYOffset;
+    },
+    init() {
+      document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    },
+    kill() {
+      document.removeEventListener("scroll", onScroll);
     }
-    if (window.pageXOffset !== this.props.x) {
-      this.props.x = window.pageXOffset;
-    }
-    this.props.changed.x = this.props.x !== xLast;
-    this.props.changed.y = this.props.y !== yLast;
-    this.props.last.x = xLast;
-    this.props.last.y = yLast;
-    this.props.delta.x = this.props.x - xLast;
-    this.props.delta.y = this.props.y - yLast;
-    this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
-    this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
-    this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
-    this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
-    this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
-    this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
-    return this.props;
-  }
-};
-var instance;
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
+}
 var scroll;
 function useScroll() {
   if (!scroll) {
-    if (!instance) {
-      instance = new Scroll();
-    }
-    scroll = {
-      add: instance.add.bind(instance),
-      remove: instance.remove.bind(instance),
-      has: instance.has.bind(instance),
-      props() {
-        return instance.props;
-      }
-    };
+    scroll = createScrollService();
   }
   return scroll;
 }

package/services/scroll.js

@@ -1,15 +1,38 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import Service from "./Service.js";
+import { useService } from "./service.js";
 import debounce from "../utils/debounce.js";
-class Scroll extends Service {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "props", {
+function createScrollService() {
+  function updateProps() {
+    const yLast = props.y;
+    const xLast = props.x;
+    if (window.pageYOffset !== props.y) {
+      props.y = window.pageYOffset;
+    }
+    if (window.pageXOffset !== props.x) {
+      props.x = window.pageXOffset;
+    }
+    props.changed.x = props.x !== xLast;
+    props.changed.y = props.y !== yLast;
+    props.last.x = xLast;
+    props.last.y = yLast;
+    props.delta.x = props.x - xLast;
+    props.delta.y = props.y - yLast;
+    props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    props.progress.x = props.max.x === 0 ? 1 : props.x / props.max.x;
+    props.progress.y = props.max.y === 0 ? 1 : props.y / props.max.y;
+    props.direction.x = props.x > xLast ? "RIGHT" : props.x < xLast ? "LEFT" : "NONE";
+    props.direction.y = props.y > yLast ? "DOWN" : props.y < yLast ? "UP" : "NONE";
+    return props;
+  }
+  const onScrollDebounced = debounce(() => {
+    trigger(updateProps());
+  }, 100);
+  function onScroll() {
+    trigger(updateProps());
+    onScrollDebounced();
+  }
+  const { add, remove, has, props, trigger } = useService({
+    props: {
       x: window.pageXOffset,
       y: window.pageYOffset,
       changed: {
@@ -36,71 +59,25 @@ class Scroll extends Service {
         x: "NONE",
         y: "NONE"
       }
-    });
-  }
-  init() {
-    this.updateProps();
-    document.addEventListener("scroll", this, { passive: true, capture: true });
-    return this;
-  }
-  get debouncedHandler() {
-    const debounced = debounce(() => {
-      this.updateProps();
-      this.trigger(this.props);
-    }, 100);
-    Object.defineProperty(this, "debouncedHandler", {
-      value: debounced
-    });
-    return debounced;
-  }
-  handleEvent() {
-    this.updateProps();
-    this.trigger(this.props);
-    this.debouncedHandler();
-  }
-  kill() {
-    document.removeEventListener("scroll", this);
-    return this;
-  }
-  updateProps() {
-    const yLast = this.props.y;
-    const xLast = this.props.x;
-    if (window.pageYOffset !== this.props.y) {
-      this.props.y = window.pageYOffset;
-    }
-    if (window.pageXOffset !== this.props.x) {
-      this.props.x = window.pageXOffset;
+    },
+    init() {
+      document.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    },
+    kill() {
+      document.removeEventListener("scroll", onScroll);
     }
-    this.props.changed.x = this.props.x !== xLast;
-    this.props.changed.y = this.props.y !== yLast;
-    this.props.last.x = xLast;
-    this.props.last.y = yLast;
-    this.props.delta.x = this.props.x - xLast;
-    this.props.delta.y = this.props.y - yLast;
-    this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
-    this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
-    this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
-    this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
-    this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
-    this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
-    return this.props;
-  }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
 }
-let instance;
 let scroll;
 function useScroll() {
   if (!scroll) {
-    if (!instance) {
-      instance = new Scroll();
-    }
-    scroll = {
-      add: instance.add.bind(instance),
-      remove: instance.remove.bind(instance),
-      has: instance.has.bind(instance),
-      props() {
-        return instance.props;
-      }
-    };
+    scroll = createScrollService();
   }
   return scroll;
 }

package/services/service.cjs

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/services/service.js
+var service_exports = {};
+__export(service_exports, {
+  useService: () => useService
+});
+module.exports = __toCommonJS(service_exports);
+function useService(options) {
+  const callbacks = /* @__PURE__ */ new Map();
+  let isInit = false;
+  const { init, kill, props } = options;
+  function has(key) {
+    return callbacks.has(key);
+  }
+  function get(key) {
+    return callbacks.get(key);
+  }
+  function add(key, callback) {
+    if (has(key)) {
+      console.warn(`The key \`${key}\` has already been added.`);
+      return;
+    }
+    if (callbacks.size === 0 && !isInit) {
+      init();
+      isInit = true;
+    }
+    callbacks.set(key, callback);
+  }
+  function remove(key) {
+    callbacks.delete(key);
+    if (callbacks.size === 0 && isInit) {
+      kill();
+      isInit = false;
+    }
+  }
+  function trigger(p) {
+    callbacks.forEach(function forEachCallback(callback) {
+      callback(p);
+    });
+  }
+  return {
+    callbacks,
+    props,
+    add,
+    remove,
+    has,
+    get,
+    trigger
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/services/service.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Use a service.
+ * @template {Record<string, any>} T
+ * @param   {{ init: () => void, kill: () => void, props: T }} options
+ */
+export function useService<T extends Record<string, any>>(options: {
+    init: () => void;
+    kill: () => void;
+    props: T;
+}): {
+    callbacks: Map<string, (props: T) => any>;
+    props: T;
+    add: (key: string, callback: (props: T) => any) => void;
+    remove: (key: string) => void;
+    has: (key: string) => boolean;
+    get: (key: string) => (props: T) => any;
+    trigger: (p: T) => void;
+};

package/services/service.js

@@ -0,0 +1,46 @@
+function useService(options) {
+  const callbacks = /* @__PURE__ */ new Map();
+  let isInit = false;
+  const { init, kill, props } = options;
+  function has(key) {
+    return callbacks.has(key);
+  }
+  function get(key) {
+    return callbacks.get(key);
+  }
+  function add(key, callback) {
+    if (has(key)) {
+      console.warn(`The key \`${key}\` has already been added.`);
+      return;
+    }
+    if (callbacks.size === 0 && !isInit) {
+      init();
+      isInit = true;
+    }
+    callbacks.set(key, callback);
+  }
+  function remove(key) {
+    callbacks.delete(key);
+    if (callbacks.size === 0 && isInit) {
+      kill();
+      isInit = false;
+    }
+  }
+  function trigger(p) {
+    callbacks.forEach(function forEachCallback(callback) {
+      callback(p);
+    });
+  }
+  return {
+    callbacks,
+    props,
+    add,
+    remove,
+    has,
+    get,
+    trigger
+  };
+}
+export {
+  useService
+};

package/utils/css/animate.cjs

@@ -25,17 +25,13 @@ __export(animate_exports, {
   animate: () => animate
 });
 module.exports = __toCommonJS(animate_exports);
-var import_easing = require("@motionone/easing");
 var import_math = require("../math/index.cjs");
-var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
+var import_is = require("../is.cjs");
 var import_transform = __toESM(require("./transform.cjs"), 1);
-var import_raf = __toESM(require("../../services/raf.cjs"), 1);
 var import_scheduler = require("../scheduler.cjs");
+var import_tween = require("../tween.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
-var noop = () => {
-};
-var PROGRESS_PRECISION = 1e-4;
 var CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
@@ -44,7 +40,7 @@ var CSSUnitConverter = {
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
 function getAnimationStepValue(val, getSizeRef) {
-  if (typeof val === "number") {
+  if ((0, import_is.isNumber)(val)) {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
@@ -52,18 +48,6 @@ function getAnimationStepValue(val, getSizeRef) {
   }
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
-function linear(value) {
-  return value;
-}
-function normalizeEase(ease) {
-  if (!(0, import_isDefined.default)(ease)) {
-    return linear;
-  }
-  if (Array.isArray(ease)) {
-    return (0, import_easing.cubicBezier)(...ease);
-  }
-  return ease;
-}
 var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
 var widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 var heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
@@ -91,18 +75,18 @@ function render(element, from, to, progress) {
   import_scheduler.domScheduler.read(function renderRead() {
     var _a, _b;
     let opacity = false;
-    if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
+    if ((0, import_is.isDefined)(from.opacity) || (0, import_is.isDefined)(to.opacity)) {
       opacity = (0, import_math.map)(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
     } else if (element.style.opacity) {
       opacity = "";
     }
     let transformOrigin = false;
-    if ((0, import_isDefined.default)(to.transformOrigin)) {
+    if ((0, import_is.isDefined)(to.transformOrigin)) {
       transformOrigin = to.transformOrigin;
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
-    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
+    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_is.isDefined)(from[name]) || (0, import_is.isDefined)(to[name])).map((name) => {
       return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
     }));
     import_scheduler.domScheduler.write(function renderWrite() {
@@ -117,91 +101,42 @@ function render(element, from, to, progress) {
   });
 }
 function animate(element, keyframes, options = {}) {
-  var _a;
-  const raf = (0, import_raf.default)();
-  let progressValue = 0;
-  let easedProgress = 0;
-  if (!running.has(element)) {
-    running.set(element, /* @__PURE__ */ new Map());
-  }
-  const ease = normalizeEase(options.easing);
-  let duration = (_a = options.duration) != null ? _a : 1;
-  duration *= 1e3;
-  let startTime = performance.now();
-  let endTime = startTime + duration;
-  const key = `animate-${id}`;
-  id += 1;
-  const { onProgress = noop, onFinish = noop } = options;
-  let isRunning = false;
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map((keyframe, index) => {
-    var _a2;
+    var _a;
     return {
       ...keyframe,
-      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
-      easing: normalizeEase(keyframe.easing)
+      offset: (_a = keyframe.offset) != null ? _a : index / keyframesCount,
+      easing: (0, import_tween.normalizeEase)(keyframe.easing)
     };
   });
-  function pause() {
-    isRunning = false;
-    raf.remove(key);
+  if (!running.has(element)) {
+    running.set(element, /* @__PURE__ */ new Map());
   }
-  function progress(newProgress) {
-    if (typeof newProgress === "undefined") {
-      return progressValue;
-    }
-    progressValue = newProgress;
-    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
-      progressValue = 1;
-      pause();
-      import_scheduler.domScheduler.afterWrite(() => onFinish(progressValue, easedProgress));
-    }
-    easedProgress = ease(progressValue);
+  const key = `animate-${id}`;
+  id += 1;
+  function callback(progress) {
     let toIndex = 0;
-    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= progress && normalizedKeyframes[toIndex].offset !== 1) {
       toIndex += 1;
     }
-    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
-    onProgress(progressValue, easedProgress);
-    return progressValue;
-  }
-  function tick(props) {
-    if (!isRunning) {
-      raf.remove(key);
-      return;
-    }
-    progress((0, import_math.clamp01)((0, import_math.map)(props.time, startTime, endTime, 0, 1)));
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);
   }
-  function start() {
-    const runningKeys = running.get(element);
-    runningKeys.forEach((runningPause, runningKey) => {
-      runningPause();
-      runningKeys.delete(runningKey);
-    });
-    runningKeys.set(key, pause);
-    running.set(element, runningKeys);
-    startTime = performance.now();
-    endTime = startTime + duration;
-    progressValue = 0;
-    easedProgress = 0;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  function play() {
-    if (isRunning) {
-      return;
+  const controls = (0, import_tween.tween)(callback, {
+    ...options,
+    onStart() {
+      if ((0, import_is.isFunction)(options.onStart)) {
+        options.onStart();
+      }
+      const runningKeys = running.get(element);
+      runningKeys.forEach((runningPause, runningKey) => {
+        runningPause();
+        runningKeys.delete(runningKey);
+      });
+      runningKeys.set(key, controls.pause);
+      running.set(element, runningKeys);
     }
-    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
-    endTime = startTime + duration;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  return {
-    start,
-    finish: () => progress(1),
-    pause,
-    play,
-    progress
-  };
+  });
+  return controls;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -1,10 +1,9 @@
 /**
  * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {[number, number, number, number]} BezierCurve
  * @typedef {TransformProps & {
  *   opacity?: number;
  *   transformOrigin?: string;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
+ *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;
  *   offset?: number;
  * }} Keyframe
  * @typedef {Keyframe & {
@@ -23,26 +22,15 @@
  * Animate an element.
  * @param   {HTMLElement} element
  * @param   {Keyframe[]} keyframes
- * @param   {{
- *   duration?: number;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
- *   onProgress?: (progress: number, easedProgress: number) => void;
- *   onFinish?: (progress: number, easedProgress: number) => void;
- *  }} [options]
+ * @param   {import('../tween.js').TweenOptions} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: {
-    duration?: number;
-    easing?: import('../math/createEases.js').EasingFunction | BezierCurve;
-    onProgress?: (progress: number, easedProgress: number) => void;
-    onFinish?: (progress: number, easedProgress: number) => void;
-}): Animate;
+export function animate(element: HTMLElement, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
 export type TransformProps = import('./transform.js').TransformProps;
-export type BezierCurve = [number, number, number, number];
 export type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
-    easing?: import('../math/createEases.js').EasingFunction | [number, number, number, number];
+    easing?: import('../math/createEases.js').EasingFunction | import('../tween.js').BezierCurve;
     offset?: number;
 };
 export type NormalizedKeyframe = Keyframe & {