feat: add reactive url search params (#28)

Author: colinlienard

.changeset/twelve-gorillas-reflect.md

@@ -0,0 +1,5 @@
+---
+'sv-router': patch
+---
+
+Add reactive url search params

examples/file-based/src/App.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
-	import { isActiveLink, Router } from 'sv-router';
+	import { isActiveLink, Router, searchParams } from 'sv-router';
 	import { navigate, p } from 'sv-router/generated';
 </script>
 
 <a href={p('/')}>Home</a>
 <a use:isActiveLink href={p('/about')}>About</a>
 <a href={p('/posts')} data-preload>Posts</a>
-<button onclick={() => navigate('/posts/:id', { params: { id: 'programmatic' } })}>
+<button
+	onclick={() =>
+		navigate('/posts/:id', { params: { id: 'programmatic' }, search: searchParams.toString() })}
+>
 	Programmatic
 </button>
+<button
+	onclick={() => {
+		searchParams.set('test', searchParams.has('test') ? 'ok' : '1');
+	}}
+>
+	ok
+</button>
 <Router />
 
 <style>

src/create-router.svelte.js

@@ -3,6 +3,7 @@ import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preloadOnHover } from './helpers/preload-on-hover.js';
 import { constructPath, resolveRouteComponents } from './helpers/utils.js';
+import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
 export let routes;
@@ -42,7 +43,7 @@ export function createRouter(r) {
 				path = constructPath(path, options.params);
 			}
 			if (options.search) {
-				path += options.search;
+				path += (options.search.startsWith('?') ? '' : '?') + options.search;
 			}
 			if (options.hash) {
 				path += options.hash;
@@ -76,7 +77,11 @@ export function onNavigate() {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
+
+	syncSearchParams();
+
 	Object.assign(location, updatedLocation());
+
 	const { match, layouts, params: newParams } = matchRoute(globalThis.location.pathname, routes);
 	params.value = newParams || {};
 	resolveRouteComponents(match ? [...layouts, match] : layouts).then((components) => {

src/index.d.ts

@@ -1,6 +1,16 @@
 import type { Component, Snippet } from 'svelte';
 import type { Action } from 'svelte/action';
 
+/**
+ * A Svelte action that will add a class to the anchor if its `href` matches the current route. It
+ * can have an optional `className` parameter to specify the class to add, otherwise it will default
+ * to `is-active`.
+ *
+ * ```svelte
+ * <a href="/about" use:isActiveLink={{ className: 'active-link' }}>
+ * ```
+ */
+export const isActiveLink: IsActiveLink;
 /**
  * Setup a new router instance with the given routes.
  *
@@ -13,8 +23,13 @@ import type { Action } from 'svelte/action';
  * ```
  */
 export function createRouter<T extends Routes>(r: T): RouterApi<T>;
-export const isActiveLink: IsActiveLink;
+/** The component that will render the current route. */
 export const Router: Component;
+/**
+ * The reactive search params of the URL. It is just a wrapper around `SvelteURLSearchParam` that
+ * will update the url on change.
+ */
+export const searchParams: URLSearchParams;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type BaseProps = {};

src/index.js

@@ -1,3 +1,4 @@
 export { isActiveLink } from './actions.svelte.js';
 export { createRouter } from './create-router.svelte.js';
 export { default as Router } from './Router.svelte';
+export { searchParams } from './search-params.svelte.js';

src/search-params.svelte.js

@@ -0,0 +1,78 @@
+import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+let searchParams = new SvelteURLSearchParams(globalThis.location.search);
+
+/** @type {URLSearchParams} */
+const shell = {
+	append(...args) {
+		searchParams.append(...args);
+		updateUrlSearchParams();
+	},
+	delete(...args) {
+		searchParams.delete(...args);
+		updateUrlSearchParams();
+	},
+	entries() {
+		return searchParams.entries();
+	},
+	forEach(...args) {
+		// eslint-disable-next-line unicorn/no-array-for-each
+		return searchParams.forEach(...args);
+	},
+	get(...args) {
+		return searchParams.get(...args);
+	},
+	getAll(...args) {
+		return searchParams.getAll(...args);
+	},
+	has(...args) {
+		return searchParams.has(...args);
+	},
+	keys() {
+		return searchParams.keys();
+	},
+	set(...args) {
+		searchParams.set(...args);
+		updateUrlSearchParams();
+	},
+	sort() {
+		searchParams.sort();
+		updateUrlSearchParams();
+	},
+	toString() {
+		return searchParams.toString();
+	},
+	values() {
+		return searchParams.values();
+	},
+	get size() {
+		return searchParams.size;
+	},
+	[Symbol.iterator]() {
+		return searchParams[Symbol.iterator]();
+	},
+};
+
+export { shell as searchParams };
+
+export function syncSearchParams() {
+	const newSearchParams = new URLSearchParams(globalThis.location.search);
+	if (searchParams.toString() === newSearchParams.toString()) {
+		return;
+	}
+
+	for (const key of searchParams.keys()) {
+		searchParams.delete(key);
+	}
+	for (const [key, value] of newSearchParams.entries()) {
+		searchParams.append(key, value);
+	}
+}
+
+function updateUrlSearchParams() {
+	let url = globalThis.location.origin + globalThis.location.pathname;
+	if (searchParams.size > 0) {
+		url += '?' + searchParams.toString();
+	}
+	globalThis.history.pushState({}, '', url);
+}