From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Wed, 13 Nov 2024 11:11:59 +0000 (+0100)
Subject: feat(link): add view-transition prop (#2356)
X-Git-Tag: v4.5.0~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e978eb8efeef193dfaf5f358a56109633d17fc56;p=thirdparty%2Fvuejs%2Frouter.git

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

diff --git a/packages/router/src/RouterLink.ts b/packages/router/src/RouterLink.ts
index e9c01419..11a83047 100644
--- 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()
   }