Add support for parsing arrays into base64 strings in the URL.

[harrisrobin]

Hi,
first off all, thank you for writing this lib @franky47 , it's been a real life saviour!

While running into a use case where I need to keep state in the URL, I noticed that having objects in the URL break in certain messaging apps like whatsapp, telegram and kakaotalk (that's all i've tested).

As a result, I opt-ed to store my arrays as a base64 string in the URL, which works quite well for my use-case. I don't know if this is something other people seek, but wanted to make a PR incase it's of any interest.

I tried to keep it very close to parseAsArrayOf:

  const [selectedTags, setSelectedTags] = useQueryState(
    "selectedTags",
    parseAsBase64ArrayOf(parseAsJson<TagOption>()).withDefault([]),
  )

[vercel]

@harrisrobin is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

[franky47]

Applying some encoding before writing to the URL is a nice idea, I would argue that this approach could be made more generic than arrays, and compose with any underlying parser.

The heart of the problem is more concerning though: if URLs break on some platforms, then the URL encoding logic (kept custom to allow "pretty" URLs, see #372) should be updated instead.

Back to the base64 matter: it would indeed be a good format to wrap any kind of value and make it URL-safe (at the expense of added opacity), one issue as noted in a diff note is the lack of a Unicode-safe implementation native to all platforms.

I may accept a wrapper that doesn't pull Node.js API stubs in the browser, and can easily be tree-shaken if not used.

[franky47]

note: Buffer is a Node.js API, and this code needs to run both on the server and in browsers. atob is not recommended either as it doesn't support Unicode text inputs, though there are workarounds. There is a proposal for browser-native base64 encoding, but it's still in early stages.

[harrisrobin]

I would love to implement a more generic approach. Do you have any ideas or opinions on what using it would look like?

re unicode-safe implementation: I can't find a good wrapper what would fit the bill, so I'll probably look into the workarounds you linked to.

[franky47]

An example would be (using only atob/btoa for simplicity):

export function parseAsBase64<T>(parser: Parser<T>) {
  return createParser<T>({
    parse: query => {
      if (!query) return null
      try {
        return parser.parse(atob(query))
      } catch {
        return null
      }
    },
    serialize: value => btoa((parser.serialize ?? String)(value))
  })
}

[franky47]

suggestion: I need to pin the pnpm version to 9 in the package.json, could you revert this file for the time being please (and/or use pnpm 9) ?