INDIE UNPKG

6.31 kBTypeScriptView Raw
1
2import { RouterFetch } from "../dom/ssr/single-fetch.js";
3import { ClientInstrumentation } from "../router/instrumentation.js";
4import * as React$1 from "react";
5import { ClientOnErrorFunction, RouterInit } from "react-router";
6
7//#region lib/dom-export/hydrated-router.d.ts
8/**
9 * Props for the {@link dom.HydratedRouter} component.
10 *
11 * @category Types
12 */
13interface HydratedRouterProps {
14 /**
15 * Context factory function to be passed through to {@link createBrowserRouter}.
16 * This function will be called to create a fresh `context` instance on each
17 * navigation/fetch and made available to
18 * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
19 * functions.
20 */
21 getContext?: RouterInit["getContext"];
22 /**
23 * Array of instrumentation objects allowing you to instrument the router and
24 * individual routes prior to router initialization (and on any subsequently
25 * added routes via `route.lazy` or `patchRoutesOnNavigation`). This is
26 * mostly useful for observability such as wrapping navigations, fetches,
27 * as well as route loaders/actions/middlewares with logging and/or performance
28 * tracing. See the [docs](../../how-to/instrumentation) for more information.
29 *
30 * ```tsx
31 * const logging = {
32 * router({ instrument }) {
33 * instrument({
34 * navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
35 * fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
36 * });
37 * },
38 * route({ instrument, id }) {
39 * instrument({
40 * middleware: (impl, { request }) => logExecution(
41 * `middleware ${request.url} (route ${id})`,
42 * impl
43 * ),
44 * loader: (impl, { request }) => logExecution(
45 * `loader ${request.url} (route ${id})`,
46 * impl
47 * ),
48 * action: (impl, { request }) => logExecution(
49 * `action ${request.url} (route ${id})`,
50 * impl
51 * ),
52 * })
53 * }
54 * };
55 *
56 * async function logExecution(label: string, impl: () => Promise<void>) {
57 * let start = performance.now();
58 * console.log(`start ${label}`);
59 * await impl();
60 * let duration = Math.round(performance.now() - start);
61 * console.log(`end ${label} (${duration}ms)`);
62 * }
63 *
64 * startTransition(() => {
65 * hydrateRoot(
66 * document,
67 * <HydratedRouter instrumentations={[logging]} />
68 * );
69 * });
70 * ```
71 */
72 instrumentations?: ClientInstrumentation[];
73 /**
74 * An error handler function that will be called for any middleware, loader, action,
75 * or render errors that are encountered in your application. This is useful for
76 * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
77 * subject to re-rendering and will only run one time per error.
78 *
79 * The `errorInfo` parameter is passed along from
80 * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
81 * and is only present for render errors.
82 *
83 * ```tsx
84 * <HydratedRouter onError={(error, info) => {
85 * let { location, params, pattern, errorInfo } = info;
86 * console.error(error, location, errorInfo);
87 * reportToErrorService(error, location, errorInfo);
88 * }} />
89 * ```
90 */
91 onError?: 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](../../explanation/react-transitions).
109 */
110 useTransitions?: boolean;
111 /**
112 * <docs-warning>This prop is experimental and subject to breaking
113 * changes.</docs-warning>
114 *
115 * Provide a custom implementation for `fetch`, which will be used to perform
116 * JavaScript-issued manifest and data requests. The context identifies the
117 * operation that initiated each request. Defaults to `window.fetch`.
118 *
119 * This prop is read when the singleton router is created. Changing it after
120 * router initialization has no effect. To use changing values such as auth
121 * tokens, read current application state inside the function rather than
122 * capturing values from a component render.
123 *
124 * See the [Custom Fetch guide](../../how-to/custom-fetch) for examples of
125 * authentication headers, cross-origin credentials, traversal caching, and
126 * retries.
127 *
128 * <docs-info>
129 * Browser-managed data prefetches from {@link Link}, {@link NavLink}, or
130 * {@link PrefetchPageLinks} use native `<link rel="prefetch">` elements
131 * and do not call this function. If your data requests require custom headers
132 * or other request transformations, use `prefetch="none"` on links and avoid
133 * rendering {@link PrefetchPageLinks}.
134 * </docs-info>
135 */
136 unstable_fetch?: RouterFetch;
137}
138/**
139 * Framework-mode router component to be used to hydrate a router from a
140 * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
141 *
142 * @public
143 * @category Framework Routers
144 * @mode framework
145 * @param props Props
146 * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
147 * @param {dom.HydratedRouterProps.onError} props.onError n/a
148 * @param {dom.HydratedRouterProps.unstable_fetch} props.unstable_fetch n/a
149 * @returns A React element that represents the hydrated application.
150 */
151declare function HydratedRouter(props: HydratedRouterProps): React$1.JSX.Element;
152//#endregion
153export { HydratedRouter, HydratedRouterProps };
\No newline at end of file