UNPKG

12.9 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-DvHY1sgY.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, options: {
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.allowedActionOrigins Origin patterns that are allowed to execute actions.
142 * @param opts.basename The basename to use when matching the request.
143 * @param opts.createTemporaryReferenceSet A function that returns a temporary
144 * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
145 * stream.
146 * @param opts.decodeAction Your `react-server-dom-xyz/server`'s `decodeAction`
147 * function, responsible for loading a server action.
148 * @param opts.decodeFormState A function responsible for decoding form state for
149 * progressively enhanceable forms with React's [`useActionState`](https://react.dev/reference/react/useActionState)
150 * using your `react-server-dom-xyz/server`'s `decodeFormState`.
151 * @param opts.decodeReply Your `react-server-dom-xyz/server`'s `decodeReply`
152 * function, used to decode the server function's arguments and bind them to the
153 * implementation for invocation by the router.
154 * @param opts.generateResponse A function responsible for using your
155 * `renderToReadableStream` to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
156 * encoding the {@link unstable_RSCPayload}.
157 * @param opts.loadServerAction Your `react-server-dom-xyz/server`'s
158 * `loadServerAction` function, used to load a server action by ID.
159 * @param opts.onError An optional error handler that will be called with any
160 * errors that occur during the request processing.
161 * @param opts.request The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
162 * to match against.
163 * @param opts.requestContext An instance of {@link RouterContextProvider}
164 * that should be created per request, to be passed to [`action`](../../start/data/route-object#action)s,
165 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
166 * @param opts.routes Your {@link unstable_RSCRouteConfigEntry | route definitions}.
167 * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
168 * that contains the [RSC](https://react.dev/reference/rsc/server-components)
169 * data for hydration.
170 */
171declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
172 allowedActionOrigins?: string[];
173 createTemporaryReferenceSet: () => unknown;
174 basename?: string;
175 decodeReply?: DecodeReplyFunction;
176 decodeAction?: DecodeActionFunction;
177 decodeFormState?: DecodeFormStateFunction;
178 requestContext?: RouterContextProvider;
179 loadServerAction?: LoadServerActionFunction;
180 onError?: (error: unknown) => void;
181 request: Request;
182 routes: RSCRouteConfigEntry[];
183 generateResponse: (match: RSCMatch, { onError, temporaryReferences, }: {
184 onError(error: unknown): string | undefined;
185 temporaryReferences: unknown;
186 }) => Response;
187}): Promise<Response>;
188
189type BrowserCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>, { temporaryReferences, }: {
190 temporaryReferences: unknown;
191}) => Promise<unknown>;
192type EncodeReplyFunction = (args: unknown[], options: {
193 temporaryReferences: unknown;
194}) => Promise<BodyInit>;
195/**
196 * Create a React `callServer` implementation for React Router.
197 *
198 * @example
199 * import {
200 * createFromReadableStream,
201 * createTemporaryReferenceSet,
202 * encodeReply,
203 * setServerCallback,
204 * } from "@vitejs/plugin-rsc/browser";
205 * import { unstable_createCallServer as createCallServer } from "react-router";
206 *
207 * setServerCallback(
208 * createCallServer({
209 * createFromReadableStream,
210 * createTemporaryReferenceSet,
211 * encodeReply,
212 * })
213 * );
214 *
215 * @name unstable_createCallServer
216 * @public
217 * @category RSC
218 * @mode data
219 * @param opts Options
220 * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
221 * `createFromReadableStream`. Used to decode payloads from the server.
222 * @param opts.createTemporaryReferenceSet A function that creates a temporary
223 * reference set for the [RSC](https://react.dev/reference/rsc/server-components)
224 * payload.
225 * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
226 * Used when sending payloads to the server.
227 * @param opts.fetch Optional [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
228 * implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
229 * @returns A function that can be used to call server actions.
230 */
231declare function createCallServer({ createFromReadableStream, createTemporaryReferenceSet, encodeReply, fetch: fetchImplementation, }: {
232 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
233 createTemporaryReferenceSet: () => unknown;
234 encodeReply: EncodeReplyFunction;
235 fetch?: (request: Request) => Promise<Response>;
236}): (id: string, args: unknown[]) => Promise<unknown>;
237/**
238 * Props for the {@link unstable_RSCHydratedRouter} component.
239 *
240 * @name unstable_RSCHydratedRouterProps
241 * @category Types
242 */
243interface RSCHydratedRouterProps {
244 /**
245 * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
246 * used to decode payloads from the server.
247 */
248 createFromReadableStream: BrowserCreateFromReadableStreamFunction;
249 /**
250 * Optional fetch implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
251 */
252 fetch?: (request: Request) => Promise<Response>;
253 /**
254 * The decoded {@link unstable_RSCPayload} to hydrate.
255 */
256 payload: RSCPayload;
257 /**
258 * `"eager"` or `"lazy"` - Determines if links are eagerly discovered, or
259 * delayed until clicked.
260 */
261 routeDiscovery?: "eager" | "lazy";
262 /**
263 * A function that returns an {@link RouterContextProvider} instance
264 * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
265 * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
266 * This function is called to generate a fresh `context` instance on each
267 * navigation or fetcher call.
268 */
269 getContext?: RouterInit["getContext"];
270}
271/**
272 * Hydrates a server rendered {@link unstable_RSCPayload} in the browser.
273 *
274 * @example
275 * import { startTransition, StrictMode } from "react";
276 * import { hydrateRoot } from "react-dom/client";
277 * import {
278 * unstable_getRSCStream as getRSCStream,
279 * unstable_RSCHydratedRouter as RSCHydratedRouter,
280 * } from "react-router";
281 * import type { unstable_RSCPayload as RSCPayload } from "react-router";
282 *
283 * createFromReadableStream(getRSCStream()).then((payload) =>
284 * startTransition(async () => {
285 * hydrateRoot(
286 * document,
287 * <StrictMode>
288 * <RSCHydratedRouter
289 * createFromReadableStream={createFromReadableStream}
290 * payload={payload}
291 * />
292 * </StrictMode>,
293 * { formState: await getFormState(payload) },
294 * );
295 * }),
296 * );
297 *
298 * @name unstable_RSCHydratedRouter
299 * @public
300 * @category RSC
301 * @mode data
302 * @param props Props
303 * @param {unstable_RSCHydratedRouterProps.createFromReadableStream} props.createFromReadableStream n/a
304 * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
305 * @param {unstable_RSCHydratedRouterProps.getContext} props.getContext n/a
306 * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
307 * @param {unstable_RSCHydratedRouterProps.routeDiscovery} props.routeDiscovery n/a
308 * @returns A hydrated {@link DataRouter} that can be used to navigate and
309 * render routes.
310 */
311declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
312
313export { 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 };