elements-kit 0.0.12 → 0.0.14

package/dist/utilities/async.mjs

@@ -0,0 +1,119 @@
+import { _ as signal, r as resolve, u as effect, y as untracked } from "../signals-BHmWX6ox.mjs";
+import { promise } from "./promise.mjs";
+//#region src/utilities/async.ts
+var Async = class {
+	#fn = signal(async () => Promise.resolve(void 0));
+	#cleanup = () => {};
+	get fn() {
+		return this.#fn();
+	}
+	set fn(fn) {
+		this.#fn(resolve(fn));
+	}
+	#current = signal(promise(() => {}));
+	get raw() {
+		return this.#current();
+	}
+	get pending() {
+		return this.raw.state === "pending";
+	}
+	get state() {
+		return this.raw.state;
+	}
+	get value() {
+		return this.raw.value;
+	}
+	get reason() {
+		return this.raw.reason;
+	}
+	get result() {
+		return this.raw.result;
+	}
+	then(onfulfilled, onrejected) {
+		return this.raw.then(onfulfilled, onrejected);
+	}
+	catch(onrejected) {
+		return this.raw.catch(onrejected);
+	}
+	finally(onfinally) {
+		return this.raw.finally(onfinally);
+	}
+	constructor(fn) {
+		this.#fn(resolve(fn));
+	}
+	#execute(...args) {
+		const input = args[0];
+		const p = promise(this.fn(input));
+		this.#current(p);
+		return p;
+	}
+	/**
+	* Runs the async function once with the given input, stopping any currently active
+	* and register cleanup effects.
+	*/
+	run(...args) {
+		this.stop();
+		this.#cleanup = effect(() => {
+			untracked(() => this.#execute(...args));
+		});
+		return this;
+	}
+	/**
+	* Stops the current async operation and run cleanup effects.
+	*/
+	stop() {
+		this.#cleanup();
+		this.#cleanup = () => {};
+		return this;
+	}
+	[Symbol.dispose]() {
+		this.stop();
+	}
+	/**
+	* Starts a new reactive async operation, stopping any currently active one.
+	*/
+	start(...args) {
+		this.stop();
+		this.#cleanup = effect(() => {
+			this.#execute(...args);
+		});
+		return this;
+	}
+};
+const ASYNC_KEYS = new Set([
+	"then",
+	"catch",
+	"finally",
+	"state",
+	"value",
+	"reason",
+	"result",
+	"pending",
+	"start",
+	"stop",
+	"run",
+	"fn",
+	"raw",
+	Symbol.dispose
+]);
+function async(fn) {
+	const inst = new Async(fn);
+	const signal = () => inst.result;
+	return new Proxy(signal, {
+		apply(_target, _thisArg, args) {
+			return inst.result;
+		},
+		get(_target, prop, receiver) {
+			if (ASYNC_KEYS.has(prop)) {
+				const val = inst[prop];
+				return typeof val === "function" ? val.bind(inst) : val;
+			}
+			return Reflect.get(signal, prop, receiver);
+		},
+		getPrototypeOf() {
+			return Async.prototype;
+		}
+	});
+}
+//#endregion
+export { Async, async };

package/dist/utilities/async.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/utilities/async.test.mjs

@@ -0,0 +1,273 @@
+import { _ as signal, g as onCleanup, u as effect } from "../signals-BHmWX6ox.mjs";
+import { n as vi, o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { Async, async } from "./async.mjs";
+import { createInterval } from "./interval.mjs";
+//#region src/utilities/async.test.ts
+function deferred() {
+	let resolve;
+	let reject;
+	return {
+		promise: new Promise((res, rej) => {
+			resolve = res;
+			reject = rej;
+		}),
+		resolve,
+		reject
+	};
+}
+describe("Async", () => {
+	it("is reactive as a computed signal (effect)", async () => {
+		const op = async((x) => Promise.resolve(x * 2));
+		const values = [];
+		const stop = effect(() => {
+			values.push(op());
+		});
+		op.run(2);
+		await op;
+		op.run(3);
+		await op;
+		stop();
+		globalExpect(values).toContain(void 0);
+		globalExpect(values).toContain(4);
+		globalExpect(values).toContain(6);
+		globalExpect(values.at(-1)).toBe(6);
+	});
+	it("is callable as a signal and returns the current result", async () => {
+		const op = async(() => Promise.resolve(123));
+		globalExpect(op()).toBeUndefined();
+		op.start();
+		await op;
+		globalExpect(op()).toBe(123);
+		const err = /* @__PURE__ */ new Error("fail");
+		const op2 = async(() => Promise.reject(err));
+		op2.start();
+		await op2.catch(() => {});
+		globalExpect(op2()).toBe(err);
+	});
+	it("starts in pending state with no value or reason", () => {
+		const op = async(() => Promise.resolve(1));
+		globalExpect(op.state).toBe("pending");
+		globalExpect(op.pending).toBe(true);
+		globalExpect(op.value).toBeUndefined();
+		globalExpect(op.reason).toBeUndefined();
+		globalExpect(op.result).toBeUndefined();
+		globalExpect(op.pending).toBe(op.state === "pending");
+	});
+	it("transitions to fulfilled after start()", async () => {
+		const op = async(() => Promise.resolve(42));
+		op.start();
+		await op;
+		globalExpect(op.state).toBe("fulfilled");
+		globalExpect(op.pending).toBe(false);
+		globalExpect(op.value).toBe(42);
+		globalExpect(op.reason).toBeUndefined();
+		globalExpect(op.result).toBe(42);
+		globalExpect(op.result).toBe(42);
+	});
+	it("transitions to rejected after start()", async () => {
+		const err = /* @__PURE__ */ new Error("fail");
+		const op = async(() => Promise.reject(err));
+		op.start();
+		await op.catch(() => {});
+		globalExpect(op.state).toBe("rejected");
+		globalExpect(op.pending).toBe(false);
+		globalExpect(op.reason).toBe(err);
+		globalExpect(op.value).toBeUndefined();
+		globalExpect(op.result).toBe(err);
+		globalExpect(op.reason).toBe(err);
+	});
+	it("await op.run(args) resolves to the fulfilled value", async () => {
+		const op = async((x) => Promise.resolve(x + 100));
+		globalExpect(await op.run(23)).toBe(123);
+		globalExpect(op.value).toBe(123);
+		globalExpect(op.state).toBe("fulfilled");
+	});
+	it("run() resolves to the fulfilled value", async () => {
+		globalExpect(await async((x) => Promise.resolve(x * 2)).run(5)).toBe(10);
+	});
+	it("await op resolves to the fulfilled value", async () => {
+		const op = async(() => Promise.resolve(7));
+		op.start();
+		globalExpect(await op).toBe(7);
+	});
+	it("await op.catch() resolves on rejection", async () => {
+		const err = /* @__PURE__ */ new Error("fail");
+		const op = async(() => Promise.reject(err));
+		op.start();
+		globalExpect(await op.catch((e) => e)).toBe(err);
+	});
+	it("delegates .then()", async () => {
+		const op = async(() => Promise.resolve(3));
+		op.start();
+		globalExpect(await op.then((v) => (v ?? 0) * 2)).toBe(6);
+	});
+	it("instanceof Async", () => {
+		globalExpect(async(() => Promise.resolve()) instanceof Async).toBe(true);
+	});
+	it("is reactive — effect reruns when state transitions to fulfilled", async () => {
+		const op = async(() => Promise.resolve(10));
+		const snapshots = [];
+		const stop = effect(() => {
+			snapshots.push(op.state);
+		});
+		op.start();
+		await op;
+		stop();
+		globalExpect(snapshots).toContain("pending");
+		globalExpect(snapshots.at(-1)).toBe("fulfilled");
+	});
+	it("is reactive — effect sees value after fulfillment", async () => {
+		const op = async(() => Promise.resolve(99));
+		const values = [];
+		const stop = effect(() => {
+			values.push(op.value);
+		});
+		op.start();
+		await op;
+		stop();
+		globalExpect(values).toEqual([
+			void 0,
+			void 0,
+			99
+		]);
+	});
+	it("is reactive — effect reruns on rejection", async () => {
+		const err = /* @__PURE__ */ new Error("x");
+		const op = async(() => Promise.reject(err));
+		const reasons = [];
+		const stop = effect(() => {
+			reasons.push(op.reason);
+		});
+		op.start();
+		await op.catch(() => {});
+		stop();
+		globalExpect(reasons).toEqual([
+			void 0,
+			void 0,
+			err
+		]);
+	});
+	it("start() re-runs when a signal read inside fn changes", async () => {
+		const id = signal(1);
+		const calls = [];
+		const op = async(() => {
+			const current = id();
+			calls.push(current);
+			return Promise.resolve(current);
+		});
+		op.start();
+		await op;
+		id(2);
+		await op;
+		op.stop();
+		globalExpect(calls).toEqual([1, 2]);
+	});
+	it("run() is not reactive — signal change does not re-run", async () => {
+		const id = signal(1);
+		const calls = [];
+		const op = async(() => {
+			const current = id();
+			calls.push(current);
+			return Promise.resolve(current);
+		});
+		op.run();
+		await op;
+		id(2);
+		await Promise.resolve();
+		op.stop();
+		globalExpect(calls).toEqual([1]);
+	});
+	it("start() resets to pending on re-run", async () => {
+		const d = deferred();
+		const id = signal(1);
+		const op = async(() => {
+			id();
+			return d.promise;
+		});
+		op.start();
+		globalExpect(op.pending).toBe(true);
+		id(2);
+		globalExpect(op.pending).toBe(true);
+		d.resolve(5);
+		op.stop();
+	});
+	it("stop() prevents further reactive reruns", async () => {
+		const id = signal(1);
+		const calls = [];
+		const op = async(() => {
+			calls.push(id());
+			return Promise.resolve(id());
+		});
+		op.start();
+		await op;
+		op.stop();
+		id(2);
+		await Promise.resolve();
+		globalExpect(calls).toEqual([1]);
+	});
+	it("onCleanup inside run() fires when stop() is called", () => {
+		const cleaned = [];
+		const op = async(() => {
+			onCleanup(() => cleaned.push(1));
+			return Promise.resolve();
+		});
+		op.run();
+		globalExpect(cleaned).toEqual([]);
+		op.stop();
+		globalExpect(cleaned).toEqual([1]);
+	});
+	it("onCleanup inside start() fires on each re-run", async () => {
+		const id = signal(1);
+		const cleaned = [];
+		const op = async(() => {
+			const current = id();
+			onCleanup(() => cleaned.push(current));
+			return Promise.resolve();
+		});
+		op.start();
+		await op;
+		id(2);
+		await op;
+		op.stop();
+		globalExpect(cleaned[0]).toBe(1);
+	});
+	it("re-runs when createInterval ticks", async () => {
+		vi.useFakeTimers();
+		const timer = createInterval(1e3);
+		const calls = [];
+		const op = async(() => {
+			timer.timestamp();
+			calls.push(calls.length);
+			return Promise.resolve(calls.length);
+		});
+		op.start();
+		await op;
+		globalExpect(calls.length).toBe(1);
+		vi.advanceTimersByTime(1e3);
+		await op;
+		globalExpect(calls.length).toBe(2);
+		op.stop();
+		timer.stop();
+		vi.useRealTimers();
+	});
+	it("state and value update atomically — no inconsistent intermediate state", async () => {
+		const op = async(() => Promise.resolve(7));
+		const snapshots = [];
+		const stop = effect(() => {
+			snapshots.push({
+				state: op.state,
+				value: op.value
+			});
+		});
+		op.start();
+		await op;
+		stop();
+		globalExpect(snapshots.find((s) => s.state === "fulfilled" && s.value === void 0)).toBeUndefined();
+		globalExpect(snapshots.at(-1)).toEqual({
+			state: "fulfilled",
+			value: 7
+		});
+	});
+});
+//#endregion
+export {};

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

package/dist/utilities/debounced.mjs

@@ -1,4 +1,4 @@
-import { o as effect, p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, u as effect } from "../signals-BHmWX6ox.mjs";
 import { createTimeout } from "./timeout.mjs";
 //#region src/utilities/debounced.ts
 /**

package/dist/utilities/debounced.test.mjs

@@ -1,4 +1,4 @@
-import { p as signal, s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { a as beforeEach, n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createDebounced } from "./debounced.mjs";
 //#region src/utilities/debounced.test.ts

package/dist/utilities/element-rect.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/element-rect.d.ts
 type RectResult = {

package/dist/utilities/element-rect.mjs

@@ -1,4 +1,4 @@
-import { p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal } from "../signals-BHmWX6ox.mjs";
 import { createResizeObserver } from "./resize-observer.mjs";
 //#region src/utilities/element-rect.ts
 /**

package/dist/utilities/element-rect.test.mjs

@@ -1,4 +1,4 @@
-import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createElementRect } from "./element-rect.mjs";
 //#region src/utilities/element-rect.test.ts

package/dist/utilities/element-scroll.d.mts

@@ -1,4 +1,4 @@
-import { r as Signal } from "../index-Cvdhuy6Y.mjs";
+import { r as Signal } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/element-scroll.mjs

@@ -1,4 +1,4 @@
-import { f as onCleanup, o as effect, p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, g as onCleanup, u as effect } from "../signals-BHmWX6ox.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/element-scroll.ts
 /**

package/dist/utilities/element-scroll.test.mjs

@@ -1,4 +1,4 @@
-import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createElementScroll } from "./element-scroll.mjs";
 //#region src/utilities/element-scroll.test.ts

package/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { r as Signal, t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { r as Signal, t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

package/dist/utilities/event-driven.mjs

@@ -1,4 +1,4 @@
-import { a as computed, f as onCleanup, m as trigger, p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, g as onCleanup, l as computed, s as $signal, v as trigger } from "../signals-BHmWX6ox.mjs";
 //#region src/utilities/event-driven.ts
 /**
 * Returns a `Subscribe` for one or more DOM events on a target.
@@ -24,15 +24,17 @@ function sync(subscribe, getter, setter) {
 	value();
 	const cleanup = subscribe(() => trigger(tick));
 	onCleanup(cleanup);
-	if (setter) {
-		const proxy = (v) => {
-			if (v === void 0) return value();
+	const factory = () => {
+		if (!setter) return value;
+		function proxy(v) {
+			if (arguments.length === 0 || !setter) return value();
 			setter(v);
 			return v;
-		};
-		return [proxy, cleanup];
-	}
-	return [value, cleanup];
+		}
+		Object.defineProperty(proxy, $signal, { value: true });
+		return proxy;
+	};
+	return [factory(), cleanup];
 }
 //#endregion
 export { fromEvent, sync };

package/dist/utilities/event-listener.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

package/dist/utilities/event-listener.mjs

@@ -1,4 +1,4 @@
-import { f as onCleanup, o as effect } from "../signals-DcgXhkU2.mjs";
+import { g as onCleanup, u as effect } from "../signals-BHmWX6ox.mjs";
 //#region src/utilities/event-listener.ts
 function on(target, type, handler, options) {
 	const add = (t) => options !== void 0 ? t.addEventListener(type, handler, options) : t.addEventListener(type, handler);

package/dist/utilities/event-listener.test.mjs

@@ -1,4 +1,4 @@
-import { o as effect, p as signal, s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, d as effectScope, u as effect } from "../signals-BHmWX6ox.mjs";
 import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/event-listener.test.ts

package/dist/utilities/focus-within.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/focus-within.d.ts
 /**

package/dist/utilities/focus-within.mjs

@@ -1,4 +1,4 @@
-import { p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal } from "../signals-BHmWX6ox.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/focus-within.ts
 /**

package/dist/utilities/focus-within.test.mjs

@@ -1,4 +1,4 @@
-import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createFocusWithin } from "./focus-within.mjs";
 //#region src/utilities/focus-within.test.ts

package/dist/utilities/hover.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/hover.d.ts
 /**

package/dist/utilities/hover.mjs

@@ -1,4 +1,4 @@
-import { p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal } from "../signals-BHmWX6ox.mjs";
 import { on } from "./event-listener.mjs";
 //#region src/utilities/hover.ts
 /**

package/dist/utilities/hover.test.mjs

@@ -1,4 +1,4 @@
-import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createHover } from "./hover.mjs";
 //#region src/utilities/hover.test.ts

package/dist/utilities/intersection-observer.mjs

@@ -1,4 +1,4 @@
-import { f as onCleanup } from "../signals-DcgXhkU2.mjs";
+import { g as onCleanup } from "../signals-BHmWX6ox.mjs";
 //#region src/utilities/intersection-observer.ts
 /**
 * Raw `IntersectionObserver` wrapper with automatic cleanup.

package/dist/utilities/intersection-observer.test.mjs

@@ -1,4 +1,4 @@
-import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { d as effectScope } from "../signals-BHmWX6ox.mjs";
 import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createIntersectionObserver } from "./intersection-observer.mjs";
 //#region src/utilities/intersection-observer.test.ts

package/dist/utilities/interval.d.mts

@@ -1,18 +1,19 @@
-import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+import { t as Computed } from "../index-DUshSQ_6.mjs";
 
 //#region src/utilities/interval.d.ts
 type IntervalResult = {
-  isRunning: Computed<boolean>;
+  timestamp: Computed<number>;
+  pending: Computed<boolean>;
   start(): void;
   stop(): void;
   reset(): void;
 } & Disposable;
+type Fn = () => void;
+type Delay = number | (() => number);
 /**
  * Pausable `setInterval` wrapper.  Starts running immediately on creation.
- *
- * @param callback - Called on each tick.
- * @param delay    - Interval delay in ms (or a reactive getter).
  */
-declare function createInterval(callback: () => void, delay: number | (() => number)): IntervalResult;
+declare function createInterval(delay: Delay): IntervalResult;
+declare function createInterval(callback: Fn, delay: Delay): IntervalResult;
 //#endregion
 export { createInterval };

package/dist/utilities/interval.mjs

@@ -1,24 +1,23 @@
-import { f as onCleanup, p as signal } from "../signals-DcgXhkU2.mjs";
+import { _ as signal, g as onCleanup } from "../signals-BHmWX6ox.mjs";
 //#region src/utilities/interval.ts
-/**
-* Pausable `setInterval` wrapper.  Starts running immediately on creation.
-*
-* @param callback - Called on each tick.
-* @param delay    - Interval delay in ms (or a reactive getter).
-*/
-function createInterval(callback, delay) {
-	const isRunning = signal(true);
+function createInterval(arg1, arg2) {
+	const [callback, delay] = resolveArgs(arg1, arg2);
+	const pending = signal(true);
 	let id;
+	const timestamp = signal(Date.now());
 	const getDelay = typeof delay === "function" ? delay : () => delay;
 	const start = () => {
 		if (id !== void 0) return;
-		isRunning(true);
-		id = setInterval(() => callback(), getDelay());
+		pending(true);
+		id = setInterval(() => {
+			callback?.();
+			timestamp(Date.now());
+		}, getDelay());
 	};
 	const stop = () => {
 		clearInterval(id);
 		id = void 0;
-		isRunning(false);
+		pending(false);
 	};
 	const reset = () => {
 		stop();
@@ -28,12 +27,17 @@ function createInterval(callback, delay) {
 	const cleanup = () => stop();
 	onCleanup(cleanup);
 	return {
-		isRunning,
+		timestamp,
+		pending,
 		start,
 		stop,
 		reset,
 		[Symbol.dispose]: cleanup
 	};
 }
+function resolveArgs(arg1, arg2) {
+	if (arg2 === void 0) return [void 0, arg1];
+	return [arg1, arg2];
+}
 //#endregion
 export { createInterval };