nuqs/dist/react-router-B1jpXp7R.js

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

import { r as createEmitter } from "./debounce-CmIkjWrj.js";
import { t as debug } from "./debug-C9V5O52N.js";
import { n as createAdapterProvider, o as renderQueryString } from "./context-CayRnDCw.js";
import { n as filterSearchParams, t as applyChange } from "./key-isolation-CU0Wv_ai.js";
import { n as setQueueResetMutex } from "./reset-B22_73QB.js";
import { r as patchHistory, t as historyUpdateMarker } from "./patch-history-C6w4_G-g.js";
import { startTransition, useCallback, useEffect, useState } from "react";

//#region src/adapters/lib/react-router.ts
function createReactRouterBasedAdapter({ adapter, useNavigate, useSearchParams }) {
	const emitter = createEmitter();
	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);
				if (options.shallow === false) navigate({
					hash: url.hash,
					search: url.search
				}, {
					replace: true,
					preventScrollReset: true,
					state: history.state?.usr
				});
				if (options.scroll) window.scrollTo(0, 0);
			}, [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-B1jpXp7R.js.map