svelte-navigator-lite 1.1.3 → 1.1.4

package/README.md

@@ -110,32 +110,30 @@ Add `optional: true` to make a trailing segment optional. Optional segments must
 
 ## Search Params
 
-Declared in `searchParams`. Listed params are captured into `router.params` if present in the URL, and silently ignored if absent. They never affect whether a route matches.
+Search params are automatically captured into `router.searchParams` when present in the URL. No configuration is needed — they never affect whether a route matches.
 
 ```ts
-'password-reset': {
-    rootPath: 'password-reset',
-    segments: [],
-    searchParams: ['token'],
-}
-// /password-reset?token=abc  →  router.params.token === 'abc'
-// /password-reset            →  router.params === {}
+// /password-reset?token=abc  →  router.searchParams.token === 'abc'
+// /password-reset            →  router.searchParams === {}
 ```
 
 ---
 
 ## Navigating
 
-### `router.navigate(route, params?)`
+### `router.navigate(route, params?, searchParams?)`
 
-Navigate to a named route. Params are used to fill dynamic segments and search params.
+Navigate to a named route. Path params fill dynamic segments; pass search params separately as the third argument.
 
 ```ts
 router.navigate('event', { eventId: '123' });
 // → /event/123
 
-router.navigate('password-reset', { token: 'abc123' });
+router.navigate('password-reset', undefined, { token: 'abc123' });
 // → /password-reset?token=abc123
+
+router.navigate('event', { eventId: '123' }, { tab: 'details' });
+// → /event/123?tab=details
 ```
 
 Throws if a required param is missing.
@@ -201,7 +199,11 @@ The label of the currently matched route. Falls back to `defaultRoute` if no rou
 
 ### `router.params`
 
-An object containing all captured values — path params, required search params, and any present optional search params.
+An object containing the captured path param values for the current route.
+
+### `router.searchParams`
+
+An object containing the search params present in the current URL. Empty object when none are present.
 
 ### `router.notFound`
 
@@ -215,7 +217,7 @@ An object containing all captured values — path params, required search params
 {/if}
 ```
 
-### `router.navigate(route, params?)`
+### `router.navigate(route, params?, searchParams?)`
 
 Navigate to a named route, applying guards and building the URL from the route definition.
 

package/dist/router.svelte.d.ts

@@ -11,7 +11,6 @@ export type Route = {
         enforceVal?: string;
         optional?: boolean;
     })[];
-    searchParams?: string[];
     routeGuards?: RouteGuard[];
 };
 export type RouteGuard = {
@@ -23,12 +22,13 @@ export type Router = ReturnType<typeof _createRouter>;
 export declare function _createRouter(routeList?: RouteList): {
     readonly route: string;
     readonly params: Record<string, string>;
+    readonly searchParams: Record<string, string>;
     readonly notFound: boolean;
     rootRoute: string;
     is(route: string): boolean;
     matches(routes: string[]): boolean;
     parseUrl: (url: string) => void;
-    navigate(route: string, params?: Record<string, string>): Promise<void>;
+    navigate(route: string, params?: Record<string, string>, searchParams?: Record<string, string>): Promise<void>;
     registerRoute(name: string, route: Route): void;
 };
 export declare let router: Router;

package/dist/router.svelte.js

@@ -38,6 +38,7 @@ export function _createRouter(routeList = {}) {
     let state = $state({
         current: '',
         params: {},
+        searchParams: {},
         notFound: false,
     });
     let routes = {};
@@ -75,22 +76,17 @@ export function _createRouter(routeList = {}) {
                     params[routeSegment.name] = urlSegment;
                 }
             }
-            if (match && route.searchParams) {
-                for (const key of route.searchParams) {
-                    const val = searchParams.get(key);
-                    if (val)
-                        params[key] = val;
-                }
-            }
             if (match) {
                 state.current = routeName;
                 state.params = params;
+                state.searchParams = Object.fromEntries(searchParams.entries());
                 state.notFound = false;
                 return;
             }
         }
         state.current = rootRoute;
         state.params = {};
+        state.searchParams = {};
         state.notFound = true;
     }
     return {
@@ -101,6 +97,9 @@ export function _createRouter(routeList = {}) {
         get params() {
             return state.params;
         },
+        get searchParams() {
+            return state.searchParams;
+        },
         get notFound() {
             return state.notFound;
         },
@@ -114,7 +113,7 @@ export function _createRouter(routeList = {}) {
             return routes.includes(state.current);
         },
         parseUrl,
-        async navigate(route, params) {
+        async navigate(route, params, searchParams) {
             let path = routes[route].rootPath;
             for (const guard of routes[route].routeGuards || []) {
                 if (guard.fn()) {
@@ -133,14 +132,8 @@ export function _createRouter(routeList = {}) {
                     path += `/${params[segment.name]}`;
                 }
             }
-            if (routes[route].searchParams) {
-                const searchParams = new URLSearchParams();
-                for (const param of routes[route].searchParams) {
-                    if (params && params[param]) {
-                        searchParams.set(param, params[param]);
-                    }
-                }
-                const qs = searchParams.toString();
+            if (searchParams) {
+                const qs = new URLSearchParams(searchParams).toString();
                 if (qs)
                     path += `?${qs}`;
             }

package/dist/router.test.js

@@ -129,12 +129,11 @@ describe('parseUrl — optional segments', () => {
         expect(r.notFound).toBe(true);
     });
 });
-describe('parseUrl — required searchParams', () => {
+describe('parseUrl — search params', () => {
     const routes = {
         'password-reset': {
             rootPath: 'password-reset',
             segments: [],
-            searchParams: ['token'],
         },
         fallback: { rootPath: 'fallback', segments: [] },
     };
@@ -142,24 +141,28 @@ describe('parseUrl — required searchParams', () => {
         const r = makeRouter(routes, 'fallback');
         r.parseUrl('http://localhost/password-reset?token=abc123');
         expect(r.route).toBe('password-reset');
-        expect(r.params).toEqual({ token: 'abc123' });
+        expect(r.searchParams).toEqual({ token: 'abc123' });
     });
-    it('still matches when a search param is absent', () => {
+    it('still matches when no search params are present', () => {
         const r = makeRouter(routes, 'fallback');
         r.parseUrl('http://localhost/password-reset');
         expect(r.route).toBe('password-reset');
-        expect(r.params).toEqual({});
+        expect(r.searchParams).toEqual({});
     });
-    it('captures multiple search params independently', () => {
+    it('captures multiple search params', () => {
         const r = makeRouter({
-            page: {
-                rootPath: 'items',
-                segments: [],
-                searchParams: ['page', 'sort'],
-            },
-        }, 'page');
-        r.parseUrl('http://localhost/items?page=2');
-        expect(r.params).toEqual({ page: '2' });
+            items: { rootPath: 'items', segments: [] },
+        }, 'items');
+        r.parseUrl('http://localhost/items?page=2&sort=asc');
+        expect(r.searchParams).toEqual({ page: '2', sort: 'asc' });
+    });
+    it('captures search params alongside path params', () => {
+        const r = makeRouter({
+            event: { rootPath: 'event', segments: [{ name: 'eventId' }] },
+        }, 'event');
+        r.parseUrl('http://localhost/event/123?tab=details');
+        expect(r.params).toEqual({ eventId: '123' });
+        expect(r.searchParams).toEqual({ tab: 'details' });
     });
 });
 describe('parseUrl — fallback and notFound', () => {
@@ -240,17 +243,38 @@ describe('navigate()', () => {
         }, 'event');
         await expect(r.navigate('event')).rejects.toThrow('Missing parameter eventId');
     });
-    it('appends search params to the path', async () => {
+    it('appends search params when provided', async () => {
         const r = makeRouter({
-            'password-reset': {
-                rootPath: 'password-reset',
-                segments: [],
-                searchParams: ['token'],
-            },
+            'password-reset': { rootPath: 'password-reset', segments: [] },
         }, 'password-reset');
-        await r.navigate('password-reset', { token: 'abc' });
+        await r.navigate('password-reset', undefined, { token: 'abc' });
         expect(history.pushState).toHaveBeenCalledWith({}, '', '/password-reset?token=abc');
     });
+    it('appends multiple search params', async () => {
+        const r = makeRouter({
+            items: { rootPath: 'items', segments: [] },
+        }, 'items');
+        await r.navigate('items', undefined, { page: '2', sort: 'asc' });
+        const call = history.pushState.mock.calls[0][2];
+        const url = new URL(call, 'http://localhost');
+        expect(url.pathname).toBe('/items');
+        expect(url.searchParams.get('page')).toBe('2');
+        expect(url.searchParams.get('sort')).toBe('asc');
+    });
+    it('navigates with both path params and search params', async () => {
+        const r = makeRouter({
+            event: { rootPath: 'event', segments: [{ name: 'eventId' }] },
+        }, 'event');
+        await r.navigate('event', { eventId: '42' }, { tab: 'details' });
+        expect(history.pushState).toHaveBeenCalledWith({}, '', '/event/42?tab=details');
+    });
+    it('does not append search params when not provided', async () => {
+        const r = makeRouter({
+            event: { rootPath: 'event', segments: [{ name: 'eventId' }] },
+        }, 'event');
+        await r.navigate('event', { eventId: '42' });
+        expect(history.pushState).toHaveBeenCalledWith({}, '', '/event/42');
+    });
     it('redirects when a guard fn returns true', async () => {
         const r = makeRouter({
             login: { rootPath: 'login', segments: [] },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-navigator-lite",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A lightweight router for Svelte 5",
   "readme": "README.md",
   "repository": {