refactor(router-core): simplify defaultParseSearch & defaultStringifySearch (#4985)

Wait for this PR before merging:
#4987. It adds unit tests that
should help make sure we're not breaking anything here.

--- 

The functions used to serialize and deserialize search params are called
*a lot*, but they are creating many unnecessary objects. This PR
refactors
- `encode` to be only as generic as what we need => in practice we only
need to handle 1 value per key (i.e. `.set()` and not `.append()`) so we
don't need a special case for arrays
- `decode` can avoid creating many arrays
- `stringifySearchWith` (and `defaultStringifySearch`) don't need to
pre-stringify the input into a `<string,string>` dictionary as `encode`
now accepts a stringifier function


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- Breaking Changes
- Removed encode and decode from React Router and Solid Router public
exports.
  - Query string prefix support removed in encode/decode.
- Refactor
- Updated query string handling: arrays encode as comma-separated
values; duplicate keys decode into arrays.
- Streamlined error handling and avoided input mutation; consistent
leading “?” management.
- Tests
- Updated tests to match new encoding/decoding behavior and removed
prefix-related cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 2 people

packages/react-router/src/index.tsx

@@ -13,8 +13,6 @@ export {
   matchPathname,
   removeBasepath,
   matchByPath,
-  encode,
-  decode,
   rootRouteId,
   defaultSerializeError,
   defaultParseSearch,

packages/router-core/src/qss.ts

@@ -6,31 +6,36 @@
  * This reimplementation uses modern browser APIs
  * (namely URLSearchParams) and TypeScript while still
  * maintaining the original functionality and interface.
+ *
+ * Update: this implementation has also been mangled to
+ * fit exactly our use-case (single value per key in encoding).
  */
 
 /**
  * Encodes an object into a query string.
  * @param obj - The object to encode into a query string.
- * @param [pfx] - An optional prefix to add before the query string.
+ * @param stringify - An optional custom stringify function.
  * @returns The encoded query string.
  * @example
  * ```
  * // Example input: encode({ token: 'foo', key: 'value' })
  * // Expected output: "token=foo&key=value"
  * ```
  */
-export function encode(obj: any, pfx?: string) {
-  const normalizedObject = Object.entries(obj).flatMap(([key, value]) => {
-    if (Array.isArray(value)) {
-      return value.map((v) => [key, String(v)])
-    } else {
-      return [[key, String(value)]]
-    }
-  })
+export function encode(
+  obj: Record<string, any>,
+  stringify: (value: any) => string = String,
+): string {
+  const result = new URLSearchParams()
 
-  const searchParams = new URLSearchParams(normalizedObject)
+  for (const key in obj) {
+    const val = obj[key]
+    if (val !== undefined) {
+      result.set(key, stringify(val))
+    }
+  }
 
-  return (pfx || '') + searchParams.toString()
+  return result.toString()
 }
 
 /**
@@ -52,28 +57,26 @@ function toValue(str: unknown) {
 /**
  * Decodes a query string into an object.
  * @param str - The query string to decode.
- * @param [pfx] - An optional prefix to filter out from the query string.
  * @returns The decoded key-value pairs in an object format.
  * @example
  * // Example input: decode("token=foo&key=value")
  * // Expected output: { "token": "foo", "key": "value" }
  */
-export function decode(str: any, pfx?: string): any {
-  const searchParamsPart = pfx ? str.slice(pfx.length) : str
-  const searchParams = new URLSearchParams(searchParamsPart)
+export function decode(str: any): any {
+  const searchParams = new URLSearchParams(str)
 
-  const entries = [...searchParams.entries()]
+  const result: Record<string, unknown> = {}
 
-  return entries.reduce<Record<string, unknown>>((acc, [key, value]) => {
-    const previousValue = acc[key]
+  for (const [key, value] of searchParams.entries()) {
+    const previousValue = result[key]
     if (previousValue == null) {
-      acc[key] = toValue(value)
+      result[key] = toValue(value)
+    } else if (Array.isArray(previousValue)) {
+      previousValue.push(toValue(value))
     } else {
-      acc[key] = Array.isArray(previousValue)
-        ? [...previousValue, toValue(value)]
-        : [previousValue, toValue(value)]
+      result[key] = [previousValue, toValue(value)]
     }
+  }
 
-    return acc
-  }, {})
+  return result
 }

packages/router-core/src/searchParams.ts

@@ -9,7 +9,7 @@ export const defaultStringifySearch = stringifySearchWith(
 
 export function parseSearchWith(parser: (str: string) => any) {
   return (searchStr: string): AnySchema => {
-    if (searchStr.substring(0, 1) === '?') {
+    if (searchStr[0] === '?') {
       searchStr = searchStr.substring(1)
     }
 
@@ -21,8 +21,8 @@ export function parseSearchWith(parser: (str: string) => any) {
       if (typeof value === 'string') {
         try {
           query[key] = parser(value)
-        } catch (err) {
-          //
+        } catch (_err) {
+          // silent
         }
       }
     }
@@ -35,40 +35,29 @@ export function stringifySearchWith(
   stringify: (search: any) => string,
   parser?: (str: string) => any,
 ) {
+  const hasParser = typeof parser === 'function'
   function stringifyValue(val: any) {
     if (typeof val === 'object' && val !== null) {
       try {
         return stringify(val)
-      } catch (err) {
+      } catch (_err) {
         // silent
       }
-    } else if (typeof val === 'string' && typeof parser === 'function') {
+    } else if (hasParser && typeof val === 'string') {
       try {
         // Check if it's a valid parseable string.
         // If it is, then stringify it again.
         parser(val)
         return stringify(val)
-      } catch (err) {
+      } catch (_err) {
         // silent
       }
     }
     return val
   }
 
   return (search: Record<string, any>) => {
-    search = { ...search }
-
-    Object.keys(search).forEach((key) => {
-      const val = search[key]
-      if (typeof val === 'undefined' || val === undefined) {
-        delete search[key]
-      } else {
-        search[key] = stringifyValue(val)
-      }
-    })
-
-    const searchStr = encode(search as Record<string, string>).toString()
-
+    const searchStr = encode(search, stringifyValue)
     return searchStr ? `?${searchStr}` : ''
   }
 }

packages/router-core/tests/qss.test.ts

@@ -8,12 +8,6 @@ describe('encode function', () => {
     expect(queryString).toEqual('token=foo&key=value')
   })
 
-  it('should encode an object into a query string with a prefix', () => {
-    const obj = { token: 'foo', key: 'value' }
-    const queryString = encode(obj, 'prefix_/*&?')
-    expect(queryString).toEqual('prefix_/*&?token=foo&key=value')
-  })
-
   it('should handle encoding an object with empty values and trailing equal signs', () => {
     const obj = { token: '', key: 'value=' }
     const queryString = encode(obj)
@@ -23,7 +17,7 @@ describe('encode function', () => {
   it('should handle encoding an object with array values', () => {
     const obj = { token: ['foo', 'bar'], key: 'value' }
     const queryString = encode(obj)
-    expect(queryString).toEqual('token=foo&token=bar&key=value')
+    expect(queryString).toEqual('token=foo%2Cbar&key=value')
   })
 
   it('should handle encoding an object with special characters', () => {
@@ -46,12 +40,6 @@ describe('decode function', () => {
     expect(decodedObj).toEqual({ token: 'foo', key: 'value' })
   })
 
-  it('should decode a query string with a prefix', () => {
-    const queryString = 'prefix_/*&?token=foo&key=value'
-    const decodedObj = decode(queryString, 'prefix_/*&?')
-    expect(decodedObj).toEqual({ token: 'foo', key: 'value' })
-  })
-
   it('should handle missing values and trailing equal signs', () => {
     const queryString = 'token=&key=value='
     const decodedObj = decode(queryString)

packages/solid-router/src/index.tsx

@@ -13,8 +13,6 @@ export {
   matchPathname,
   removeBasepath,
   matchByPath,
-  encode,
-  decode,
   rootRouteId,
   defaultSerializeError,
   defaultParseSearch,