feat(react-router): params.parse and params.stringify instead of parseParams and stringifyParams

[chorobin]

The types for parseParams and stringifyParams were not working correctly as stated in the docs. They are both optional. Furthermore the approach of intersecting a union causes TS to expand all the options over the union which is not so great for performance.

I want to suggest deprecating parseParams and stringifyParams to simplify the types. I think a nested object works perfectly for a all or nothing approach.

export const Route = createFileRoute('/params/$paramsPlaceholder')({
  component: ParamsComponent,
  loader: (opts) =>
    opts.context.queryClient.ensureQueryData(paramsQueryOptions),

  // params is optional
  params: {
    // parse and stringify are required so you have to specify both
    parse: (params) => ({
      paramsPlaceholder: Number(params.paramsPlaceholder),
    }),
    stringify: (params) => ({
      paramsPlaceholder: params.paramsPlaceholder.toString(),
    }),
  },
})

It lowers instantiations because when you do A & (B | C) it effectively expands to A & B | A & C duplicating the options per route. Nested objects don't do this and result in a smaller type for options

Before

> tsc --extendedDiagnostics

Files:                         646
Lines of Library:            38411
Lines of Definitions:        88223
Lines of TypeScript:         21604
Lines of JavaScript:             0
Lines of JSON:                   0
Lines of Other:                  0
Identifiers:                141629
Symbols:                    324176
Types:                      114839
Instantiations:             788962
Memory used:               376398K
Assignability cache size:    49166
Identity cache size:          8638
Subtype cache size:           2426
Strict subtype cache size:     413
I/O Read time:               0.10s
Parse time:                  0.69s
ResolveModule time:          0.14s
ResolveTypeReference time:   0.00s
ResolveLibrary time:         0.02s
Program time:                1.05s
Bind time:                   0.30s
Check time:                  5.61s
printTime time:              0.00s
Emit time:                   0.00s
Total time:                  6.96s

After

> tsc --extendedDiagnostics

Files:                         646
Lines of Library:            38411
Lines of Definitions:        88237
Lines of TypeScript:         21604
Lines of JavaScript:             0
Lines of JSON:                   0
Lines of Other:                  0
Identifiers:                141686
Symbols:                    310695
Types:                      103866
Instantiations:             726605
Memory used:               347612K
Assignability cache size:    48341
Identity cache size:          8535
Subtype cache size:           2426
Strict subtype cache size:     413
I/O Read time:               0.08s
Parse time:                  0.60s
ResolveModule time:          0.14s
ResolveTypeReference time:   0.00s
ResolveLibrary time:         0.02s
Program time:                0.94s
Bind time:                   0.30s
Check time:                  5.22s
printTime time:              0.00s
Emit time:                   0.00s
Total time:                  6.46s

I've also added some other additional minor optimizations to options

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2630eed. 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 4 targets

• nx affected --targets=test:format,test:eslint,test:unit,test:build,build --parallel=3
• nx run-many --target=test:e2e:replay
• nx affected --target=test:types --exclude=examples/**
• nx affected --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[tannerlinsley]

I love it. I had this at one point but couldn’t get the types to behave. I would love to bring it back.

[schiller-manuel]

LGTM

can you please:

• update documentation (deprecate old format, add new format)
• update examples to use the new format

[chorobin]

LGTM

can you please:

• update documentation (deprecate old format, add new format)
• update examples to use the new format

You missed the important bit... We need tests around all this 😂

[bpinto]

Sorry if I missed it, but is this compatible with declaring these on the routeR and not on each individual route?

This is for params, not search. Sorry, nothing to see here.