@@ -61,6 +61,40 @@ type WindowWithRouterGlobals = Window &
6161 __routerActionID : number ;
6262 } ;
6363
64+ /**
65+ * Create a React `callServer` implementation for React Router.
66+ *
67+ * @example
68+ * import {
69+ * createFromReadableStream,
70+ * createTemporaryReferenceSet,
71+ * encodeReply,
72+ * setServerCallback,
73+ * } from "@vitejs/plugin-rsc/browser";
74+ * import { unstable_createCallServer as createCallServer } from "react-router";
75+ *
76+ * setServerCallback(
77+ * createCallServer({
78+ * createFromReadableStream,
79+ * createTemporaryReferenceSet,
80+ * encodeReply,
81+ * })
82+ * );
83+ *
84+ * @name unstable_createCallServer
85+ * @public
86+ * @category RSC
87+ * @mode data
88+ * @param opts Options
89+ * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
90+ * `createFromReadableStream`. Used to decode payloads from the server.
91+ * @param opts.createTemporaryReferenceSet A function that creates a temporary
92+ * reference set for the RSC payload.
93+ * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
94+ * Used when sending payloads to the server.
95+ * @param opts.fetch Optional fetch implementation. Defaults to global `fetch`.
96+ * @returns A function that can be used to call server actions.
97+ */
6498export function createCallServer ( {
6599 createFromReadableStream,
66100 createTemporaryReferenceSet,
@@ -460,19 +494,89 @@ function getFetchAndDecodeViaRSC(
460494 } ;
461495}
462496
497+ /**
498+ * Props for the `unstable_RSCHydratedRouter` component.
499+ * @name unstable_RSCHydratedRouterProps
500+ */
501+ export interface RSCHydratedRouterProps {
502+ /**
503+ * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
504+ * used to decode payloads from the server.
505+ */
506+ createFromReadableStream : BrowserCreateFromReadableStreamFunction ;
507+ /**
508+ * Optional fetch implementation. Defaults to global `fetch`.
509+ */
510+ fetch ?: ( request : Request ) => Promise < Response > ;
511+ /**
512+ * The decoded `RSCPayload` to hydrate.
513+ */
514+ payload : RSCPayload ;
515+ /**
516+ * `eager` or `lazy` - Determines if links are eagerly discovered, or delayed
517+ * until clicked.
518+ */
519+ routeDiscovery ?: "eager" | "lazy" ;
520+ /**
521+ * A function that returns an `unstable_InitialContext` object
522+ * (`Map<RouterContext, unknown>`), for use in client loaders, actions and
523+ * middleware.
524+ */
525+ unstable_getContext ?: RouterInit [ "unstable_getContext" ] ;
526+ }
527+
528+ /**
529+ * Hydrates a server rendered `RSCPayload` in the browser.
530+ *
531+ * @example
532+ * import { startTransition, StrictMode } from "react";
533+ * import { hydrateRoot } from "react-dom/client";
534+ * import {
535+ * unstable_getRSCStream as getRSCStream,
536+ * unstable_RSCHydratedRouter as RSCHydratedRouter,
537+ * } from "react-router";
538+ * import type { unstable_RSCPayload as RSCPayload } from "react-router";
539+ *
540+ * createFromReadableStream(getRSCStream()).then(
541+ * (payload: RSCServerPayload) => {
542+ * startTransition(async () => {
543+ * hydrateRoot(
544+ * document,
545+ * <StrictMode>
546+ * <RSCHydratedRouter
547+ * createFromReadableStream={
548+ * createFromReadableStream
549+ * }
550+ * payload={payload}
551+ * />
552+ * </StrictMode>,
553+ * {
554+ * formState: await getFormState(payload),
555+ * }
556+ * );
557+ * });
558+ * }
559+ * );
560+ *
561+ * @name unstable_RSCHydratedRouter
562+ * @public
563+ * @category RSC
564+ * @mode data
565+ * @param props Props
566+ * @param {unstable_RSCHydratedRouterProps.createFromReadableStream } props.createFromReadableStream n/a
567+ * @param {unstable_RSCHydratedRouterProps.fetch } props.fetch n/a
568+ * @param {unstable_RSCHydratedRouterProps.payload } props.payload n/a
569+ * @param {unstable_RSCHydratedRouterProps.routeDiscovery } props.routeDiscovery n/a
570+ * @param {unstable_RSCHydratedRouterProps.unstable_getContext } props.unstable_getContext n/a
571+ * @returns A hydrated router that can be used to navigate and render routes.
572+ */
463573export function RSCHydratedRouter ( {
464574 createFromReadableStream,
465575 fetch : fetchImplementation = fetch ,
466576 payload,
467577 routeDiscovery = "eager" ,
468578 unstable_getContext,
469- } : {
470- createFromReadableStream : BrowserCreateFromReadableStreamFunction ;
471- fetch ?: ( request : Request ) => Promise < Response > ;
472- payload : RSCPayload ;
473- routeDiscovery ?: "eager" | "lazy" ;
474- unstable_getContext ?: RouterInit [ "unstable_getContext" ] ;
475- } ) {
579+ } : RSCHydratedRouterProps ) {
476580 if ( payload . type !== "render" ) throw new Error ( "Invalid payload type" ) ;
477581
478582 let router = React . useMemo (
0 commit comments