Serialize ReadonlyMap and ReadonlySet types

[bjohn465]

ReadonlyMap and ReadonlySet are regular Map and Set objects, but their types omit the mutation methods that the Map and Set types have, similar to the way ReadonlyArray and Array work. However, ReadonlyMap and ReadonlySet do not extend Map and Set, so their types do not serialize correctly when coming from the server.

This is related to the discussion in #13043

[changeset-bot]

🦋 Changeset detected

Latest commit: bc4c0a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
react-router	Patch
@react-router/architect	Patch
@react-router/cloudflare	Patch
@react-router/dev	Patch
react-router-dom	Patch
@react-router/express	Patch
@react-router/node	Patch
@react-router/serve	Patch
@react-router/fs-routes	Patch
@react-router/remix-routes-option-adapter	Patch
create-react-router	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Hi @bjohn465,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[bjohn465]

I made an attempt at fixing this issue by updating the Serialize type in packages/react-router/lib/types/route-data.ts to include ReadonlyMap and ReadonlySet. This makes the tests that I added pass.

I was not sure if I should update the Serializable type in packages/react-router/lib/server-runtime/single-fetch.ts as well.

[bjohn465]

While this pull request is awaiting review, if anyone else runs into this issue, I came up with the following type as a workaround for ReadonlyMaps (the same type with a few minor tweaks could work for ReadonlySet, too):

import {
  type unstable_SerializesTo as SerializesTo,
  type useLoaderData,
} from 'react-router'

function toSerializableReadonlyMap<T>(
  readonlyMap: SerializableReadonlyMap<T>,
): SerializesTo<T> {
  return readonlyMap as unknown as SerializesTo<T>
}

type SerializableReadonlyMap<T> =
  // Get the types of the keys and values
  T extends ReadonlyMap<infer K, infer V>
    ? // Ensure `T` as a `Map` serializes
      ReturnType<typeof useLoaderData<() => Map<K, V>>> extends Map<K, V>
      ? T
      : never
    : never

This uses the unstable_SerializesTo type that was added in version 7.2.0 (original pull request), but only if the ReadonlyMap contains keys and values that would serialize as a regular Map.

Here's an example using toSerializableReadonlyMap:

export function loader() {
  const readonlyMap = toReadonlyMap(new Map([['key', 'value']]))
  return {
    readonlyMap: toSerializableReadonlyMap(readonlyMap),
  }
}

function toReadonlyMap<K, V>(map: Map<K, V>): ReadonlyMap<K, V> {
  return map as ReadonlyMap<K, V>
}