feat(link): add view-transition prop (#2356)

diff --git a/packages/router/src/RouterLink.ts b/packages/router/src/RouterLink.ts
index e9c0141967f77fd4bf08a34466c170370a1ada74..11a8304730fb871402eae10e033b4c58ec2f8e4f 100644 (file)
--- a/packages/router/src/RouterLink.ts
+++ b/packages/router/src/RouterLink.ts
@@ -83,6 +83,11 @@ export interface RouterLinkProps extends RouterLinkOptions {
     | 'time'
     | 'true'
     | 'false'
+
+  /**
+   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
+   */
+  viewTransition?: boolean
 }
 
 /**
@@ -106,7 +111,13 @@ export interface UseLinkOptions<Name extends keyof RouteMap = keyof RouteMap> {
     | RouteLocationAsPath
     | RouteLocationRaw
   >
+
   replace?: MaybeRef<boolean | undefined>
+
+  /**
+   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
+   */
+  viewTransition?: boolean
 }
 
 /**
@@ -214,10 +225,19 @@ export function useLink<Name extends keyof RouteMap = keyof RouteMap>(
     e: MouseEvent = {} as MouseEvent
   ): Promise<void | NavigationFailure> {
     if (guardEvent(e)) {
-      return router[unref(props.replace) ? 'replace' : 'push'](
+      const p = router[unref(props.replace) ? 'replace' : 'push'](
         unref(props.to)
         // avoid uncaught errors are they are logged anyway
       ).catch(noop)
+      if (
+        props.viewTransition &&
+        typeof document !== 'undefined' &&
+        'startViewTransition' in document
+      ) {
+        // @ts-expect-error: not added to types yet
+        document.startViewTransition(() => p)
+      }
+      return p
     }
     return Promise.resolve()
   }