@studiometa/js-toolkit 2.2.0 → 2.2.3

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

@@ -31,11 +31,9 @@ var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
 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_noop = require("../noop.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
-var raf = (0, import_raf.default)();
-var noop = () => {
-};
 var PROGRESS_PRECISION = 1e-4;
 var CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
@@ -53,12 +51,9 @@ 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;
+    return import_noop.noopValue;
   }
   if (Array.isArray(ease)) {
     return (0, import_easing.cubicBezier)(...ease);
@@ -119,6 +114,7 @@ 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)) {
@@ -131,7 +127,7 @@ function animate(element, keyframes, options = {}) {
   let endTime = startTime + duration;
   const key = `animate-${id}`;
   id += 1;
-  const { onProgress = noop, onFinish = noop } = options;
+  const { onProgress = import_noop.noop, onFinish = import_noop.noop } = options;
   let isRunning = false;
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map((keyframe, index) => {

package/utils/css/animate.d.ts

@@ -1,21 +1,14 @@
 /**
  * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {import('../math/ease.js').EasingFunction} EasingFn
  * @typedef {[number, number, number, number]} BezierCurve
- * @typedef {{
- *   duration?: number;
- *   easing?: EasingFn|BezierCurve;
- *   onProgress?: (progress: number, easedProgress: number) => void;
- *   onFinish?: (progress: number, easedProgress: number) => void;
- *  }} Options
  * @typedef {TransformProps & {
  *   opacity?: number;
  *   transformOrigin?: string;
- *   easing?: EasingFn|BezierCurve;
+ *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
  *   offset?: number;
  * }} Keyframe
  * @typedef {Keyframe & {
- *   easing: EasingFn;
+ *   easing: import('../math/createEases.js').EasingFunction;
  *   offset: number;
  * }} NormalizedKeyframe
  * @typedef {{
@@ -30,22 +23,30 @@
  * Animate an element.
  * @param   {HTMLElement} element
  * @param   {Keyframe[]} keyframes
- * @param   {Options} options
+ * @param   {{
+ *   duration?: number;
+ *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
+ *   onProgress?: (progress: number, easedProgress: number) => void;
+ *   onFinish?: (progress: number, easedProgress: number) => void;
+ *  }} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: Options): 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 type TransformProps = import('./transform.js').TransformProps;
-export type EasingFn = import('../math/ease.js').EasingFunction;
 export type BezierCurve = [number, number, number, number];
-export type Options = Options;
 export type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
-    easing?: EasingFn | [number, number, number, number];
+    easing?: import('../math/createEases.js').EasingFunction | [number, number, number, number];
     offset?: number;
 };
 export type NormalizedKeyframe = Keyframe & {
-    easing: EasingFn;
+    easing: import('../math/createEases.js').EasingFunction;
     offset: number;
 };
 export type Animate = {

package/utils/css/animate.js

@@ -4,11 +4,9 @@ import isDefined from "../isDefined.js";
 import transform, { TRANSFORM_PROPS } from "./transform.js";
 import useRaf from "../../services/raf.js";
 import { domScheduler as scheduler } from "../scheduler.js";
+import { noop, noopValue } from "../noop.js";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
-const raf = useRaf();
-const noop = () => {
-};
 const PROGRESS_PRECISION = 1e-4;
 const CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
@@ -26,12 +24,9 @@ function getAnimationStepValue(val, getSizeRef) {
   }
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
-function linear(value) {
-  return value;
-}
 function normalizeEase(ease) {
   if (!isDefined(ease)) {
-    return linear;
+    return noopValue;
   }
   if (Array.isArray(ease)) {
     return cubicBezier(...ease);
@@ -92,6 +87,7 @@ function render(element, from, to, progress) {
 }
 function animate(element, keyframes, options = {}) {
   var _a;
+  const raf = useRaf();
   let progressValue = 0;
   let easedProgress = 0;
   if (!running.has(element)) {

package/utils/index.cjs

@@ -56,4 +56,5 @@ __reExport(utils_exports, require("./collide/index.cjs"), module.exports);
 __reExport(utils_exports, require("./math/index.cjs"), module.exports);
 __reExport(utils_exports, require("./string/index.cjs"), module.exports);
 __reExport(utils_exports, require("./scheduler.cjs"), module.exports);
+__reExport(utils_exports, require("./noop.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/index.d.ts

@@ -14,4 +14,5 @@ export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
 export * from "./scheduler.js";
+export * from "./noop.js";
 export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";

package/utils/index.js

@@ -19,6 +19,7 @@ export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
 export * from "./scheduler.js";
+export * from "./noop.js";
 export {
   default2 as debounce,
   default3 as focusTrap,

package/utils/math/createEases.cjs

@@ -0,0 +1,32 @@
+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/utils/math/createEases.js
+var createEases_exports = {};
+__export(createEases_exports, {
+  createEaseInOut: () => createEaseInOut,
+  createEaseOut: () => createEaseOut
+});
+module.exports = __toCommonJS(createEases_exports);
+function createEaseOut(easeIn) {
+  return (progress) => 1 - easeIn(1 - progress);
+}
+function createEaseInOut(easeIn) {
+  return (progress) => progress === 0 ? 0 : progress === 1 ? 1 : progress < 0.5 ? easeIn(progress * 2) / 2 : 1 - easeIn((1 - progress) * 2) / 2;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/math/createEases.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @typedef {(progress: number) => number} EasingFunction
+ */
+/**
+ * Create an out easing function.
+ *
+ * @param   {EasingFunction} easeIn The ease in function.
+ * @returns {EasingFunction}        The out function.
+ */
+export function createEaseOut(easeIn: EasingFunction): EasingFunction;
+/**
+ * Create an in-out easing function.
+ *
+ * @param  {EasingFunction} easeIn The ease in function.
+ * @returns {EasingFunction}        The in-out function.
+ */
+export function createEaseInOut(easeIn: EasingFunction): EasingFunction;
+export type EasingFunction = (progress: number) => number;

package/utils/math/createEases.js

@@ -0,0 +1,10 @@
+function createEaseOut(easeIn) {
+  return (progress) => 1 - easeIn(1 - progress);
+}
+function createEaseInOut(easeIn) {
+  return (progress) => progress === 0 ? 0 : progress === 1 ? 1 : progress < 0.5 ? easeIn(progress * 2) / 2 : 1 - easeIn((1 - progress) * 2) / 2;
+}
+export {
+  createEaseInOut,
+  createEaseOut
+};