Merge branch 'release-next' into dev

remix-run · Jun 14, 2023 · a3b21eb · a3b21eb
2 parents ce54655 + ed17fcd
commit a3b21eb
Show file tree

Hide file tree

Showing 22 changed files with 890 additions and 264 deletions.
diff --git a/docs/guides/api-development-strategy.md b/docs/guides/api-development-strategy.md
@@ -49,12 +49,46 @@ The lifecycle is thus either:
 
 ## Current Future Flags
 
-Here's the current future flags in React Router v6 today:
+Here's the current future flags in React Router v6 today.
+
+### `@remix-run/router` Future Flags
+
+These flags are only applicable when using a [Data Router][picking-a-router] and are passed when creating the `router` instance:
+
+```js
+const router = createBrowserRouter(routes, {
+  future: {
+    v7_normalizeFormMethod: true,
+  },
+});
+```
 
 | Flag                     | Description                                                           |
 | ------------------------ | --------------------------------------------------------------------- |
 | `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
 
+### React Router Future Flags
+
+These flags apply to both Data and non-Data Routers and are passed to the rendered React component:
+
+```jsx
+<BrowserRouter future={{ v7_startTransition: true }}>
+  <Routes>{/*...*/}</Routes>
+</BrowserRouter>
+```
+
+```jsx
+<RouterProvider
+  router={router}
+  future={{ v7_startTransition: true }}
+/>
+```
+
+| Flag                 | Description                                                                 |
+| -------------------- | --------------------------------------------------------------------------- |
+| `v7_startTransition` | Wrap all router state updates in [`React.startTransition`][starttransition] |
+
 [future-flags-blog-post]: https://remix.run/blog/future-flags
 [feature-flowchart]: https://remix.run/docs-images/feature-flowchart.png
 [picking-a-router]: ../routers/picking-a-router
+[starttransition]: https://react.dev/reference/react/startTransition
diff --git a/docs/router-components/browser-router.md b/docs/router-components/browser-router.md
@@ -15,6 +15,7 @@ declare function BrowserRouter(
 interface BrowserRouterProps {
   basename?: string;
   children?: React.ReactNode;
+  future?: FutureConfig;
   window?: Window;
 }
 ```
@@ -23,8 +24,6 @@ interface BrowserRouterProps {
 
 A `<BrowserRouter>` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.
 
-`<BrowserRouter window>` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
-
 ```tsx
 import * as React from "react";
 import { createRoot } from "react-dom/client";
@@ -39,4 +38,39 @@ root.render(
 );
 ```
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <BrowserRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /app/ */}
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <BrowserRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+## `window`
+
+`BrowserRouter` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
+
 [defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy
diff --git a/docs/router-components/hash-router.md b/docs/router-components/hash-router.md
@@ -15,6 +15,7 @@ declare function HashRouter(
 interface HashRouterProps {
   basename?: string;
   children?: React.ReactNode;
+  future?: FutureConfig;
   window?: Window;
 }
 ```
@@ -23,8 +24,6 @@ interface HashRouterProps {
 
 `<HashRouter>` is for use in web browsers when the URL should not (or cannot) be sent to the server for some reason. This may happen in some shared hosting scenarios where you do not have full control over the server. In these situations, `<HashRouter>` makes it possible to store the current location in the `hash` portion of the current URL, so it is never sent to the server.
 
-`<HashRouter window>` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
-
 ```tsx
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -40,4 +39,39 @@ ReactDOM.render(
 
 <docs-warning>We strongly recommend you do not use `HashRouter` unless you absolutely have to.</docs-warning>
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <HashRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /#/app/ */}
+      </Routes>
+    </HashRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <HashRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </HashRouter>
+  );
+}
+```
+
+## `window`
+
+`HashRouter` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `<iframe>`, for example.
+
 [defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy
diff --git a/docs/router-components/memory-router.md b/docs/router-components/memory-router.md
@@ -17,6 +17,7 @@ interface MemoryRouterProps {
   children?: React.ReactNode;
   initialEntries?: InitialEntry[];
   initialIndex?: number;
+  future?: FutureConfig;
 }
 ```
 
@@ -59,4 +60,36 @@ describe("My app", () => {
 });
 ```
 
+## `basename`
+
+Configure your application to run underneath a specific basename in the URL:
+
+```jsx
+function App() {
+  return (
+    <MemoryRouter basename="/app">
+      <Routes>
+        <Route path="/" /> {/* 👈 Renders at /app/ */}
+      </Routes>
+    </MemoryRouter>
+  );
+}
+```
+
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <MemoryRouter future={{ v7_startTransition: true }}>
+      <Routes>{/*...*/}</Routes>
+    </MemoryRouter>
+  );
+}
+```
+
+[defaultview]: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+[api-development-strategy]: ../guides/api-development-strategy
 [tests]: https://github.com/remix-run/react-router/tree/main/packages/react-router/__tests__
diff --git a/docs/routers/router-provider.md b/docs/routers/router-provider.md
@@ -5,6 +5,23 @@ new: true
 
 # `<RouterProvider>`
 
+<details>
+  <summary>Type declaration</summary>
+
+```tsx
+declare function RouterProvider(
+  props: RouterProviderProps
+): React.ReactElement;
+
+interface RouterProviderProps {
+  fallbackElement?: React.ReactNode;
+  router: Router;
+  future?: FutureConfig;
+}
+```
+
+</details>
+
 All [data router][picking-a-router] objects are passed to this component to render your app and enable the rest of the data APIs.
 
 ```jsx lines=[24]
@@ -49,4 +66,20 @@ If you are not server rendering your app, `createBrowserRouter` will initiate al
 />
 ```
 
+## `future`
+
+An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.
+
+```jsx
+function App() {
+  return (
+    <RouterProvider
+      router={router}
+      future={{ v7_startTransition: true }}
+    />
+  );
+}
+```
+
 [picking-a-router]: ./picking-a-router
+[api-development-strategy]: ../guides/api-development-strategy
diff --git a/package.json b/package.json
@@ -112,16 +112,16 @@
       "none": "46.4 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "13.7 kB"
+      "none": "13.8 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "16.1 kB"
+      "none": "16.2 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "12.3 kB"
+      "none": "12.4 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "18.3 kB"
+      "none": "18.5 kB"
     }
   }
 }
diff --git a/packages/react-router-dom-v5-compat/CHANGELOG.md b/packages/react-router-dom-v5-compat/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.13.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `[email protected]`
+  - `[email protected]`
+
 ## 6.12.1
 
 ### Patch Changes

diff --git a/packages/react-router-dom-v5-compat/package.json b/packages/react-router-dom-v5-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.12.1",
+  "version": "6.13.0",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.12.1"
+    "react-router": "6.13.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -1,7 +1,42 @@
 # `react-router-dom`
 
+## 6.13.0
+
+### Minor Changes
+
+- Move [`React.startTransition`](https://react.dev/reference/react/startTransition) usage 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
+
+- Work around webpack/terser `React.startTransition` minification bug in production mode ([#10588](https://github.com/remix-run/react-router/pull/10588))
+- Updated dependencies:
+  - `[email protected]`
+
 ## 6.12.1
 
+> **Warning**
+> Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details.
+
 ### Patch Changes
 
 - Adjust feature detection of `React.startTransition` to fix webpack + react 17 compilation error ([#10569](https://github.com/remix-run/react-router/pull/10569))