react-router 8.3.1 → 8.5.0

package/dist/development/lib/components.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.5.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -11,10 +11,11 @@
 import { createMemoryHistory, createPath, invariant, parsePath, warning } from "./router/history.js";
 import { defaultMapRouteProperties, getResolveToMatches, getRoutePattern, resolveTo, stripBasename } from "./router/utils.js";
 import { getNavigatorCurrentUrl, validateNavigationTarget } from "./router/navigation.js";
-import { createRouter } from "./router/router.js";
-import { AwaitContext, DataRouterContext, DataRouterStateContext, FetchersContext, LocationContext, NavigationContext, RouteContext, ViewTransitionContext, useIsRSCRouterContext } from "./context.js";
+import { clientErrors, createRouter } from "./router/router.js";
+import { AwaitContext, DataRouterContext, DataRouterDataContext, DataRouterNavigationContext, DataRouterStateContext, FetchersContext, LocationContext, NavigationContext, RouteContext, ViewTransitionContext, useIsRSCRouterContext } from "./context.js";
 import { _renderMatches, useActionData, useAsyncValue, useInRouterContext, useLoaderData, useLocation, useMatches, useNavigate, useOutlet, useParams, useRouteError, useRoutes, useRoutesImpl } from "./hooks.js";
 import { warnOnce } from "./server-runtime/warnings.js";
+import { FrameworkContext } from "./dom/ssr/components.js";
 import * as React$1 from "react";
 import { useOptimistic } from "react";
 //#region lib/components.tsx
@@ -122,13 +123,18 @@ function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, use
 	useTransitions = useIsRSCRouterContext() || useTransitions;
 	let [_state, setStateImpl] = React$1.useState(router.state);
 	let [state, setOptimisticState] = useOptimistic(_state);
+	let lastState = React$1.useRef(state);
 	let [pendingState, setPendingState] = React$1.useState();
 	let [vtContext, setVtContext] = React$1.useState({ isTransitioning: false });
 	let [renderDfd, setRenderDfd] = React$1.useState();
 	let [transition, setTransition] = React$1.useState();
 	let [interruption, setInterruption] = React$1.useState();
 	let fetcherData = React$1.useRef(/* @__PURE__ */ new Map());
+	let handledErrors = React$1.useRef(/* @__PURE__ */ new WeakSet());
 	let setState = React$1.useCallback((newState, { deletedFetchers, newErrors, flushSync, viewTransitionOpts }) => {
+		lastState.current = newState;
+		if (newErrors && newState.errors && clientErrors.has(newState.errors)) if (handledErrors.current.has(newState.errors)) newErrors = null;
+		else handledErrors.current.add(newState.errors);
 		if (newErrors && onError) Object.values(newErrors).forEach((error) => onError(error, {
 			location: newState.location,
 			params: newState.matches[0]?.params ?? {},
@@ -204,6 +210,15 @@ function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, use
 		onError
 	]);
 	React$1.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+	React$1.useLayoutEffect(() => {
+		let errors = router.state.errors;
+		let newErrors = errors ? clientErrors.get(errors) : null;
+		if (lastState.current !== router.state || errors && newErrors && !handledErrors.current.has(errors)) setState(router.state, {
+			deletedFetchers: [],
+			flushSync: false,
+			newErrors: newErrors ?? null
+		});
+	}, [router, setState]);
 	React$1.useEffect(() => {
 		if (vtContext.isTransitioning && !vtContext.flushSync) setRenderDfd(new Deferred());
 	}, [vtContext]);
@@ -284,7 +299,43 @@ function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, use
 		basename,
 		onError
 	]);
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React$1.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React$1.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React$1.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React$1.createElement(Router, {
+	let dataRouterState = React$1.useMemo(() => ({
+		historyAction: state.historyAction,
+		location: state.location,
+		matches: state.matches,
+		initialized: state.initialized,
+		renderFallback: state.renderFallback,
+		restoreScrollPosition: state.restoreScrollPosition,
+		preventScrollReset: state.preventScrollReset,
+		blockers: state.blockers
+	}), [
+		state.historyAction,
+		state.location,
+		state.matches,
+		state.initialized,
+		state.renderFallback,
+		state.restoreScrollPosition,
+		state.preventScrollReset,
+		state.blockers
+	]);
+	let dataRouterNavigation = React$1.useMemo(() => ({
+		navigation: state.navigation,
+		revalidation: state.revalidation
+	}), [state.navigation, state.revalidation]);
+	let dataRouterData = React$1.useMemo(() => ({
+		loaderData: state.loaderData,
+		actionData: state.actionData,
+		errors: state.errors
+	}), [
+		state.loaderData,
+		state.actionData,
+		state.errors
+	]);
+	let fetchersContext = React$1.useMemo(() => ({
+		fetchers: state.fetchers,
+		fetcherData: fetcherData.current
+	}), [state.fetchers]);
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React$1.createElement(DataRouterStateContext.Provider, { value: dataRouterState }, /* @__PURE__ */ React$1.createElement(DataRouterNavigationContext.Provider, { value: dataRouterNavigation }, /* @__PURE__ */ React$1.createElement(DataRouterDataContext.Provider, { value: dataRouterData }, /* @__PURE__ */ React$1.createElement(FetchersContext.Provider, { value: fetchersContext }, /* @__PURE__ */ React$1.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React$1.createElement(Router, {
 		basename,
 		location: state.location,
 		navigationType: state.historyAction,
@@ -293,11 +344,10 @@ function RouterProvider({ router, flushSync: reactDomFlushSyncImpl, onError, use
 	}, /* @__PURE__ */ React$1.createElement(MemoizedDataRoutes, {
 		routes: router.routes,
 		manifest: router.manifest,
-		future: router.future,
 		state,
 		isStatic: false,
 		onError
-	})))))), null);
+	})))))))), null);
 }
 function getOptimisticRouterState(currentState, newState) {
 	return {
@@ -309,13 +359,19 @@ function getOptimisticRouterState(currentState, newState) {
 	};
 }
 const MemoizedDataRoutes = React$1.memo(DataRoutes);
-function DataRoutes({ routes, manifest, future, state, isStatic, onError }) {
+function DataRoutes({ routes, manifest, state, isStatic, onError }) {
+	let dataRouterContext = React$1.useContext(DataRouterContext);
+	invariant(dataRouterContext, "You must render this element inside a <DataRouterContext.Provider> element");
+	let discoveryRuntime = React$1.useContext(FrameworkContext)?.routeDiscoveryRuntime;
+	React$1.useEffect(() => {
+		if (state.initialized) discoveryRuntime?.markReady();
+	}, [state.initialized, discoveryRuntime]);
 	return useRoutesImpl(routes, void 0, {
+		router: dataRouterContext.router,
 		manifest,
 		state,
 		isStatic,
-		onError,
-		future
+		onError
 	});
 }
 /**
@@ -679,7 +735,7 @@ var AwaitErrorBoundary = class extends React$1.Component {
 		} else {
 			status = 0;
 			Object.defineProperty(resolve, "_tracked", { get: () => true });
-			promise = resolve.then((data) => Object.defineProperty(resolve, "_data", { get: () => data }), (error) => {
+			promise = Promise.resolve(resolve).then((data) => Object.defineProperty(resolve, "_data", { get: () => data }), (error) => {
 				this.props.onError?.(error);
 				Object.defineProperty(resolve, "_error", { get: () => error });
 			});

package/dist/development/lib/context.d.ts

@@ -1,7 +1,7 @@
 
 import { Action, History, Location, To } from "./router/history.js";
 import { RouteMatch, TrackedPromise } from "./router/utils.js";
-import { RelativeRoutingType, Router, RouterState, StaticHandlerContext } from "./router/router.js";
+import { RelativeRoutingType, Router, StaticHandlerContext } from "./router/router.js";
 import { ClientOnErrorFunction } from "./components.js";
 import * as React$1 from "react";
 
@@ -12,7 +12,12 @@ interface DataRouterContextObject extends Omit<NavigationContextObject, "future"
   onError?: ClientOnErrorFunction;
 }
 declare const DataRouterContext: React$1.Context<DataRouterContextObject | null>;
-declare const DataRouterStateContext: React$1.Context<RouterState | null>;
+type DataRouterDataContextObject = Pick<Router["state"], "loaderData" | "actionData" | "errors">;
+type DataRouterNavigationContextObject = Pick<Router["state"], "navigation" | "revalidation">;
+type DataRouterStateContextObject = Omit<Router["state"], keyof DataRouterDataContextObject | keyof DataRouterNavigationContextObject | "fetchers">;
+declare const DataRouterStateContext: React$1.Context<DataRouterStateContextObject | null>;
+declare const DataRouterDataContext: React$1.Context<DataRouterDataContextObject | null>;
+declare const DataRouterNavigationContext: React$1.Context<DataRouterNavigationContextObject | null>;
 type ViewTransitionContextObject = {
   isTransitioning: false;
 } | {
@@ -22,8 +27,11 @@ type ViewTransitionContextObject = {
   nextLocation: Location;
 };
 declare const ViewTransitionContext: React$1.Context<ViewTransitionContextObject>;
-type FetchersContextObject = Map<string, any>;
-declare const FetchersContext: React$1.Context<FetchersContextObject>;
+type FetchersContextObject = {
+  fetchers: Router["state"]["fetchers"];
+  fetcherData: Map<string, any>;
+};
+declare const FetchersContext: React$1.Context<FetchersContextObject | null>;
 declare const AwaitContext: React$1.Context<TrackedPromise | null>;
 declare const AwaitContextProvider: (props: React$1.ComponentProps<typeof AwaitContext.Provider>) => React$1.FunctionComponentElement<React$1.ProviderProps<TrackedPromise | null>>;
 interface NavigateOptions {
@@ -39,7 +47,12 @@ interface NavigateOptions {
   relative?: RelativeRoutingType;
   /** Wraps the initial state update for this navigation in a {@link https://react.dev/reference/react-dom/flushSync ReactDOM.flushSync} call instead of the default {@link https://react.dev/reference/react/startTransition React.startTransition} */
   flushSync?: boolean;
-  /** Enables a {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API View Transition} for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the {@link useViewTransitionState `useViewTransitionState()`} hook.  */
+  /**
+   * Enables a view transition for this navigation.
+   *
+   * @deprecated Use React's `<ViewTransition>` component instead. See the
+   * [migration guide](https://reactrouter.com/how-to/view-transitions).
+   */
   viewTransition?: boolean;
   /** Specifies the default revalidation behavior after this submission */
   defaultShouldRevalidate?: boolean;
@@ -81,4 +94,4 @@ interface RouteContextObject {
 }
 declare const RouteContext: React$1.Context<RouteContextObject>;
 //#endregion
-export { AwaitContextProvider, DataRouterContext, DataRouterStateContext, FetchersContext, LocationContext, NavigateOptions, NavigationContext, Navigator, RouteContext, ViewTransitionContext };
+export { AwaitContextProvider, DataRouterContext, DataRouterDataContext, DataRouterNavigationContext, DataRouterStateContext, FetchersContext, LocationContext, NavigateOptions, NavigationContext, Navigator, RouteContext, ViewTransitionContext };

package/dist/development/lib/context.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.5.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,13 +14,17 @@ const DataRouterContext = React$1.createContext(null);
 DataRouterContext.displayName = "DataRouter";
 const DataRouterStateContext = React$1.createContext(null);
 DataRouterStateContext.displayName = "DataRouterState";
+const DataRouterDataContext = React$1.createContext(null);
+DataRouterDataContext.displayName = "DataRouterData";
+const DataRouterNavigationContext = React$1.createContext(null);
+DataRouterNavigationContext.displayName = "DataRouterNavigation";
 const RSCRouterContext = React$1.createContext(false);
 function useIsRSCRouterContext() {
 	return React$1.useContext(RSCRouterContext);
 }
 const ViewTransitionContext = React$1.createContext({ isTransitioning: false });
 ViewTransitionContext.displayName = "ViewTransition";
-const FetchersContext = React$1.createContext(/* @__PURE__ */ new Map());
+const FetchersContext = React$1.createContext(null);
 FetchersContext.displayName = "Fetchers";
 const AwaitContext = React$1.createContext(null);
 AwaitContext.displayName = "Await";
@@ -35,7 +39,11 @@ const RouteContext = React$1.createContext({
 	isDataRoute: false
 });
 RouteContext.displayName = "Route";
+const IsDataRouteContext = React$1.createContext(false);
+IsDataRouteContext.displayName = "IsDataRoute";
+const RouteIdContext = React$1.createContext(void 0);
+RouteIdContext.displayName = "RouteId";
 const RouteErrorContext = React$1.createContext(null);
 RouteErrorContext.displayName = "RouteError";
 //#endregion
-export { AwaitContext, AwaitContextProvider, DataRouterContext, DataRouterStateContext, FetchersContext, LocationContext, NavigationContext, RSCRouterContext, RouteContext, RouteErrorContext, ViewTransitionContext, useIsRSCRouterContext };
+export { AwaitContext, AwaitContextProvider, DataRouterContext, DataRouterDataContext, DataRouterNavigationContext, DataRouterStateContext, FetchersContext, IsDataRouteContext, LocationContext, NavigationContext, RSCRouterContext, RouteContext, RouteErrorContext, RouteIdContext, ViewTransitionContext, useIsRSCRouterContext };

package/dist/development/lib/dom/dom.d.ts

@@ -112,6 +112,9 @@ interface SubmitOptions extends FetcherSubmitOptions {
   navigate?: boolean;
   /**
    * Enable view transitions on this submission navigation
+   *
+   * @deprecated Use React's `<ViewTransition>` component instead. See the
+   * [migration guide](https://reactrouter.com/how-to/view-transitions).
    */
   viewTransition?: boolean;
 }

package/dist/development/lib/dom/dom.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.5.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/development/lib/dom/global.d.ts

@@ -0,0 +1,35 @@
+
+import { HydrationState, Router } from "../router/router.js";
+import { RouteModules } from "./ssr/routeModules.js";
+import { ServerHandoff } from "../server-runtime/serverHandoff.js";
+import { AssetsManifest } from "./ssr/entry.js";
+
+//#region lib/dom/global.d.ts
+type WindowReactRouterContext = ServerHandoff & {
+  state: HydrationState;
+  stream: ReadableStream<Uint8Array> | undefined;
+  streamController: ReadableStreamDefaultController<Uint8Array>;
+};
+interface ViewTransition {
+  finished: Promise<void>;
+  ready: Promise<void>;
+  updateCallbackDone: Promise<void>;
+  skipTransition(): void;
+}
+declare global {
+  var __staticRouterHydrationData: HydrationState | undefined;
+  var __reactRouterVersion: string;
+  interface Document {
+    startViewTransition(cb: () => Promise<void> | void): ViewTransition;
+  }
+  var __reactRouterContext: WindowReactRouterContext | undefined;
+  var __reactRouterManifest: AssetsManifest | undefined;
+  var __reactRouterRouteModules: RouteModules | undefined;
+  var __reactRouterDataRouter: Router | undefined;
+  var __reactRouterHdrActive: boolean;
+  var $RefreshRuntime$: {
+    performReactRefresh: () => void;
+  } | undefined;
+}
+//#endregion
+export { WindowReactRouterContext };

package/dist/development/lib/dom/lib.d.ts

@@ -3,9 +3,9 @@ import { History, To } from "../router/history.js";
 import { DataStrategyFunction, HTMLFormMethod, PatchRoutesOnNavigationFunction, RouteObject } from "../router/utils.js";
 import { BlockerFunction, Fetcher, FutureConfig, GetScrollRestorationKeyFunction, HydrationState, RelativeRoutingType, Router, RouterInit } from "../router/router.js";
 import { NavigateOptions } from "../context.js";
+import { SerializeFrom } from "../types/route-data.js";
 import { FetcherSubmitOptions, SubmitOptions, SubmitTarget, URLSearchParamsInit } from "./dom.js";
 import { DiscoverBehavior, PrefetchBehavior, ScriptsProps } from "./ssr/components.js";
-import { SerializeFrom } from "../types/route-data.js";
 import { ClientInstrumentation } from "../router/instrumentation.js";
 import * as React$1 from "react";
 
@@ -863,6 +863,9 @@ interface LinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>
    */
   to: To;
   /**
+   * **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
+   * component instead. See the [migration guide](../../how-to/view-transitions).
+   *
    * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
    * for this navigation.
    *
@@ -873,6 +876,8 @@ interface LinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>
    * ```
    *
    * To apply specific styles for the transition, see {@link useViewTransitionState}
+   *
+   * @deprecated Use React's `<ViewTransition>` component instead.
    */
   viewTransition?: boolean;
   /**
@@ -1020,6 +1025,10 @@ type NavLinkRenderProps = {
   /**
    * Indicates if a view transition to the link's URL is in progress.
    * See {@link useViewTransitionState}
+   *
+   * @deprecated Only tracks React Router's deprecated view transitions. Use
+   * React's `<ViewTransition>` component to style transitions instead. See the
+   * [migration guide](https://reactrouter.com/how-to/view-transitions).
    */
   isTransitioning: boolean;
 };
@@ -1059,9 +1068,6 @@ interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children
    * a.pending {
    *   color: blue;
    * }
-   * a.transitioning {
-   *   view-transition-name: my-transition;
-   * }
    * ```
    *
    * Or you can specify a function that receives {@link NavLinkRenderProps} and
@@ -1074,6 +1080,10 @@ interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "children
    *   ""
    * )} />
    * ```
+   *
+   * The `transitioning` class is deprecated and only tracks React Router's
+   * legacy view transitions. Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
+   * component instead. See the [migration guide](../../how-to/view-transitions).
    */
   className?: string | ((props: NavLinkRenderProps) => string | undefined);
   /**
@@ -1257,9 +1267,14 @@ interface FormProps extends SharedFormProps {
    */
   state?: any;
   /**
+   * **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
+   * component instead. See the [migration guide](../../how-to/view-transitions).
+   *
    * Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
    * for this navigation. To apply specific styles during the transition, see
    * {@link useViewTransitionState}.
+   *
+   * @deprecated Use React's `<ViewTransition>` component instead.
    */
   viewTransition?: boolean;
 }
@@ -1405,9 +1420,9 @@ declare namespace ScrollRestoration {
  * @param options.state The state to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
  * entry for this navigation. Defaults to `undefined`.
  * @param options.target The target attribute for the link. Defaults to `undefined`.
- * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
- * for this navigation. To apply specific styles during the transition, see
- * {@link useViewTransitionState}. Defaults to `false`.
+ * @param options.viewTransition **Deprecated.** Use React's
+ * [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
+ * instead. See the [migration guide](../../how-to/view-transitions).
  * @param options.defaultShouldRevalidate Specify the default revalidation
  * behavior for the navigation. When not specified, loaders revalidate
  * according to the router's standard revalidation behavior.
@@ -1435,10 +1450,9 @@ declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to:
   state?: any;
   preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
-  viewTransition?: boolean;
   defaultShouldRevalidate?: boolean;
   useTransitions?: boolean;
-}): (event: React$1.MouseEvent<E, MouseEvent>) => void;
+} & Pick<NavigateOptions, "viewTransition">): (event: React$1.MouseEvent<E, MouseEvent>) => void;
 /**
  * Returns a tuple of the current URL's [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
  * and a function to update them. Setting the search params causes a navigation.
@@ -1662,6 +1676,10 @@ interface FetcherSubmitFunction {
  * The imperative version of {@link Form | `<Form>`} that lets you submit a form
  * from code instead of a user interaction.
  *
+ * The `viewTransition` submission option is deprecated. Use React's
+ * [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
+ * instead. See the [migration guide](../../how-to/view-transitions).
+ *
  * @example
  * import { useSubmit } from "react-router";
  *
@@ -2025,6 +2043,11 @@ declare function usePrompt({
   message: string;
 }): void;
 /**
+ * **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
+ * component to style transitions instead. This hook only tracks React Router's
+ * legacy view transitions, not transitions started by React. See the
+ * [migration guide](../../how-to/view-transitions).
+ *
  * This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
  * and the specified location matches either side of the navigation (the URL you are
  * navigating **to** or the URL you are navigating **from**). This can be used to apply finer-grained styles to
@@ -2044,6 +2067,8 @@ declare function usePrompt({
  * more details.
  * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
  * and the resolved path matches the transition's destination or source pathname, otherwise `false`.
+ *
+ * @deprecated Use React's `<ViewTransition>` component instead.
  */
 declare function useViewTransitionState(to: To, {
   relative

package/dist/development/lib/dom/lib.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.1
+ * react-router v8.5.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -12,12 +12,12 @@ import { ABSOLUTE_URL_REGEX } from "../router/url.js";
 import { createBrowserHistory, createHashHistory, createPath, invariant, warning } from "../router/history.js";
 import { ErrorResponseImpl, SUPPORTED_ERROR_TYPES, defaultMapRouteProperties, joinPaths, matchPath, parseToInfo, resolveTo, stripBasename } from "../router/utils.js";
 import { IDLE_FETCHER, createRouter } from "../router/router.js";
-import { DataRouterContext, DataRouterStateContext, FetchersContext, NavigationContext, RouteContext, ViewTransitionContext } from "../context.js";
-import { useBlocker, useHref, useLocation, useMatches, useNavigate, useNavigation, useResolvedPath, useRouteId } from "../hooks.js";
-import { Router, hydrationRouteProperties } from "../components.js";
-import { createSearchParams, getFormSubmissionInfo, getSearchParamsForLocation, shouldProcessLinkClick } from "./dom.js";
+import { DataRouterNavigationContext, NavigationContext, RouteContext, ViewTransitionContext } from "../context.js";
+import { useBlocker, useCurrentRouteId, useDataRouterContext, useDataRouterFetchers, useDataRouterState, useHref, useLocation, useMatches, useNavigate, useNavigation, useResolvedPath } from "../hooks.js";
 import { escapeHtml } from "./ssr/markup.js";
 import { FrameworkContext, PrefetchPageLinks, mergeRefs, usePrefetchBehavior } from "./ssr/components.js";
+import { Router, hydrationRouteProperties } from "../components.js";
+import { createSearchParams, getFormSubmissionInfo, getSearchParamsForLocation, shouldProcessLinkClick } from "./dom.js";
 import * as React$1 from "react";
 //#region lib/dom/lib.tsx
 const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
@@ -372,12 +372,12 @@ Link.displayName = "Link";
 const NavLink = React$1.forwardRef(function NavLinkWithRef({ "aria-current": ariaCurrentProp = "page", caseSensitive = false, className: classNameProp = "", end = false, style: styleProp, to, viewTransition, children, ...rest }, ref) {
 	let path = useResolvedPath(to, { relative: rest.relative });
 	let location = useLocation();
-	let routerState = React$1.useContext(DataRouterStateContext);
+	let routerNavigation = React$1.useContext(DataRouterNavigationContext);
 	let { navigator, basename } = React$1.useContext(NavigationContext);
-	let isTransitioning = routerState != null && useViewTransitionState(path) && viewTransition === true;
+	let isTransitioning = routerNavigation != null && useViewTransitionState(path) && viewTransition === true;
 	let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
 	let locationPathname = location.pathname;
-	let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
+	let nextLocationPathname = routerNavigation?.navigation.location ? routerNavigation.navigation.location.pathname : null;
 	if (!caseSensitive) {
 		locationPathname = locationPathname.toLowerCase();
 		nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
@@ -573,19 +573,6 @@ function ScrollRestoration({ getKey, storageKey, ...props }) {
 	});
 }
 ScrollRestoration.displayName = "ScrollRestoration";
-function getDataRouterConsoleError(hookName) {
-	return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
-}
-function useDataRouterContext(hookName) {
-	let ctx = React$1.useContext(DataRouterContext);
-	invariant(ctx, getDataRouterConsoleError(hookName));
-	return ctx;
-}
-function useDataRouterState(hookName) {
-	let state = React$1.useContext(DataRouterStateContext);
-	invariant(state, getDataRouterConsoleError(hookName));
-	return state;
-}
 /**
 * Handles the click behavior for router {@link Link | `<Link>`} components.This
 * is useful if you need to create custom {@link Link | `<Link>`} components with
@@ -605,9 +592,9 @@ function useDataRouterState(hookName) {
 * @param options.state The state to add to the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
 * entry for this navigation. Defaults to `undefined`.
 * @param options.target The target attribute for the link. Defaults to `undefined`.
-* @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
-* for this navigation. To apply specific styles during the transition, see
-* {@link useViewTransitionState}. Defaults to `false`.
+* @param options.viewTransition **Deprecated.** Use React's
+* [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
+* instead. See the [migration guide](../../how-to/view-transitions).
 * @param options.defaultShouldRevalidate Specify the default revalidation
 * behavior for the navigation. When not specified, loaders revalidate
 * according to the router's standard revalidation behavior.
@@ -769,6 +756,10 @@ let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
 * The imperative version of {@link Form | `<Form>`} that lets you submit a form
 * from code instead of a user interaction.
 *
+* The `viewTransition` submission option is deprecated. Use React's
+* [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition) component
+* instead. See the [migration guide](../../how-to/view-transitions).
+*
 * @example
 * import { useSubmit } from "react-router";
 *
@@ -788,7 +779,7 @@ let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
 function useSubmit() {
 	let { router } = useDataRouterContext("useSubmit");
 	let { basename } = React$1.useContext(NavigationContext);
-	let currentRouteId = useRouteId();
+	let currentRouteId = useCurrentRouteId("useSubmit");
 	let routerFetch = router.fetch;
 	let routerNavigate = router.navigate;
 	return React$1.useCallback(async (target, options = {}) => {
@@ -947,13 +938,8 @@ function useFormAction(action, { relative } = {}) {
 */
 function useFetcher({ key } = {}) {
 	let { router } = useDataRouterContext("useFetcher");
-	let state = useDataRouterState("useFetcher");
-	let fetcherData = React$1.useContext(FetchersContext);
-	let route = React$1.useContext(RouteContext);
-	let routeId = route.matches[route.matches.length - 1]?.route.id;
-	invariant(fetcherData, `useFetcher must be used inside a FetchersContext`);
-	invariant(route, `useFetcher must be used inside a RouteContext`);
-	invariant(routeId != null, `useFetcher can only be used on routes that contain a unique "id"`);
+	let fetchersContext = useDataRouterFetchers("useFetcher");
+	let routeId = useCurrentRouteId("useFetcher");
 	let defaultKey = React$1.useId();
 	let [fetcherKey, setFetcherKey] = React$1.useState(key || defaultKey);
 	if (key && key !== fetcherKey) setFetcherKey(key);
@@ -995,8 +981,8 @@ function useFetcher({ key } = {}) {
 		FetcherForm.displayName = "fetcher.Form";
 		return FetcherForm;
 	}, [fetcherKey]);
-	let fetcher = state.fetchers.get(fetcherKey) || IDLE_FETCHER;
-	let data = fetcherData.get(fetcherKey);
+	let fetcher = fetchersContext.fetchers.get(fetcherKey) || IDLE_FETCHER;
+	let data = fetchersContext.fetcherData.get(fetcherKey);
 	return React$1.useMemo(() => ({
 		Form: FetcherForm,
 		submit,
@@ -1036,11 +1022,11 @@ function useFetcher({ key } = {}) {
 * property.
 */
 function useFetchers() {
-	let state = useDataRouterState("useFetchers");
-	return React$1.useMemo(() => Array.from(state.fetchers.entries()).map(([key, fetcher]) => ({
+	let { fetchers } = useDataRouterFetchers("useFetchers");
+	return React$1.useMemo(() => Array.from(fetchers.entries()).map(([key, fetcher]) => ({
 		...fetcher,
 		key
-	})), [state.fetchers]);
+	})), [fetchers]);
 }
 const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";
 let savedScrollPositions = {};
@@ -1253,6 +1239,11 @@ function usePrompt({ when, message }) {
 	}, [blocker, when]);
 }
 /**
+* **Deprecated.** Use React's [`<ViewTransition>`](https://react.dev/reference/react/ViewTransition)
+* component to style transitions instead. This hook only tracks React Router's
+* legacy view transitions, not transitions started by React. See the
+* [migration guide](../../how-to/view-transitions).
+*
 * This hook returns `true` when there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
 * and the specified location matches either side of the navigation (the URL you are
 * navigating **to** or the URL you are navigating **from**). This can be used to apply finer-grained styles to
@@ -1272,6 +1263,8 @@ function usePrompt({ when, message }) {
 * more details.
 * @returns `true` if there is an active [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
 * and the resolved path matches the transition's destination or source pathname, otherwise `false`.
+*
+* @deprecated Use React's `<ViewTransition>` component instead.
 */
 function useViewTransitionState(to, { relative } = {}) {
 	let vtContext = React$1.useContext(ViewTransitionContext);

package/dist/development/lib/dom/server.d.ts

@@ -127,10 +127,15 @@ declare function StaticRouterProvider({
  * `query`
  * @param opts Options
  * @param opts.future Future flags for the static {@link DataRouter}
- * @param opts.branches Optional pre-computed route branches
+ * @param opts.branches Deprecated optional pre-computed route branches. This option
+ * is no longer used because branch caching is done automatically inside the static router.
  * @returns A static {@link DataRouter} that can be used to render the provided routes
  */
 declare function createStaticRouter(routes: RouteObject[], context: StaticHandlerContext, opts?: {
+  /**
+   * @deprecated This option is no longer used because branch caching is done
+   * automatically inside the static router.
+   */
   branches?: RouteBranch<DataRouteObject>[];
   future?: Partial<FutureConfig>;
 }): Router;