From 31bbfaf08be8e538e888b0df4294f09d30157dd4 Mon Sep 17 00:00:00 2001
From: ak4zh <agwl.akash@gmail.com>
Date: Fri, 19 Sep 2025 11:56:36 +0530
Subject: [PATCH] feat: add

---
 src/lib/sveltekit-search-params.svelte.ts | 20 ++++++++++++++++++--
 src/routes/+page.svelte                   |  2 ++
 src/routes/Demo.svelte                    | 18 ++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Demo.svelte

diff --git a/src/lib/sveltekit-search-params.svelte.ts b/src/lib/sveltekit-search-params.svelte.ts
index 8e04d73..615ae12 100644
--- a/src/lib/sveltekit-search-params.svelte.ts
+++ b/src/lib/sveltekit-search-params.svelte.ts
@@ -198,7 +198,10 @@ function create_recursive_proxy<
 	navigator?: ReturnType<typeof create_root_navigator>,
 ) {
 	return new Proxy<LooseAutocomplete<Options<T>>>(
-		target as LooseAutocomplete<Options<T>>,
+		target as LooseAutocomplete<Options<T>> & {
+			toJSON: () => Options<T>,
+			$parsed: () => Options<T>
+		},
 		{
 			get(target, name) {
 				// we use the RAW symbol to get the original target (this is currently not used but better have it)
@@ -236,6 +239,16 @@ function create_recursive_proxy<
 						return values;
 					};
 				}
+				// special case for JSON.stringify
+				if (name === '$parsed') {
+					return () => {
+						// snapshot the cache
+						const values = $state.snapshot(cache);
+						// on the server that's enough
+						if (!browser) return values;
+						return values;
+					};
+				}
 
 				const value =
 					cache[name as never] ??
@@ -326,7 +339,10 @@ export function queryParameters<
 >(
 	options?: T,
 	navigation_options: NavigationOptions = {},
-): LooseAutocomplete<Options<T>> {
+): LooseAutocomplete<Options<T>> & {
+	toJSON: () => Options<T>;
+	$parsed: () => Options<T>
+} {
 	const { showDefaults: show_defaults = true } = navigation_options;
 	// keeps all the deriveds for every single property
 	const cache: Partial<T> = {};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cdfda34..0773a06 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import BrowserWindow from "./BrowserWindow.svelte";
   import "../assets/fonts.css";
   import { typewriter } from "svelte-typewriter-store";
+	import Demo from "./Demo.svelte";
   const store = typewriter(["pablopang", "rich_harris", "albert_einstein"], 30);
 </script>
 
@@ -35,6 +36,7 @@
   <code class="npm">npm i sveltekit-search-params -D</code>
 </div>
 <div class="wrapper">
+  <Demo />
   <BrowserWindow title="" url={`https://my.app?username=${$store}`}>
     <div class="content">
       <input readonly value={$store} /> <br />
diff --git a/src/routes/Demo.svelte b/src/routes/Demo.svelte
new file mode 100644
index 0000000..e1bc9ee
--- /dev/null
+++ b/src/routes/Demo.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { queryParameters, ssp } from "$lib";
+
+    const params = queryParameters({
+        q: ssp.string(),
+        page: ssp.number(1)
+    })
+
+    let parsed = $derived(params.$parsed());
+</script>
+
+Defined: {JSON.stringify(parsed)}<br>
+All: {JSON.stringify(params.toJSON())}
+<br><br>
+<input bind:value={params.q}/><br>
+<button disabled={params.page < 2} onclick={() => params.page--}>Previous</button>
+<button onclick={() => params.page++}>Next</button><br>
+<br>
\ No newline at end of file