remix-run · brophdawg11 · Oct 11, 2023 · Oct 11, 2023
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -8,5 +8,11 @@
     "react-router-native": "6.16.0",
     "@remix-run/router": "1.9.0"
   },
-  "changesets": []
+  "changesets": [
+    "404-root-with-path",
+    "error-response-type",
+    "partial-future-config",
+    "soft-forks-cough",
+    "start-view-transition"
+  ]
 }
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.17.0-pre.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.17.0-pre.0`
+  - `react-router-dom@6.17.0-pre.0`
+
 ## 6.16.0
 
 ### Minor 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.16.0",
+  "version": "6.17.0-pre.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-pre.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -1,5 +1,57 @@
 # `react-router-dom`
 
+## 6.17.0-pre.0
+
+### Minor Changes
+
+- Add 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.
+
+### 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-pre.0`
+  - `react-router@6.17.0-pre.0`
+
 ## 6.16.0
 
 ### Minor Changes

diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.16.0",
+  "version": "6.17.0-pre.0",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",
@@ -23,8 +23,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.9.0",
-    "react-router": "6.16.0"
+    "@remix-run/router": "1.10.0-pre.0",
+    "react-router": "6.17.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0",

diff --git a/packages/react-router-native/CHANGELOG.md b/packages/react-router-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # `react-router-native`
 
+## 6.17.0-pre.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.17.0-pre.0`
+
 ## 6.16.0
 
 ### Minor Changes

diff --git a/packages/react-router-native/package.json b/packages/react-router-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-native",
-  "version": "6.16.0",
+  "version": "6.17.0-pre.0",
   "description": "Declarative routing for React Native applications",
   "keywords": [
     "react",
@@ -22,7 +22,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@ungap/url-search-params": "^0.2.2",
-    "react-router": "6.16.0"
+    "react-router": "6.17.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0",

diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
@@ -1,5 +1,56 @@
 # `react-router`
 
+## 6.17.0-pre.0
+
+### Minor Changes
+
+- Add 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.
+
+### Patch Changes
+
+- Fix `RouterProvider` `future` prop type to be a `Partial<FutureConfig>` so that not all flags must be specified ([#10900](https://github.com/remix-run/react-router/pull/10900))
+- Updated dependencies:
+  - `@remix-run/router@1.10.0-pre.0`
+
 ## 6.16.0
 
 ### Minor Changes

diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.16.0",
+  "version": "6.17.0-pre.0",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.9.0"
+    "@remix-run/router": "1.10.0-pre.0"
   },
   "devDependencies": {
     "react": "^18.2.0"

diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
@@ -1,5 +1,55 @@
 # `@remix-run/router`
 
+## 1.10.0-pre.0
+
+### Minor Changes
+
+- Add 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.
+
+### Patch Changes
+
+- Allow 404 detection to leverage root route error boundary if path contains a URL segment ([#10852](https://github.com/remix-run/react-router/pull/10852))
+- Fix `ErrorResponse` type to avoid leaking internal field ([#10876](https://github.com/remix-run/react-router/pull/10876))
+
 ## 1.9.0
 
 ### Minor Changes

diff --git a/packages/router/package.json b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.9.0",
+  "version": "1.10.0-pre.0",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",