Add ReadonlyMap and ReadonlySet as Serializable

[bjohn465]

The Serializable type currently defines Maps and Sets as serializable if their keys and/or values are serializable (see https://github.com/remix-run/react-router/blob/ab67e21/packages/react-router/lib/server-runtime/single-fetch.ts#L298-L299).

The Serialize type is similar, but serializes types that extend Map or Set, rather than types that are Maps or Sets (see https://github.com/remix-run/react-router/blob/ab67e21/packages/react-router/lib/types/route-data.ts#L23-L24).

ReadonlyMap and ReadonlySet are separate types that do not extend Map or Set, but they are subsets of Map and Set that only define the non-mutating methods.

Since ReadonlyMap and ReadonlySet aren't Map and Set and do not extend Map and Set, they do not serialize correctly (as a type, that is). Since they are Typescript-only types (in that you can't create a ReadonlyMap or ReadonlySet object), they should serialize exactly like Map and Set.

I propose that Serializable, Serialize, and any other types as needed be updated to support serializing ReadonlyMap and ReadonlySet so that code such as useLoaderData will keep ReadonlyMap and ReadonlySet types.

[bjohn465]

Here's a repository with an example: https://github.com/bjohn465/readonly-example

Currently, TypeScript throws an error on line 61 and line 67 because the ReadonlyMap and ReadonlySet types are not serialized correctly. The readonlyMap and readonlySet items in the loader data and action data do come across correctly as a Map and Set, though.

[bjohn465]

A failing test was submitted in this PR: #13092

[bjohn465]

A failing test was submitted in this PR: #13092

The pull request has a code change with a potential fix, too.

[bjohn465]

There's an example of a workaround for ReadonlyMap in #13092 (comment) in case anyone else comes across this. The workaround requires a minimum of version 7.2.0 of react-router.

[GabenGar]

ReadonlyMap or ReadonlySet do not exist outside of typescript land and therefore must not be implicitly serializable. Typescript itself doesn't even support them properly, so why a third-party lib should make them usable?

[bjohn465]

Unless Object.freeze is used, wouldn't any readonly property or ReadonlyArray be a TypeScript-only construct? (Although, even a "frozen" array has mutation methods like push and pop, but they throw exceptions when called. So a ReadonlyArray, without the mutation methods of Array, exists only within TypeScript types.)

Could you tell me more about TypeScript not supporting ReadonlyMap and ReadonlySet properly? I have not heard about that.

As for whether or not ReadonlyMap and ReadonlySet are serializable, since the actual objects are Maps and Sets, the actual data serializes without a problem (except for the problem with the order of the Map and Set entries in turbo-stream version 2¹). It's only the type information that is lost during serialization.

Footnotes

1. https://github.com/jacob-ebey/turbo-stream/issues/71 ↩

[pcattori]

Fixed by #13092