feat: add $parsed to get only defined params

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> = {};

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 />

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>