UNPKG

12.7 kBTypeScriptView Raw
1import * as React from 'react';
2import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './instrumentation-BB0wRuqz.js';
3
4type RSCRouteConfigEntryBase = {
5 action?: ActionFunction;
6 clientAction?: ClientActionFunction;
7 clientLoader?: ClientLoaderFunction;
8 ErrorBoundary?: React.ComponentType<any>;
9 handle?: any;
10 headers?: HeadersFunction;
11 HydrateFallback?: React.ComponentType<any>;
12 Layout?: React.ComponentType<any>;
13 links?: LinksFunction;
14 loader?: LoaderFunction;
15 meta?: MetaFunction;
16 shouldRevalidate?: ShouldRevalidateFunction;
17};
18type RSCRouteConfigEntry = RSCRouteConfigEntryBase & {
19 id: string;
20 path?: string;
21 Component?: React.ComponentType<any>;
22 lazy?: () => Promise<RSCRouteConfigEntryBase & ({
23 default?: React.ComponentType<any>;
24 Component?: never;
25 } | {
26 default?: never;
27 Component?: React.ComponentType<any>;
28 })>;
29} & ({
30 index: true;
31} | {
32 children?: RSCRouteConfigEntry[];
33});
34type RSCRouteConfig = Array<RSCRouteConfigEntry>;
35type RSCRouteManifest = {
36 clientAction?: ClientActionFunction;
37 clientLoader?: ClientLoaderFunction;
38 element?: React.ReactElement | false;
39 errorElement?: React.ReactElement;
40 handle?: any;
41 hasAction: boolean;
42 hasComponent: boolean;
43 hasErrorBoundary: boolean;
44 hasLoader: boolean;
45 hydrateFallbackElement?: React.ReactElement;
46 id: string;
47 index?: boolean;
48 links?: LinksFunction;
49 meta?: MetaFunction;
50 parentId?: string;
51 path?: string;
52 shouldRevalidate?: ShouldRevalidateFunction;
53};
54type RSCRouteMatch = RSCRouteManifest & {
55 params: Params;
56 pathname: string;
57 pathnameBase: string;
58};
59type RSCRenderPayload = {
60 type: "render";
61 actionData: Record<string, any> | null;
62 basename: string | undefined;
63 errors: Record<string, any> | null;
64 loaderData: Record<string, any>;
65 location: Location;
66 matches: RSCRouteMatch[];
67 patches?: RSCRouteManifest[];
68 nonce?: string;
69 formState?: unknown;
70};
71type RSCManifestPayload = {
72 type: "manifest";
73 patches: RSCRouteManifest[];
74};
75type RSCActionPayload = {
76 type: "action";
77 actionResult: Promise<unknown>;
78 rerender?: Promise<RSCRenderPayload | RSCRedirectPayload>;
79};
80type RSCRedirectPayload = {
81 type: "redirect";
82 status: number;
83 location: string;
84 replace: boolean;
85 reload: boolean;
86 actionResult?: Promise<unknown>;
87};
88type RSCPayload = RSCRenderPayload | RSCManifestPayload | RSCActionPayload | RSCRedirectPayload;
89type RSCMatch = {
90 statusCode: number;
91 headers: Headers;
92 payload: RSCPayload;
93};
94type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
95type DecodeFormStateFunction = (result: unknown, formData: FormData) => unknown;
96type DecodeReplyFunction = (reply: FormData | string, { temporaryReferences }: {
97 temporaryReferences: unknown;
98}) => Promise<unknown[]>;
99type LoadServerActionFunction = (id: string) => Promise<Function>;
100/**
101 * Matches the given routes to a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
102 * and returns an [RSC](https://react.dev/reference/rsc/server-components)
103 * [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
104 * encoding an {@link unstable_RSCPayload} for consumption by an [RSC](https://react.dev/reference/rsc/server-components)
105 * enabled client router.
106 *
107 * @example
108 * import {
109 * createTemporaryReferenceSet,
110 * decodeAction,
111 * decodeReply,
112 * loadServerAction,
113 * renderToReadableStream,
114 * } from "@vitejs/plugin-rsc/rsc";
115 * import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
116 *
117 * matchRSCServerRequest({
118 * createTemporaryReferenceSet,
119 * decodeAction,
120 * decodeFormState,
121 * decodeReply,
122 * loadServerAction,
123 * request,
124 * routes: routes(),
125 * generateResponse(match) {
126 * return new Response(
127 * renderToReadableStream(match.payload),
128 * {
129 * status: match.statusCode,
130 * headers: match.headers,
131 * }
132 * );
133 * },
134 * });
135 *
136 * @name unstable_matchRSCServerRequest
137 * @public
138 * @category RSC
139 * @mode data
140 * @param opts Options
141 * @param opts.basename The basename to use when matching the request.
142 * @param opts.createTemporaryReferenceSet A function that returns a temporary
143 * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
144 * stream.
145 * @param opts.decodeAction Your `react-server-dom-xyz/server`'s `decodeAction`
146 * function, responsible for loading a server action.
147 * @param opts.decodeFormState A function responsible for decoding form state for
148 * progressively enhanceable forms with React's [`useActionState`](https://react.dev/reference/react/useActionState)
149 * using your `react-server-dom-xyz/server`'s `decodeFormState`.
150 * @param opts.decodeReply Your `react-server-dom-xyz/server`'s `decodeReply`
151 * function, used to decode the server function's arguments and bind them to the
152 * implementation for invocation by the router.
153 * @param opts.generateResponse A function responsible for using your
154 * `renderToReadableStream` to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
155 * encoding the {@link unstable_RSCPayload}.
156 * @param opts.loadServerAction Your `react-server-dom-xyz/server`'s
157 * `loadServerAction` function, used to load a server action by ID.
158 * @param opts.onError An optional error handler that will be called with any
159 * errors that occur during the request processing.
160 * @param opts.request The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
161 * to match against.
162 * @param opts.requestContext An instance of {@link RouterContextProvider}
163 * that should be created per request, to be passed to [`action`](../../start/data/route-object#action)s,
164 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
165 * @param opts.routes Your {@link unstable_RSCRouteConfigEntry | route definitions}.
166 * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
167 * that contains the [RSC](https://react.dev/reference/rsc/server-components)
168 * data for hydration.
169 */
170declare function matchRSCServerRequest({ createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
171 createTemporaryReferenceSet: () => unknown;
172 basename?: string;
173 decodeReply?: DecodeReplyFunction;
174 decodeAction?: DecodeActionFunction;
175 decodeFormState?: DecodeFormStateFunction;
176 requestContext?: RouterContextProvider;
177 loadServerAction?: LoadServerActionFunction;
178 onError?: (error: unknown) => void;
179 request: Request;
180 routes: RSCRouteConfigEntry[];
181 generateResponse: (match: RSCMatch, { temporaryReferences, }: {
182 temporaryReferences: unknown;
183 }) => Response;
184}): Promise<Response>;
185
186type BrowserCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>, { temporaryReferences, }: {
187 temporaryReferences: unknown;
188}) => Promise<unknown>;
189type EncodeReplyFunction = (args: unknown[], options: {
190 temporaryReferences: unknown;
191}) => Promise<BodyInit>;
192/**
193 * Create a React `callServer` implementation for React Router.
194 *
195 * @example
196 * import {
197 * createFromReadableStream,
198 * createTemporaryReferenceSet,
199 * encodeReply,
200 * setServerCallback,
201 * } from "@vitejs/plugin-rsc/browser";
202 * import { unstable_createCallServer as createCallServer } from "react-router";
203 *
204 * setServerCallback(
205 * createCallServer({
206 * createFromReadableStream,
207 * createTemporaryReferenceSet,
208 * encodeReply,
209 * })
210 * );
211 *
212 * @name unstable_createCallServer
213 * @public
214 * @category RSC
215 * @mode data
216 * @param opts Options
217 * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
218 * `createFromReadableStream`. Used to decode payloads from the server.
219 * @param opts.createTemporaryReferenceSet A function that creates a temporary
220 * reference set for the [RSC](https://react.dev/reference/rsc/server-components)
221 * payload.
222 * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
223 * Used when sending payloads to the server.
224 * @param opts.fetch Optional [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
225 * implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
226 * @returns A function that can be used to call server actions.
227 */
228declare function createCallServer({ createFromReadableStream, createTemporaryReferenceSet, encodeReply, fetch: fetchImplementation, }: {
229 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
230 createTemporaryReferenceSet: () => unknown;
231 encodeReply: EncodeReplyFunction;
232 fetch?: (request: Request) => Promise<Response>;
233}): (id: string, args: unknown[]) => Promise<unknown>;
234/**
235 * Props for the {@link unstable_RSCHydratedRouter} component.
236 *
237 * @name unstable_RSCHydratedRouterProps
238 * @category Types
239 */
240interface RSCHydratedRouterProps {
241 /**
242 * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
243 * used to decode payloads from the server.
244 */
245 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
246 /**
247 * Optional fetch implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
248 */
249 fetch?: (request: Request) => Promise<Response>;
250 /**
251 * The decoded {@link unstable_RSCPayload} to hydrate.
252 */
253 payload: RSCPayload;
254 /**
255 * `"eager"` or `"lazy"` - Determines if links are eagerly discovered, or
256 * delayed until clicked.
257 */
258 routeDiscovery?: "eager" | "lazy";
259 /**
260 * A function that returns an {@link RouterContextProvider} instance
261 * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
262 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
263 * This function is called to generate a fresh `context` instance on each
264 * navigation or fetcher call.
265 */
266 getContext?: RouterInit["getContext"];
267}
268/**
269 * Hydrates a server rendered {@link unstable_RSCPayload} in the browser.
270 *
271 * @example
272 * import { startTransition, StrictMode } from "react";
273 * import { hydrateRoot } from "react-dom/client";
274 * import {
275 * unstable_getRSCStream as getRSCStream,
276 * unstable_RSCHydratedRouter as RSCHydratedRouter,
277 * } from "react-router";
278 * import type { unstable_RSCPayload as RSCPayload } from "react-router";
279 *
280 * createFromReadableStream(getRSCStream()).then((payload) =>
281 * startTransition(async () => {
282 * hydrateRoot(
283 * document,
284 * <StrictMode>
285 * <RSCHydratedRouter
286 * createFromReadableStream={createFromReadableStream}
287 * payload={payload}
288 * />
289 * </StrictMode>,
290 * { formState: await getFormState(payload) },
291 * );
292 * }),
293 * );
294 *
295 * @name unstable_RSCHydratedRouter
296 * @public
297 * @category RSC
298 * @mode data
299 * @param props Props
300 * @param {unstable_RSCHydratedRouterProps.createFromReadableStream} props.createFromReadableStream n/a
301 * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
302 * @param {unstable_RSCHydratedRouterProps.getContext} props.getContext n/a
303 * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
304 * @param {unstable_RSCHydratedRouterProps.routeDiscovery} props.routeDiscovery n/a
305 * @returns A hydrated {@link DataRouter} that can be used to navigate and
306 * render routes.
307 */
308declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
309
310export { type BrowserCreateFromReadableStreamFunction as B, type DecodeActionFunction as D, type EncodeReplyFunction as E, type LoadServerActionFunction as L, RSCHydratedRouter as R, type DecodeFormStateFunction as a, type DecodeReplyFunction as b, createCallServer as c, type RSCManifestPayload as d, type RSCPayload as e, type RSCRenderPayload as f, type RSCHydratedRouterProps as g, type RSCMatch as h, type RSCRouteManifest as i, type RSCRouteMatch as j, type RSCRouteConfigEntry as k, type RSCRouteConfig as l, matchRSCServerRequest as m };