Merge pull request #489 from markojerkic/arrays-in-search-params

feat(search-params): Enable arrays in useSearchParams

Author: ryansolid

src/routing.ts

@@ -32,7 +32,9 @@ import type {
   RouterContext,
   RouterIntegration,
   SetParams,
-  Submission
+  Submission,
+  SearchParams,
+  SetSearchParams
 } from "./types.js";
 import {
   mockBase,
@@ -100,13 +102,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

@@ -5,9 +5,9 @@ declare module "solid-js/web" {
     response: {
       status?: number;
       statusText?: string;
-      headers: Headers
+      headers: Headers;
     };
-    router? : {
+    router?: {
       matches?: OutputMatch[];
       cache?: Map<string, CacheEntry>;
       submission?: {
@@ -18,14 +18,22 @@ declare module "solid-js/web" {
       dataOnly?: boolean | string[];
       data?: Record<string, any>;
       previousUrl?: string;
-    }
+    };
     serverOnly?: boolean;
   }
 }
 
 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 SetParams = Record<
+  string,
+  string | number | boolean | null | undefined
+>;
+export type SetSearchParams = Record<
+  string,
+  string | string[] | number | number[] | boolean | boolean[] | null | undefined
+>;
 
 export interface Path {
   pathname: string;
@@ -34,7 +42,7 @@ export interface Path {
 }
 
 export interface Location<S = unknown> extends Path {
-  query: Params;
+  query: SearchParams;
   state: Readonly<Partial<S>> | null;
   key: string;
 }
@@ -227,9 +235,12 @@ export type NarrowResponse<T> = T extends CustomResponse<infer U> ? U : Exclude<
 export type RouterResponseInit = Omit<ResponseInit, "body"> & { revalidate?: string | string[] };
 // export type CustomResponse<T> = Response & { customBody: () => T };
 // hack to avoid it thinking it inherited from Response
-export type CustomResponse<T> = Omit<Response, "clone"> & { customBody: () => T; clone(...args: readonly unknown[]): CustomResponse<T> };
+export type CustomResponse<T> = Omit<Response, "clone"> & {
+  customBody: () => T;
+  clone(...args: readonly unknown[]): CustomResponse<T>;
+};
 
 /** @deprecated */
 export type RouteLoadFunc = RoutePreloadFunc;
 /** @deprecated */
-export type RouteLoadFuncArgs = RoutePreloadFuncArgs;
+export type RouteLoadFuncArgs = RoutePreloadFuncArgs;

src/utils.ts

@@ -1,9 +1,18 @@
 import { createMemo, getOwner, runWithOwner } from "solid-js";
-import type { MatchFilter, MatchFilters, Params, PathMatch, RouteDescription, SetParams } from "./types.ts";
+import type {
+  MatchFilter,
+  MatchFilters,
+  Params,
+  PathMatch,
+  RouteDescription,
+  SearchParams,
+  SetParams,
+  SetSearchParams
+} from "./types.ts";
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
-export const mockBase = "http://sr"
+export const mockBase = "http://sr";
 
 export function normalizePath(path: string, omitSlash: boolean = false) {
   const s = path.replace(trimPathRegex, "$1");
@@ -38,10 +47,16 @@ 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) => {
-    params[key] = value;
+    if (key in params) {
+      params[key] = Array.isArray(params[key])
+        ? ([...params[key], value] as string[])
+        : ([params[key], value] as string[]);
+    } else {
+      params[key] = value;
+    }
   });
   return params;
 }
@@ -150,13 +165,21 @@ 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 === "") {
+    if (value == null || value === "" || (value instanceof Array && !value.length)) {
       merged.delete(key);
     } else {
-      merged.set(key, String(value));
+      if (value instanceof Array) {
+        // Delete all instances of the key before appending
+        merged.delete(key);
+        value.forEach(v => {
+          merged.append(key, String(v));
+        });
+      } else {
+        merged.set(key, String(value));
+      }
     }
   });
   const s = merged.toString();

test/route.spec.ts

@@ -1,4 +1,4 @@
-import { vi } from 'vitest'
+import { vi } from "vitest";
 import { createBranch, createBranches, createRoutes } from "../src/routing.js";
 import type { RouteDefinition } from "../src/index.js";
 
@@ -174,7 +174,6 @@ describe("createRoutes should", () => {
       expect(match).not.toBeNull();
       expect(match.path).toBe("/foo/123/bar/solid.html");
     });
-
   });
 
   describe(`expand optional parameters`, () => {

test/utils.spec.ts

@@ -3,7 +3,9 @@ import {
   joinPaths,
   resolvePath,
   createMemoObject,
-  expandOptionals
+  expandOptionals,
+  mergeSearchString,
+  extractSearchParams
 } from "../src/utils";
 
 describe("resolvePath should", () => {
@@ -86,6 +88,85 @@ describe("resolvePath should", () => {
   });
 });
 
+describe("mergeSearchString should", () => {
+  test("return empty string when current and new params are empty", () => {
+    const expected = "";
+    const actual = mergeSearchString("", {});
+    expect(actual).toBe(expected);
+  });
+
+  test("return new params when current params are empty", () => {
+    const expected = "?foo=bar";
+    const actual = mergeSearchString("", { foo: "bar" });
+    expect(actual).toBe(expected);
+  });
+
+  test("return current params when new params are empty", () => {
+    const expected = "?foo=bar";
+    const actual = mergeSearchString("?foo=bar", {});
+    expect(actual).toBe(expected);
+  });
+
+  test("return merged params when current and new params are not empty", () => {
+    const expected = "?foo=bar&baz=qux";
+    const actual = mergeSearchString("?foo=bar", { baz: "qux" });
+    expect(actual).toBe(expected);
+  });
+
+  test("return ampersand-separated params when new params is an array", () => {
+    const expected = "?foo=bar&foo=baz";
+    const actual = mergeSearchString("", { foo: ["bar", "baz"] });
+    expect(actual).toBe(expected);
+  });
+
+  test("return ampersand-separated params when current params is an array of numbers", () => {
+    const expected = "?foo=1&foo=2";
+    const actual = mergeSearchString("", { foo: [1, 2] });
+    expect(actual).toBe(expected);
+  });
+
+  test("return empty string when new is an empty array", () => {
+    const expected = "";
+    const actual = mergeSearchString("", { foo: [] });
+    expect(actual).toBe(expected);
+  });
+
+  test("return empty string when current is present and new is an empty array", () => {
+    const expected = "";
+    const actual = mergeSearchString("?foo=2&foo=3", { foo: [] });
+    expect(actual).toBe(expected);
+  });
+
+  test("return array containing only new value when current is present and new is an array with one value", () => {
+    const expected = "?foo=1&foo=2";
+    const actual = mergeSearchString("?foo=3&foo=4", { foo: [1, 2] });
+    expect(actual).toBe(expected);
+  });
+});
+
+describe("extractSearchParams should", () => {
+  test("return empty object when URL has no search params", () => {
+    const url = new URL("http://localhost/");
+    const expected = {};
+    const actual = extractSearchParams(url);
+    expect(actual).toEqual(expected);
+  });
+
+  test("return search params as object", () => {
+    const url = new URL("http://localhost/?foo=bar&baz=qux");
+    const expected = { foo: "bar", baz: "qux" };
+    const actual = extractSearchParams(url);
+    expect(actual).toEqual(expected);
+  });
+
+  test("return search params as object with array values", () => {
+    const url = new URL("http://localhost/?foo=bar&foo=baz");
+    const expected = { foo: ["bar", "baz"] };
+    const actual = extractSearchParams(url);
+    expect(actual).toEqual(expected);
+  });
+});
+
 describe("createMatcher should", () => {
   test("return empty object when location matches simple path", () => {
     const expected = { path: "/foo/bar", params: {} };