chore: Replace history patching with uSP sync

Author: franky47

packages/nuqs/src/sync.ts

@@ -1,10 +1,6 @@
 import Mitt from 'mitt'
-import { debug } from './debug'
-import { error } from './errors'
-import { getQueuedValue } from './update-queue'
 
 export const SYNC_EVENT_KEY = Symbol('__nuqs__SYNC__')
-export const NOSYNC_MARKER = '__nuqs__NO_SYNC__'
 const NOTIFY_EVENT_KEY = Symbol('__nuqs__NOTIFY__')
 
 export type QueryUpdateSource = 'internal' | 'external'
@@ -24,91 +20,3 @@ type EventMap = {
 }
 
 export const emitter = Mitt<EventMap>()
-
-declare global {
-  interface History {
-    __nuqs_patched?: string
-  }
-}
-
-if (typeof history === 'object') {
-  patchHistory()
-}
-
-function patchHistory() {
-  // This is replaced with the package.json version by scripts/prepack.sh
-  // after semantic-release has done updating the version number.
-  const version = '0.0.0-inject-version-here'
-  const patched = history.__nuqs_patched
-  if (patched) {
-    if (patched !== version) {
-      console.error(error(409), patched, version)
-    }
-    return
-  }
-  debug('[nuqs] Patching history with %s', version)
-  for (const method of ['pushState', 'replaceState'] as const) {
-    const original = history[method].bind(history)
-    history[method] = function nuqs_patchedHistory(
-      state: any,
-      title: string,
-      url?: string | URL | null
-    ) {
-      if (!url) {
-        // Null URL is only used for state changes,
-        // we're not interested in reacting to those.
-        debug('[nuqs] history.%s(null) (%s) %O', method, title, state)
-        return original(state, title, url)
-      }
-      const source = title === NOSYNC_MARKER ? 'internal' : 'external'
-      const search = new URL(url, location.origin).searchParams
-      debug('[nuqs] history.%s(%s) (%s) %O', method, url, source, state)
-      // If someone else than our hooks have updated the URL,
-      // send out a signal for them to sync their internal state.
-      if (source === 'external') {
-        for (const [key, value] of search.entries()) {
-          const queueValue = getQueuedValue(key)
-          if (queueValue !== null && queueValue !== value) {
-            debug(
-              '[nuqs] Overwrite detected for key: %s, Server: %s, queue: %s',
-              key,
-              value,
-              queueValue
-            )
-            search.set(key, queueValue)
-          }
-        }
-        // Here we're delaying application to next tick to avoid:
-        // `Warning: useInsertionEffect must not schedule updates.`
-        //
-        // Because the emitter runs in sync, this would trigger
-        // each hook's setInternalState updates, so we schedule
-        // those after the current batch of events.
-        // Because we don't know if the history method would
-        // have been applied by then, we're also sending the
-        // parsed query string to the hooks so they don't need
-        // to rely on the URL being up to date.
-        setTimeout(() => {
-          debug(
-            '[nuqs] External history.%s call: triggering sync with %s',
-            method,
-            search
-          )
-          emitter.emit(SYNC_EVENT_KEY, search)
-          emitter.emit(NOTIFY_EVENT_KEY, { search, source })
-        }, 0)
-      } else {
-        setTimeout(() => {
-          emitter.emit(NOTIFY_EVENT_KEY, { search, source })
-        }, 0)
-      }
-      return original(state, title === NOSYNC_MARKER ? '' : title, url)
-    }
-  }
-  Object.defineProperty(history, '__nuqs_patched', {
-    value: version,
-    writable: false,
-    enumerable: false,
-    configurable: false
-  })
-}

packages/nuqs/src/update-queue.ts

@@ -2,7 +2,6 @@ import type { NextRouter } from 'next/router'
 import { debug } from './debug'
 import type { Options, Router } from './defs'
 import { error } from './errors'
-import { NOSYNC_MARKER } from './sync'
 import { renderQueryString } from './url-encoding'
 import { getDefaultThrottle } from './utils'
 
@@ -191,11 +190,7 @@ function flushUpdateQueue(router: Router): [URLSearchParams, null | unknown] {
         // In next@14.1.0, useSearchParams becomes reactive to shallow updates,
         // but only if passing `null` as the history state.
         null,
-        // Our own updates have a marker to prevent syncing
-        // when the URL changes (we've already sync'd them up
-        // via `emitter.emit(key, newValue)` above, without
-        // going through the parsers).
-        NOSYNC_MARKER,
+        '',
         url
       )
       if (options.scroll) {

packages/nuqs/src/useQueryState.ts

@@ -241,6 +241,18 @@ export function useQueryState<T = string>(
     initialSearchParams?.get(key) ?? null
   )
 
+  React.useEffect(() => {
+    const query = initialSearchParams.get(key) ?? null
+    if (query === queryRef.current) {
+      return
+    }
+    const state = query === null ? null : safeParse(parse, query, key)
+    debug('[nuqs `%s`] syncFromUseSearchParams %O', key, state)
+    stateRef.current = state
+    queryRef.current = query
+    setInternalState(state)
+  }, [initialSearchParams?.get(key), key])
+
   // Sync all hooks together & with external URL changes
   React.useInsertionEffect(() => {
     function updateInternalState({ state, query }: CrossHookSyncPayload) {

packages/nuqs/src/useQueryStates.ts

@@ -88,6 +88,21 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
     initialSearchParams
   )
 
+  React.useEffect(() => {
+    const state = parseMap(
+      keyMap,
+      initialSearchParams,
+      queryRef.current,
+      stateRef.current
+    )
+    setInternalState(state)
+  }, [
+    Object.keys(keyMap)
+      .map(key => initialSearchParams?.get(key))
+      .join('&'),
+    keys
+  ])
+
   // Sync all hooks together & with external URL changes
   React.useInsertionEffect(() => {
     function updateInternalState(state: V) {