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

[robmonie]

Edit: I've converted this to a proposal from Q&A after doing some more digging and watching the latest roadmap video covering type-safe routing in React Router V7.

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); };
    }
  }
});

[mc-dsk]

It would be amazing !