@studiometa/js-toolkit 2.0.0-beta.15 → 2.0.0-beta.18

package/Base/index.cjs

@@ -69,12 +69,10 @@ var Base = class extends EventTarget {
     this.$id = `${__config.name}-${id}`;
     id += 1;
     this.$el = element;
-    if (!("__base__" in this.$el)) {
-      Object.defineProperty(this.$el, "__base__", {
-        get: () => this,
-        configurable: true
-      });
+    if (!this.$el.__base__) {
+      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
     }
+    this.$el.__base__.set(this.__ctor, this);
     this.__options = new import_OptionsManager.default(element, __config.options || {}, __config);
     this.__services = new import_ServicesManager.default(this);
     this.__events = new import_EventsManager.default(element, this);
@@ -205,11 +203,7 @@ var Base = class extends EventTarget {
     }
     this.$destroy();
     this.__callMethod("terminated");
-    Object.defineProperty(this.$el, "__base__", {
-      value: "terminated",
-      configurable: false,
-      writable: false
-    });
+    this.$el.__base__.set(this.__ctor, "terminated");
   }
   __testEventIsDefined(event) {
     if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
@@ -217,7 +211,7 @@ var Base = class extends EventTarget {
     }
   }
   __addEmits(event) {
-    const ctor = this.constructor;
+    const ctor = this.__ctor;
     if (Array.isArray(ctor.config.emits)) {
       ctor.config.emits.push(event);
     } else {
@@ -225,10 +219,13 @@ var Base = class extends EventTarget {
     }
   }
   __removeEmits(event) {
-    const ctor = this.constructor;
+    const ctor = this.__ctor;
     const index = ctor.config.emits.findIndex((value) => value === event);
     ctor.config.emits.splice(index, 1);
   }
+  get __ctor() {
+    return this.constructor;
+  }
   $on(event, listener, options) {
     if (isDev) {
       this.__debug("$on", event, listener, options);

package/Base/index.d.ts

@@ -57,9 +57,11 @@ export default class Base extends EventTarget {
     $id: string;
     /**
      * The root element.
-     * @type {HTMLElement}
+     * @type {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base | 'terminated'> }}
      */
-    $el: HTMLElement;
+    $el: HTMLElement & {
+        __base__?: WeakMap<BaseConstructor, Base | 'terminated'>;
+    };
     /**
      * The state of the component.
      * @type {Boolean}
@@ -199,6 +201,13 @@ export default class Base extends EventTarget {
      * @returns {void}
      */
     private __removeEmits;
+    /**
+     * Get the instance constructor.
+     *
+     * @private
+     * @returns {BaseConstructor}
+     */
+    private get __ctor();
     /**
      * Bind a listener function to an event.
      *

package/Base/index.js

@@ -37,12 +37,10 @@ class Base extends EventTarget {
     this.$id = `${__config.name}-${id}`;
     id += 1;
     this.$el = element;
-    if (!("__base__" in this.$el)) {
-      Object.defineProperty(this.$el, "__base__", {
-        get: () => this,
-        configurable: true
-      });
+    if (!this.$el.__base__) {
+      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
     }
+    this.$el.__base__.set(this.__ctor, this);
     this.__options = new OptionsManager(element, __config.options || {}, __config);
     this.__services = new ServicesManager(this);
     this.__events = new EventsManager(element, this);
@@ -173,11 +171,7 @@ class Base extends EventTarget {
     }
     this.$destroy();
     this.__callMethod("terminated");
-    Object.defineProperty(this.$el, "__base__", {
-      value: "terminated",
-      configurable: false,
-      writable: false
-    });
+    this.$el.__base__.set(this.__ctor, "terminated");
   }
   __testEventIsDefined(event) {
     if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
@@ -185,7 +179,7 @@ class Base extends EventTarget {
     }
   }
   __addEmits(event) {
-    const ctor = this.constructor;
+    const ctor = this.__ctor;
     if (Array.isArray(ctor.config.emits)) {
       ctor.config.emits.push(event);
     } else {
@@ -193,10 +187,13 @@ class Base extends EventTarget {
     }
   }
   __removeEmits(event) {
-    const ctor = this.constructor;
+    const ctor = this.__ctor;
     const index = ctor.config.emits.findIndex((value) => value === event);
     ctor.config.emits.splice(index, 1);
   }
+  get __ctor() {
+    return this.constructor;
+  }
   $on(event, listener, options) {
     if (isDev) {
       this.__debug("$on", event, listener, options);

package/Base/managers/ChildrenManager.cjs

@@ -38,6 +38,7 @@ var ChildrenManager = class {
     __publicField(this, "__element");
     __publicField(this, "__components");
     __publicField(this, "__eventsManager");
+    __publicField(this, "__asyncComponentPromises", /* @__PURE__ */ new WeakMap());
     Object.defineProperties(this, {
       __base: {
         enumerable: false,
@@ -81,17 +82,36 @@ var ChildrenManager = class {
     });
   }
   __getChild(el, ComponentClass, name) {
-    if (el.__base__) {
-      return el.__base__;
-    }
-    if ("$isBase" in ComponentClass) {
-      const child = new ComponentClass(el);
+    const asyncComponentPromise = this.__asyncComponentPromises.get(ComponentClass);
+    if ("$isBase" in ComponentClass || asyncComponentPromise && asyncComponentPromise.status === "resolved") {
+      let ctor = ComponentClass;
+      if (asyncComponentPromise) {
+        ctor = asyncComponentPromise.ctor;
+      }
+      if (el.__base__ && el.__base__.has(ctor)) {
+        return el.__base__.get(ctor);
+      }
+      const child = new ctor(el);
       Object.defineProperty(child, "$parent", { get: () => this.__base });
       return child;
     }
-    return ComponentClass(this.__base).then((module2) => {
+    const promise = asyncComponentPromise ? asyncComponentPromise.promise : ComponentClass(this.__base);
+    if (!asyncComponentPromise) {
+      this.__asyncComponentPromises.set(ComponentClass, {
+        promise,
+        status: "pending",
+        ctor: void 0
+      });
+    }
+    return promise.then((module2) => {
       var _a;
-      return this.__getChild(el, (_a = module2.default) != null ? _a : module2, name);
+      const ctor = (_a = module2.default) != null ? _a : module2;
+      this.__asyncComponentPromises.set(ComponentClass, {
+        promise,
+        status: "resolved",
+        ctor
+      });
+      return this.__getChild(el, ctor, name);
     });
   }
   mountAll() {

package/Base/managers/ChildrenManager.d.ts

@@ -40,6 +40,14 @@ export default class ChildrenManager {
      * @private
      */
     private __eventsManager;
+    /**
+     * Store async component promises to avoid calling them multiple times and
+     * waiting for them when they are already resolved.
+     *
+     * @private
+     * @type {WeakMap<BaseAsyncConstructor, { promise: ReturnType<BaseAsyncConstructor>, status: 'pending'|'resolved', ctor?: BaseConstructor }>}
+     */
+    private __asyncComponentPromises;
     /**
      * @return {string[]}
      */
@@ -61,7 +69,7 @@ export default class ChildrenManager {
     /**
      * Get a child component's instance.
      *
-     * @param {HTMLElement & { __base__?: Base | 'terminated' }} el
+     * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el
      *   The root element of the child component.
      * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass
      *   A Base class or a Promise for async components.

package/Base/managers/ChildrenManager.js

@@ -11,6 +11,7 @@ class ChildrenManager {
     __publicField(this, "__element");
     __publicField(this, "__components");
     __publicField(this, "__eventsManager");
+    __publicField(this, "__asyncComponentPromises", /* @__PURE__ */ new WeakMap());
     Object.defineProperties(this, {
       __base: {
         enumerable: false,
@@ -54,17 +55,36 @@ class ChildrenManager {
     });
   }
   __getChild(el, ComponentClass, name) {
-    if (el.__base__) {
-      return el.__base__;
-    }
-    if ("$isBase" in ComponentClass) {
-      const child = new ComponentClass(el);
+    const asyncComponentPromise = this.__asyncComponentPromises.get(ComponentClass);
+    if ("$isBase" in ComponentClass || asyncComponentPromise && asyncComponentPromise.status === "resolved") {
+      let ctor = ComponentClass;
+      if (asyncComponentPromise) {
+        ctor = asyncComponentPromise.ctor;
+      }
+      if (el.__base__ && el.__base__.has(ctor)) {
+        return el.__base__.get(ctor);
+      }
+      const child = new ctor(el);
       Object.defineProperty(child, "$parent", { get: () => this.__base });
       return child;
     }
-    return ComponentClass(this.__base).then((module) => {
+    const promise = asyncComponentPromise ? asyncComponentPromise.promise : ComponentClass(this.__base);
+    if (!asyncComponentPromise) {
+      this.__asyncComponentPromises.set(ComponentClass, {
+        promise,
+        status: "pending",
+        ctor: void 0
+      });
+    }
+    return promise.then((module) => {
       var _a;
-      return this.__getChild(el, (_a = module.default) != null ? _a : module, name);
+      const ctor = (_a = module.default) != null ? _a : module;
+      this.__asyncComponentPromises.set(ComponentClass, {
+        promise,
+        status: "resolved",
+        ctor
+      });
+      return this.__getChild(el, ctor, name);
     });
   }
   mountAll() {

package/helpers/createApp.cjs

@@ -26,7 +26,7 @@ var createApp_exports = {};
 __export(createApp_exports, {
   default: () => createApp
 });
-function createApp(App, rootElement) {
+function createApp(App, rootElement = document.body) {
   let isLoaded = document.readyState === "complete";
   let app;
   if (!isLoaded) {

package/helpers/createApp.d.ts

@@ -28,10 +28,10 @@
  *
  * @template {BaseConstructor} T
  * @param {T} App
- * @param {HTMLElement} rootElement
+ * @param {HTMLElement=} [rootElement]
  *
  * @return {() => Promise<InstanceType<T>>}
  *
  */
-export default function createApp<T extends typeof import("../Base/index.js").default>(App: T, rootElement: HTMLElement): () => Promise<InstanceType<T>>;
+export default function createApp<T extends typeof import("../Base/index.js").default>(App: T, rootElement?: HTMLElement | undefined): () => Promise<InstanceType<T>>;
 export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/createApp.js

@@ -1,4 +1,4 @@
-function createApp(App, rootElement) {
+function createApp(App, rootElement = document.body) {
   let isLoaded = document.readyState === "complete";
   let app;
   if (!isLoaded) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.18",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/services/drag.cjs

@@ -47,7 +47,7 @@ var MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-var instanceIds = 0;
+var id = 0;
 var Drag = class extends import_Service.default {
   constructor(target, options = {}) {
     super();
@@ -77,10 +77,11 @@ var Drag = class extends import_Service.default {
       }
     });
     __publicField(this, "options", {
-      dampFactor: 0.85
+      dampFactor: 0.85,
+      dragTreshold: 10
     });
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -91,18 +92,34 @@ var Drag = class extends import_Service.default {
     const options = { passive: true };
     this.props.target.addEventListener("mousedown", this, options);
     this.props.target.addEventListener("touchstart", this, options);
+    this.props.target.addEventListener("dragstart", this, { capture: true });
+    this.props.target.addEventListener("click", this, { capture: true });
     const pointer = (0, import_pointer.default)();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
   kill() {
-    this.props.target.removeEventListener("mousemove", this);
-    this.props.target.removeEventListener("touchmove", this);
+    this.props.target.removeEventListener("mousedown", this);
+    this.props.target.removeEventListener("touchstart", this);
+    this.props.target.removeEventListener("dragstart", this);
+    this.props.target.removeEventListener("click", this);
     const pointer = (0, import_pointer.default)();
     pointer.remove(this.id);
     return this;
   }
   handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (this.__shouldPreventClick) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      return;
+    }
     const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
     this.start(x, y);
@@ -180,6 +197,9 @@ var Drag = class extends import_Service.default {
   updateProps() {
     return this.props;
   }
+  get __shouldPreventClick() {
+    return Math.abs(this.props.distance.x) > this.options.dragTreshold || Math.abs(this.props.distance.y) > this.options.dragTreshold;
+  }
 };
 var instances = /* @__PURE__ */ new WeakMap();
 function useDrag(target, options) {

package/services/drag.d.ts

@@ -74,4 +74,5 @@ export type DragServiceProps = {
 };
 export type DragServiceOptions = {
     dampFactor?: number | undefined;
+    dragTreshold?: number | undefined;
 };

package/services/drag.js

@@ -15,7 +15,7 @@ const MODES = {
   INERTIA: "inertia",
   STOP: "stop"
 };
-let instanceIds = 0;
+let id = 0;
 class Drag extends Service {
   constructor(target, options = {}) {
     super();
@@ -45,10 +45,11 @@ class Drag extends Service {
       }
     });
     __publicField(this, "options", {
-      dampFactor: 0.85
+      dampFactor: 0.85,
+      dragTreshold: 10
     });
-    instanceIds += 1;
-    this.id = `drag-${instanceIds}`;
+    id += 1;
+    this.id = `drag-${id}`;
     this.props.target = target;
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
@@ -59,18 +60,34 @@ class Drag extends Service {
     const options = { passive: true };
     this.props.target.addEventListener("mousedown", this, options);
     this.props.target.addEventListener("touchstart", this, options);
+    this.props.target.addEventListener("dragstart", this, { capture: true });
+    this.props.target.addEventListener("click", this, { capture: true });
     const pointer = usePointer();
     pointer.add(this.id, this.pointerHandler);
     return this;
   }
   kill() {
-    this.props.target.removeEventListener("mousemove", this);
-    this.props.target.removeEventListener("touchmove", this);
+    this.props.target.removeEventListener("mousedown", this);
+    this.props.target.removeEventListener("touchstart", this);
+    this.props.target.removeEventListener("dragstart", this);
+    this.props.target.removeEventListener("click", this);
     const pointer = usePointer();
     pointer.remove(this.id);
     return this;
   }
   handleEvent(event) {
+    if (event.type === "dragstart") {
+      event.preventDefault();
+      return;
+    }
+    if (event.type === "click") {
+      if (this.__shouldPreventClick) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      return;
+    }
     const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
     const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
     this.start(x, y);
@@ -148,6 +165,9 @@ class Drag extends Service {
   updateProps() {
     return this.props;
   }
+  get __shouldPreventClick() {
+    return Math.abs(this.props.distance.x) > this.options.dragTreshold || Math.abs(this.props.distance.y) > this.options.dragTreshold;
+  }
 }
 const instances = /* @__PURE__ */ new WeakMap();
 function useDrag(target, options) {

package/utils/css/classes.cjs

@@ -28,13 +28,16 @@ __export(classes_exports, {
   remove: () => remove,
   toggle: () => toggle
 });
-function setClasses(element, classNames, method = "add") {
+function setClasses(element, classNames, method = "add", forceToggle = void 0) {
   if (!element || !classNames) {
     return;
   }
-  classNames.split(" ").forEach((className) => {
-    element.classList[method](className);
-  });
+  const normalizedClassNames = Array.isArray(classNames) ? classNames : classNames.split(" ");
+  if (method !== "toggle") {
+    element.classList[method](...normalizedClassNames);
+  } else {
+    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+  }
 }
 function add(element, classNames) {
   setClasses(element, classNames);
@@ -42,8 +45,8 @@ function add(element, classNames) {
 function remove(element, classNames) {
   setClasses(element, classNames, "remove");
 }
-function toggle(element, classNames) {
-  setClasses(element, classNames, "toggle");
+function toggle(element, classNames, force = void 0) {
+  setClasses(element, classNames, "toggle", force);
 }
 module.exports = __toCommonJS(classes_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/classes.d.ts

@@ -1,24 +1,25 @@
 /**
  * Add class names to an element.
  *
- * @param {HTMLElement} element    The element to update.
- * @param {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
  * @return {void}
  */
-export function add(element: HTMLElement, classNames: string): void;
+export function add(element: HTMLElement, classNames: string | string[]): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement} element    The element to update.
- * @param  {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
  * @return {void}
  */
-export function remove(element: HTMLElement, classNames: string): void;
+export function remove(element: HTMLElement, classNames: string | string[]): void;
 /**
  * Toggle class names from an element.
  *
- * @param  {HTMLElement} element    The element to update.
- * @param  {String}      classNames A string of class names.
+ * @param  {HTMLElement}     element    The element to update.
+ * @param  {string|string[]} classNames A string of class names.
+ * @param  {boolean}         [force]    Force toggle?
  * @return {void}
  */
-export function toggle(element: HTMLElement, classNames: string): void;
+export function toggle(element: HTMLElement, classNames: string | string[], force?: boolean): void;

package/utils/css/classes.js

@@ -1,10 +1,13 @@
-function setClasses(element, classNames, method = "add") {
+function setClasses(element, classNames, method = "add", forceToggle = void 0) {
   if (!element || !classNames) {
     return;
   }
-  classNames.split(" ").forEach((className) => {
-    element.classList[method](className);
-  });
+  const normalizedClassNames = Array.isArray(classNames) ? classNames : classNames.split(" ");
+  if (method !== "toggle") {
+    element.classList[method](...normalizedClassNames);
+  } else {
+    normalizedClassNames.forEach((className) => element.classList[method](className, forceToggle));
+  }
 }
 function add(element, classNames) {
   setClasses(element, classNames);
@@ -12,8 +15,8 @@ function add(element, classNames) {
 function remove(element, classNames) {
   setClasses(element, classNames, "remove");
 }
-function toggle(element, classNames) {
-  setClasses(element, classNames, "toggle");
+function toggle(element, classNames, force = void 0) {
+  setClasses(element, classNames, "toggle", force);
 }
 export {
   add,

package/utils/css/index.cjs

@@ -29,13 +29,16 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 // packages/js-toolkit/utils/css/index.js
 var css_exports = {};
 __export(css_exports, {
-  classes: () => classes,
+  addClass: () => import_classes.add,
+  addStyle: () => import_styles.add,
   matrix: () => import_matrix.default,
-  styles: () => styles,
+  removeClass: () => import_classes.remove,
+  removeStyle: () => import_styles.remove,
+  toggleClass: () => import_classes.toggle,
   transition: () => import_transition.default
 });
-var classes = __toESM(require("./classes.cjs"), 1);
-var styles = __toESM(require("./styles.cjs"), 1);
+var import_classes = require("./classes.cjs");
+var import_styles = require("./styles.cjs");
 var import_matrix = __toESM(require("./matrix.cjs"), 1);
 var import_transition = __toESM(require("./transition.cjs"), 1);
 module.exports = __toCommonJS(css_exports);

package/utils/css/index.d.ts

@@ -1,4 +1,4 @@
-export * as classes from "./classes.js";
-export * as styles from "./styles.js";
 export { default as matrix } from "./matrix.js";
 export { default as transition } from "./transition.js";
+export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
+export { add as addStyle, remove as removeStyle } from "./styles.js";

package/utils/css/index.js

@@ -1,10 +1,13 @@
-import * as classes from "./classes.js";
-import * as styles from "./styles.js";
+import { add, remove, toggle } from "./classes.js";
+import { add as add2, remove as remove2 } from "./styles.js";
 import { default as default2 } from "./matrix.js";
 import { default as default3 } from "./transition.js";
 export {
-  classes,
+  add as addClass,
+  add2 as addStyle,
   default2 as matrix,
-  styles,
+  remove as removeClass,
+  remove2 as removeStyle,
+  toggle as toggleClass,
   default3 as transition
 };

package/utils/css/styles.cjs

@@ -30,7 +30,6 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var styles_exports = {};
 __export(styles_exports, {
   add: () => add,
-  default: () => setStyles,
   remove: () => remove
 });
 var import_isObject = __toESM(require("../object/isObject.cjs"), 1);

package/utils/css/styles.d.ts

@@ -1,28 +1,16 @@
-/**
- * @typedef {Record<string, string | null> & Partial<CSSStyleDeclaration>} CssStyleObject
- */
-/**
- * Manage a list of style properties on an element.
- *
- * @param {HTMLElement}    element The element to update.
- * @param {CssStyleObject} styles  An object of styles properties and values.
- * @param {String}         method  The method to use: add or remove.
- */
-export default function setStyles(element: HTMLElement, styles: CssStyleObject, method?: string): void;
 /**
  * Add styles to an element.
  *
- * @param {HTMLElement}    element The element to update.
- * @param {CssStyleObject} styles  A string of class names.
+ * @param {HTMLElement}                  element The element to update.
+ * @param {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @return {void}
  */
-export function add(element: HTMLElement, styles: CssStyleObject): void;
+export function add(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
 /**
  * Remove class names from an element.
  *
- * @param  {HTMLElement}    element The element to update.
- * @param  {CssStyleObject} styles  A string of class names.
+ * @param  {HTMLElement}                  element The element to update.
+ * @param  {Partial<CSSStyleDeclaration>} styles  A string of class names.
  * @return {void}
  */
-export function remove(element: HTMLElement, styles: CssStyleObject): void;
-export type CssStyleObject = Record<string, string | null> & Partial<CSSStyleDeclaration>;
+export function remove(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;

package/utils/css/styles.js

@@ -15,6 +15,5 @@ function remove(element, styles) {
 }
 export {
   add,
-  setStyles as default,
   remove
 };

package/utils/css/transition.cjs

@@ -56,10 +56,10 @@ var Transition = class {
   }
 };
 function setClassesOrStyles(element, classesOrStyles, method = "add") {
-  if (typeof classesOrStyles === "string") {
-    classes[method](element, classesOrStyles, method);
+  if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
+    classes[method](element, classesOrStyles);
   } else {
-    styles[method](element, classesOrStyles, method);
+    styles[method](element, classesOrStyles);
   }
 }
 function testTransition(element) {

package/utils/css/transition.d.ts

@@ -1,20 +1,26 @@
 /**
  * Update either the classes or the styles of an element with the given method.
  *
- * @param {HTMLElement}   element         The element to update.
- * @param {String|Object} classesOrStyles The classes or styles to apply.
- * @param {String}        method          The method to use, one of `add` or `remove`.
+ * @param {HTMLElement}     element         The element to update.
+ * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.
+ * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.
  */
-export function setClassesOrStyles(element: HTMLElement, classesOrStyles: string | any, method?: string): void;
+export function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
 /**
  * Manage CSS transition with class.
  *
  * This is heavily inspired by the Vue `<transition>` component
  * and the `@barba/css` package, many thanks to them!
  *
- * @param  {HTMLElement}   element The target element.
- * @param  {String|Object} name    The name of the transition or an object with the hooks classesOrStyles.
- * @param  {String}        endMode    Whether to remove or keep the `to` classes/styles
- * @return {Promise}               A promise resolving at the end of the transition.
+ * @param  {HTMLElement}             element The target element.
+ * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.
+ * @param  {String}                  endMode Whether to remove or keep the `to` classes/styles
+ * @return {Promise<void>}                   A promise resolving at the end of the transition.
  */
-export default function transition(element: HTMLElement, name: string | any, endMode?: string): Promise<any>;
+export default function transition(element: HTMLElement, name: string | TransitionStyles, endMode?: string): Promise<void>;
+export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export type TransitionStyles = {
+    from?: ClassesOrStyles;
+    active?: ClassesOrStyles;
+    to?: ClassesOrStyles;
+};

package/utils/css/transition.js

@@ -23,10 +23,10 @@ class Transition {
   }
 }
 function setClassesOrStyles(element, classesOrStyles, method = "add") {
-  if (typeof classesOrStyles === "string") {
-    classes[method](element, classesOrStyles, method);
+  if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
+    classes[method](element, classesOrStyles);
   } else {
-    styles[method](element, classesOrStyles, method);
+    styles[method](element, classesOrStyles);
   }
 }
 function testTransition(element) {

package/utils/index.cjs

@@ -34,22 +34,24 @@ __export(utils_exports, {
   historyPush: () => import_history.push,
   historyReplace: () => import_history.replace,
   keyCodes: () => import_keyCodes.default,
-  matrix: () => import_css.matrix,
   memoize: () => import_memoize.default,
   nextFrame: () => import_nextFrame.default,
+  nextMicrotask: () => import_nextMicrotask.default,
+  nextTick: () => import_nextTick.default,
   objectToURLSearchParams: () => import_history.objectToURLSearchParams,
   scrollTo: () => import_scrollTo.default,
-  throttle: () => import_throttle.default,
-  transition: () => import_css.transition
+  throttle: () => import_throttle.default
 });
 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_nextTick = __toESM(require("./nextTick.cjs"), 1);
+var import_nextMicrotask = __toESM(require("./nextMicrotask.cjs"), 1);
 var import_throttle = __toESM(require("./throttle.cjs"), 1);
 var import_scrollTo = __toESM(require("./scrollTo.cjs"), 1);
-var import_css = require("./css/index.cjs");
+__reExport(utils_exports, require("./css/index.cjs"));
 var import_history = require("./history.cjs");
 __reExport(utils_exports, require("./collide/index.cjs"));
 __reExport(utils_exports, require("./math/index.cjs"));

package/utils/index.d.ts

@@ -3,10 +3,12 @@ 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 { default as nextTick } from "./nextTick.js";
+export { default as nextMicrotask } from "./nextMicrotask.js";
 export { default as throttle } from "./throttle.js";
 export { default as scrollTo } from "./scrollTo.js";
+export * from "./css/index.js";
 export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
-export { matrix, transition } from "./css/index.js";
 export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";

package/utils/index.js

@@ -3,9 +3,11 @@ 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 "./throttle.js";
-import { default as default8 } from "./scrollTo.js";
-import { matrix, transition } from "./css/index.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";
+export * from "./css/index.js";
 import {
   objectToURLSearchParams,
   push,
@@ -20,11 +22,11 @@ export {
   push as historyPush,
   replace as historyReplace,
   default4 as keyCodes,
-  matrix,
   default5 as memoize,
   default6 as nextFrame,
+  default8 as nextMicrotask,
+  default7 as nextTick,
   objectToURLSearchParams,
-  default8 as scrollTo,
-  default7 as throttle,
-  transition
+  default10 as scrollTo,
+  default9 as throttle
 };

package/utils/nextFrame.cjs

@@ -34,11 +34,9 @@ function getRaf() {
 function getCancelRaf() {
   return typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame.bind(window) : clearTimeout;
 }
-function nextFrame(fn = () => {
-}) {
-  const raf = getRaf();
+function nextFrame(fn) {
   return new Promise((resolve) => {
-    raf(() => raf(() => resolve(fn())));
+    getRaf()(() => resolve(typeof fn === "function" && fn()));
   });
 }
 module.exports = __toCommonJS(nextFrame_exports);

package/utils/nextFrame.d.ts

@@ -13,8 +13,9 @@ export function getCancelRaf(): (id: number) => void;
 /**
  * Wait for the next frame to execute a function.
  *
- * @param  {Function=} [fn=() => {}] The callback function to execute.
- * @return {Promise} A Promise resolving when the next frame is reached.
+ * @template {() => any} T
+ * @param    {T=} [fn] The callback function to execute.
+ * @returns  {Promise<T extends Function ? ReturnType<T> : undefined>} A Promise resolving when the next frame is reached.
  *
  * @example
  * ```js
@@ -24,4 +25,4 @@ export function getCancelRaf(): (id: number) => void;
  * console.log('hello world');
  * ```
  */
-export default function nextFrame(fn?: Function | undefined): Promise<any>;
+export default function nextFrame<T extends () => any>(fn?: T): Promise<T extends Function ? ReturnType<T> : undefined>;

package/utils/nextFrame.js

@@ -4,11 +4,9 @@ function getRaf() {
 function getCancelRaf() {
   return typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame.bind(window) : clearTimeout;
 }
-function nextFrame(fn = () => {
-}) {
-  const raf = getRaf();
+function nextFrame(fn) {
   return new Promise((resolve) => {
-    raf(() => raf(() => resolve(fn())));
+    getRaf()(() => resolve(typeof fn === "function" && fn()));
   });
 }
 export {

package/utils/nextMicrotask.cjs

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/nextMicrotask.js
+var nextMicrotask_exports = {};
+__export(nextMicrotask_exports, {
+  default: () => nextMicrotask
+});
+async function nextMicrotask(fn) {
+  return Promise.resolve().then(() => typeof fn === "function" && fn());
+}
+module.exports = __toCommonJS(nextMicrotask_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/nextMicrotask.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wait for the next microtask.
+ *
+ * @template {() => any} T
+ * @param    {T=} [fn]
+ * @returns  {Promise<T extends Function ? ReturnType<T> : undefined>}
+ */
+export default function nextMicrotask<T extends () => any>(fn?: T): Promise<T extends Function ? ReturnType<T> : undefined>;

package/utils/nextMicrotask.js

@@ -0,0 +1,6 @@
+async function nextMicrotask(fn) {
+  return Promise.resolve().then(() => typeof fn === "function" && fn());
+}
+export {
+  nextMicrotask as default
+};

package/utils/nextTick.cjs

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/nextTick.js
+var nextTick_exports = {};
+__export(nextTick_exports, {
+  default: () => nextTick
+});
+async function nextTick(fn) {
+  return new Promise((resolve) => setTimeout(() => {
+    resolve(typeof fn === "function" && fn());
+  }, 0));
+}
+module.exports = __toCommonJS(nextTick_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/nextTick.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wait for the next tick.
+ *
+ * @template {() => any} T
+ * @param    {T=} [fn]
+ * @returns  {Promise<T extends Function ? ReturnType<T> : undefined>}
+ */
+export default function nextTick<T extends () => any>(fn?: T): Promise<T extends Function ? ReturnType<T> : undefined>;

package/utils/nextTick.js

@@ -0,0 +1,8 @@
+async function nextTick(fn) {
+  return new Promise((resolve) => setTimeout(() => {
+    resolve(typeof fn === "function" && fn());
+  }, 0));
+}
+export {
+  nextTick as default
+};