dom-export.d.ts 6.8 KB

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