@studiometa/js-toolkit 2.1.0 → 2.2.0

package/Base/index.cjs

@@ -172,12 +172,12 @@ var Base = class extends EventTarget {
     }
     this.$emit(method, ...args);
     if (typeof this[method] !== "function") {
-      return;
+      return null;
     }
-    this[method].call(this, ...args);
     if (isDev) {
       this.__debug(method, this, ...args);
     }
+    return this[method].call(this, ...args);
   }
   __hasEvent(event) {
     const eventHandlers = this.__eventHandlers.get(event);

package/Base/index.d.ts

@@ -160,7 +160,7 @@ export default class Base extends EventTarget {
      * @private
      * @param {string} method
      * @param {any[]} args
-     * @returns {void}
+     * @returns {any}
      */
     private __callMethod;
     /**

package/Base/index.js

@@ -146,12 +146,12 @@ class Base extends EventTarget {
     }
     this.$emit(method, ...args);
     if (typeof this[method] !== "function") {
-      return;
+      return null;
     }
-    this[method].call(this, ...args);
     if (isDev) {
       this.__debug(method, this, ...args);
     }
+    return this[method].call(this, ...args);
   }
   __hasEvent(event) {
     const eventHandlers = this.__eventHandlers.get(event);

package/Base/managers/EventsManager.cjs

@@ -35,21 +35,34 @@ module.exports = __toCommonJS(EventsManager_exports);
 var import_getAllProperties = __toESM(require("../../utils/object/getAllProperties.cjs"), 1);
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_RefsManager = require("./RefsManager.cjs");
+var names = /* @__PURE__ */ new Map();
 function normalizeName(name) {
-  return name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim();
+  if (!names.has(name)) {
+    names.set(name, name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim());
+  }
+  return names.get(name);
 }
+var eventNames = /* @__PURE__ */ new Map();
 function normalizeEventName(name) {
-  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, "");
+  if (!eventNames.has(name)) {
+    eventNames.set(name, name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, ""));
+  }
+  return eventNames.get(name);
+}
+var regexes = /* @__PURE__ */ new Map();
+function getRegex(regex) {
+  if (!regexes.has(regex)) {
+    regexes.set(regex, new RegExp(regex));
+  }
+  return regexes.get(regex);
 }
 function __getEventNameByMethod(that, method, name = "") {
-  const normalizedName = normalizeName(name);
-  const regex = new RegExp(`^on${normalizedName}([A-Z].*)$`);
+  const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);
   const [, event] = method.match(regex);
   return normalizeEventName(event);
 }
 function __getEventMethodsByName(that, name = "") {
-  const normalizedName = normalizeName(name);
-  const regex = new RegExp(`^on${normalizedName}[A-Z].*$`);
+  const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);
   const key = regex.toString();
   let methods = that.__methodsCache.get(key);
   if (!methods) {

package/Base/managers/EventsManager.d.ts

@@ -1,7 +1,3 @@
-/**
- * @typedef {import('../index.js').default} Base
- * @typedef {import('./ChildrenManager.js').default} ChildrenManager
- */
 /**
  * Normalize the given name to PascalCase, such as:
  *

package/Base/managers/EventsManager.js

@@ -7,21 +7,34 @@ var __publicField = (obj, key, value) => {
 import getAllProperties from "../../utils/object/getAllProperties.js";
 import AbstractManager from "./AbstractManager.js";
 import { normalizeRefName } from "./RefsManager.js";
+const names = /* @__PURE__ */ new Map();
 function normalizeName(name) {
-  return name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim();
+  if (!names.has(name)) {
+    names.set(name, name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim());
+  }
+  return names.get(name);
 }
+const eventNames = /* @__PURE__ */ new Map();
 function normalizeEventName(name) {
-  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, "");
+  if (!eventNames.has(name)) {
+    eventNames.set(name, name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, ""));
+  }
+  return eventNames.get(name);
+}
+const regexes = /* @__PURE__ */ new Map();
+function getRegex(regex) {
+  if (!regexes.has(regex)) {
+    regexes.set(regex, new RegExp(regex));
+  }
+  return regexes.get(regex);
 }
 function __getEventNameByMethod(that, method, name = "") {
-  const normalizedName = normalizeName(name);
-  const regex = new RegExp(`^on${normalizedName}([A-Z].*)$`);
+  const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);
   const [, event] = method.match(regex);
   return normalizeEventName(event);
 }
 function __getEventMethodsByName(that, name = "") {
-  const normalizedName = normalizeName(name);
-  const regex = new RegExp(`^on${normalizedName}[A-Z].*$`);
+  const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);
   const key = regex.toString();
   let methods = that.__methodsCache.get(key);
   if (!methods) {

package/Base/managers/OptionsManager.cjs

@@ -76,12 +76,12 @@ function __register(that, name, config) {
 }
 var OptionsManager = class extends import_AbstractManager.default {
   constructor(base) {
+    var _a, _b;
     super(base);
     __publicField(this, "__values", {});
     __publicField(this, "name", "Base");
     __publicField(this, "debug", false);
     __publicField(this, "log", false);
-    var _a, _b;
     this.__hideProperties(["__values", "__defaultValues"]);
     const schema = this.__config.options || {};
     this.name = this.__config.name;

package/Base/managers/OptionsManager.js

@@ -49,12 +49,12 @@ function __register(that, name, config) {
 }
 class OptionsManager extends AbstractManager {
   constructor(base) {
+    var _a, _b;
     super(base);
     __publicField(this, "__values", {});
     __publicField(this, "name", "Base");
     __publicField(this, "debug", false);
     __publicField(this, "log", false);
-    var _a, _b;
     this.__hideProperties(["__values", "__defaultValues"]);
     const schema = this.__config.options || {};
     this.name = this.__config.name;

package/Base/managers/ServicesManager.cjs

@@ -79,7 +79,7 @@ var ServicesManager = class extends import_AbstractManager.default {
     const { add } = this.__services[service]();
     const self = this;
     function serviceHandler(...args) {
-      self.__base.__callMethod(service, ...args);
+      return self.__base.__callMethod(service, ...args);
     }
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);

package/Base/managers/ServicesManager.js

@@ -53,7 +53,7 @@ class ServicesManager extends AbstractManager {
     const { add } = this.__services[service]();
     const self = this;
     function serviceHandler(...args) {
-      self.__base.__callMethod(service, ...args);
+      return self.__base.__callMethod(service, ...args);
     }
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);

package/decorators/withScrolledInView.cjs

@@ -32,6 +32,7 @@ __export(withScrolledInView_exports, {
 module.exports = __toCommonJS(withScrolledInView_exports);
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
 var import_utils = require("../utils/index.cjs");
+var scheduler = (0, import_utils.useScheduler)(["update", "render"]);
 function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends (0, import_withMountWhenInView.default)(BaseClass, options) {
@@ -83,7 +84,14 @@ function withScrolledInView(BaseClass, options = {}) {
           if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
             this.$services.disable("ticked");
           }
-          this.__callMethod("scrolledInView", this.__props);
+          scheduler.update(() => {
+            const renderFn = this.__callMethod("scrolledInView", this.__props);
+            if ((0, import_utils.isFunction)(renderFn)) {
+              scheduler.render(() => {
+                renderFn(this.__props);
+              });
+            }
+          });
         }
       };
       this.$on("before-mounted", () => {

package/decorators/withScrolledInView.js

@@ -5,7 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import withMountWhenInView from "./withMountWhenInView.js";
-import { damp, clamp, clamp01, getOffsetSizes, isFunction } from "../utils/index.js";
+import { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from "../utils/index.js";
+const scheduler = useScheduler(["update", "render"]);
 function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends withMountWhenInView(BaseClass, options) {
@@ -57,7 +58,14 @@ function withScrolledInView(BaseClass, options = {}) {
           if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
             this.$services.disable("ticked");
           }
-          this.__callMethod("scrolledInView", this.__props);
+          scheduler.update(() => {
+            const renderFn = this.__callMethod("scrolledInView", this.__props);
+            if (isFunction(renderFn)) {
+              scheduler.render(() => {
+                renderFn(this.__props);
+              });
+            }
+          });
         }
       };
       this.$on("before-mounted", () => {

package/decorators/withVue2.cjs

@@ -31,9 +31,9 @@ var withVue2_default = (BaseClass, Vue) => {
   var _a, _b, _c;
   return _c = class extends BaseClass {
     constructor(element) {
+      var _a2;
       super(element);
       __publicField(this, "$vue");
-      var _a2;
       const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
       if (!vueConfig) {
         throw new Error("[withVue] You must define a `vueConfig` object.");

package/decorators/withVue2.js

@@ -8,9 +8,9 @@ var withVue2_default = (BaseClass, Vue) => {
   var _a, _b, _c;
   return _c = class extends BaseClass {
     constructor(element) {
+      var _a2;
       super(element);
       __publicField(this, "$vue");
-      var _a2;
       const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
       if (!vueConfig) {
         throw new Error("[withVue] You must define a `vueConfig` object.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -39,7 +39,7 @@
     "toolkit"
   ],
   "dependencies": {
-    "@motionone/easing": "^10.8.0",
+    "@motionone/easing": "^10.9.0",
     "deepmerge": "^4.2.2"
   }
 }

package/services/Service.cjs

@@ -29,9 +29,9 @@ __export(Service_exports, {
 module.exports = __toCommonJS(Service_exports);
 var Service = class {
   constructor() {
+    __publicField(this, "callbacks", /* @__PURE__ */ new Map());
+    __publicField(this, "isInit", false);
     __publicField(this, "props");
-    this.callbacks = /* @__PURE__ */ new Map();
-    this.isInit = false;
   }
   updateProps(...args) {
     this.props = args;

package/services/Service.d.ts

@@ -2,7 +2,15 @@
  * Service abstract class
  */
 export default class Service {
-    callbacks: Map<any, any>;
+    /**
+     * Map containing the callbacks.
+     * @type {Map<string, Function>}
+     */
+    callbacks: Map<string, Function>;
+    /**
+     * State flag.
+     * @type {boolean}
+     */
     isInit: boolean;
     /**
      * @type {unknown}

package/services/Service.js

@@ -6,9 +6,9 @@ var __publicField = (obj, key, value) => {
 };
 class Service {
   constructor() {
+    __publicField(this, "callbacks", /* @__PURE__ */ new Map());
+    __publicField(this, "isInit", false);
     __publicField(this, "props");
-    this.callbacks = /* @__PURE__ */ new Map();
-    this.isInit = false;
   }
   updateProps(...args) {
     this.props = args;

package/services/raf.cjs

@@ -32,6 +32,9 @@ __export(raf_exports, {
 module.exports = __toCommonJS(raf_exports);
 var import_Service = __toESM(require("./Service.cjs"), 1);
 var import_nextFrame = require("../utils/nextFrame.cjs");
+var import_scheduler = require("../utils/scheduler.cjs");
+var import_isFunction = __toESM(require("../utils/isFunction.cjs"), 1);
+var scheduler = (0, import_scheduler.useScheduler)(["update", "render"]);
 var Raf = class extends import_Service.default {
   constructor() {
     super(...arguments);
@@ -63,6 +66,19 @@ var Raf = class extends import_Service.default {
     this.props.time = window.performance.now();
     return this.props;
   }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      scheduler.update(function rafUpdate() {
+        const render = callback(...args);
+        if ((0, import_isFunction.default)(render)) {
+          scheduler.render(function rafRender() {
+            render(...args);
+          });
+        }
+      });
+    });
+    return this;
+  }
 };
 var instance;
 var raf;

package/services/raf.js

@@ -6,6 +6,9 @@ var __publicField = (obj, key, value) => {
 };
 import Service from "./Service.js";
 import { getRaf, getCancelRaf } from "../utils/nextFrame.js";
+import { useScheduler } from "../utils/scheduler.js";
+import isFunction from "../utils/isFunction.js";
+const scheduler = useScheduler(["update", "render"]);
 class Raf extends Service {
   constructor() {
     super(...arguments);
@@ -37,6 +40,19 @@ class Raf extends Service {
     this.props.time = window.performance.now();
     return this.props;
   }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      scheduler.update(function rafUpdate() {
+        const render = callback(...args);
+        if (isFunction(render)) {
+          scheduler.render(function rafRender() {
+            render(...args);
+          });
+        }
+      });
+    });
+    return this;
+  }
 }
 let instance;
 let raf;

package/utils/css/animate.cjs

@@ -29,26 +29,29 @@ var import_easing = require("@motionone/easing");
 var import_math = require("../math/index.cjs");
 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 id = 0;
 var running = /* @__PURE__ */ new WeakMap();
+var raf = (0, import_raf.default)();
 var noop = () => {
 };
 var PROGRESS_PRECISION = 1e-4;
 var CSSUnitConverter = {
-  "%": (value, sizeRef) => value * sizeRef / 100,
+  "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
   vw: (value) => value * window.innerWidth / 100,
   vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
-function getAnimationStepValue(val, sizeRef) {
+function getAnimationStepValue(val, getSizeRef) {
   if (typeof val === "number") {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
     return val[0];
   }
-  return CSSUnitConverter[val[1]](val[0], sizeRef);
+  return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 function linear(value) {
   return value;
@@ -62,7 +65,7 @@ function normalizeEase(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 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");
 var generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
@@ -85,21 +88,34 @@ var transformRenderStrategies = {
   rotateZ: degreesRenderStrategy
 };
 function render(element, from, to, progress) {
-  var _a, _b;
   const stepProgress = to.easing((0, import_math.map)(progress, from.offset, to.offset, 0, 1));
-  if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
-    element.style.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) {
-    element.style.opacity = "";
-  }
-  if ((0, import_isDefined.default)(to.transformOrigin)) {
-    element.style.transformOrigin = to.transformOrigin;
-  } else if (element.style.transformOrigin) {
-    element.style.transformOrigin = "";
-  }
-  (0, import_transform.default)(element, Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
-    return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
-  })));
+  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)) {
+      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)) {
+      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) => {
+      return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+    }));
+    import_scheduler.domScheduler.write(function renderWrite() {
+      if (opacity !== false) {
+        element.style.opacity = opacity;
+      }
+      if (transformOrigin !== false) {
+        element.style.transformOrigin = transformOrigin;
+      }
+      (0, import_transform.default)(element, props);
+    });
+  });
 }
 function animate(element, keyframes, options = {}) {
   var _a;
@@ -128,6 +144,7 @@ function animate(element, keyframes, options = {}) {
   });
   function pause() {
     isRunning = false;
+    raf.remove(key);
   }
   function progress(newProgress) {
     if (typeof newProgress === "undefined") {
@@ -137,7 +154,7 @@ function animate(element, keyframes, options = {}) {
     if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
       progressValue = 1;
       pause();
-      requestAnimationFrame(() => onFinish(progressValue, easedProgress));
+      import_scheduler.domScheduler.afterWrite(() => onFinish(progressValue, easedProgress));
     }
     easedProgress = ease(progressValue);
     let toIndex = 0;
@@ -148,12 +165,12 @@ function animate(element, keyframes, options = {}) {
     onProgress(progressValue, easedProgress);
     return progressValue;
   }
-  function tick(time) {
+  function tick(props) {
     if (!isRunning) {
+      raf.remove(key);
       return;
     }
-    progress((0, import_math.clamp01)((0, import_math.map)(time, startTime, endTime, 0, 1)));
-    requestAnimationFrame(tick);
+    progress((0, import_math.clamp01)((0, import_math.map)(props.time, startTime, endTime, 0, 1)));
   }
   function start() {
     const runningKeys = running.get(element);
@@ -168,7 +185,7 @@ function animate(element, keyframes, options = {}) {
     progressValue = 0;
     easedProgress = 0;
     isRunning = true;
-    requestAnimationFrame(tick);
+    raf.add(key, tick);
   }
   function play() {
     if (isRunning) {
@@ -177,7 +194,7 @@ function animate(element, keyframes, options = {}) {
     startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
     endTime = startTime + duration;
     isRunning = true;
-    requestAnimationFrame(tick);
+    raf.add(key, tick);
   }
   return {
     start,

package/utils/css/animate.js

@@ -2,26 +2,29 @@ import { cubicBezier } from "@motionone/easing";
 import { lerp, map, clamp01 } from "../math/index.js";
 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";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
+const raf = useRaf();
 const noop = () => {
 };
 const PROGRESS_PRECISION = 1e-4;
 const CSSUnitConverter = {
-  "%": (value, sizeRef) => value * sizeRef / 100,
+  "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
   vw: (value) => value * window.innerWidth / 100,
   vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
-function getAnimationStepValue(val, sizeRef) {
+function getAnimationStepValue(val, getSizeRef) {
   if (typeof val === "number") {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
     return val[0];
   }
-  return CSSUnitConverter[val[1]](val[0], sizeRef);
+  return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 function linear(value) {
   return value;
@@ -35,7 +38,7 @@ function normalizeEase(ease) {
   }
   return ease;
 }
-const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, element[sizeRef]), progress);
+const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
 const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
 const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
@@ -58,21 +61,34 @@ const transformRenderStrategies = {
   rotateZ: degreesRenderStrategy
 };
 function render(element, from, to, progress) {
-  var _a, _b;
   const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
-  if (isDefined(from.opacity) || isDefined(to.opacity)) {
-    element.style.opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
-  } else if (element.style.opacity) {
-    element.style.opacity = "";
-  }
-  if (isDefined(to.transformOrigin)) {
-    element.style.transformOrigin = to.transformOrigin;
-  } else if (element.style.transformOrigin) {
-    element.style.transformOrigin = "";
-  }
-  transform(element, Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
-    return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
-  })));
+  scheduler.read(function renderRead() {
+    var _a, _b;
+    let opacity = false;
+    if (isDefined(from.opacity) || isDefined(to.opacity)) {
+      opacity = 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 (isDefined(to.transformOrigin)) {
+      transformOrigin = to.transformOrigin;
+    } else if (element.style.transformOrigin) {
+      transformOrigin = "";
+    }
+    const props = Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
+      return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+    }));
+    scheduler.write(function renderWrite() {
+      if (opacity !== false) {
+        element.style.opacity = opacity;
+      }
+      if (transformOrigin !== false) {
+        element.style.transformOrigin = transformOrigin;
+      }
+      transform(element, props);
+    });
+  });
 }
 function animate(element, keyframes, options = {}) {
   var _a;
@@ -101,6 +117,7 @@ function animate(element, keyframes, options = {}) {
   });
   function pause() {
     isRunning = false;
+    raf.remove(key);
   }
   function progress(newProgress) {
     if (typeof newProgress === "undefined") {
@@ -110,7 +127,7 @@ function animate(element, keyframes, options = {}) {
     if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
       progressValue = 1;
       pause();
-      requestAnimationFrame(() => onFinish(progressValue, easedProgress));
+      scheduler.afterWrite(() => onFinish(progressValue, easedProgress));
     }
     easedProgress = ease(progressValue);
     let toIndex = 0;
@@ -121,12 +138,12 @@ function animate(element, keyframes, options = {}) {
     onProgress(progressValue, easedProgress);
     return progressValue;
   }
-  function tick(time) {
+  function tick(props) {
     if (!isRunning) {
+      raf.remove(key);
       return;
     }
-    progress(clamp01(map(time, startTime, endTime, 0, 1)));
-    requestAnimationFrame(tick);
+    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
   }
   function start() {
     const runningKeys = running.get(element);
@@ -141,7 +158,7 @@ function animate(element, keyframes, options = {}) {
     progressValue = 0;
     easedProgress = 0;
     isRunning = true;
-    requestAnimationFrame(tick);
+    raf.add(key, tick);
   }
   function play() {
     if (isRunning) {
@@ -150,7 +167,7 @@ function animate(element, keyframes, options = {}) {
     startTime = performance.now() - lerp(0, duration, progressValue);
     endTime = startTime + duration;
     isRunning = true;
-    requestAnimationFrame(tick);
+    raf.add(key, tick);
   }
   return {
     start,

package/utils/css/transition.cjs

@@ -31,7 +31,7 @@ __export(transition_exports, {
   setClassesOrStyles: () => setClassesOrStyles
 });
 module.exports = __toCommonJS(transition_exports);
-var import_nextFrame = __toESM(require("../nextFrame.cjs"), 1);
+var import_nextFrame = require("../nextFrame.cjs");
 var classes = __toESM(require("./classes.cjs"), 1);
 var styles = __toESM(require("./styles.cjs"), 1);
 var cache = /* @__PURE__ */ new WeakMap();
@@ -67,11 +67,11 @@ async function start(element, classesOrStyles) {
   const trs = Transition.getInstance(element);
   trs.isTransitioning = true;
   setClassesOrStyles(element, classesOrStyles.from);
-  await (0, import_nextFrame.default)();
-  await (0, import_nextFrame.default)();
+  await (0, import_nextFrame.nextFrame)();
+  await (0, import_nextFrame.nextFrame)();
   setClassesOrStyles(element, classesOrStyles.active);
-  await (0, import_nextFrame.default)();
-  await (0, import_nextFrame.default)();
+  await (0, import_nextFrame.nextFrame)();
+  await (0, import_nextFrame.nextFrame)();
 }
 async function next(element, classesOrStyles) {
   const hasTransition = testTransition(element);
@@ -83,7 +83,7 @@ async function next(element, classesOrStyles) {
     }
     setClassesOrStyles(element, classesOrStyles.from, "remove");
     setClassesOrStyles(element, classesOrStyles.to);
-    await (0, import_nextFrame.default)();
+    await (0, import_nextFrame.nextFrame)();
     if (!hasTransition) {
       resolve();
     }

package/utils/css/transition.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import nextFrame from "../nextFrame.js";
+import { nextFrame } from "../nextFrame.js";
 import * as classes from "./classes.js";
 import * as styles from "./styles.js";
 const cache = /* @__PURE__ */ new WeakMap();

package/utils/index.cjs

@@ -31,7 +31,7 @@ __export(utils_exports, {
   isFunction: () => import_isFunction.default,
   keyCodes: () => import_keyCodes.default,
   memoize: () => import_memoize.default,
-  nextFrame: () => import_nextFrame.default,
+  nextFrame: () => import_nextFrame.nextFrame,
   nextMicrotask: () => import_nextMicrotask.default,
   nextTick: () => import_nextTick.default,
   objectToURLSearchParams: () => import_history.objectToURLSearchParams,
@@ -43,7 +43,7 @@ var import_debounce = __toESM(require("./debounce.cjs"), 1);
 var import_focusTrap = __toESM(require("./focusTrap.cjs"), 1);
 var import_keyCodes = __toESM(require("./keyCodes.cjs"), 1);
 var import_memoize = __toESM(require("./memoize.cjs"), 1);
-var import_nextFrame = __toESM(require("./nextFrame.cjs"), 1);
+var import_nextFrame = require("./nextFrame.cjs");
 var import_nextTick = __toESM(require("./nextTick.cjs"), 1);
 var import_nextMicrotask = __toESM(require("./nextMicrotask.cjs"), 1);
 var import_throttle = __toESM(require("./throttle.cjs"), 1);
@@ -55,4 +55,5 @@ var import_history = require("./history.cjs");
 __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);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/index.d.ts

@@ -2,7 +2,7 @@ export { default as debounce } from "./debounce.js";
 export { default as focusTrap } from "./focusTrap.js";
 export { default as keyCodes } from "./keyCodes.js";
 export { default as memoize } from "./memoize.js";
-export { default as nextFrame } from "./nextFrame.js";
+export { nextFrame } from "./nextFrame.js";
 export { default as nextTick } from "./nextTick.js";
 export { default as nextMicrotask } from "./nextMicrotask.js";
 export { default as throttle } from "./throttle.js";
@@ -13,4 +13,5 @@ export * from "./css/index.js";
 export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
+export * from "./scheduler.js";
 export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";

package/utils/index.js

@@ -2,13 +2,13 @@ import { default as default2 } from "./debounce.js";
 import { default as default3 } from "./focusTrap.js";
 import { default as default4 } from "./keyCodes.js";
 import { default as default5 } from "./memoize.js";
-import { default as default6 } from "./nextFrame.js";
-import { default as default7 } from "./nextTick.js";
-import { default as default8 } from "./nextMicrotask.js";
-import { default as default9 } from "./throttle.js";
-import { default as default10 } from "./scrollTo.js";
-import { default as default11 } from "./isDefined.js";
-import { default as default12 } from "./isFunction.js";
+import { nextFrame } from "./nextFrame.js";
+import { default as default6 } from "./nextTick.js";
+import { default as default7 } from "./nextMicrotask.js";
+import { default as default8 } from "./throttle.js";
+import { default as default9 } from "./scrollTo.js";
+import { default as default10 } from "./isDefined.js";
+import { default as default11 } from "./isFunction.js";
 export * from "./css/index.js";
 import {
   objectToURLSearchParams,
@@ -18,19 +18,20 @@ import {
 export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
+export * from "./scheduler.js";
 export {
   default2 as debounce,
   default3 as focusTrap,
   push as historyPush,
   replace as historyReplace,
-  default11 as isDefined,
-  default12 as isFunction,
+  default10 as isDefined,
+  default11 as isFunction,
   default4 as keyCodes,
   default5 as memoize,
-  default6 as nextFrame,
-  default8 as nextMicrotask,
-  default7 as nextTick,
+  nextFrame,
+  default7 as nextMicrotask,
+  default6 as nextTick,
   objectToURLSearchParams,
-  default10 as scrollTo,
-  default9 as throttle
+  default9 as scrollTo,
+  default8 as throttle
 };

package/utils/nextFrame.cjs

@@ -19,9 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/js-toolkit/utils/nextFrame.js
 var nextFrame_exports = {};
 __export(nextFrame_exports, {
-  default: () => nextFrame,
   getCancelRaf: () => getCancelRaf,
-  getRaf: () => getRaf
+  getRaf: () => getRaf,
+  nextFrame: () => nextFrame
 });
 module.exports = __toCommonJS(nextFrame_exports);
 function getRaf() {

package/utils/nextFrame.d.ts

@@ -24,4 +24,4 @@ export function getCancelRaf(): (id: number) => void;
  * console.log('hello world');
  * ```
  */
-export default function nextFrame<T extends () => any>(fn?: T): Promise<T extends Function ? ReturnType<T> : undefined>;
+export function nextFrame<T extends () => any>(fn?: T): Promise<T extends Function ? ReturnType<T> : undefined>;

package/utils/nextFrame.js

@@ -10,7 +10,7 @@ function nextFrame(fn) {
   });
 }
 export {
-  nextFrame as default,
   getCancelRaf,
-  getRaf
+  getRaf,
+  nextFrame
 };

package/utils/scheduler.cjs

@@ -0,0 +1,74 @@
+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/scheduler.js
+var scheduler_exports = {};
+__export(scheduler_exports, {
+  domScheduler: () => domScheduler,
+  useScheduler: () => useScheduler
+});
+module.exports = __toCommonJS(scheduler_exports);
+function getScheduler(steps) {
+  const stepsFns = {};
+  const api = {};
+  let isScheduled = false;
+  const resolvedPromise = Promise.resolve();
+  function run(tasks) {
+    let task;
+    while (task = tasks.shift()) {
+      task();
+    }
+  }
+  function flush() {
+    steps.forEach(function runStep(step) {
+      run(stepsFns[step]);
+    });
+    isScheduled = false;
+    if (steps.reduce((length, step) => length + stepsFns[step].length, 0) > 0) {
+      scheduleFlush();
+    }
+  }
+  function scheduleFlush() {
+    if (isScheduled) {
+      return;
+    }
+    isScheduled = true;
+    resolvedPromise.then(flush);
+  }
+  steps.forEach((step) => {
+    stepsFns[step] = [];
+    api[step] = function add(fn) {
+      stepsFns[step].push(fn);
+      scheduleFlush();
+    };
+  });
+  return api;
+}
+var instances = /* @__PURE__ */ new Map();
+var domSchedulerSteps = ["read", "write", "afterWrite"];
+function useScheduler(steps = domSchedulerSteps) {
+  const key = steps.join("-");
+  if (instances.has(key)) {
+    return instances.get(key);
+  }
+  const scheduler = getScheduler(steps);
+  instances.set(key, scheduler);
+  return scheduler;
+}
+var domScheduler = useScheduler(domSchedulerSteps);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/scheduler.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Use a scheduler based on the given steps.
+ * @param   {string[]}  steps
+ * @returns {ReturnType<getScheduler>}
+ */
+export function useScheduler(steps?: string[]): ReturnType<typeof getScheduler>;
+export const domScheduler: Record<string, (fn: () => void) => void>;
+/**
+ * Generate a scheduler.
+ */
+export type T = string;
+/**
+ * Generate a scheduler.
+ * @typedef {string} T
+ * @param   {T[]} steps
+ * @returns {Record<T, (fn: () => void) => void>}
+ */
+declare function getScheduler(steps: T[]): Record<string, (fn: () => void) => void>;
+export {};

package/utils/scheduler.js

@@ -0,0 +1,52 @@
+function getScheduler(steps) {
+  const stepsFns = {};
+  const api = {};
+  let isScheduled = false;
+  const resolvedPromise = Promise.resolve();
+  function run(tasks) {
+    let task;
+    while (task = tasks.shift()) {
+      task();
+    }
+  }
+  function flush() {
+    steps.forEach(function runStep(step) {
+      run(stepsFns[step]);
+    });
+    isScheduled = false;
+    if (steps.reduce((length, step) => length + stepsFns[step].length, 0) > 0) {
+      scheduleFlush();
+    }
+  }
+  function scheduleFlush() {
+    if (isScheduled) {
+      return;
+    }
+    isScheduled = true;
+    resolvedPromise.then(flush);
+  }
+  steps.forEach((step) => {
+    stepsFns[step] = [];
+    api[step] = function add(fn) {
+      stepsFns[step].push(fn);
+      scheduleFlush();
+    };
+  });
+  return api;
+}
+const instances = /* @__PURE__ */ new Map();
+const domSchedulerSteps = ["read", "write", "afterWrite"];
+function useScheduler(steps = domSchedulerSteps) {
+  const key = steps.join("-");
+  if (instances.has(key)) {
+    return instances.get(key);
+  }
+  const scheduler = getScheduler(steps);
+  instances.set(key, scheduler);
+  return scheduler;
+}
+const domScheduler = useScheduler(domSchedulerSteps);
+export {
+  domScheduler,
+  useScheduler
+};