UNPKG

7 kBTypeScriptView Raw
1import * as React from 'react';
2import { RouterProviderProps as RouterProviderProps$1, RouterInit, unstable_ClientOnErrorFunction } from 'react-router';
3import { u as unstable_ClientInstrumentation } from './instrumentation-BB0wRuqz.js';
4export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-BpxEZgZC.js';
5
6type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
7declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
8
9/**
10 * Props for the {@link dom.HydratedRouter} component.
11 *
12 * @category Types
13 */
14interface HydratedRouterProps {
15 /**
16 * Context factory function to be passed through to {@link createBrowserRouter}.
17 * This function will be called to create a fresh `context` instance on each
18 * navigation/fetch and made available to
19 * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
20 * functions.
21 */
22 getContext?: RouterInit["getContext"];
23 /**
24 * Array of instrumentation objects allowing you to instrument the router and
25 * individual routes prior to router initialization (and on any subsequently
26 * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
27 * mostly useful for observability such as wrapping navigations, fetches,
28 * as well as route loaders/actions/middlewares with logging and/or performance
29 * tracing. See the [docs](../../how-to/instrumentation) for more information.
30 *
31 * ```tsx
32 * const logging = {
33 * router({ instrument }) {
34 * instrument({
35 * navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
36 * fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
37 * });
38 * },
39 * route({ instrument, id }) {
40 * instrument({
41 * middleware: (impl, { request }) => logExecution(
42 * `middleware ${request.url} (route ${id})`,
43 * impl
44 * ),
45 * loader: (impl, { request }) => logExecution(
46 * `loader ${request.url} (route ${id})`,
47 * impl
48 * ),
49 * action: (impl, { request }) => logExecution(
50 * `action ${request.url} (route ${id})`,
51 * impl
52 * ),
53 * })
54 * }
55 * };
56 *
57 * async function logExecution(label: string, impl: () => Promise<void>) {
58 * let start = performance.now();
59 * console.log(`start ${label}`);
60 * await impl();
61 * let duration = Math.round(performance.now() - start);
62 * console.log(`end ${label} (${duration}ms)`);
63 * }
64 *
65 * startTransition(() => {
66 * hydrateRoot(
67 * document,
68 * <HydratedRouter unstable_instrumentations={[logging]} />
69 * );
70 * });
71 * ```
72 */
73 unstable_instrumentations?: unstable_ClientInstrumentation[];
74 /**
75 * An error handler function that will be called for any loader/action/render
76 * errors that are encountered in your application. This is useful for
77 * logging or reporting errors instead of the `ErrorBoundary` because it's not
78 * subject to re-rendering and will only run one time per error.
79 *
80 * The `errorInfo` parameter is passed along from
81 * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
82 * and is only present for render errors.
83 *
84 * ```tsx
85 * <HydratedRouter unstable_onError={(error, errorInfo) => {
86 * console.error(error, errorInfo);
87 * reportToErrorService(error, errorInfo);
88 * }} />
89 * ```
90 */
91 unstable_onError?: unstable_ClientOnErrorFunction;
92 /**
93 * Control whether router state updates are internally wrapped in
94 * [`React.startTransition`](https://react.dev/reference/react/startTransition).
95 *
96 * - When left `undefined`, all state updates are wrapped in
97 * `React.startTransition`
98 * - This can lead to buggy behaviors if you are wrapping your own
99 * navigations/fetchers in `startTransition`.
100 * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
101 * in `React.startTransition` and router state changes will be wrapped in
102 * `React.startTransition` and also sent through
103 * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
104 * surface mid-navigation router state changes to the UI.
105 * - When set to `false`, the router will not leverage `React.startTransition` or
106 * `React.useOptimistic` on any navigations or state changes.
107 *
108 * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
109 */
110 unstable_useTransitions?: boolean;
111}
112/**
113 * Framework-mode router component to be used to hydrate a router from a
114 * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
115 *
116 * @public
117 * @category Framework Routers
118 * @mode framework
119 * @param props Props
120 * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
121 * @param {dom.HydratedRouterProps.unstable_onError} props.unstable_onError n/a
122 * @returns A React element that represents the hydrated application.
123 */
124declare function HydratedRouter(props: HydratedRouterProps): React.JSX.Element;
125
126declare global {
127 interface Window {
128 __FLIGHT_DATA: any[];
129 }
130}
131/**
132 * Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
133 * stream for hydration. Usually passed directly to your
134 * `react-server-dom-xyz/client`'s `createFromReadableStream`.
135 *
136 * @example
137 * import { startTransition, StrictMode } from "react";
138 * import { hydrateRoot } from "react-dom/client";
139 * import {
140 * unstable_getRSCStream as getRSCStream,
141 * unstable_RSCHydratedRouter as RSCHydratedRouter,
142 * } from "react-router";
143 * import type { unstable_RSCPayload as RSCPayload } from "react-router";
144 *
145 * createFromReadableStream(getRSCStream()).then(
146 * (payload: RSCServerPayload) => {
147 * startTransition(async () => {
148 * hydrateRoot(
149 * document,
150 * <StrictMode>
151 * <RSCHydratedRouter {...props} />
152 * </StrictMode>,
153 * {
154 * // Options
155 * }
156 * );
157 * });
158 * }
159 * );
160 *
161 * @name unstable_getRSCStream
162 * @public
163 * @category RSC
164 * @mode data
165 * @returns A [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
166 * that contains the [RSC](https://react.dev/reference/rsc/server-components)
167 * data for hydration.
168 */
169declare function getRSCStream(): ReadableStream;
170
171export { HydratedRouter, type HydratedRouterProps, RouterProvider, type RouterProviderProps, getRSCStream as unstable_getRSCStream };