refactor(search-params): create custom type for SearchParams

Regular parameters support only single values, while search parameters
support arrays

Author: markojerkic

src/routing.ts

@@ -32,7 +32,9 @@ import type {
   RouterContext,
   RouterIntegration,
   SetParams,
-  Submission
+  Submission,
+  SearchParams,
+  SetSearchParams
 } from "./types.js";
 import {
   mockBase,
@@ -96,13 +98,13 @@ export const useCurrentMatches = () => useRouter().matches;
 
 export const useParams = <T extends Params>() => useRouter().params as T;
 
-export const useSearchParams = <T extends Params>(): [
+export const useSearchParams = <T extends SearchParams>(): [
   Partial<T>,
-  (params: SetParams, options?: Partial<NavigateOptions>) => void
+  (params: SetSearchParams, options?: Partial<NavigateOptions>) => void
 ] => {
   const location = useLocation();
   const navigate = useNavigate();
-  const setSearchParams = (params: SetParams, options?: Partial<NavigateOptions>) => {
+  const setSearchParams = (params: SetSearchParams, options?: Partial<NavigateOptions>) => {
     const searchString = untrack(() => mergeSearchString(location.search, params) + location.hash);
     navigate(searchString, {
       scroll: false,

src/types.ts

@@ -23,9 +23,14 @@ declare module "solid-js/web" {
   }
 }
 
-export type Params = Record<string, string | string[]>;
+export type Params = Record<string, string>;
+export type SearchParams = Record<string, string | string[]>;
 
 export type SetParams = Record<
+  string,
+  string | number | boolean | null | undefined
+>;
+export type SetSearchParams = Record<
   string,
   string | string[] | number | number[] | boolean | boolean[] | null | undefined
 >;
@@ -37,7 +42,7 @@ export interface Path {
 }
 
 export interface Location<S = unknown> extends Path {
-  query: Params;
+  query: SearchParams;
   state: Readonly<Partial<S>> | null;
   key: string;
 }

src/utils.ts

@@ -5,7 +5,9 @@ import type {
   Params,
   PathMatch,
   RouteDescription,
-  SetParams
+  SearchParams,
+  SetParams,
+  SetSearchParams
 } from "./types.ts";
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
@@ -45,8 +47,8 @@ export function joinPaths(from: string, to: string): string {
   return normalizePath(from).replace(/\/*(\*.*)?$/g, "") + normalizePath(to);
 }
 
-export function extractSearchParams(url: URL): Params {
-  const params: Params = {};
+export function extractSearchParams(url: URL): SearchParams {
+  const params: SearchParams = {};
   url.searchParams.forEach((value, key) => {
     if (key in params) {
       params[key] = Array.isArray(params[key])
@@ -163,7 +165,7 @@ export function createMemoObject<T extends Record<string | symbol, unknown>>(fn:
   });
 }
 
-export function mergeSearchString(search: string, params: SetParams) {
+export function mergeSearchString(search: string, params: SetSearchParams) {
   const merged = new URLSearchParams(search);
   Object.entries(params).forEach(([key, value]) => {
     if (value == null || value === "" || (value instanceof Array && !value.length)) {