Register custom turbo-stream plugin for encoding/decoding additional types in single-fetch data

[robmonie]

Note: this has been moved from the Remix discussion

I'd like to propose an api for registering custom turbo-stream plugins for use in the encoding / decoding of loader-data. A specific use-case is to be able to send and receive Luxon DateTime or BigNumber instances which we've standardised on within our apps. Currently we do this via wrappers around the existing useDataLoader and friends but the move to turbo-stream makes this feel a bit less natural and continuing as we currently do would mean missing some of the router improvements.

An example of registering a plugin for encoding/decoding a Luxon DateTime.

registerTurboStreamPlugin({ 
  encoder: (value) => {
    if (value instanceof DateTime) {
      return ['DateTime"' value.toISODate()];
    }
  },
  decoder: (type, encodedValue) => {
    if (type === 'DateTime') {
      return { value: DateTime.fromIso(encodedValue); };
    }
  }
});

[glasody]

This is probably the only thing keeping us from migrating Remix to RR7, we also use Luxon DateTime and not being able to deserialize loader data to the proper types makes RR7 un-usable.

[robmonie]

In case it's helpful, we've been able to move forward using our previous approach by manually converting our models containing Luxon and BigNumber instances to JSON objects in loaders and then using hooks to deserialize back.

For example in a loader:

return toJson<LoaderData>({ someObjectWithDateTime });

the toJson implementation generically converts DateTime instances into ISO strings. This could be as simple as JSON.parse(JSON.stringify(object)); or a custom implementation that may perform better. I'm about to look at that now that i've proved the approach works more generally.

Next, in a route we use a hook that wraps useLoaderData and parses the json objects with our zod schemas. This approach could be adapted to different type-safe deserialization implementations.

export const useTypedLoaderData = <T extends z.ZodTypeAny>(schema: T): z.infer<T> => {
  const loaderData = useLoaderData();

  return useMemo(() => schema.parse(loaderData), [loaderData, schema]);
};

export default function Route() {
  const { someObjectWithDateTime } = useTypedLoaderData(loaderDataSchema);
}

This ends up looking very similar to what we had prior to RRV7. Unfortunately it means we miss out on full use of the route types, in particular the typed loaderData in route props which now appears as Json, but it allowed us to upgrade with the hope that we can get more flexibility with turbo-stream at some point.

Of course you could skip the useTypedLoaderData hook and do the following instead. We've just kept a pattern that already existed.

export default function Route({ loaderData }: Route.ComponentProps) {
  const { someObjectWithDateTime } = useMemo(() => schema.parse(loaderData), [loaderData, schema]);
}

We also have implementations such as useTypedLoaderDataForRoute and useTypedActionFetcher.

[glasody]

have you thought about using the superjson package just like how the remix-typedjson package was?

[robmonie]

We used superjson in one project and moved to zod schemas in another as we were already using them extensively elsewhere. I don't have a strong opinion one way or the other as to which is better. Superjson was probably a bit simpler to use in this context.