| 1 | import * as React from 'react';
|
| 2 | import { RouterProviderProps as RouterProviderProps$1, RouterInit, ClientOnErrorFunction } from 'react-router';
|
| 3 | import { u as unstable_ClientInstrumentation } from './instrumentation--6Pioq_G.js';
|
| 4 | export { 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-sPQ7eaK4.js';
|
| 5 |
|
| 6 | type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
|
| 7 | declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
|
| 8 |
|
| 9 | /**
|
| 10 | * Props for the {@link dom.HydratedRouter} component.
|
| 11 | *
|
| 12 | * @category Types
|
| 13 | */
|
| 14 | interface 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 middleware, loader, action,
|
| 76 | * or render errors that are encountered in your application. This is useful for
|
| 77 | * logging or reporting errors instead of in the {@link 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 onError=(error, info) => {
|
| 86 | * let { location, params, unstable_pattern, errorInfo } = info;
|
| 87 | * console.error(error, location, errorInfo);
|
| 88 | * reportToErrorService(error, location, errorInfo);
|
| 89 | * }} />
|
| 90 | * ```
|
| 91 | */
|
| 92 | onError?: ClientOnErrorFunction;
|
| 93 | /**
|
| 94 | * Control whether router state updates are internally wrapped in
|
| 95 | * [`React.startTransition`](https://react.dev/reference/react/startTransition).
|
| 96 | *
|
| 97 | * - When left `undefined`, all state updates are wrapped in
|
| 98 | * `React.startTransition`
|
| 99 | * - This can lead to buggy behaviors if you are wrapping your own
|
| 100 | * navigations/fetchers in `startTransition`.
|
| 101 | * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
|
| 102 | * in `React.startTransition` and router state changes will be wrapped in
|
| 103 | * `React.startTransition` and also sent through
|
| 104 | * [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
|
| 105 | * surface mid-navigation router state changes to the UI.
|
| 106 | * - When set to `false`, the router will not leverage `React.startTransition` or
|
| 107 | * `React.useOptimistic` on any navigations or state changes.
|
| 108 | *
|
| 109 | * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
|
| 110 | */
|
| 111 | unstable_useTransitions?: boolean;
|
| 112 | }
|
| 113 | /**
|
| 114 | * Framework-mode router component to be used to hydrate a router from a
|
| 115 | * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
|
| 116 | *
|
| 117 | * @public
|
| 118 | * @category Framework Routers
|
| 119 | * @mode framework
|
| 120 | * @param props Props
|
| 121 | * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
|
| 122 | * @param {dom.HydratedRouterProps.onError} props.onError n/a
|
| 123 | * @returns A React element that represents the hydrated application.
|
| 124 | */
|
| 125 | declare function HydratedRouter(props: HydratedRouterProps): React.JSX.Element;
|
| 126 |
|
| 127 | declare global {
|
| 128 | interface Window {
|
| 129 | __FLIGHT_DATA: any[];
|
| 130 | }
|
| 131 | }
|
| 132 | /**
|
| 133 | * Get the prerendered [RSC](https://react.dev/reference/rsc/server-components)
|
| 134 | * stream for hydration. Usually passed directly to your
|
| 135 | * `react-server-dom-xyz/client`'s `createFromReadableStream`.
|
| 136 | *
|
| 137 | * @example
|
| 138 | * import { startTransition, StrictMode } from "react";
|
| 139 | * import { hydrateRoot } from "react-dom/client";
|
| 140 | * import {
|
| 141 | * unstable_getRSCStream as getRSCStream,
|
| 142 | * unstable_RSCHydratedRouter as RSCHydratedRouter,
|
| 143 | * } from "react-router";
|
| 144 | * import type { unstable_RSCPayload as RSCPayload } from "react-router";
|
| 145 | *
|
| 146 | * createFromReadableStream(getRSCStream()).then(
|
| 147 | * (payload: RSCServerPayload) => {
|
| 148 | * startTransition(async () => {
|
| 149 | * hydrateRoot(
|
| 150 | * document,
|
| 151 | * <StrictMode>
|
| 152 | * <RSCHydratedRouter {...props} />
|
| 153 | * </StrictMode>,
|
| 154 | * {
|
| 155 | * // Options
|
| 156 | * }
|
| 157 | * );
|
| 158 | * });
|
| 159 | * }
|
| 160 | * );
|
| 161 | *
|
| 162 | * @name unstable_getRSCStream
|
| 163 | * @public
|
| 164 | * @category RSC
|
| 165 | * @mode data
|
| 166 | * @returns A [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
|
| 167 | * that contains the [RSC](https://react.dev/reference/rsc/server-components)
|
| 168 | * data for hydration.
|
| 169 | */
|
| 170 | declare function getRSCStream(): ReadableStream;
|
| 171 |
|
| 172 | export { HydratedRouter, type HydratedRouterProps, RouterProvider, type RouterProviderProps, getRSCStream as unstable_getRSCStream };
|