[Feature] useSearchParams support key only param

[AndreVallestero]

Describe the bug

Currently, there is no way to set the query string to something like domain.tld?page=1&latest. solid-router should support key-only params as it is valid in the URI spec and there are legitimate use cases for them.

Your Example Website or App

https://github.com/solidjs/solid-router

Steps to Reproduce the Bug or Issue

Setting setSearchParams({ page: 1, latest: undefined }), setSearchParams({ page: 1, latest: null }) or setSearchParams({ page: 1, latest: "" }) completely removes the latest param resulting in ?page=1.

Expected behavior

setSearchParams({ page: 1, latest: null }) should result in ?page=1&latest and searchParams should be represented as { page: 1, latest: null }

[ryansolid]

Yeah this is a good idea. Looking at the browser APIs they use an empty string. However since we aren't only passing strings and might want to differentiate from an empty string. I'd love to know if there is precedence here in other libraries.

[fabiospampinato]

possibly useSearchParams should just return something with the same API as a URLSearchParams, so everything works ~natively.

[xxmichas]

@ryansolid Next.js has a nice ReadonlyURLSearchParams. I think useSearchParams should return a similar object.

Current implementation only returns the last value if there are multiple keys with the same name. (e.g. ?n=1&n=2 will always only return "2")

Implementing similar API to URLSearchParams would give developers a choice between URLSearchParams.get() and URLSearchParams.getAll().

also Params type shouldn't assume a queryParam exists and instead should be Params = Record<string, string | undefined>.

Thanks for an amazing framework!

[zhengkyl]

I ran into this usecase and tried messing around for a solution. Just making setSearchParams support key only params isn't too bad, except since URLSearchParams is used to store/merge params, empty string and bare params are equivalent. Its tempting to solve that and support other advanced usecases but then the scope becomes reimplementing URLSearchParams with extra features.

It seems that nextjs and sveltekit both just give you a URLSearchParams object without a builtin way to set search params. Users just have to roll their own function to change the url. https://github.com/vercel/next.js/discussions/47583 https://github.com/sveltejs/kit/issues/969

I also ended rolling my own function with the useNavigate() hook because I wanted , and ; to not be URL encoded and URLSearchParams.toString() is always URL encoded.

I think a better setSearchParams would be great, but there would probably still be weird usecases where someone wants more control over the output url and they'd still have to roll their own thing.