gemi 0.111.0 → 0.112.0

package/dist/client/index.js

@@ -954,6 +954,219 @@ function useMutate() {
 	};
 }
 //#endregion
+//#region client/useSubscription.ts
+var MIN_RETRY_MS = 1e3;
+var MAX_RETRY_MS = 3e4;
+/** The server answered in a way retrying will not change (401, 403, 404). */
+var FatalStatus = class extends Error {
+	status;
+	constructor(status) {
+		super(`The subscription was refused with ${status}.`);
+		this.status = status;
+	}
+};
+/**
+* Follows a route that answers with `ChangeFeed.stream`, as long as the
+* component is mounted: each change reaches `onChange`, in order, exactly
+* once, across dropped connections and hidden tabs.
+*
+* ```tsx
+* const { status } = useSubscription(
+*   "/sites/:siteId/changes",
+*   { params: { siteId } },
+*   { cursor: site.cursor, onChange: ({ data }) => apply(data), onReset: () => reload() },
+* );
+* ```
+*
+* It reconnects after a drop with backoff (1 s doubling to 30 s, or the
+* server's `Retry-After`), resuming with `Last-Event-ID` from the last event
+* it saw. A `4xx` other than `408` and `429` stops it, with status `closed`.
+* The callbacks may change between renders without reconnecting.
+*/
+function useSubscription(url, options = {}, config = {}) {
+	const params = {
+		...useParams(),
+		...options.params
+	};
+	const search = new URLSearchParams(Object.entries(options.search ?? {}).filter(([, value]) => value !== null && value !== void 0).map(([key, value]) => [key, String(value)]));
+	search.sort();
+	const endpoint = `/api${[applyParams$1(String(url), params), search.toString()].filter(Boolean).join("?")}`;
+	const enabled = config.enabled !== false;
+	const pauseWhenHidden = config.pauseWhenHidden !== false;
+	const callbacks = useRef(config);
+	useEffect(() => {
+		callbacks.current = config;
+	});
+	const cursor = useRef(config.cursor ?? null);
+	const [state, setState] = useState({
+		status: enabled ? "connecting" : "closed",
+		cursor: cursor.current,
+		error: null
+	});
+	useEffect(() => {
+		cursor.current = config.cursor ?? null;
+	}, [endpoint, config.cursor]);
+	useEffect(() => {
+		if (!enabled) {
+			setState((s) => ({
+				...s,
+				status: "closed"
+			}));
+			return;
+		}
+		let stopped = false;
+		let request = null;
+		let resume = null;
+		let retryMs = MIN_RETRY_MS;
+		const hidden = () => pauseWhenHidden && typeof document !== "undefined" && document.visibilityState === "hidden";
+		const onVisibilityChange = () => {
+			if (hidden()) request?.abort();
+			else resume?.();
+		};
+		if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisibilityChange);
+		const wait = (ms) => new Promise((resolve) => {
+			const timer = setTimeout(done, ms);
+			function done() {
+				clearTimeout(timer);
+				resume = null;
+				resolve();
+			}
+			resume = done;
+		});
+		(async () => {
+			while (!stopped) {
+				if (hidden()) {
+					setState((s) => ({
+						...s,
+						status: "paused"
+					}));
+					await new Promise((resolve) => resume = resolve);
+					resume = null;
+					continue;
+				}
+				setState((s) => ({
+					...s,
+					status: "connecting"
+				}));
+				const controller = request = new AbortController();
+				let delay = retryMs;
+				try {
+					const headers = { Accept: "text/event-stream" };
+					if (cursor.current) headers["Last-Event-ID"] = cursor.current;
+					const response = await fetch(endpoint, {
+						headers,
+						signal: controller.signal
+					});
+					if (!response.ok || !response.body) {
+						const status = response.status;
+						if (status >= 400 && status < 500 && status !== 408 && status !== 429) throw new FatalStatus(status);
+						const retryAfter = Number(response.headers.get("Retry-After"));
+						if (Number.isFinite(retryAfter) && retryAfter > 0) delay = retryAfter * 1e3;
+						throw new Error(`The subscription answered ${status}.`);
+					}
+					for await (const { id, message } of readEvents(response.body)) {
+						if (stopped) return;
+						if (id !== void 0) cursor.current = id;
+						if (message.type === "ready") {
+							retryMs = MIN_RETRY_MS;
+							delay = MIN_RETRY_MS;
+							setState({
+								status: "open",
+								cursor: cursor.current,
+								error: null
+							});
+						} else {
+							setState((s) => ({
+								...s,
+								cursor: cursor.current
+							}));
+							if (message.type === "change") callbacks.current.onChange?.(message);
+							else if (message.type === "reset") callbacks.current.onReset?.(message);
+						}
+					}
+				} catch (error) {
+					if (stopped) return;
+					if (error instanceof FatalStatus) {
+						setState((s) => ({
+							...s,
+							status: "closed",
+							error
+						}));
+						return;
+					}
+					if (controller.signal.aborted) continue;
+					setState((s) => ({
+						...s,
+						error
+					}));
+				}
+				if (stopped || controller.signal.aborted) continue;
+				setState((s) => ({
+					...s,
+					status: "connecting"
+				}));
+				await wait(delay);
+				retryMs = Math.min(retryMs * 2, MAX_RETRY_MS);
+			}
+		})();
+		return () => {
+			stopped = true;
+			request?.abort();
+			resume?.();
+			if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisibilityChange);
+		};
+	}, [
+		endpoint,
+		enabled,
+		pauseWhenHidden,
+		config.cursor
+	]);
+	return state;
+}
+/**
+* The events of an SSE body: `id` and the JSON `data`. Comments (keepalives)
+* and events without data are skipped; an event whose data is not JSON is
+* dropped rather than ending the stream.
+*/
+async function* readEvents(body) {
+	const reader = body.getReader();
+	const decoder = new TextDecoder();
+	let buffer = "";
+	try {
+		for (;;) {
+			const { done, value } = await reader.read();
+			if (done) return;
+			buffer = (buffer + decoder.decode(value, { stream: true })).replace(/\r\n?/g, "\n");
+			let boundary = buffer.indexOf("\n\n");
+			while (boundary !== -1) {
+				const block = buffer.slice(0, boundary);
+				buffer = buffer.slice(boundary + 2);
+				boundary = buffer.indexOf("\n\n");
+				let id;
+				const data = [];
+				for (const line of block.split("\n")) {
+					if (line === "" || line.startsWith(":")) continue;
+					const colon = line.indexOf(":");
+					const field = colon === -1 ? line : line.slice(0, colon);
+					let text = colon === -1 ? "" : line.slice(colon + 1);
+					if (text.startsWith(" ")) text = text.slice(1);
+					if (field === "id") id = text;
+					else if (field === "data") data.push(text);
+				}
+				if (data.length === 0) continue;
+				try {
+					yield {
+						id,
+						message: JSON.parse(data.join("\n"))
+					};
+				} catch {}
+			}
+		}
+	} finally {
+		await reader.cancel().catch(() => {});
+	}
+}
+//#endregion
 //#region client/Mutation.tsx
 var MutationContext = createContext({
 	isPending: false,
@@ -2767,6 +2980,6 @@ function island(loader, options = {}) {
 	return Island;
 }
 //#endregion
-export { CHUNK_RELOAD_MARKER, Form, FormError, FormFieldContainer, Head, Image, Link, OpenGraphImage, QueryError, QueryManagerProvider, Redirect, ValidationErrors, create, createRoot, defineDictionary, init, isAuthenticationError, isChunkLoadError, isCsrfError, isFormError, isHttpError, isNetworkError, isNotFoundError, isPermissionError, isRateLimitError, isRetryableQueryError, isServerError, isValidationError, island, mutationErrorKind, recoverFromChunkLoadError, useAppIdMissmatch, useBreadcrumbs, useDelete, useDictionary, useDomain, useEmailCode, useFeature, useFeatures, useForgotPassword, useFormData, useFormStatus, useFormatter, useInfiniteQuery, useIntendedUrl, useIsNavigationPending, useLocale, useLocation, useMutate, useMutation, useMutationStatus, useNavigate, useNavigationProgress, useParams, usePatch, usePost, usePrefetch, usePut, useQuery, useResetPassword, useRoute, useRouteTransition, useSearchParams, useSignIn, useSignOut, useSignUp, useTheme, useTranslator, useUpload, useUser };
+export { CHUNK_RELOAD_MARKER, Form, FormError, FormFieldContainer, Head, Image, Link, OpenGraphImage, QueryError, QueryManagerProvider, Redirect, ValidationErrors, create, createRoot, defineDictionary, init, isAuthenticationError, isChunkLoadError, isCsrfError, isFormError, isHttpError, isNetworkError, isNotFoundError, isPermissionError, isRateLimitError, isRetryableQueryError, isServerError, isValidationError, island, mutationErrorKind, recoverFromChunkLoadError, useAppIdMissmatch, useBreadcrumbs, useDelete, useDictionary, useDomain, useEmailCode, useFeature, useFeatures, useForgotPassword, useFormData, useFormStatus, useFormatter, useInfiniteQuery, useIntendedUrl, useIsNavigationPending, useLocale, useLocation, useMutate, useMutation, useMutationStatus, useNavigate, useNavigationProgress, useParams, usePatch, usePost, usePrefetch, usePut, useQuery, useResetPassword, useRoute, useRouteTransition, useSearchParams, useSignIn, useSignOut, useSignUp, useSubscription, useTheme, useTranslator, useUpload, useUser };
 
 //# sourceMappingURL=index.js.map