Merge branch 'release-next' into dev

contributors.yml

@@ -218,6 +218,7 @@
 - tkindy
 - tlinhart
 - tom-sherman
+- tomasr8
 - triangularcube
 - trungpv1601
 - turansky

docs/components/form.md

@@ -273,9 +273,7 @@ See also: [`<Link preventScrollReset>`][link-preventscrollreset]
 
 The `unstable_viewTransition` prop enables a [View Transition][view-transitions] 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 [`unstable_useViewTransitionState()`][use-view-transition-state].
 
-<docs-warn>
-Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
 
 # Examples
 

docs/components/link.md

@@ -153,13 +153,16 @@ The `unstable_viewTransition` prop enables a [View Transition][view-transitions]
 
 ```jsx
 <Link to={to} unstable_viewTransition>
+  Click me
+</Link>
 ```
 
-If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state]:
+If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state] hook (or check out the `transitioning` class and `isTransitioning` render prop in [NavLink][navlink]):
 
 ```jsx
 function ImageLink(to) {
-  let isTransitioning = unstable_useViewTransitionState(to);
+  const isTransitioning =
+    unstable_useViewTransitionState(to);
   return (
     <Link to={to} unstable_viewTransition>
       <p
@@ -185,9 +188,9 @@ function ImageLink(to) {
 }
 ```
 
-<docs-warn>
-Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
+
+<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
 
 [link-native]: ./link-native
 [scrollrestoration]: ./scroll-restoration
@@ -196,3 +199,5 @@ Please note that this API is marked unstable and may be subject to breaking chan
 [history-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/state
 [use-view-transition-state]: ../hooks//use-view-transition-state
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+[picking-a-router]: ../routers/picking-a-router
+[navlink]: ./nav-link

docs/components/nav-link.md

@@ -171,10 +171,9 @@ You may also use the `className`/`style` props or the render props passed to `ch
 </NavLink>
 ```
 
-<docs-warn>
+<docs-warning>
 Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+</docs-warning>
 
 [aria-current]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
-[use-view-transition-state]: ../hooks//use-view-transition-state

docs/hooks/use-navigate.md

@@ -89,9 +89,9 @@ function EditContact() {
 
 The `unstable_viewTransition` option enables a [View Transition][view-transitions] 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 [`unstable_useViewTransitionState()`][use-view-transition-state].
 
-<docs-warn>
-Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+<docs-warning>`unstable_viewTransition` only works when using a data router, see [Picking a Router][picking-a-router]</docs-warning>
+
+<docs-warning>Please note that this API is marked unstable and may be subject to breaking changes without a major release</docs-warning>
 
 [link]: ../components/link
 [redirect]: ../fetch/redirect
@@ -101,3 +101,4 @@ Please note that this API is marked unstable and may be subject to breaking chan
 [scrollrestoration]: ../components/scroll-restoration
 [use-view-transition-state]: ../hooks//use-view-transition-state
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+[picking-a-router]: ../routers/picking-a-router

docs/route/action.md

@@ -7,7 +7,7 @@ new: true
 
 Route actions are the "writes" to route [loader][loader] "reads". They provide a way for apps to perform data mutations with simple HTML and HTTP semantics while React Router abstracts away the complexity of asynchronous UI and revalidation. This gives you the simple mental model of HTML + HTTP (where the browser handles the asynchrony and revalidation) with the behavior and UX capabilities of modern SPAs.
 
-<docs-error>This feature only works if using a data router like [`createBrowserRouter`][createbrowserrouter]</docs-error>
+<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>
 
 ```tsx
 <Route

docs/route/error-element.md

@@ -9,7 +9,7 @@ When exceptions are thrown in [loaders][loader], [actions][action], or component
 
 <docs-info>If you do not wish to specify a React element (i.e., `errorElement={<MyErrorBoundary />}`) you may specify an `ErrorBoundary` component instead (i.e., `ErrorBoundary={MyErrorBoundary}`) and React Router will call `createElement` for you internally.</docs-info>
 
-<docs-error>This feature only works if using a data router like [`createBrowserRouter`][createbrowserrouter]</docs-error>
+<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>
 
 ```tsx
 <Route

docs/routers/picking-a-router.md

@@ -109,6 +109,7 @@ The following APIs are introduced in React Router 6.4 and will only work when us
 - [`useRouteError`][userouteerror]
 - [`useRouteLoaderData`][userouteloaderdata]
 - [`useSubmit`][usesubmit]
+- `startViewTransition` support on [Link][viewtransition-link] and [useNavigate][viewtransition-navigate]
 
 [createbrowserrouter]: ./create-browser-router
 [createhashrouter]: ./create-hash-router
@@ -142,3 +143,5 @@ The following APIs are introduced in React Router 6.4 and will only work when us
 [userouteerror]: ../hooks/use-route-error
 [userouteloaderdata]: ../hooks/use-route-loader-data
 [usesubmit]: ../hooks/use-submit
+[viewtransition-link]: ../components/link#unstable_viewtransition
+[viewtransition-navigate]: ../hooks/use-navigate#optionsunstable_viewtransition

examples/view-transitions/README.md

@@ -11,4 +11,4 @@ This example demonstrates a simple usage of a Data Router with `document.startVi
 
 Open this example on [StackBlitz](https://stackblitz.com):
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/brophdawg11/start-view-transition/examples/view-transitions?file=src/App.tsx)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/view-transitions?file=src/App.tsx)

examples/view-transitions/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^6.16.0"
+    "react-router-dom": "6.17.0-pre.2"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "5.0.2",

package.json

@@ -113,16 +113,16 @@
       "none": "48.3 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "15.2 kB"
+      "none": "13.9 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "17.6 kB"
+      "none": "16.3 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "13.6 kB"
+      "none": "15.9 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "19.9 kB"
+      "none": "22.1 kB"
     }
   }
 }

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.17.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.17.0`
+  - `react-router@6.17.0`
+
 ## 6.16.0
 
 ### Minor Changes

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.16.0",
+  "version": "6.17.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.16.0"
+    "react-router": "6.17.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,59 @@
 # `react-router-dom`
 
+## 6.17.0
+
+### Minor Changes
+
+- Add experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) via `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application. ([#10916](https://github.com/remix-run/react-router/pull/10916))
+
+  The simplest approach to enabling a View Transition in your React Router app is via the new `<Link unstable_viewTransition>` prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
+
+  If you need to apply more fine-grained styles for your animations, you can leverage the `unstable_useViewTransitionState` hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
+
+  ```jsx
+  function ImageLink(to, src, alt) {
+    let isTransitioning = unstable_useViewTransitionState(to);
+    return (
+      <Link to={to} unstable_viewTransition>
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            viewTransitionName: isTransitioning ? "image-expand" : "",
+          }}
+        />
+      </Link>
+    );
+  }
+  ```
+
+  You can also use the `<NavLink unstable_viewTransition>` shorthand which will manage the hook usage for you and automatically add a `transitioning` class to the `<a>` during the transition:
+
+  ```css
+  a.transitioning img {
+    view-transition-name: "image-expand";
+  }
+  ```
+
+  ```jsx
+  <NavLink to={to} unstable_viewTransition>
+    <img src={src} alt={alt} />
+  </NavLink>
+  ```
+
+  For an example usage of View Transitions with React Router, check out [our fork](https://github.com/brophdawg11/react-router-records) of the [Astro Records](https://github.com/Charca/astro-records) demo.
+
+  For more information on using the View Transitions API, please refer to the [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) guide from the Google Chrome team.
+
+  Please note, that because the `ViewTransition` API is a DOM API, we now export a specific `RouterProvider` from `react-router-dom` with this functionality. If you are importing `RouterProvider` from `react-router`, then it will not support view transitions. ([#10928](https://github.com/remix-run/react-router/pull/10928)
+
+### Patch Changes
+
+- Log a warning and fail gracefully in `ScrollRestoration` when `sessionStorage` is unavailable ([#10848](https://github.com/remix-run/react-router/pull/10848))
+- Updated dependencies:
+  - `@remix-run/router@1.10.0`
+  - `react-router@6.17.0`
+
 ## 6.16.0
 
 ### Minor Changes