fix(#26): create a new URLSearchParams object on searchParams and getSearchParams options of the SvelteKit adapter

Author: rtrampox

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

@@ -18,7 +18,7 @@
       const { history, scroll, shallow } = options;
 
       if (browser) {
-        const url = new URL(location.href);
+        const url = new URL(page.url);
         url.search = renderQueryString(search);
 
         if (shallow) {
@@ -41,8 +41,8 @@
       }
     },
 
-    searchParams: () => page.url.searchParams,
-    getSearchParamsSnapshot: () => page.url.searchParams,
+    searchParams: () => new URLSearchParams(page.url.searchParams),
+    getSearchParamsSnapshot: () => new URLSearchParams(page.url.searchParams),
   };
 </script>
 

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

@@ -0,0 +1,10 @@
+export const load = ({ url }) => {
+  const switchValue = url.searchParams.get("switch");
+  const query = url.searchParams.get("q");
+
+  return {
+    query,
+    switch: switchValue,
+    time: new Date(),
+  };
+};

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

@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { parseAsBoolean, parseAsString } from "$lib/parsers";
   import { useQueryState } from "$lib/use-query-state.svelte";
 
+  let { data } = $props();
+
   const query = useQueryState("q", parseAsString.withDefault("string-value"));
 
-  const switchState = useQueryState("switch", parseAsBoolean.withDefault(false));
+  const switchState = useQueryState(
+    "switch",
+    parseAsBoolean.withDefault(false).withOptions({ shallow: false }),
+  );
 </script>
 
 <div class="flex flex-col gap-2">
@@ -15,16 +19,6 @@
     placeholder="Search..."
     class="w-full rounded-md bg-neutral-900 p-2 text-white ring ring-neutral-600"
   />
-
-  <button
-    type="button"
-    onclick={() => goto(`?switch=${!switchState.current}`)}
-    class="rounded-md p-2 text-white ring ring-neutral-600
-    {switchState.current ? 'bg-green-500' : 'bg-neutral-900'}"
-  >
-    Switch with goto
-  </button>
-
   <button
     type="button"
     class="rounded-md p-2 text-white ring ring-neutral-600
@@ -33,4 +27,8 @@
   >
     Toggle Switch
   </button>
+
+  <p>Loader last updated: {data.time.toLocaleTimeString()}.</p>
+  <p>Query value from loader: {data.query}</p>
+  <p>Switch value from loader: {data.switch}</p>
 </div>