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