fix(router-core): allow to return false to skip navigation using view transition types (#5492)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Manuel Schiller <manuel.schiller@caligano.de>

Author: 3 people

docs/router/framework/react/api/router/NavigateOptionsType.md

@@ -50,7 +50,7 @@ The `NavigateOptions` object accepts the following properties:
 - Optional
 - Defaults to `false`.
 - If `true`, navigation will be called using `document.startViewTransition()`.
-- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will be the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
+- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed.
 - If the browser does not support this api, this option will be ignored.
 - See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works.
 - See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types

docs/router/framework/react/api/router/ViewTransitionOptionsType.md

@@ -8,7 +8,13 @@ The `ViewTransitionOptions` type is used to define a
 
 ```tsx
 interface ViewTransitionOptions {
-  types: Array<string>
+  types: Array<string> | ((locationChangeInfo: {
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }) => (Array<string> | false))
 }
 ```
 
@@ -18,6 +24,16 @@ The `ViewTransitionOptions` type accepts an object with a single property:
 
 ### `types` property
 
-- Type: `Array<string>`
+- Type: `Array<string> | ((locationChangeInfo: {
+    fromLocation?: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+    hrefChanged: boolean
+    hashChanged: boolean
+  }) => (Array<string> | false))`
 - Required
-- The types array that will be passed to the `document.startViewTransition({update, types}) call`;
+- Either one of:
+  - An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
+  - A function that accepts `locationChangeInfo` object and returns either:
+    - An array of strings that will be passed to the `document.startViewTransition({update, types}) call`
+    - or `false` to skip the view transition

packages/router-core/src/router.ts

@@ -774,7 +774,7 @@ export interface ViewTransitionOptions {
         pathChanged: boolean
         hrefChanged: boolean
         hashChanged: boolean
-      }) => Array<string>)
+      }) => Array<string> | false)
 }
 
 // TODO where is this used? can we remove this?
@@ -2175,6 +2175,11 @@ export class RouterCore<
               )
             : shouldViewTransition.types
 
+        if (resolvedViewTransitionTypes === false) {
+          fn()
+          return
+        }
+
         startViewTransitionParams = {
           update: fn,
           types: resolvedViewTransitionTypes,