nuqs/dist/react-router-CTQKvhH7.js

Type-safe search params state manager for React - Like useState, but stored in the URL query string

import { t as debug } from "./debug-CH5E3t0A.js";
import { c as renderQueryString, n as createAdapterProvider } from "./context-Mu913OAK.js";
import { n as filterSearchParams, t as applyChange } from "./key-isolation-Em0NBdl2.js";
import { n as setQueueResetMutex } from "./reset-DL_ZBc10.js";
import { i as patchHistory, n as historyUpdateMarker, t as getHistorySyncEmitter } from "./patch-history-BG84kyU5.js";
import { startTransition, useCallback, useEffect, useState } from "react";
//#region src/adapters/lib/react-router.ts
function createReactRouterBasedAdapter({ adapter, useNavigate, useSearchParams }) {
	const emitter = getHistorySyncEmitter(adapter);
	function useNuqsReactRouterBasedAdapter(watchKeys) {
		const navigate = useNavigate();
		return {
			searchParams: useOptimisticSearchParams(watchKeys),
			updateUrl: useCallback((search, options) => {
				startTransition(() => {
					emitter.emit("update", search);
				});
				const url = new URL(location.href);
				url.search = renderQueryString(search);
				debug(20, adapter, url);
				const updateMethod = options.history === "push" ? history.pushState : history.replaceState;
				setQueueResetMutex(options.shallow ? 1 : 2);
				updateMethod.call(history, history.state, historyUpdateMarker, url);
				let navigationSettled;
				if (options.shallow === false) {
					const maybePromise = navigate({
						hash: url.hash,
						search: url.search
					}, {
						replace: true,
						preventScrollReset: true,
						state: history.state?.usr
					});
					if (maybePromise instanceof Promise) navigationSettled = maybePromise;
				}
				if (options.scroll) window.scrollTo(0, 0);
				return navigationSettled;
			}, [navigate]),
			autoResetQueueOnUpdate: false
		};
	}
	function useOptimisticSearchParams(watchKeys = []) {
		const [serverSearchParams] = useSearchParams(typeof location === "undefined" ? new URLSearchParams() : new URLSearchParams(location.search));
		const [searchParams, setSearchParams] = useState(() => {
			return typeof location === "undefined" ? filterSearchParams(serverSearchParams, watchKeys, true) : filterSearchParams(new URLSearchParams(location.search), watchKeys, false);
		});
		useEffect(() => {
			function onPopState() {
				startTransition(() => {
					setSearchParams(applyChange(new URLSearchParams(location.search), watchKeys, false));
				});
			}
			function onEmitterUpdate(search) {
				startTransition(() => {
					setSearchParams(applyChange(search, watchKeys, true));
				});
			}
			emitter.on("update", onEmitterUpdate);
			window.addEventListener("popstate", onPopState);
			const caughtUp = applyChange(new URLSearchParams(location.search), watchKeys, false)(searchParams);
			if (caughtUp.toString() !== searchParams.toString()) setSearchParams(caughtUp);
			return () => {
				emitter.off("update", onEmitterUpdate);
				window.removeEventListener("popstate", onPopState);
			};
		}, [watchKeys.join("&")]);
		return searchParams;
	}
	/**
	* Sync shallow updates of the URL with the useOptimisticSearchParams hook.
	*
	* By default, the useOptimisticSearchParams hook will only react to internal nuqs updates.
	* If third party code updates the History API directly, use this function to
	* enable useOptimisticSearchParams to react to those changes.
	*
	* Note: this is actually required in React Router frameworks to follow Link navigations.
	*/
	patchHistory(emitter, adapter);
	return {
		NuqsAdapter: createAdapterProvider(useNuqsReactRouterBasedAdapter),
		useOptimisticSearchParams
	};
}
//#endregion
export { createReactRouterBasedAdapter as t };

//# sourceMappingURL=react-router-CTQKvhH7.js.map