ref: Keep RR adapters simple, factor out implementation

Author: franky47

packages/nuqs/src/adapters/lib/react-router.ts

@@ -1,10 +1,11 @@
 import mitt from 'mitt'
 import { startTransition, useCallback, useEffect, useState } from 'react'
 import { renderQueryString } from '../../url-encoding'
+import { createAdapterProvider } from './context'
 import type { AdapterInterface, AdapterOptions } from './defs'
 import {
+  patchHistory as applyHistoryPatch,
   historyUpdateMarker,
-  patchHistory,
   type SearchParamsSyncEmitter
 } from './patch-history'
 
@@ -24,11 +25,17 @@ type UseSearchParams = (initial: URLSearchParams) => [URLSearchParams, {}]
 
 // --
 
-export function createReactRouterBasedAdapter(
-  adapter: string,
-  useNavigate: UseNavigate,
+type CreateReactRouterBasedAdapterArgs = {
+  adapter: string
+  useNavigate: UseNavigate
   useSearchParams: UseSearchParams
-) {
+}
+
+export function createReactRouterBasedAdapter({
+  adapter,
+  useNavigate,
+  useSearchParams
+}: CreateReactRouterBasedAdapterArgs) {
   const emitter: SearchParamsSyncEmitter = mitt()
   function useNuqsReactRouterBasedAdapter(): AdapterInterface {
     const navigate = useNavigate()
@@ -112,19 +119,18 @@ export function createReactRouterBasedAdapter(
     return searchParams
   }
   /**
-   * Opt-in to syncing shallow updates of the URL with the useOptimisticSearchParams hook.
+   * 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.
    */
-  function enableHistorySync() {
-    patchHistory(emitter, adapter)
-  }
+  applyHistoryPatch(emitter, adapter)
 
   return {
-    useNuqsReactRouterBasedAdapter,
-    useOptimisticSearchParams,
-    enableHistorySync
+    NuqsAdapter: createAdapterProvider(useNuqsReactRouterBasedAdapter),
+    useOptimisticSearchParams
   }
 }

packages/nuqs/src/adapters/react-router/v6.ts

@@ -1,19 +1,9 @@
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { createAdapterProvider } from '../lib/context'
 import { createReactRouterBasedAdapter } from '../lib/react-router'
 
-const {
-  enableHistorySync,
-  useNuqsReactRouterBasedAdapter: useNuqsReactRouterV6Adapter,
-  useOptimisticSearchParams
-} = createReactRouterBasedAdapter(
-  'react-router-v6',
-  useNavigate,
-  useSearchParams
-)
-
-export { useOptimisticSearchParams }
-
-export const NuqsAdapter = createAdapterProvider(useNuqsReactRouterV6Adapter)
-
-enableHistorySync()
+export const { NuqsAdapter, useOptimisticSearchParams } =
+  createReactRouterBasedAdapter({
+    adapter: 'react-router-v6',
+    useNavigate,
+    useSearchParams
+  })

packages/nuqs/src/adapters/react-router/v7.ts

@@ -1,19 +1,9 @@
 import { useNavigate, useSearchParams } from 'react-router'
-import { createAdapterProvider } from '../lib/context'
 import { createReactRouterBasedAdapter } from '../lib/react-router'
 
-const {
-  enableHistorySync,
-  useNuqsReactRouterBasedAdapter: useNuqsReactRouterV7Adapter,
-  useOptimisticSearchParams
-} = createReactRouterBasedAdapter(
-  'react-router-v7',
-  useNavigate,
-  useSearchParams
-)
-
-export { useOptimisticSearchParams }
-
-export const NuqsAdapter = createAdapterProvider(useNuqsReactRouterV7Adapter)
-
-enableHistorySync()
+export const { NuqsAdapter, useOptimisticSearchParams } =
+  createReactRouterBasedAdapter({
+    adapter: 'react-router-v7',
+    useNavigate,
+    useSearchParams
+  })

packages/nuqs/src/adapters/remix.ts

@@ -1,15 +1,9 @@
 import { useNavigate, useSearchParams } from '@remix-run/react'
-import { createAdapterProvider } from './lib/context'
 import { createReactRouterBasedAdapter } from './lib/react-router'
 
-const {
-  enableHistorySync,
-  useNuqsReactRouterBasedAdapter: useNuqsRemixAdapter,
-  useOptimisticSearchParams
-} = createReactRouterBasedAdapter('remix', useNavigate, useSearchParams)
-
-export { useOptimisticSearchParams }
-
-export const NuqsAdapter = createAdapterProvider(useNuqsRemixAdapter)
-
-enableHistorySync()
+export const { NuqsAdapter, useOptimisticSearchParams } =
+  createReactRouterBasedAdapter({
+    adapter: 'remix',
+    useNavigate,
+    useSearchParams
+  })