react-sync-ui 1.0.3 → 2.0.0

package/dist/index.js

@@ -1,8 +1,196 @@
+import { Component, useCallback, useEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/syncUI.tsx
+var isDev = process.env.NODE_ENV !== "production";
+var entrySeq = 0;
+var defaultRejectReason = () => /* @__PURE__ */ new Error("react-sync-ui: rejected without a reason");
+/**
+* The queue lives OUTSIDE React. Every mutation happens in an event handler, an
+* async continuation or a commit-phase lifecycle (the error boundary's
+* `componentDidCatch`), never during render and never inside a setState
+* updater, so StrictMode's double render / double updater passes and HMR
+* remounts can neither duplicate nor lose a promise settlement. The
+* commit-phase case is safe because a mutation only schedules a rerender
+* through the subscription; it never runs while React is rendering.
+*/
+var createQueueStore = () => {
+	let queue = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = () => {
+		listeners.forEach((listener) => listener());
+	};
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	const getHead = () => queue[0] ?? null;
+	const push = (type, data) => new Promise((resolve, reject) => {
+		queue = [...queue, {
+			id: ++entrySeq,
+			type,
+			data,
+			resolve,
+			reject
+		}];
+		emit();
+	});
+	const settle = (entry, run) => {
+		const next = queue.filter((item) => item !== entry);
+		if (next.length === queue.length) return;
+		queue = next;
+		emit();
+		run(entry);
+	};
+	const drain = (reason) => {
+		if (queue.length === 0) return;
+		const abandoned = queue;
+		queue = [];
+		emit();
+		abandoned.forEach((item) => item.reject(reason));
+	};
+	return {
+		subscribe,
+		emit,
+		getHead,
+		push,
+		drain,
+		size: () => queue.length,
+		resolveEntry: (entry, value) => settle(entry, (item) => item.resolve(value)),
+		rejectEntry: (entry, reason) => settle(entry, (item) => item.reject(reason ?? defaultRejectReason()))
+	};
+};
+var getNullSnapshot = () => null;
+var defaultQueueType = Symbol("usePromiseQueue");
+var usePromiseQueue = () => {
+	const [store] = useState(() => createQueueStore());
+	const head = useSyncExternalStore(store.subscribe, store.getHead, getNullSnapshot);
+	const push = useCallback((data) => store.push(defaultQueueType, data), [store]);
+	const drainPending = useRef(false);
+	useEffect(() => {
+		drainPending.current = false;
+		return () => {
+			drainPending.current = true;
+			queueMicrotask(() => {
+				if (!drainPending.current) return;
+				drainPending.current = false;
+				store.drain(/* @__PURE__ */ new Error("react-sync-ui: usePromiseQueue unmounted with pending items"));
+			});
+		};
+	}, [store]);
+	return useMemo(() => ({
+		head: head ? {
+			data: head.data,
+			resolve: (value) => store.resolveEntry(head, value),
+			reject: (reason) => store.rejectEntry(head, reason)
+		} : void 0,
+		push
+	}), [
+		head,
+		push,
+		store
+	]);
+};
+var SyncUIErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this.state = { failed: false };
+	}
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error, _info) {
+		this.props.onError(this.props.entry, error);
+	}
+	render() {
+		return this.state.failed ? null : this.props.children;
+	}
+};
+var syncUIFactory = () => {
+	const store = createQueueStore();
+	const components = /* @__PURE__ */ new Map();
+	const hosts = /* @__PURE__ */ new Set();
+	const primaryHost = () => hosts.values().next().value;
+	let hostEverMounted = false;
+	let warnedNoHost = false;
+	let warnedMultipleHosts = false;
+	let noHostTimer;
+	const scheduleNoHostWarning = () => {
+		if (!isDev || hostEverMounted || warnedNoHost || noHostTimer) return;
+		if (typeof window === "undefined") return;
+		noHostTimer = setTimeout(() => {
+			noHostTimer = void 0;
+			if (hostEverMounted || store.size() === 0) return;
+			warnedNoHost = true;
+			console.error("[react-sync-ui] a sync UI has been pending for 3s and no <SyncUI /> is mounted. Render <SyncUI /> once, near the root of your app.");
+		}, 3e3);
+	};
+	const makeSyncUI = (Component) => {
+		const type = Symbol(Component.displayName || Component.name || "SyncUI");
+		components.set(type, Component);
+		return (input) => {
+			scheduleNoHostWarning();
+			return store.push(type, input);
+		};
+	};
+	const SyncUI = () => {
+		const [token] = useState(() => ({}));
+		const [, rerender] = useReducer((n) => n + 1, 0);
+		const getSnapshot = useCallback(() => primaryHost() === token ? store.getHead() : null, [token]);
+		const head = useSyncExternalStore(store.subscribe, getSnapshot, getNullSnapshot);
+		useEffect(() => {
+			hosts.add(token);
+			hostEverMounted = true;
+			if (noHostTimer !== void 0) {
+				clearTimeout(noHostTimer);
+				noHostTimer = void 0;
+			}
+			store.emit();
+			if (store.getHead()) rerender();
+			let warnTimer;
+			if (isDev) warnTimer = setTimeout(() => {
+				if (hosts.size > 1 && !warnedMultipleHosts) {
+					warnedMultipleHosts = true;
+					console.warn("[react-sync-ui] more than one <SyncUI /> of the same factory is mounted; only the first mounted one renders.");
+				}
+			}, 0);
+			return () => {
+				if (warnTimer !== void 0) clearTimeout(warnTimer);
+				hosts.delete(token);
+				store.emit();
+			};
+		}, [token]);
+		const Dialog = head ? components.get(head.type) : void 0;
+		useEffect(() => {
+			if (!head || components.get(head.type)) return;
+			if (isDev) console.error("[react-sync-ui] no component registered for the queued item", head.type);
+			store.rejectEntry(head, /* @__PURE__ */ new Error("react-sync-ui: no component registered for this sync UI"));
+		}, [head]);
+		const handlers = useMemo(() => head ? {
+			resolve: (value) => store.resolveEntry(head, value),
+			reject: (reason) => store.rejectEntry(head, reason)
+		} : null, [head]);
+		if (!head || !handlers || !Dialog) return null;
+		return /* @__PURE__ */ jsx(SyncUIErrorBoundary, {
+			entry: head,
+			onError: (entry, error) => store.rejectEntry(entry, error),
+			children: /* @__PURE__ */ jsx(Dialog, {
+				data: head.data,
+				resolve: handlers.resolve,
+				reject: handlers.reject
+			})
+		}, head.id);
+	};
+	return {
+		makeSyncUI,
+		SyncUI
+	};
+};
+//#endregion
+//#region src/index.ts
+var { makeSyncUI, SyncUI } = syncUIFactory();
+//#endregion
+export { SyncUI, makeSyncUI, syncUIFactory, usePromiseQueue };
 
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-sync-ui.cjs.production.min.js')
-} else {
-  module.exports = require('./react-sync-ui.cjs.development.js')
-}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/syncUI.tsx","../src/index.ts"],"sourcesContent":["import {\n  Component,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  useSyncExternalStore\n} from \"react\";\nimport type { ComponentType, ErrorInfo, ReactElement, ReactNode } from \"react\";\n\n// The library build leaves `process.env.NODE_ENV` untouched on purpose so the\n// consumer's bundler decides, exactly like React itself. It has to stay a\n// bare read: a `typeof process` guard is NOT replaced by bundlers, and a\n// browser has no `process`, so the guard would silently disable every dev\n// warning under Vite or webpack dev. Wrapping it in an IIFE or try/catch\n// stops the minifier from folding it, and the warning strings would ship to\n// production. The trade-off is the same one React makes: importing the\n// package with no bundler and no `process` global throws at module scope.\ndeclare const process: { env: { NODE_ENV?: string } };\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n// ------------------------------------------------------------------------------------\n// public types\n\nexport type SyncUIProps<InputData, ResolveValue = void> = {\n  data: InputData;\n  resolve: (value: ResolveValue) => void;\n  reject: (reason?: unknown) => void;\n};\n\n// ComponentType, not a bare function type: React 19's FC returns\n// `ReactNode | Promise<ReactNode>`, so `React.FC<SyncUIProps<...>>`, memo(),\n// forwardRef() and class components all have to be accepted here.\nexport type SyncUIComponent<InputData, ResolveValue = void> = ComponentType<\n  SyncUIProps<InputData, ResolveValue>\n>;\n\n// The awaitable function `makeSyncUI` returns. Named, so a wrapper, a context\n// value or a props type can refer to it instead of re-spelling the signature.\nexport type SyncUIFunction<InputData, ResolveValue = void> = (\n  input: InputData\n) => Promise<ResolveValue>;\n\n// `head` is exactly what a sync component receives, so it reuses SyncUIProps.\nexport type PromiseQueueAPI<InputData, ResolveValue = void> = {\n  head?: SyncUIProps<InputData, ResolveValue>;\n  push: (data: InputData) => Promise<ResolveValue>;\n};\n\nexport type SyncUIFactory = {\n  makeSyncUI: <InputData, ResolveValue = void>(\n    Component: SyncUIComponent<InputData, ResolveValue>\n  ) => SyncUIFunction<InputData, ResolveValue>;\n  SyncUI: () => ReactElement | null;\n};\n\n// ------------------------------------------------------------------------------------\n// queue store\n\ntype Listener = () => void;\n\ntype Entry<Data, ResolveValue> = {\n  readonly id: number;\n  readonly type: symbol;\n  readonly data: Data;\n  readonly resolve: (value: ResolveValue) => void;\n  readonly reject: (reason?: unknown) => void;\n};\n\n// Monotonic, so React keys are unique per queued item (no Math.random()).\nlet entrySeq = 0;\n\nconst defaultRejectReason = () =>\n  new Error(\"react-sync-ui: rejected without a reason\");\n\n/**\n * The queue lives OUTSIDE React. Every mutation happens in an event handler, an\n * async continuation or a commit-phase lifecycle (the error boundary's\n * `componentDidCatch`), never during render and never inside a setState\n * updater, so StrictMode's double render / double updater passes and HMR\n * remounts can neither duplicate nor lose a promise settlement. The\n * commit-phase case is safe because a mutation only schedules a rerender\n * through the subscription; it never runs while React is rendering.\n */\nconst createQueueStore = <Data, ResolveValue>() => {\n  let queue: readonly Entry<Data, ResolveValue>[] = [];\n  const listeners = new Set<Listener>();\n\n  const emit = () => {\n    listeners.forEach(listener => listener());\n  };\n\n  // Stable identity, so React never re-subscribes.\n  const subscribe = (listener: Listener) => {\n    listeners.add(listener);\n    return () => {\n      listeners.delete(listener);\n    };\n  };\n\n  // useSyncExternalStore needs a cached snapshot: `queue` is only ever\n  // replaced, never mutated, so the head entry keeps its identity until it\n  // actually leaves the queue.\n  const getHead = (): Entry<Data, ResolveValue> | null => queue[0] ?? null;\n\n  const push = (type: symbol, data: Data) =>\n    new Promise<ResolveValue>((resolve, reject) => {\n      // The Promise executor runs synchronously, so the entry is queued\n      // before push() returns.\n      queue = [...queue, { id: ++entrySeq, type, data, resolve, reject }];\n      emit();\n    });\n\n  // Settles exactly once. Membership in the queue is the \"not yet settled\"\n  // flag, so a second call, or a call from a stale closure, is a no-op.\n  const settle = (\n    entry: Entry<Data, ResolveValue>,\n    run: (entry: Entry<Data, ResolveValue>) => void\n  ) => {\n    const next = queue.filter(item => item !== entry);\n    if (next.length === queue.length) return;\n    queue = next;\n    emit();\n    run(entry);\n  };\n\n  // Rejects everything still queued at once (used when the owner of the queue\n  // goes away), so no caller is left awaiting a promise nobody can settle.\n  const drain = (reason: unknown) => {\n    if (queue.length === 0) return;\n    const abandoned = queue;\n    queue = [];\n    emit();\n    abandoned.forEach(item => item.reject(reason));\n  };\n\n  return {\n    subscribe,\n    emit,\n    getHead,\n    push,\n    drain,\n    size: () => queue.length,\n    resolveEntry: (entry: Entry<Data, ResolveValue>, value: ResolveValue) =>\n      settle(entry, item => item.resolve(value)),\n    // `reject()` with no reason would reject with `undefined`, so the\n    // idiomatic `catch (error) { toast(error.message) }` would throw on top of\n    // the cancellation. One default, applied for every caller.\n    rejectEntry: (entry: Entry<Data, ResolveValue>, reason?: unknown) =>\n      settle(entry, item => item.reject(reason ?? defaultRejectReason()))\n  };\n};\n\nconst getNullSnapshot = () => null;\n\n// ------------------------------------------------------------------------------------\n// usePromiseQueue\n\nconst defaultQueueType = Symbol(\"usePromiseQueue\");\n\nexport const usePromiseQueue = <\n  InputData,\n  ResolveValue = void\n>(): PromiseQueueAPI<InputData, ResolveValue> => {\n  // Lazy initializer: StrictMode may run it twice, but it only allocates.\n  const [store] = useState(() => createQueueStore<InputData, ResolveValue>());\n  const head = useSyncExternalStore(\n    store.subscribe,\n    store.getHead,\n    getNullSnapshot\n  );\n  const push = useCallback(\n    (data: InputData) => store.push(defaultQueueType, data),\n    [store]\n  );\n\n  // Unlike the factory queue (which outlives every host), this store is owned\n  // by the component, so anything still queued when it unmounts could never be\n  // settled by anyone: every `await push(...)` would stay suspended forever.\n  // The drain is deferred to a microtask and cancelled if the effect runs\n  // again, because StrictMode (and Fast Refresh) replay mount/unmount/mount\n  // synchronously: draining on that simulated unmount would reject items a\n  // sibling had just pushed from its own mount effect.\n  const drainPending = useRef(false);\n  useEffect(() => {\n    drainPending.current = false;\n    return () => {\n      drainPending.current = true;\n      queueMicrotask(() => {\n        if (!drainPending.current) return;\n        drainPending.current = false;\n        store.drain(\n          new Error(\n            \"react-sync-ui: usePromiseQueue unmounted with pending items\"\n          )\n        );\n      });\n    };\n  }, [store]);\n\n  return useMemo(\n    () => ({\n      head: head\n        ? {\n            data: head.data,\n            // Bound to THIS entry: stale or repeated calls are no-ops.\n            resolve: (value: ResolveValue) => store.resolveEntry(head, value),\n            reject: (reason?: unknown) => store.rejectEntry(head, reason)\n          }\n        : undefined,\n      push\n    }),\n    [head, push, store]\n  );\n};\n\n// ------------------------------------------------------------------------------------\n// syncUIFactory\n\n// The registry has to accept components of every Data/Result shape.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnySyncUIComponent = SyncUIComponent<any, any>;\n\n// A dialog that throws during render used to be a poison pill: the app's own\n// error boundary caught it, <SyncUI /> unmounted, and the entry stayed at the\n// head of the queue forever, hanging its own promise and every queued one.\n// This boundary keeps the failure local: the entry is rejected (the caller's\n// `await` throws, which is the error channel) and the queue moves on. It is\n// remounted per entry via `key`, so the next dialog renders fresh.\ntype SyncUIBoundaryProps<Data, ResolveValue> = {\n  entry: Entry<Data, ResolveValue>;\n  onError: (entry: Entry<Data, ResolveValue>, error: unknown) => void;\n  children: ReactNode;\n};\n\ntype SyncUIBoundaryState = { failed: boolean };\n\nclass SyncUIErrorBoundary extends Component<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  SyncUIBoundaryProps<any, any>,\n  SyncUIBoundaryState\n> {\n  state: SyncUIBoundaryState = { failed: false };\n\n  static getDerivedStateFromError(): SyncUIBoundaryState {\n    return { failed: true };\n  }\n\n  componentDidCatch(error: unknown, _info: ErrorInfo) {\n    // Not re-thrown on purpose: the promise rejection is the error channel,\n    // and React already logs the caught error itself in development.\n    this.props.onError(this.props.entry, error);\n  }\n\n  render() {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n\nexport const syncUIFactory = (): SyncUIFactory => {\n  const store = createQueueStore<unknown, unknown>();\n\n  // Live registry, resolved at render time. A module that calls makeSyncUI\n  // after <SyncUI /> has mounted (lazy chunk, Vite HMR) simply lands here.\n  const components = new Map<symbol, AnySyncUIComponent>();\n\n  // Every mounted <SyncUI /> instance, in mount order. A Set instead of a\n  // boolean or a single ref: a replacement instance can mount before the old\n  // one's cleanup runs (Fast Refresh remounts, a second root, route layouts),\n  // and that overlap must not break anything.\n  const hosts = new Set<object>();\n  const primaryHost = () => hosts.values().next().value;\n\n  let hostEverMounted = false;\n  let warnedNoHost = false;\n  let warnedMultipleHosts = false;\n  let noHostTimer: ReturnType<typeof setTimeout> | undefined;\n\n  // Pushing before <SyncUI /> is mounted is a race, not a configuration error\n  // (child effects run before parent effects), so items just wait in the\n  // queue. A silent hang would hide a forgotten <SyncUI />, hence the dev\n  // warning if nothing has mounted after a while.\n  const scheduleNoHostWarning = () => {\n    if (!isDev || hostEverMounted || warnedNoHost || noHostTimer) return;\n    // On the server <SyncUI /> never mounts, so the warning would be noise\n    // and the timer would keep the process alive.\n    if (typeof window === \"undefined\") return;\n    noHostTimer = setTimeout(() => {\n      noHostTimer = undefined;\n      if (hostEverMounted || store.size() === 0) return;\n      warnedNoHost = true;\n      console.error(\n        \"[react-sync-ui] a sync UI has been pending for 3s and no <SyncUI /> \" +\n          \"is mounted. Render <SyncUI /> once, near the root of your app.\"\n      );\n    }, 3000);\n  };\n\n  const makeSyncUI = <InputData, ResolveValue = void>(\n    Component: SyncUIComponent<InputData, ResolveValue>\n  ): SyncUIFunction<InputData, ResolveValue> => {\n    const type = Symbol(\n      (Component as { displayName?: string }).displayName ||\n        Component.name ||\n        \"SyncUI\"\n    );\n    components.set(type, Component as AnySyncUIComponent);\n\n    return (input: InputData): Promise<ResolveValue> => {\n      scheduleNoHostWarning();\n      return store.push(type, input) as Promise<ResolveValue>;\n    };\n  };\n\n  const SyncUI = (): ReactElement | null => {\n    // Stable per-instance identity.\n    const [token] = useState(() => ({}));\n    const [, rerender] = useReducer((n: number) => n + 1, 0);\n\n    // Only the first mounted host renders; the others stay empty so a dialog\n    // is never shown twice. Declared BEFORE the registration effect so React\n    // is subscribed by the time that effect emits.\n    const getSnapshot = useCallback(\n      () => (primaryHost() === token ? store.getHead() : null),\n      [token]\n    );\n    const head = useSyncExternalStore(\n      store.subscribe,\n      getSnapshot,\n      getNullSnapshot\n    );\n\n    useEffect(() => {\n      hosts.add(token);\n      hostEverMounted = true;\n      // A host is here: the \"nothing ever mounted\" warning can no longer fire,\n      // so the handle should not linger (it would hold a Node test run open).\n      if (noHostTimer !== undefined) {\n        clearTimeout(noHostTimer);\n        noHostTimer = undefined;\n      }\n      store.emit();\n      // React 19 <Activity mode=\"hidden\"> disconnects the store subscription\n      // and re-shows with a stale cached snapshot, so emit() alone compares\n      // equal and skips the render. A local state bump cannot be skipped.\n      // Only worth it when there is something to re-read: mounting with an\n      // empty queue is the common case and should not cost an extra render.\n      if (store.getHead()) rerender();\n\n      // Deferred one tick and cleared on cleanup, so the HMR overlap (new\n      // instance mounted, old one not yet unmounted) never false-warns.\n      let warnTimer: ReturnType<typeof setTimeout> | undefined;\n      if (isDev) {\n        warnTimer = setTimeout(() => {\n          if (hosts.size > 1 && !warnedMultipleHosts) {\n            warnedMultipleHosts = true;\n            console.warn(\n              \"[react-sync-ui] more than one <SyncUI /> of the same factory \" +\n                \"is mounted; only the first mounted one renders.\"\n            );\n          }\n        }, 0);\n      }\n\n      return () => {\n        if (warnTimer !== undefined) clearTimeout(warnTimer);\n        hosts.delete(token);\n        // The queue stays intact; hand over to the next host, if any.\n        store.emit();\n      };\n    }, [token]);\n\n    const Dialog = head ? components.get(head.type) : undefined;\n\n    // An entry whose component is missing can never be rendered, so \"log and\n    // stall\" would block it AND everything queued behind it forever; reject it\n    // instead and let the queue move on. Kept out of render so StrictMode\n    // cannot run it twice. Not reachable through the public API, because\n    // makeSyncUI registers the component in the same statement that mints its\n    // symbol; this is the recovery path for a registry that lost the entry (a\n    // module graph reset under a live queue).\n    useEffect(() => {\n      if (!head || components.get(head.type)) return;\n      if (isDev) {\n        console.error(\n          \"[react-sync-ui] no component registered for the queued item\",\n          head.type\n        );\n      }\n      store.rejectEntry(\n        head,\n        new Error(\"react-sync-ui: no component registered for this sync UI\")\n      );\n    }, [head]);\n\n    const handlers = useMemo(\n      () =>\n        head\n          ? {\n              resolve: (value: unknown) => store.resolveEntry(head, value),\n              reject: (reason?: unknown) => store.rejectEntry(head, reason)\n            }\n          : null,\n      [head]\n    );\n\n    if (!head || !handlers || !Dialog) return null;\n\n    // The key changes per queued item, so two consecutive items of the same\n    // component get a fresh instance (no leaked local state) and a boundary\n    // that caught an error is reset for the next one.\n    // `Dialog` is a registry lookup, not a component created during render;\n    // the lint rule cannot tell the difference.\n    return (\n      <SyncUIErrorBoundary\n        key={head.id}\n        entry={head}\n        onError={(entry, error) => store.rejectEntry(entry, error)}\n      >\n        {/* eslint-disable-next-line react-hooks/static-components */}\n        <Dialog\n          data={head.data}\n          resolve={handlers.resolve}\n          reject={handlers.reject}\n        />\n      </SyncUIErrorBoundary>\n    );\n  };\n\n  return { makeSyncUI, SyncUI };\n};\n","import { syncUIFactory } from \"./syncUI.js\";\n\nexport { syncUIFactory, usePromiseQueue } from \"./syncUI.js\";\nexport type {\n  PromiseQueueAPI,\n  SyncUIComponent,\n  SyncUIFactory,\n  SyncUIFunction,\n  SyncUIProps\n} from \"./syncUI.js\";\n\nexport const { makeSyncUI, SyncUI } = syncUIFactory();\n"],"mappings":"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"}

package/dist/syncUI.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-declare type PromiseQueueAPI<Data, ResolveValue> = {
-    head?: {
-        data: Data;
-        resolve: (value: ResolveValue) => void;
-        reject: (reason?: any) => void;
-    };
-    push: (data: Data) => Promise<ResolveValue>;
-};
-export declare const usePromiseQueue: <Data, ResolveValue = void>() => PromiseQueueAPI<Data, ResolveValue>;
-export declare const syncUIFactory: () => {
-    makeSyncUI: <InputData, ResolveValue = void>(SyncUIUserComp: React.FC<{
-        data: InputData;
-        resolve: (value: ResolveValue) => void;
-        reject: (reason?: any) => void;
-    }>) => (input: InputData) => Promise<ResolveValue>;
-    SyncUI: () => JSX.Element;
-};
-export {};
+import { ComponentType, ReactElement } from 'react';
+export type SyncUIProps<InputData, ResolveValue = void> = {
+    data: InputData;
+    resolve: (value: ResolveValue) => void;
+    reject: (reason?: unknown) => void;
+};
+export type SyncUIComponent<InputData, ResolveValue = void> = ComponentType<SyncUIProps<InputData, ResolveValue>>;
+export type SyncUIFunction<InputData, ResolveValue = void> = (input: InputData) => Promise<ResolveValue>;
+export type PromiseQueueAPI<InputData, ResolveValue = void> = {
+    head?: SyncUIProps<InputData, ResolveValue>;
+    push: (data: InputData) => Promise<ResolveValue>;
+};
+export type SyncUIFactory = {
+    makeSyncUI: <InputData, ResolveValue = void>(Component: SyncUIComponent<InputData, ResolveValue>) => SyncUIFunction<InputData, ResolveValue>;
+    SyncUI: () => ReactElement | null;
+};
+export declare const usePromiseQueue: <InputData, ResolveValue = void>() => PromiseQueueAPI<InputData, ResolveValue>;
+export declare const syncUIFactory: () => SyncUIFactory;
+//# sourceMappingURL=syncUI.d.ts.map

package/dist/syncUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syncUI.d.ts","sourceRoot":"","sources":["../src/syncUI.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAa,YAAY,EAAa,MAAM,OAAO,CAAC;AAgB/E,MAAM,MAAM,WAAW,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,IAAI;IACxD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAKF,MAAM,MAAM,eAAe,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,IAAI,aAAa,CACzE,WAAW,CAAC,SAAS,EAAE,YAAY,CAAC,CACrC,CAAC;AAIF,MAAM,MAAM,cAAc,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,IAAI,CAC3D,KAAK,EAAE,SAAS,KACb,OAAO,CAAC,YAAY,CAAC,CAAC;AAG3B,MAAM,MAAM,eAAe,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,IAAI;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC5C,IAAI,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,GAAG,IAAI,EACzC,SAAS,EAAE,eAAe,CAAC,SAAS,EAAE,YAAY,CAAC,KAChD,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC7C,MAAM,EAAE,MAAM,YAAY,GAAG,IAAI,CAAC;CACnC,CAAC;AA0GF,eAAO,MAAM,eAAe,GAC1B,SAAS,EACT,YAAY,GAAG,IAAI,OAChB,eAAe,CAAC,SAAS,EAAE,YAAY,CAmD3C,CAAC;AA6CF,eAAO,MAAM,aAAa,QAAO,aA2KhC,CAAC"}

package/package.json

@@ -1,55 +1,103 @@
 {
   "name": "react-sync-ui",
-  "version": "1.0.3",
-  "repository": "https://github.com/Svehla/react-sync-ui",
+  "version": "2.0.0",
+  "description": "Promise-based imperative React UI: await an alert, confirm or prompt like a function call.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Svehla/react-sync-ui.git"
+  },
+  "homepage": "https://github.com/Svehla/react-sync-ui#readme",
+  "bugs": {
+    "url": "https://github.com/Svehla/react-sync-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "promise",
+    "async",
+    "await",
+    "modal",
+    "dialog",
+    "confirm",
+    "prompt",
+    "alert",
+    "queue",
+    "hooks"
+  ],
   "license": "MIT",
   "author": "Jakub Švehla",
-  "main": "dist/index.js",
-  "module": "dist/react-sync-ui.esm.js",
-  "typings": "dist/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "CHANGELOG.md"
   ],
   "scripts": {
-    "analyze": "size-limit --why",
-    "build": "tsdx build",
-    "lint": "tsdx lint",
-    "lint:fix": "tsdx lint --fix",
-    "prepare": "tsdx build",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "size": "size-limit",
-    "start": "tsdx watch",
-    "test": "tsdx test --passWithNoTests",
-    "test:watch": "tsdx test --passWithNoTests --watchAll"
+    "check": "npm run lint && npm run typecheck && npm test && npm run build && publint --strict && attw --pack . --profile esm-only",
+    "prepare": "husky || true",
+    "prepublishOnly": "npm run check",
+    "prepack": "npm run build"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^5.0.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/parser": "^4.33.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "husky": "^7.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "size-limit": "^5.0.5",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.8.3"
-  },
-  "peerDependencies": {
-    "react": ">=16"
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@size-limit/preset-small-lib": "^13.0.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitest/coverage-v8": "^4.1.11",
+    "eslint": "^10.9.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "husky": "^9.1.7",
+    "jsdom": "^30.0.1",
+    "prettier": "^3.9.6",
+    "publint": "^0.3.24",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "size-limit": "^13.0.3",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.69.0",
+    "unplugin-dts": "^1.1.0",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   },
   "engines": {
-    "node": ">=10"
+    "node": "^20.19.0 || >=22.12.0"
   },
-  "size-limit": []
+  "size-limit": [
+    {
+      "name": "ESM bundle (brotli)",
+      "path": "dist/index.js",
+      "limit": "2 kB"
+    }
+  ]
 }

package/src/index.ts

@@ -1,3 +1,12 @@
-import { syncUIFactory as _syncUIFactory } from "./syncUI";
-export const syncUIFactory = _syncUIFactory;
+import { syncUIFactory } from "./syncUI.js";
+
+export { syncUIFactory, usePromiseQueue } from "./syncUI.js";
+export type {
+  PromiseQueueAPI,
+  SyncUIComponent,
+  SyncUIFactory,
+  SyncUIFunction,
+  SyncUIProps
+} from "./syncUI.js";
+
 export const { makeSyncUI, SyncUI } = syncUIFactory();