solid-tiny-utils 0.7.1 → 0.8.0

package/dist/event/on-motion-end.d.mts

@@ -0,0 +1,63 @@
+//#region src/event/on-motion-end.d.ts
+type Accessor<T> = () => T;
+type OnMotionEndType = "animationend" | "transitionend" | "transitioncancel" | "no-motion";
+interface OnMotionEndOptions {
+  /**
+   * Specifies which type of motion to listen for.
+   *
+   * @default "auto"
+   */
+  motionType?: "animation" | "transition" | "auto";
+  /**
+   * If true, the callback will be executed immediately if there are no motions on the element.
+   *
+   * @default true
+   */
+  execWhenNoMotion?: boolean;
+  /**
+   * If true, 'transitioncancel' events will also be detected and treated as motion end.
+   *
+   * @default false
+   */
+  detectCancelled?: boolean;
+}
+/**
+ * Calls the callback when all CSS motions (animations and transitions) on the element have ended.
+ *
+ * if opt.motionType is set to "auto" (default), both animations and transitions are considered,
+ * but animation takes precedence if both are present.
+ *
+ *
+ * @example
+ * ```ts
+ * import { makeOnMotionEnd } from "solid-tiny-utils/event";
+ *
+ * const el = document.getElementById("my-element");
+ *
+ * makeOnMotionEnd(el, () => {
+ *   console.log("All motions ended!");
+ * });
+ * ```
+ */
+declare function makeOnMotionEnd(el: HTMLElement, cb: (params: {
+  type: OnMotionEndType;
+}) => void, opt?: OnMotionEndOptions): () => void;
+/** * Reactive version of `makeOnMotionEnd`.
+ *
+ * @example
+ * ```ts
+ * import { createOnMotionEnd } from "solid-tiny-utils/event";
+ * import { createSignal } from "solid-js";
+ *
+ * const [el, setEl] = createSignal<HTMLElement | undefined>(undefined);
+ *
+ * createOnMotionEnd(el, () => {
+ *   console.log("All motions ended!");
+ * });
+ * ```
+ */
+declare function createOnMotionEnd(el: Accessor<HTMLElement | undefined>, cb: (params: {
+  type: OnMotionEndType;
+}) => void, opt?: OnMotionEndOptions): void;
+//#endregion
+export { OnMotionEndOptions, OnMotionEndType, createOnMotionEnd, makeOnMotionEnd };

package/dist/event/on-motion-end.mjs

@@ -0,0 +1,96 @@
+import { noop } from "../fn/index.mjs";
+import { createWatch } from "../reactive/create-watch.mjs";
+import { makeEventListener } from "./make-event-listener.mjs";
+import { onCleanup } from "solid-js";
+
+//#region src/event/on-motion-end.ts
+/**
+* Calls the callback when all CSS motions (animations and transitions) on the element have ended.
+*
+* if opt.motionType is set to "auto" (default), both animations and transitions are considered,
+* but animation takes precedence if both are present.
+*
+*
+* @example
+* ```ts
+* import { makeOnMotionEnd } from "solid-tiny-utils/event";
+*
+* const el = document.getElementById("my-element");
+*
+* makeOnMotionEnd(el, () => {
+*   console.log("All motions ended!");
+* });
+* ```
+*/
+function makeOnMotionEnd(el, cb, opt = {}) {
+	const node = el;
+	const style = getComputedStyle(node);
+	const { motionType = "auto", execWhenNoMotion = true, detectCancelled = false } = opt;
+	const allowAnimation = motionType === "animation" || motionType === "auto";
+	const allowTransition = motionType === "transition" || motionType === "auto";
+	const cleanups = [];
+	const cleanup = () => {
+		for (const c of cleanups) c();
+	};
+	const resolve = (params) => {
+		cb(params);
+	};
+	if (allowAnimation) {
+		const animNames = style.animationName.split(",").map((s) => s.trim());
+		const animationIterationCounts = style.animationIterationCount.split(",").map((s) => s.trim());
+		function onAnimEnd(e) {
+			if (e.target !== node) return;
+			resolve({ type: "animationend" });
+		}
+		if (style.animationName && style.animationName !== "none" && animNames.length > 0 && animationIterationCounts.some((count) => count !== "infinite")) {
+			cleanups.push(makeEventListener(node, ["animationend"], onAnimEnd));
+			onCleanup(cleanup);
+			return cleanup;
+		}
+	}
+	if (allowTransition) {
+		const transProps = style.transitionProperty.split(",").map((s) => s.trim());
+		const transPending = /* @__PURE__ */ new Set();
+		function onTransEnd(e) {
+			if (e.target !== node) return;
+			transPending.delete(e.propertyName);
+			if (transPending.size === 0) resolve({ type: e.type });
+		}
+		function onTransRun(e) {
+			if (e.target !== node) return;
+			transPending.add(e.propertyName);
+		}
+		if (transProps.length > 0) {
+			const events = detectCancelled ? ["transitionend", "transitioncancel"] : ["transitionend"];
+			cleanups.push(makeEventListener(node, events, onTransEnd), makeEventListener(node, "transitionrun", onTransRun));
+			onCleanup(cleanup);
+			return cleanup;
+		}
+	}
+	if (execWhenNoMotion) cb({ type: "no-motion" });
+	return cleanup;
+}
+/** * Reactive version of `makeOnMotionEnd`.
+*
+* @example
+* ```ts
+* import { createOnMotionEnd } from "solid-tiny-utils/event";
+* import { createSignal } from "solid-js";
+*
+* const [el, setEl] = createSignal<HTMLElement | undefined>(undefined);
+*
+* createOnMotionEnd(el, () => {
+*   console.log("All motions ended!");
+* });
+* ```
+*/
+function createOnMotionEnd(el, cb, opt) {
+	let cleanup = noop;
+	createWatch(el, (node) => {
+		cleanup();
+		if (node) cleanup = makeOnMotionEnd(node, cb, opt);
+	});
+}
+
+//#endregion
+export { createOnMotionEnd, makeOnMotionEnd };

package/dist/fn/create-debounce.d.mts

@@ -0,0 +1,7 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
+
+//#region src/fn/create-debounce.d.ts
+declare function createDebounce<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
+//#endregion
+export { createDebounce };

package/dist/fn/create-debounce.mjs

@@ -0,0 +1,20 @@
+import { access } from "../reactive/access.mjs";
+import { onCleanup } from "solid-js";
+
+//#region src/fn/create-debounce.ts
+function createDebounce(callback, delay) {
+	let timeoutId;
+	onCleanup(() => {
+		clearTimeout(timeoutId);
+	});
+	const run = (...args) => {
+		clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => {
+			callback(...args);
+		}, access(delay));
+	};
+	return run;
+}
+
+//#endregion
+export { createDebounce };

package/dist/fn/{create-loop-exec.d.ts → create-loop-exec.d.mts}

@@ -1,5 +1,6 @@
-import { MaybePromise, MaybeAccessor } from '../types/maybe.js';
-import 'solid-js';
+import { MaybeAccessor, MaybePromise } from "../types/maybe.mjs";
+
+//#region src/fn/create-loop-exec.d.ts
 
 /**
  * Repeatedly executes an asynchronous function with a specified delay between each execution.
@@ -15,8 +16,8 @@ import 'solid-js';
  * - Uses `setTimeout` for scheduling and `onCleanup` for resource management.
  */
 declare function createLoopExec(fn: () => MaybePromise<void>, delay: MaybeAccessor<number | false>): {
-    stop: () => void;
-    start: () => void;
+  stop: () => void;
+  start: () => void;
 };
-
-export { createLoopExec };
+//#endregion
+export { createLoopExec };

package/dist/fn/create-loop-exec.mjs

@@ -0,0 +1,59 @@
+import { isNumber } from "../utils/is.mjs";
+import { access } from "../reactive/access.mjs";
+import { createWatch } from "../reactive/create-watch.mjs";
+import { onCleanup } from "solid-js";
+
+//#region src/fn/create-loop-exec.ts
+/**
+* Repeatedly executes an asynchronous function with a specified delay between each execution.
+* The loop continues until the surrounding SolidJS effect is cleaned up.
+*
+* @param fn - The asynchronous function to execute in a loop. Can return a promise or void.
+* @param delay - The delay (in milliseconds) between each execution. Can be a number or a reactive accessor.
+* If `false` or < 0, the loop will not execute.
+*
+* @remarks
+* - The loop is automatically stopped when cleanup.
+* - `fn`'s error will not stop scheduling.
+* - Uses `setTimeout` for scheduling and `onCleanup` for resource management.
+*/
+function createLoopExec(fn, delay) {
+	let shouldStop = false;
+	let isCleanedUp = false;
+	let timer;
+	const execFn = async () => {
+		clearTimeout(timer);
+		const d = access(delay);
+		if (shouldStop || !isNumber(d) || d < 0) return;
+		try {
+			await fn();
+		} finally {
+			timer = setTimeout(() => {
+				execFn();
+			}, d);
+		}
+	};
+	createWatch(() => access(delay), () => {
+		execFn();
+	});
+	const stop = () => {
+		shouldStop = true;
+		clearTimeout(timer);
+	};
+	const start = () => {
+		if (isCleanedUp) return;
+		shouldStop = false;
+		execFn();
+	};
+	onCleanup(() => {
+		isCleanedUp = true;
+		stop();
+	});
+	return {
+		stop,
+		start
+	};
+}
+
+//#endregion
+export { createLoopExec };

package/dist/fn/create-throttle.d.mts

@@ -0,0 +1,7 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
+
+//#region src/fn/create-throttle.d.ts
+declare function createThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
+//#endregion
+export { createThrottle };

package/dist/fn/create-throttle.mjs

@@ -0,0 +1,21 @@
+import { access } from "../reactive/access.mjs";
+import { onCleanup } from "solid-js";
+
+//#region src/fn/create-throttle.ts
+function createThrottle(callback, delay) {
+	let timeoutId;
+	onCleanup(() => {
+		clearTimeout(timeoutId);
+	});
+	const run = (...args) => {
+		if (timeoutId) return;
+		timeoutId = setTimeout(() => {
+			callback(...args);
+			timeoutId = void 0;
+		}, access(delay));
+	};
+	return run;
+}
+
+//#endregion
+export { createThrottle };

package/dist/fn/index.d.mts

@@ -0,0 +1,8 @@
+import { createDebounce } from "./create-debounce.mjs";
+import { createLoopExec } from "./create-loop-exec.mjs";
+import { createThrottle } from "./create-throttle.mjs";
+
+//#region src/fn/index.d.ts
+declare const noop: () => void;
+//#endregion
+export { noop };

package/dist/fn/index.mjs

@@ -0,0 +1,9 @@
+import { createDebounce } from "./create-debounce.mjs";
+import { createLoopExec } from "./create-loop-exec.mjs";
+import { createThrottle } from "./create-throttle.mjs";
+
+//#region src/fn/index.ts
+const noop = () => {};
+
+//#endregion
+export { noop };

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import { OKLCH, RGB, oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
+import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
+import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
+import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
+import { AnyFn, Fn } from "./types/fn.mjs";
+import { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise } from "./types/maybe.mjs";
+import "./types/index.mjs";
+import { createClickOutside } from "./event/create-click-outside.mjs";
+import { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener } from "./event/make-event-listener.mjs";
+import { createEventListener } from "./event/create-event-listener.mjs";
+import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
+import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./event/create-visibility-observer.mjs";
+import { OnMotionEndOptions, OnMotionEndType, createOnMotionEnd, makeOnMotionEnd } from "./event/on-motion-end.mjs";
+import { runSolidEventHandler } from "./event/index.mjs";
+import { createDebounce } from "./fn/create-debounce.mjs";
+import { createLoopExec } from "./fn/create-loop-exec.mjs";
+import { createThrottle } from "./fn/create-throttle.mjs";
+import { noop } from "./fn/index.mjs";
+import { dataIf } from "./jsx/attrs.mjs";
+import { access } from "./reactive/access.mjs";
+import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
+import { createWatch } from "./reactive/create-watch.mjs";
+import "./reactive/index.mjs";
+import { clearArray, iterate, list, range } from "./utils/array.mjs";
+import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
+import { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol } from "./utils/is.mjs";
+import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
+import { draw, random, shuffle, uid } from "./utils/random.mjs";
+import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
+export { AnyFn, CreateVisibilityObserverOption, DocumentEventName, EntryCallback, Fn, GeneralEventListener, MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise, OKLCH, OnMotionEndOptions, OnMotionEndType, RGB, UseVisibilityObserverFn, WindowEventName, access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createOnMotionEnd, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hexToRgb, inRange, isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, makeOnMotionEnd, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };

package/dist/index.mjs

@@ -0,0 +1,27 @@
+import { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol } from "./utils/is.mjs";
+import { clearArray, iterate, list, range } from "./utils/array.mjs";
+import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
+import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
+import { draw, random, shuffle, uid } from "./utils/random.mjs";
+import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
+import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
+import { oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
+import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
+import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
+import { access } from "./reactive/access.mjs";
+import { createDebounce } from "./fn/create-debounce.mjs";
+import { createLoopExec } from "./fn/create-loop-exec.mjs";
+import { createThrottle } from "./fn/create-throttle.mjs";
+import { noop } from "./fn/index.mjs";
+import { createWatch } from "./reactive/create-watch.mjs";
+import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
+import { makeEventListener } from "./event/make-event-listener.mjs";
+import { createClickOutside } from "./event/create-click-outside.mjs";
+import { createEventListener } from "./event/create-event-listener.mjs";
+import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
+import { createVisibilityObserver } from "./event/create-visibility-observer.mjs";
+import { createOnMotionEnd, makeOnMotionEnd } from "./event/on-motion-end.mjs";
+import { runSolidEventHandler } from "./event/index.mjs";
+import { dataIf } from "./jsx/attrs.mjs";
+
+export { access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createOnMotionEnd, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hexToRgb, inRange, isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, makeOnMotionEnd, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };

package/dist/jsx/{attrs.d.ts → attrs.d.mts}

@@ -1,3 +1,4 @@
+//#region src/jsx/attrs.d.ts
 /**
  * return '' if show is true
  *
@@ -18,5 +19,5 @@
  * ```
  */
 declare function dataIf(show: boolean): "" | undefined;
-
-export { dataIf };
+//#endregion
+export { dataIf };

package/dist/jsx/attrs.mjs

@@ -0,0 +1,26 @@
+//#region src/jsx/attrs.ts
+/**
+* return '' if show is true
+*
+* suitable when you want to conditionally apply data attributes
+*
+* @example
+*
+* ```tsx
+*
+* function MyComponent(props:{size:'small'|'medium'|'large'}) {
+*   return <div
+*            data-size-small={dataIf(props.size === 'small')}
+*            data-size-medium={dataIf(props.size === 'medium')}
+*            data-size-large={dataIf(props.size === 'large')}
+*            >Hello</div>;
+* }
+*
+* ```
+*/
+function dataIf(show) {
+	return show ? "" : void 0;
+}
+
+//#endregion
+export { dataIf };

package/dist/reactive/access.d.mts

@@ -0,0 +1,6 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+
+//#region src/reactive/access.d.ts
+declare function access<T>(value: MaybeAccessor<T>): T;
+//#endregion
+export { access };

package/dist/reactive/access.mjs

@@ -0,0 +1,9 @@
+import { isFn } from "../utils/is.mjs";
+
+//#region src/reactive/access.ts
+function access(value) {
+	return isFn(value) ? value() : value;
+}
+
+//#endregion
+export { access };

package/dist/reactive/{create-debounce-watch.d.ts → create-debounce-watch.d.mts}

@@ -1,4 +1,6 @@
-import { AccessorArray, Accessor, OnOptions } from 'solid-js';
+import { Accessor, AccessorArray, OnOptions } from "solid-js";
+
+//#region src/reactive/create-debounce-watch.d.ts
 
 /**
  * Creates a debounced watch effect.
@@ -6,7 +8,7 @@ import { AccessorArray, Accessor, OnOptions } from 'solid-js';
  * opt.delay - The debounce delay in milliseconds. Default is 10ms.
  */
 declare function createDebouncedWatch<S, Next extends Prev, Prev = Next>(targets: AccessorArray<S> | Accessor<S>, fn: (input: S, prevInput?: S) => void, opt?: OnOptions & {
-    delay?: number;
+  delay?: number;
 }): void;
-
-export { createDebouncedWatch };
+//#endregion
+export { createDebouncedWatch };

package/dist/reactive/create-debounce-watch.mjs

@@ -0,0 +1,15 @@
+import { createDebounce } from "../fn/create-debounce.mjs";
+import { createWatch } from "./create-watch.mjs";
+
+//#region src/reactive/create-debounce-watch.ts
+/**
+* Creates a debounced watch effect.
+*
+* opt.delay - The debounce delay in milliseconds. Default is 10ms.
+*/
+function createDebouncedWatch(targets, fn, opt) {
+	createWatch(targets, createDebounce(fn, opt?.delay ?? 10), opt);
+}
+
+//#endregion
+export { createDebouncedWatch };

package/dist/reactive/{create-watch.d.ts → create-watch.d.mts}

@@ -1,5 +1,6 @@
-import { AccessorArray, Accessor, OnEffectFunction, OnOptions } from 'solid-js';
+import { Accessor, AccessorArray, OnEffectFunction, OnOptions } from "solid-js";
 
+//#region src/reactive/create-watch.d.ts
 declare function createWatch<S, Next extends Prev, Prev = Next>(targets: AccessorArray<S> | Accessor<S>, fn: OnEffectFunction<S, undefined | NoInfer<Prev>, Next>, opt?: OnOptions): void;
-
-export { createWatch };
+//#endregion
+export { createWatch };

package/dist/reactive/create-watch.mjs

@@ -0,0 +1,9 @@
+import { createEffect, on } from "solid-js";
+
+//#region src/reactive/create-watch.ts
+function createWatch(targets, fn, opt) {
+	createEffect(on(targets, fn, opt));
+}
+
+//#endregion
+export { createWatch };

package/dist/reactive/index.d.mts

@@ -0,0 +1,3 @@
+import { access } from "./access.mjs";
+import { createDebouncedWatch } from "./create-debounce-watch.mjs";
+import { createWatch } from "./create-watch.mjs";

package/dist/types/{fn.d.ts → fn.d.mts}

@@ -1,4 +1,5 @@
+//#region src/types/fn.d.ts
 type AnyFn<R = any> = (...args: any[]) => R;
 type Fn = () => void;
-
-export type { AnyFn, Fn };
+//#endregion
+export { AnyFn, Fn };

package/dist/types/index.d.mts

@@ -0,0 +1,2 @@
+import { AnyFn, Fn } from "./fn.mjs";
+import { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise } from "./maybe.mjs";

package/dist/types/{maybe.d.ts → maybe.d.mts}

@@ -1,8 +1,9 @@
-import { Accessor } from 'solid-js';
+import { Accessor } from "solid-js";
 
+//#region src/types/maybe.d.ts
 type MaybeArray<T> = T | T[];
 type MaybePromise<T> = T | Promise<T>;
 type MaybeAccessor<T> = T | Accessor<T>;
 type MaybeNullableAccessor<T> = T | Accessor<T | null | undefined>;
-
-export type { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise };
+//#endregion
+export { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise };

package/dist/utils/{array.d.ts → array.d.mts}

@@ -1,3 +1,4 @@
+//#region src/utils/array.d.ts
 /**
  * Like a reduce but does not require an array.
  * Only need a number and will iterate the function
@@ -42,5 +43,5 @@ declare const list: <T = number>(startOrLength: number, end?: number, valueOrMap
  * set arr.length to 0
  */
 declare function clearArray<T>(arr: T[]): void;
-
-export { clearArray, iterate, list, range };
+//#endregion
+export { clearArray, iterate, list, range };

package/dist/utils/array.mjs

@@ -0,0 +1,66 @@
+import { isFn } from "./is.mjs";
+
+//#region src/utils/array.ts
+/**
+* Like a reduce but does not require an array.
+* Only need a number and will iterate the function
+* as many times as specified.
+*
+* NOTE: This is NOT zero indexed. If you pass count=5
+* you will get 1, 2, 3, 4, 5 iteration in the callback
+* function
+*/
+const iterate = (count, func, initValue) => {
+	let value = initValue;
+	for (let i = 1; i <= count; i++) value = func(value, i);
+	return value;
+};
+/**
+* Creates a generator that will produce an iteration through
+* the range of number as requested.
+*
+* @example
+* range(3)                  // yields 0, 1, 2, 3
+* range(0, 3)               // yields 0, 1, 2, 3
+* range(0, 3, 'y')          // yields y, y, y, y
+* range(0, 3, () => 'y')    // yields y, y, y, y
+* range(0, 3, i => i)       // yields 0, 1, 2, 3
+* range(0, 3, i => `y${i}`) // yields y0, y1, y2, y3
+* range(0, 3, obj)          // yields obj, obj, obj, obj
+* range(0, 6, i => i, 2)    // yields 0, 2, 4, 6
+*/
+function* range(startOrLength, end, valueOrMapper = (i) => i, step = 1) {
+	const mapper = isFn(valueOrMapper) ? valueOrMapper : () => valueOrMapper;
+	const start = end ? startOrLength : 0;
+	const final = end ?? startOrLength;
+	for (let i = start; i <= final; i += step) {
+		yield mapper(i);
+		if (i + step > final) break;
+	}
+}
+/**
+* Creates a list of given start, end, value, and
+* step parameters.
+*
+* @example
+* list(3)                  // 0, 1, 2, 3
+* list(0, 3)               // 0, 1, 2, 3
+* list(0, 3, 'y')          // y, y, y, y
+* list(0, 3, () => 'y')    // y, y, y, y
+* list(0, 3, i => i)       // 0, 1, 2, 3
+* list(0, 3, i => `y${i}`) // y0, y1, y2, y3
+* list(0, 3, obj)          // obj, obj, obj, obj
+* list(0, 6, i => i, 2)    // 0, 2, 4, 6
+*/
+const list = (startOrLength, end, valueOrMapper, step) => {
+	return Array.from(range(startOrLength, end, valueOrMapper, step));
+};
+/**
+* set arr.length to 0
+*/
+function clearArray(arr) {
+	arr.length = 0;
+}
+
+//#endregion
+export { clearArray, iterate, list, range };

package/dist/utils/async.d.mts

@@ -0,0 +1,8 @@
+//#region src/utils/async.d.ts
+/**
+ * Async wait
+ */
+declare const sleep: (milliseconds: number) => Promise<unknown>;
+declare const runAtNextAnimationFrame: (cb: () => void) => number;
+//#endregion
+export { runAtNextAnimationFrame, sleep };

package/dist/utils/async.mjs

@@ -0,0 +1,17 @@
+//#region src/utils/async.ts
+/**
+* Async wait
+*/
+const sleep = (milliseconds) => {
+	return new Promise((res) => setTimeout(res, milliseconds));
+};
+const runAtNextAnimationFrame = (cb) => {
+	return requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			cb();
+		});
+	});
+};
+
+//#endregion
+export { runAtNextAnimationFrame, sleep };

package/dist/utils/{is.d.ts → is.d.mts}

@@ -1,3 +1,4 @@
+//#region src/utils/is.d.ts
 declare const isSymbol: (value: any) => value is symbol;
 declare const isArray: (arg: any) => arg is any[];
 declare const isObject: (value: any) => value is object;
@@ -24,5 +25,5 @@ declare const isDate: (value: any) => value is Date;
 declare const isPromise: (value: any) => value is Promise<any>;
 declare const isEmpty: (value: any) => boolean;
 declare const isClient: boolean;
-
-export { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol };
+//#endregion
+export { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol };