react-router-dom 6.12.1 → 6.13.0-pre.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # `react-router-dom`
 
+## 6.13.0-pre.1
+
+### Minor Changes
+
+- Move [`React.startTransition`](https://react.dev/reference/react/startTransition) behind a [future flag](https://reactrouter.com/en/main/guides/api-development-strategy) to avoid issues with existing incompatible `Suspense` usages. We recommend folks adopting this flag to be better compatible with React concurrent mode, but if you run into issues you can continue without the use of `startTransition` until v7. Issues usually boils down to creating net-new promises during the render cycle, so if you run into issues you should either lift your promise creation out of the render cycle or put it behind a `useMemo`. ([#10596](https://github.com/remix-run/react-router/pull/10596))
+
+  Existing behavior will no longer include `React.startTransition`:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>{/*...*/}</Routes>
+  </BrowserRouter>
+
+  <RouterProvider router={router} />
+  ```
+
+  If you wish to enable `React.startTransition`, pass the future flag to your component:
+
+  ```jsx
+  <BrowserRouter future={{ v7_startTransition: true }}>
+    <Routes>{/*...*/}</Routes>
+  </BrowserRouter>
+
+  <RouterProvider router={router} future={{ v7_startTransition: true }}/>
+  ```
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.13.0-pre.1`
+
+## 6.12.2-pre.0
+
+### Patch Changes
+
+- Work around webpack/terser `React.startTransition` minification bug in production mode ([`2f79bcef`](https://github.com/remix-run/react-router/commit/2f79bcef5f396943cf95d0d23fbd67df9b8e17a6))
+- Updated dependencies:
+  - `react-router@6.12.2-pre.0`
+
 ## 6.12.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -3,8 +3,8 @@
  * you'll need to update the rollup config for react-router-dom-v5-compat.
  */
 import * as React from "react";
-import type { NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
+import type { FutureConfig, NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
+import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
@@ -18,7 +18,7 @@ declare global {
 }
 interface DOMRouterOpts {
     basename?: string;
-    future?: Partial<Omit<FutureConfig, "v7_prependBasename">>;
+    future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
     hydrationData?: HydrationState;
     window?: Window;
 }
@@ -27,25 +27,28 @@ export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouter
 export interface BrowserRouterProps {
     basename?: string;
     children?: React.ReactNode;
+    future?: FutureConfig;
     window?: Window;
 }
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
-export declare function BrowserRouter({ basename, children, window, }: BrowserRouterProps): JSX.Element;
+export declare function BrowserRouter({ basename, children, future, window, }: BrowserRouterProps): JSX.Element;
 export interface HashRouterProps {
     basename?: string;
     children?: React.ReactNode;
+    future?: FutureConfig;
     window?: Window;
 }
 /**
  * A `<Router>` for use in web browsers. Stores the location in the hash
  * portion of the URL so it is not sent to the server.
  */
-export declare function HashRouter({ basename, children, window }: HashRouterProps): JSX.Element;
+export declare function HashRouter({ basename, children, future, window, }: HashRouterProps): JSX.Element;
 export interface HistoryRouterProps {
     basename?: string;
     children?: React.ReactNode;
+    future?: FutureConfig;
     history: History;
 }
 /**
@@ -54,7 +57,7 @@ export interface HistoryRouterProps {
  * two versions of the history library to your bundles unless you use the same
  * version of the history library that React Router uses internally.
  */
-declare function HistoryRouter({ basename, children, history }: HistoryRouterProps): JSX.Element;
+declare function HistoryRouter({ basename, children, future, history, }: HistoryRouterProps): JSX.Element;
 declare namespace HistoryRouter {
     var displayName: string;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.12.1
+ * React Router DOM v6.13.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,7 +9,7 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
+import { UNSAFE_mapRouteProperties, UNSAFE_startTransitionImpl, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
 import { stripBasename, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
 
@@ -244,10 +244,6 @@ function deserializeErrors(errors) {
   }
   return serialized;
 }
-// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
-// `React["startTransition"]` even if it's behind a feature detection of
-// `"startTransition" in React`. Moving this to a constant avoids the issue :/
-const START_TRANSITION = "startTransition";
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
@@ -255,6 +251,7 @@ function BrowserRouter(_ref) {
   let {
     basename,
     children,
+    future,
     window
   } = _ref;
   let historyRef = React.useRef();
@@ -269,9 +266,12 @@ function BrowserRouter(_ref) {
     action: history.action,
     location: history.location
   });
+  let {
+    v7_startTransition
+  } = future || {};
   let setState = React.useCallback(newState => {
-    START_TRANSITION in React ? React[START_TRANSITION](() => setStateImpl(newState)) : setStateImpl(newState);
-  }, [setStateImpl]);
+    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+  }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
     basename: basename,
@@ -289,6 +289,7 @@ function HashRouter(_ref2) {
   let {
     basename,
     children,
+    future,
     window
   } = _ref2;
   let historyRef = React.useRef();
@@ -303,9 +304,12 @@ function HashRouter(_ref2) {
     action: history.action,
     location: history.location
   });
+  let {
+    v7_startTransition
+  } = future || {};
   let setState = React.useCallback(newState => {
-    START_TRANSITION in React ? React[START_TRANSITION](() => setStateImpl(newState)) : setStateImpl(newState);
-  }, [setStateImpl]);
+    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+  }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
     basename: basename,
@@ -325,15 +329,19 @@ function HistoryRouter(_ref3) {
   let {
     basename,
     children,
+    future,
     history
   } = _ref3;
   let [state, setStateImpl] = React.useState({
     action: history.action,
     location: history.location
   });
+  let {
+    v7_startTransition
+  } = future || {};
   let setState = React.useCallback(newState => {
-    START_TRANSITION in React ? React[START_TRANSITION](() => setStateImpl(newState)) : setStateImpl(newState);
-  }, [setStateImpl]);
+    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+  }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
     basename: basename,