Add reviver and replacer to json and useLoaderData/useActionData

[sergiodxa]

Proposal

• Add a replacer function to the json helper
• Add a revive function to the useLoaderData/useActionData hooks

Background

JSON.stringify has an option to pass a replacer function, this function is used to customize how JSON.stringify convert a value to a JSON compatible value (e.g. convert Date to a string).

JSON.parse has also an option to pass a reviver function, this function is used to customize how JSON.parse convert certain keys from the JSON string to the actual values (e.g. convert an date string to an actual Date).

Use Cases

• Let users customize how Remix serialize and parse the JSON values returned by a loader/action function.

API/Examples

type LoaderData = { user: { name: string; createdAt: Date } };

let replacer: ReplacerFunction = (key: string, value: unknown) => {
  if (typeof value !== "Date") return value;
  return { __type: "Date", value: value.toISOString() };
};

let reviver: ReviverFunction = (key: string, value: unknown) => {
  if (value.__type === "Date") return new Date(value.value);
  return value;
};

export async function loader({ request }: LoaderArgs) {
  let user = await getUser(request);
  return json({ user }, { replacer });
};

export function Screen() {
  let { user } = useLoaderData<typeof loader>({ reviver });
  return <UserProfile user={user} />;
}

Open questions

• How should SerializeFrom return the type from the loader? We want the Date values to be left as Date but the actual JSON is { __type: "Date", value: value.toISOString() }

Prior Art

• Remix Utils json, useLoaderData and useActionData support doing this by calling JSON.stringify two times so Remix hooks received a string and then using JSON.parse it converted it back to an object.
• @kiliman's remix-typedjson supports something like this but for native JS objects, if this is implemented the lib could export a replacer and reviver for Remix to use, or just return wrappers of the functions/hooks with the functions applied

[MichaelDeBoey]

Related proposal: #4433

[kiliman]

BTW: I tried using reviver in remix-typedjson. That API is really bad and very hard to work with.

I eventually punted and used the technique implemented in superjson. I simply JSON.parse() the original string, then apply any type conversions from the __meta__ prop.

[sergiodxa]

With Single Fetch using turbo-stream and supporting more advanced types like Date, Map, etc. this is not needed anymore.