fix: Support custom stringifySearchWith in TanStack Router adapter (#1127)

Author: gensmusic

packages/nuqs/src/adapters/tanstack-router.ts

@@ -4,15 +4,29 @@ import {
   useMatches,
   useNavigate
 } from '@tanstack/react-router'
-import { startTransition, useCallback, useMemo } from 'react'
+import {
+  createContext,
+  createElement,
+  startTransition,
+  useCallback,
+  useContext,
+  useMemo,
+  type ReactElement,
+  type ReactNode
+} from 'react'
 import { renderQueryString } from '../lib/url-encoding'
-import { createAdapterProvider, type AdapterProvider } from './lib/context'
+import { createAdapterProvider, type AdapterProps } from './lib/context'
 import type { AdapterInterface, UpdateUrlFunction } from './lib/defs'
 
 // Use TanStack Router's default JSON-based search param serialization
 const defaultStringifySearch = stringifySearchWith(JSON.stringify)
 
+const NuqsTanstackRouterAdapterContext = createContext({
+  stringifySearchWith: defaultStringifySearch
+})
+
 function useNuqsTanstackRouterAdapter(watchKeys: string[]): AdapterInterface {
+  const { stringifySearchWith } = useContext(NuqsTanstackRouterAdapterContext)
   const search = useLocation({
     select: state =>
       Object.fromEntries(
@@ -28,11 +42,11 @@ function useNuqsTanstackRouterAdapter(watchKeys: string[]): AdapterInterface {
   })
   const searchParams = useMemo(
     () =>
-      // Use TSR’s default stringify to convert search object → URLSearchParams.
+      // Use TSR's stringify to convert search object → URLSearchParams.
       // This avoids issues where arrays/objects were previously flattened
       // into invalid values like "[object Object]".
-      new URLSearchParams(defaultStringifySearch(search)),
-    [search, watchKeys.join(',')]
+      new URLSearchParams(stringifySearchWith(search)),
+    [search, stringifySearchWith, watchKeys.join(',')]
   )
 
   const updateUrl: UpdateUrlFunction = useCallback(
@@ -72,6 +86,21 @@ function useNuqsTanstackRouterAdapter(watchKeys: string[]): AdapterInterface {
   }
 }
 
-export const NuqsAdapter: AdapterProvider = createAdapterProvider(
+const NuqsTanstackRouterAdapter = createAdapterProvider(
   useNuqsTanstackRouterAdapter
 )
+
+export function NuqsAdapter({
+  children,
+  stringifySearchWith = defaultStringifySearch,
+  ...adapterProps
+}: AdapterProps & {
+  children: ReactNode
+  stringifySearchWith?: (search: Record<string, any>) => string
+}): ReactElement {
+  return createElement(
+    NuqsTanstackRouterAdapterContext.Provider,
+    { value: { stringifySearchWith } },
+    createElement(NuqsTanstackRouterAdapter, { ...adapterProps, children })
+  )
+}