UNPKG

4.88 kBTypeScriptView Raw
1
2import { RouterInit } from "../router/router.js";
3import { RSCPayload } from "./server.rsc.js";
4import * as React$1 from "react";
5
6//#region lib/rsc/browser.d.ts
7type BrowserCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>, {
8 temporaryReferences
9}: {
10 temporaryReferences: unknown;
11}) => Promise<unknown>;
12type EncodeReplyFunction = (args: unknown[], options: {
13 temporaryReferences: unknown;
14}) => Promise<BodyInit>;
15/**
16 * Create a React `callServer` implementation for React Router.
17 *
18 * @example
19 * import {
20 * createFromReadableStream,
21 * createTemporaryReferenceSet,
22 * encodeReply,
23 * setServerCallback,
24 * } from "@vitejs/plugin-rsc/browser";
25 * import { unstable_createCallServer as createCallServer } from "react-router";
26 *
27 * setServerCallback(
28 * createCallServer({
29 * createFromReadableStream,
30 * createTemporaryReferenceSet,
31 * encodeReply,
32 * })
33 * );
34 *
35 * @name unstable_createCallServer
36 * @public
37 * @category RSC
38 * @mode data
39 * @param opts Options
40 * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
41 * `createFromReadableStream`. Used to decode payloads from the server.
42 * @param opts.createTemporaryReferenceSet A function that creates a temporary
43 * reference set for the [RSC](https://react.dev/reference/rsc/server-components)
44 * payload.
45 * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
46 * Used when sending payloads to the server.
47 * @param opts.fetch Optional [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
48 * implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
49 * @returns A function that can be used to call server actions.
50 */
51declare function createCallServer({
52 createFromReadableStream,
53 createTemporaryReferenceSet,
54 encodeReply,
55 fetch: fetchImplementation
56}: {
57 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
58 createTemporaryReferenceSet: () => unknown;
59 encodeReply: EncodeReplyFunction;
60 fetch?: (request: Request) => Promise<Response>;
61}): (id: string, args: unknown[]) => Promise<unknown>;
62/**
63 * Props for the {@link unstable_RSCHydratedRouter} component.
64 *
65 * @name unstable_RSCHydratedRouterProps
66 * @category Types
67 */
68interface RSCHydratedRouterProps {
69 /**
70 * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
71 * used to decode payloads from the server.
72 */
73 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
74 /**
75 * Optional fetch implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
76 */
77 fetch?: (request: Request) => Promise<Response>;
78 /**
79 * The decoded {@link unstable_RSCPayload} to hydrate.
80 */
81 payload: RSCPayload;
82 /**
83 * A function that returns an {@link RouterContextProvider} instance
84 * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
85 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
86 * This function is called to generate a fresh `context` instance on each
87 * navigation or fetcher call.
88 */
89 getContext?: RouterInit["getContext"];
90}
91/**
92 * Hydrates a server rendered {@link unstable_RSCPayload} in the browser.
93 *
94 * @example
95 * import { startTransition, StrictMode } from "react";
96 * import { hydrateRoot } from "react-dom/client";
97 * import {
98 * unstable_getRSCStream as getRSCStream,
99 * unstable_RSCHydratedRouter as RSCHydratedRouter,
100 * } from "react-router";
101 * import type { unstable_RSCPayload as RSCPayload } from "react-router";
102 *
103 * createFromReadableStream(getRSCStream()).then((payload) =>
104 * startTransition(async () => {
105 * hydrateRoot(
106 * document,
107 * <StrictMode>
108 * <RSCHydratedRouter
109 * createFromReadableStream={createFromReadableStream}
110 * payload={payload}
111 * />
112 * </StrictMode>,
113 * { formState: await getFormState(payload) },
114 * );
115 * }),
116 * );
117 *
118 * @name unstable_RSCHydratedRouter
119 * @public
120 * @category RSC
121 * @mode data
122 * @param props Props
123 * @param {unstable_RSCHydratedRouterProps.createFromReadableStream} props.createFromReadableStream n/a
124 * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
125 * @param {unstable_RSCHydratedRouterProps.getContext} props.getContext n/a
126 * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
127 * @returns A hydrated {@link DataRouter} that can be used to navigate and
128 * render routes.
129 */
130declare function RSCHydratedRouter({
131 createFromReadableStream,
132 fetch: fetchImplementation,
133 payload,
134 getContext
135}: RSCHydratedRouterProps): React$1.JSX.Element;
136//#endregion
137export { BrowserCreateFromReadableStreamFunction, EncodeReplyFunction, RSCHydratedRouter, RSCHydratedRouterProps, createCallServer };
\No newline at end of file