@vizejs/composable 0.426.3 → 0.427.0

package/dist/use-payment-request.mjs

@@ -0,0 +1,206 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, shallowRef, toValue, unref, watchPostEffect } from "vue";
+//#region src/use-payment-request.ts
+function isPaymentRequestHost(candidate) {
+	return typeof candidate === "function";
+}
+function browserPaymentRequest() {
+	if (typeof window === "undefined") return void 0;
+	const candidate = Reflect.get(window, "PaymentRequest");
+	return isPaymentRequestHost(candidate) ? candidate : void 0;
+}
+function hasUpdateWith(event) {
+	return "updateWith" in event && typeof event.updateWith === "function";
+}
+function errorName(error) {
+	return typeof error === "object" && error !== null && "name" in error ? error.name : void 0;
+}
+/**
+* Collect payments with a typed Payment Request API wrapper.
+*
+* Every `show()` constructs a fresh request from the reactive `methods`,
+* `details`, and `paymentOptions`, wires the shipping hooks (which call
+* `updateWith` synchronously when they return an update), and resolves to a
+* discriminated {@link PaymentShowResult}. Call `complete()` after
+* processing a `"completed"` result. A showing sheet is aborted when the
+* owning reactive scope stops; outside a scope call `abort()`.
+*
+* Server rendering: nothing is constructed, `supported` is false and
+* `state` is `"idle"`.
+* Inside a component `supported` turns true only after mounting, so
+* hydration renders this server state first.
+*
+* @example
+* ```ts
+* const payment = usePaymentRequest({ methods, details: { total } });
+* const result = await payment.show();
+* if (result.status === "completed") await payment.complete(await charge(result.response));
+* ```
+*
+* @param options Methods, details, hooks, and the constructor host.
+* @returns Payment state and actions.
+*/
+function usePaymentRequest(options) {
+	const state = shallowRef("idle");
+	const response = shallowRef(void 0);
+	const error = shallowRef(void 0);
+	let active;
+	let generation = 0;
+	let completing = false;
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveHost = () => options.PaymentRequest === void 0 ? browserPaymentRequest() : unref(options.PaymentRequest) ?? void 0;
+	const construct = (Host) => new Host([...toValue(options.methods)], toValue(options.details), toValue(options.paymentOptions) ?? {});
+	const bindHook = (request, type, hook) => {
+		if (!hook) return;
+		request.addEventListener(type, (event) => {
+			const update = hook({
+				request,
+				shippingAddress: request.shippingAddress ?? null,
+				shippingOption: request.shippingOption ?? null
+			});
+			if (update !== void 0 && hasUpdateWith(event)) event.updateWith(Promise.resolve(update));
+		});
+	};
+	const canMakePayment = async () => {
+		const Host = resolveHost();
+		if (!Host) return false;
+		try {
+			return await construct(Host).canMakePayment();
+		} catch {
+			return false;
+		}
+	};
+	const abort = async () => {
+		const current = active;
+		if (!current) return false;
+		try {
+			await current.abort();
+			if (active === current) {
+				active = void 0;
+				state.value = "idle";
+				generation += 1;
+			}
+			return true;
+		} catch {
+			return false;
+		}
+	};
+	const show = async () => {
+		const Host = resolveHost();
+		if (!Host) return {
+			status: "unsupported",
+			error: void 0
+		};
+		if (state.value === "awaiting-complete") return {
+			status: "failed",
+			error: /* @__PURE__ */ new Error("[VIZE_COMPOSE_PAYMENT_RESPONSE_INCOMPLETE] call complete() first")
+		};
+		const currentGeneration = ++generation;
+		const previous = active;
+		if (previous) {
+			try {
+				await previous.abort();
+			} catch (cause) {
+				if (active === previous) {
+					error.value = cause;
+					return {
+						status: "failed",
+						error: cause
+					};
+				}
+			}
+			if (active === previous) {
+				active = void 0;
+				state.value = "idle";
+			}
+			if (currentGeneration !== generation) return {
+				status: "aborted",
+				error: void 0
+			};
+		}
+		response.value = void 0;
+		let request;
+		try {
+			request = construct(Host);
+		} catch (cause) {
+			error.value = cause;
+			return {
+				status: "failed",
+				error: cause
+			};
+		}
+		bindHook(request, "shippingaddresschange", options.onShippingAddressChange);
+		bindHook(request, "shippingoptionchange", options.onShippingOptionChange);
+		active = request;
+		state.value = "interactive";
+		try {
+			const result = await request.show();
+			if (active !== request || currentGeneration !== generation) return {
+				status: "aborted",
+				error: void 0
+			};
+			active = void 0;
+			response.value = result;
+			state.value = "awaiting-complete";
+			error.value = void 0;
+			return {
+				status: "completed",
+				response: result
+			};
+		} catch (cause) {
+			if (active !== request || currentGeneration !== generation) return {
+				status: "aborted",
+				error: cause
+			};
+			active = void 0;
+			state.value = "idle";
+			const name = errorName(cause);
+			if (name === "AbortError") return {
+				status: "aborted",
+				error: cause
+			};
+			if (name === "NotSupportedError") return {
+				status: "unsupported",
+				error: cause
+			};
+			error.value = cause;
+			return {
+				status: "failed",
+				error: cause
+			};
+		}
+	};
+	const complete = async (result = "unknown") => {
+		const current = response.value;
+		if (!current || state.value !== "awaiting-complete" || completing) return false;
+		completing = true;
+		try {
+			await current.complete(result);
+			return true;
+		} catch (cause) {
+			error.value = cause;
+			return false;
+		} finally {
+			completing = false;
+			state.value = "idle";
+		}
+	};
+	tryOnScopeDispose(() => {
+		abort();
+	});
+	return {
+		supported: computed(() => hydrated.value && resolveHost() !== void 0),
+		state: readonly(state),
+		response: readonly(response),
+		error: readonly(error),
+		canMakePayment,
+		show,
+		complete,
+		abort
+	};
+}
+//#endregion
+export { usePaymentRequest };

package/dist/use-performance-observer.d.mts

@@ -0,0 +1,285 @@
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/use-performance-observer.d.ts
+/** Fields shared by every performance entry consumed by {@link usePerformanceObserver}. */
+interface PerformanceEntryLike {
+  /** Entry name (URL, mark name, paint name, event type, …). */
+  readonly name: string;
+  /** Entry type this entry was reported for. */
+  readonly entryType: string;
+  /** Start time relative to the time origin, in milliseconds. */
+  readonly startTime: number;
+  /** Duration in milliseconds (`0` for instantaneous entries). */
+  readonly duration: number;
+}
+/** `largest-contentful-paint` entry. */
+interface LargestContentfulPaintEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "largest-contentful-paint";
+  /** Render time, or `0` for cross-origin images without Timing-Allow-Origin. */
+  readonly renderTime: number;
+  /** Load time of the resource, or `0` for text. */
+  readonly loadTime: number;
+  /** Visible area of the element in square pixels. */
+  readonly size: number;
+  /** Element `id`, or an empty string. */
+  readonly id: string;
+  /** Image URL, or an empty string for text. */
+  readonly url: string;
+}
+/** `layout-shift` entry (Layout Instability API). */
+interface LayoutShiftEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "layout-shift";
+  /** Layout shift score. */
+  readonly value: number;
+  /** Whether a user input happened within the previous 500 ms. */
+  readonly hadRecentInput: boolean;
+  /** Time of the most recent input. */
+  readonly lastInputTime: number;
+}
+/** Fields of Event Timing entries (`event` and `first-input`). */
+interface EventTimingFieldsLike extends PerformanceEntryLike {
+  /** Time the event handlers started running. */
+  readonly processingStart: number;
+  /** Time the event handlers finished running. */
+  readonly processingEnd: number;
+  /** Whether the event was cancelable. */
+  readonly cancelable: boolean;
+  /** Interaction identifier; `0` when the event is not part of an interaction. */
+  readonly interactionId?: number;
+}
+/** `event` entry (Event Timing API). */
+interface EventTimingEntryLike extends EventTimingFieldsLike {
+  /** Entry type discriminant. */
+  readonly entryType: "event";
+}
+/** `first-input` entry (Event Timing API). */
+interface FirstInputEntryLike extends EventTimingFieldsLike {
+  /** Entry type discriminant. */
+  readonly entryType: "first-input";
+}
+/** `paint` entry (`first-paint` or `first-contentful-paint`). */
+interface PaintEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "paint";
+}
+/** Fields shared by resource and navigation timing entries. */
+interface ResourceTimingFieldsLike extends PerformanceEntryLike {
+  /** Initiator (`navigation`, `script`, `img`, `fetch`, …). */
+  readonly initiatorType: string;
+  /** Time the request started. */
+  readonly requestStart: number;
+  /** Time the first response byte arrived. */
+  readonly responseStart: number;
+  /** Time the last response byte arrived. */
+  readonly responseEnd: number;
+  /** Transferred size in bytes including headers. */
+  readonly transferSize: number;
+}
+/** `resource` entry (Resource Timing API). */
+interface ResourceTimingEntryLike extends ResourceTimingFieldsLike {
+  /** Entry type discriminant. */
+  readonly entryType: "resource";
+}
+/** `navigation` entry (Navigation Timing API). */
+interface NavigationTimingEntryLike extends ResourceTimingFieldsLike {
+  /** Entry type discriminant. */
+  readonly entryType: "navigation";
+  /** Navigation type (`navigate`, `reload`, `back_forward`, `prerender`). */
+  readonly type: string;
+  /** Time a prerendered page was activated; `0` or absent otherwise. */
+  readonly activationStart?: number;
+  /** End of the `DOMContentLoaded` handlers. */
+  readonly domContentLoadedEventEnd: number;
+  /** End of the `load` handlers. */
+  readonly loadEventEnd: number;
+}
+/** `longtask` entry (Long Tasks API). */
+interface LongTaskEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "longtask";
+}
+/** `mark` entry (User Timing API). */
+interface MarkEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "mark";
+  /** Detail passed to `performance.mark`. */
+  readonly detail: unknown;
+}
+/** `measure` entry (User Timing API). */
+interface MeasureEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "measure";
+  /** Detail passed to `performance.measure`. */
+  readonly detail: unknown;
+}
+/** `element` entry (Element Timing API). */
+interface ElementTimingEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "element";
+  /** Value of the `elementtiming` attribute. */
+  readonly identifier: string;
+  /** Render time. */
+  readonly renderTime: number;
+  /** Load time of the resource, or `0` for text. */
+  readonly loadTime: number;
+  /** Element `id`, or an empty string. */
+  readonly id: string;
+  /** Image URL, or an empty string for text. */
+  readonly url: string;
+}
+/** `long-animation-frame` entry (Long Animation Frames API). */
+interface LongAnimationFrameEntryLike extends PerformanceEntryLike {
+  /** Entry type discriminant. */
+  readonly entryType: "long-animation-frame";
+  /** Start of the rendering phase. */
+  readonly renderStart: number;
+  /** Start of style and layout. */
+  readonly styleAndLayoutStart: number;
+  /** Total blocking time of the frame in milliseconds. */
+  readonly blockingDuration: number;
+  /** Time of the first UI event handled in this frame, or `0`. */
+  readonly firstUIEventTimestamp: number;
+}
+/** Entry interface delivered for each supported entry type. */
+interface PerformanceEntryTypeMap {
+  /** Largest Contentful Paint candidates. */
+  readonly "largest-contentful-paint": LargestContentfulPaintEntryLike;
+  /** Layout shifts. */
+  readonly "layout-shift": LayoutShiftEntryLike;
+  /** Event Timing entries. */
+  readonly event: EventTimingEntryLike;
+  /** The first input of the page. */
+  readonly "first-input": FirstInputEntryLike;
+  /** First paint and first contentful paint. */
+  readonly paint: PaintEntryLike;
+  /** Document navigation timing. */
+  readonly navigation: NavigationTimingEntryLike;
+  /** Resource timing. */
+  readonly resource: ResourceTimingEntryLike;
+  /** Tasks longer than 50 ms. */
+  readonly longtask: LongTaskEntryLike;
+  /** User Timing marks. */
+  readonly mark: MarkEntryLike;
+  /** User Timing measures. */
+  readonly measure: MeasureEntryLike;
+  /** Element Timing entries. */
+  readonly element: ElementTimingEntryLike;
+  /** Long animation frames. */
+  readonly "long-animation-frame": LongAnimationFrameEntryLike;
+}
+/** Entry type understood by {@link usePerformanceObserver}. */
+type PerformanceEntryType = keyof PerformanceEntryTypeMap;
+/** Options passed to {@link PerformanceObserverLike.observe}. */
+interface PerformanceObserveInit {
+  /** Single entry type to observe. */
+  readonly type: string;
+  /** Replay entries buffered before observation started. */
+  readonly buffered?: boolean;
+  /** Minimum duration of reported `event` entries. */
+  readonly durationThreshold?: number;
+}
+/** Minimal entry list handed to observer callbacks. */
+interface PerformanceObserverEntryListLike {
+  /** Every entry of this batch. */
+  getEntries(): readonly PerformanceEntryLike[];
+}
+/** Minimal `PerformanceObserver` instance. */
+interface PerformanceObserverLike {
+  /** Start observing one entry type. */
+  observe(options: PerformanceObserveInit): void;
+  /** Stop observing everything. */
+  disconnect(): void;
+  /** Return and clear pending entries. */
+  takeRecords(): readonly PerformanceEntryLike[];
+}
+/** Minimal `PerformanceObserver` constructor. */
+interface PerformanceObserverHost {
+  /** Create an observer. */
+  new (callback: (list: PerformanceObserverEntryListLike, observer: PerformanceObserverLike) => void): PerformanceObserverLike;
+  /** Entry types this runtime supports; every type is attempted when absent. */
+  readonly supportedEntryTypes?: readonly string[] | undefined;
+}
+/** Options for {@link usePerformanceObserver}. */
+interface UsePerformanceObserverOptions {
+  /**
+   * `PerformanceObserver` constructor for alternate runtimes and tests. A ref
+   * (not a getter) because the host itself is a constructor function.
+   *
+   * @default window.PerformanceObserver when it exists
+   */
+  readonly PerformanceObserver?: MaybeRef<PerformanceObserverHost | null | undefined>;
+  /**
+   * Replay entries recorded before observation started.
+   *
+   * @default false
+   */
+  readonly buffered?: boolean;
+  /**
+   * Minimum duration in milliseconds of reported `event` entries (the
+   * platform rounds it and clamps it to at least 16).
+   *
+   * @default undefined (platform default of 104)
+   */
+  readonly durationThreshold?: number;
+  /**
+   * Start observing immediately.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+}
+/** Callback invoked with correctly typed entries. */
+type PerformanceObserverCallback<Type extends PerformanceEntryType> = (entries: readonly PerformanceEntryTypeMap[Type][], observer: PerformanceObserverLike) => void;
+/** Reactive state and actions returned by {@link usePerformanceObserver}. */
+interface PerformanceObserverControls<Type extends PerformanceEntryType> {
+  /** Whether an observer exists and supports at least one requested type. */
+  readonly supported: ComputedRef<boolean>;
+  /** Requested entry types the runtime supports. */
+  readonly observedTypes: ComputedRef<readonly Type[]>;
+  /** Whether an observer is currently connected. */
+  readonly isActive: Readonly<ShallowRef<boolean>>;
+  /** Most recent failure thrown by `observe`, cleared on the next start. */
+  readonly error: Readonly<ShallowRef<unknown>>;
+  /** Start (or restart) observing. */
+  readonly start: () => void;
+  /** Disconnect the observer. Repeated calls are safe. */
+  readonly stop: () => void;
+  /**
+   * Return and clear entries that are queued but not yet delivered.
+   *
+   * @returns Pending entries of the requested types.
+   */
+  readonly takeRecords: () => readonly PerformanceEntryTypeMap[Type][];
+}
+/**
+ * Observe performance entries with callbacks typed by entry type.
+ *
+ * Each supported type is observed with its own `observe({ type })` call so
+ * `buffered` and `durationThreshold` apply. Types missing from
+ * `PerformanceObserver.supportedEntryTypes` are skipped; `supported` is false
+ * when none remain. The observer follows reactive `entryTypes` and is
+ * disconnected when the owning reactive scope stops; outside a scope the
+ * caller owns `stop()`.
+ *
+ * Server rendering: no observer is created and `supported` is false. Inside
+ * a component the observer connects after mounting, so hydration renders the
+ * server state first.
+ *
+ * @example
+ * ```ts
+ * usePerformanceObserver("largest-contentful-paint", (entries) => {
+ *   console.log(entries.at(-1)?.renderTime);
+ * }, { buffered: true });
+ * ```
+ *
+ * @param entryTypes One entry type or a list of them.
+ * @param callback Receives batches of typed entries.
+ * @param options Constructor host and observation options.
+ * @default options {}
+ * @returns Observer state and actions.
+ */
+declare function usePerformanceObserver<const Type extends PerformanceEntryType>(entryTypes: MaybeRefOrGetter<Type | readonly Type[]>, callback: PerformanceObserverCallback<Type>, options?: UsePerformanceObserverOptions): PerformanceObserverControls<Type>;
+//#endregion
+export { ElementTimingEntryLike, EventTimingEntryLike, EventTimingFieldsLike, FirstInputEntryLike, LargestContentfulPaintEntryLike, LayoutShiftEntryLike, LongAnimationFrameEntryLike, LongTaskEntryLike, MarkEntryLike, MeasureEntryLike, NavigationTimingEntryLike, PaintEntryLike, PerformanceEntryLike, PerformanceEntryType, PerformanceEntryTypeMap, PerformanceObserveInit, PerformanceObserverCallback, PerformanceObserverControls, PerformanceObserverEntryListLike, PerformanceObserverHost, PerformanceObserverLike, ResourceTimingEntryLike, ResourceTimingFieldsLike, UsePerformanceObserverOptions, usePerformanceObserver };

package/dist/use-performance-observer.mjs

@@ -0,0 +1,132 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, shallowRef, toValue, unref, watch, watchPostEffect } from "vue";
+//#region src/use-performance-observer.ts
+function isPerformanceObserverHost(candidate) {
+	return typeof candidate === "function";
+}
+function browserPerformanceObserver() {
+	if (typeof window === "undefined") return void 0;
+	const candidate = Reflect.get(window, "PerformanceObserver");
+	return isPerformanceObserverHost(candidate) ? candidate : void 0;
+}
+function isEntryOf(entry, types) {
+	return types.some((type) => type === entry.entryType);
+}
+/**
+* Observe performance entries with callbacks typed by entry type.
+*
+* Each supported type is observed with its own `observe({ type })` call so
+* `buffered` and `durationThreshold` apply. Types missing from
+* `PerformanceObserver.supportedEntryTypes` are skipped; `supported` is false
+* when none remain. The observer follows reactive `entryTypes` and is
+* disconnected when the owning reactive scope stops; outside a scope the
+* caller owns `stop()`.
+*
+* Server rendering: no observer is created and `supported` is false. Inside
+* a component the observer connects after mounting, so hydration renders the
+* server state first.
+*
+* @example
+* ```ts
+* usePerformanceObserver("largest-contentful-paint", (entries) => {
+*   console.log(entries.at(-1)?.renderTime);
+* }, { buffered: true });
+* ```
+*
+* @param entryTypes One entry type or a list of them.
+* @param callback Receives batches of typed entries.
+* @param options Constructor host and observation options.
+* @default options {}
+* @returns Observer state and actions.
+*/
+function usePerformanceObserver(entryTypes, callback, options = {}) {
+	const { durationThreshold } = options;
+	if (durationThreshold !== void 0 && (!Number.isFinite(durationThreshold) || durationThreshold < 0)) throw new RangeError(`[VIZE_COMPOSE_PERF_OBSERVER_INVALID_DURATION_THRESHOLD] durationThreshold must be a finite, non-negative number, received ${String(durationThreshold)}`);
+	const isActive = shallowRef(false);
+	const error = shallowRef(void 0);
+	let observer;
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveHost = () => {
+		if (!hydrated.value) return void 0;
+		return options.PerformanceObserver === void 0 ? browserPerformanceObserver() : unref(options.PerformanceObserver) ?? void 0;
+	};
+	const requestedTypes = () => {
+		const value = toValue(entryTypes);
+		return typeof value === "string" ? [value] : [...new Set(value)];
+	};
+	const observedTypes = computed(() => {
+		const host = resolveHost();
+		if (!host) return [];
+		const supportedTypes = host.supportedEntryTypes;
+		const requested = requestedTypes();
+		return supportedTypes ? requested.filter((type) => supportedTypes.includes(type)) : requested;
+	});
+	const disconnect = () => {
+		observer?.disconnect();
+		observer = void 0;
+		isActive.value = false;
+	};
+	const connect = () => {
+		disconnect();
+		const host = resolveHost();
+		const types = observedTypes.value;
+		if (!host || types.length === 0) return;
+		error.value = void 0;
+		const next = new host((list, current) => {
+			const entries = list.getEntries().filter((entry) => isEntryOf(entry, types));
+			if (entries.length > 0) callback(entries, current);
+		});
+		let observing = 0;
+		for (const type of types) try {
+			next.observe({
+				type,
+				...options.buffered === void 0 ? {} : { buffered: options.buffered },
+				...type === "event" && durationThreshold !== void 0 ? { durationThreshold } : {}
+			});
+			observing += 1;
+		} catch (cause) {
+			error.value = cause;
+		}
+		if (observing === 0) {
+			next.disconnect();
+			return;
+		}
+		observer = next;
+		isActive.value = true;
+	};
+	let enabled = options.immediate ?? true;
+	const stopWatch = watch(() => [resolveHost(), observedTypes.value.join(" ")], () => {
+		if (enabled) connect();
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const stop = () => {
+		enabled = false;
+		disconnect();
+	};
+	tryOnScopeDispose(() => {
+		stopWatch();
+		stop();
+	});
+	return {
+		supported: computed(() => observedTypes.value.length > 0),
+		observedTypes,
+		isActive: readonly(isActive),
+		error: readonly(error),
+		start: () => {
+			enabled = true;
+			connect();
+		},
+		stop,
+		takeRecords: () => {
+			const types = observedTypes.value;
+			return observer ? observer.takeRecords().filter((entry) => isEntryOf(entry, types)) : [];
+		}
+	};
+}
+//#endregion
+export { usePerformanceObserver };