alt approach to knowing what params are optional

[stackoverfloweth]

The Background

Currently, anything that can have params is normalized to WithParams type. This type has a params property that stores Record<string, Param>. The key for each param is where we store if we expect the param to be optional or not.

For example:

{ value: '/[foo], params: { "foo": Boolean } }

This WithParams has a single param "foo", which we can see is NOT optional.

{ value: '/[?foo], params: { "?foo": Boolean } }

Versus this WithParams, where "foo" is now optional.

The Motivation

We've never loved sticking the leading "?" in the params object for several reasons

• it's ugly
• it's changing the keys as defined by the user
• when we check for duplicate param names we need to look for the same name in twice where one has the question mark
• we combine two withParams objects we have to de-normalize param names back to exclude the question mark
• it creates a situation where there are 2 possibly conflicting sources of truth, the user already provides the optional declaration in the value property

That last reason is one that I found the most compelling and why I chose to try this syntax. This is also something that I didn't love about the suggestion to introduce a new optional property that only tracks what params are optional.

The Solution

Now WithParams leaves params alone and looks at the value to determine what's optional.

{ value: '/[foo], params: { "foo": Boolean } } // required
{ value: '/[?foo], params: { "foo": Boolean } } // optional

What About The Types?

I fully implemented this change at runtime, got tests passing, tested with router-preview, and totally expected types to be broken. Much to my surprise it seems the types already work in the way the runtime now works?

[netlify]

✅ Deploy Preview for kitbag-router ready!

Name	Link
🔨 Latest commit	631a6fa
🔍 Latest deploy log	https://app.netlify.com/sites/kitbag-router/deploys/67a7dbd99f25450008834494
😎 Deploy Preview	https://deploy-preview-464--kitbag-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pleek91]

Nice, I like this direction 👍