1/** @jsxImportSource react */
2import {
3 createFromReadableStream,
4 createTemporaryReferenceSet,
5 encodeReply,
6 setServerCallback,
7} from "@vitejs/plugin-rsc/browser";
8import { startTransition, StrictMode } from "react";
9import { hydrateRoot } from "react-dom/client";
10import type {
11 DataRouter,
12 unstable_RSCPayload as RSCServerPayload,
13} from "react-router";
14import {
15 unstable_createCallServer as createCallServer,
16 unstable_getRSCStream as getRSCStream,
17 unstable_RSCHydratedRouter as RSCHydratedRouter,
18} from "react-router/dom";
19
20// Create and set the callServer function to support post-hydration server actions.
21setServerCallback(
22 createCallServer({
23 createFromReadableStream,
24 createTemporaryReferenceSet,
25 encodeReply,
26 }),
27);
28
29// Get and decode the initial server payload
30createFromReadableStream<RSCServerPayload>(getRSCStream()).then((payload) => {
31 startTransition(async () => {
32 const formState =
33 payload.type === "render" ? await payload.formState : undefined;
34
35 hydrateRoot(
36 document,
37 <StrictMode>
38 <RSCHydratedRouter
39 createFromReadableStream={createFromReadableStream}
40 payload={payload}
41 />
42 </StrictMode>,
43 {
44 // @ts-expect-error - no types for this yet
45 formState,
46 },
47 );
48 });
49});
50
51declare let __reactRouterDataRouter: DataRouter;
52
53if (import.meta.hot) {
54 import.meta.hot.on("rsc:update", () => {
55 __reactRouterDataRouter.revalidate();
56 });
57}