fix(#34): update how values are synced with the current query string state, so changes outside of nuqs-svelte can also be tracked

Author: rtrampox

packages/nuqs-svelte/src/lib/adapters/svelte-kit/adapter.svelte

@@ -6,7 +6,7 @@
   import type { AdapterInterface, AdapterOptions } from "../types";
   import NuqsContext from "../NuqsContext.svelte";
   import { renderQueryString } from "$lib/url-encoding";
-  import { SvelteURL } from "svelte/reactivity";
+  import { SvelteURL, SvelteURLSearchParams } from "svelte/reactivity";
 
   type Props = {
     children?: Snippet;
@@ -51,8 +51,8 @@
       }
     },
 
-    searchParams: () => new URLSearchParams(url.searchParams),
-    getSearchParamsSnapshot: () => new URLSearchParams(url.searchParams),
+    searchParams: () => new SvelteURLSearchParams(page.url.searchParams),
+    getSearchParamsSnapshot: () => new URLSearchParams(page.url.searchParams),
   };
 </script>
 

packages/nuqs-svelte/src/lib/use-query-state.svelte.ts

@@ -1,4 +1,3 @@
-import { untrack } from "svelte";
 import { useAdapter } from "./adapters/index.svelte";
 import { debug } from "./debug";
 import type { Parser } from "./parsers";
@@ -234,22 +233,20 @@ export function useQueryState<T = string>(
     })(),
   );
 
-  let queryState = $derived<string | null>(initialSearchParams.get(key) ?? null);
+  // this state should represent the previous query string value
+  // so that we can compare it with the current value
+  let queryState = initialSearchParams.get(key) ?? null;
 
   $effect(() => {
-    // the query state needs to be untracked, as its value is updated when the internal state changes,
-    // and causes this effect to re-run, causing the internal state to be set to it's older value
-    const uQueryState = untrack(() => queryState);
-
     const query = initialSearchParams.get(key) ?? null;
 
     // parse the query string before comparing, as these values can be boolean, and any string would return true
     const state = query === null ? null : safeParse(parse, query, key);
-    if (state === uQueryState) {
+    if (state === queryState) {
       debug(
         "[nuqs `%s`] syncFromUseSearchParams, no change, prev: %O, new: %O",
         key,
-        uQueryState,
+        queryState,
         state,
       );
       return;

packages/nuqs-svelte/src/routes/+page.svelte

@@ -28,6 +28,10 @@
     Toggle Switch
   </button>
 
+  <a href="/" class="rounded-md bg-neutral-900 p-2 text-center text-white ring ring-neutral-600"
+    >Reset</a
+  >
+
   <p>Loader last updated: {data.time.toLocaleTimeString()}.</p>
   <p>Query value from loader: {data.query}</p>
   <p>Switch value from loader: {data.switch}</p>