Hi,

I would like to expose the JSON key for serialization.

I have a use-case where I want to serialize a Date, but I have query params (fromDate, toDate) that should be serialized to 2024-10-19 and others with a different key that should also include minutes, seconds, etc.

So the type is the same for both cases, so I have to make the distinction based on the key.

This PR exposes the key in addition to the value.

Oct 19 '24 15:10 MarkusWendorf

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b62404259a6dee8e6eef6114c6fb67f0aa716d62. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

Oct 19 '24 17:10 nx-cloud[bot]

Open in Stackblitz

More templates

@tanstack/eslint-plugin-router

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2588

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2588

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2588

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2588

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2588

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2588

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2588

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2588

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2588

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2588

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2588

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2588

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2588

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2588

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2588

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2588

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2588

commit: b624042

Oct 19 '24 17:10 pkg-pr-new[bot]

@MarkusWendorf you can define this custom serialization logic all in userland, right?

Oct 22 '24 20:10 schiller-manuel

@schiller-manuel Yes I can do it in userland. parseSearchWith is a helper after all.

All of the libraries listed in the docs work with a second parameter being a string (JSON.parse/stringify, query-string, JSURL2, Zipson). They expect a config object but behave normally when provided with a string.

TypeScript still complains about the mismatch in type for key though. Not sure if there's a typescript solution other than silencing it with key: any.

I wasn't quite aware that unlike Tanstack Start this is already at version 1.x. I think it's a sensible change, but I would not introduce a breaking change for it.

Feel free to close this PR, if there's a v2.x on the horizon maybe reconsider this change.

Oct 22 '24 21:10 MarkusWendorf

@schiller-manuel how about we make this its own standalone feature under the Router options?

Currently, we have a key under RouterOptions named search. Perhaps we move this in there and deprecate the existing stringifySearch and parseSearch options?

const router = createRouter({
	// ...
	search: {
		parse: parseSearchWithV2(...),
		stringify: parseSearchWithV2(...)
	}
})

Oct 25 '24 22:10 SeanCassiere

while I think moving those props into search should be done, I wouldn't mix it up with this change. let's just consider this as a potential breaking change for v2 as a solution in userland is perfectly possible right now.

Oct 26 '24 21:10 schiller-manuel

feat: expose 'key' for search param serialization

☁️ Nx Cloud Report