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