chore: update beforeResolve guards

Author: userquin

packages/router/src/navigation-api/index.ts

@@ -860,7 +860,7 @@ export function createNavigationApiRouter(
       }
 
       beforeResolveTransitionGuard = this.beforeResolve(
-        (to, from, next, info) => {
+        async (to, from, next, info) => {
           const transitionMode =
             to.meta.viewTransition ?? defaultTransitionSetting
           if (
@@ -871,7 +871,6 @@ export function createNavigationApiRouter(
               window.matchMedia('(prefers-reduced-motion: reduce)').matches) ||
             !isChangingPage(to, from)
           ) {
-            next(true)
             return
           }
 
@@ -882,14 +881,12 @@ export function createNavigationApiRouter(
 
           const transition = document.startViewTransition(() => promise)
 
-          options.onStart?.(transition)
+          await options.onStart?.(transition)
           transition.finished
             .then(() => options.onFinished?.(transition))
             .catch(() => options.onAborted?.(transition))
             .finally(resetTransitionState)
 
-          next(true)
-
           return promise
         }
       )

packages/router/src/router.ts

@@ -1438,33 +1438,41 @@ function enableViewTransition(router: Router, options: RouterViewTransition) {
 
   window.addEventListener('popstate', popStateListener)
 
-  const beforeResolveTransitionGuard = router.beforeResolve((to, from) => {
-    const transitionMode = to.meta.viewTransition ?? defaultTransitionSetting
-    if (
-      hasUAVisualTransition ||
-      transitionMode === false ||
-      (transitionMode !== 'always' &&
-        window.matchMedia('(prefers-reduced-motion: reduce)').matches) ||
-      !isChangingPage(to, from)
-    ) {
-      return
-    }
+  const beforeResolveTransitionGuard = router.beforeResolve(
+    async (to, from) => {
+      const transitionMode = to.meta.viewTransition ?? defaultTransitionSetting
+      if (
+        hasUAVisualTransition ||
+        transitionMode === false ||
+        (transitionMode !== 'always' &&
+          window.matchMedia('(prefers-reduced-motion: reduce)').matches) ||
+        !isChangingPage(to, from)
+      ) {
+        return
+      }
 
-    const promise = new Promise<void>((resolve, reject) => {
-      finishTransition = resolve
-      abortTransition = reject
-    })
+      const promise = new Promise<void>((resolve, reject) => {
+        finishTransition = resolve
+        abortTransition = reject
+      })
 
-    const transition = document.startViewTransition(() => promise)
+      let changeRoute: () => void
+      const ready = new Promise<void>(resolve => (changeRoute = resolve))
 
-    options.onStart?.(transition)
-    transition.finished
-      .then(() => options.onFinished?.(transition))
-      .catch(() => options.onAborted?.(transition))
-      .finally(resetTransitionState)
+      const transition = document.startViewTransition(() => {
+        changeRoute()
+        return promise
+      })
 
-    return promise
-  })
+      await options.onStart?.(transition)
+      transition.finished
+        .then(() => options.onFinished?.(transition))
+        .catch(() => options.onAborted?.(transition))
+        .finally(resetTransitionState)
+
+      return ready
+    }
+  )
 
   const afterEachTransitionGuard = router.afterEach(() => {
     finishTransition?.()

packages/router/src/transition.ts

@@ -11,12 +11,16 @@ export function injectTransitionMode(): TransitionMode {
   return inject(transitionModeKey, 'auto')
 }
 
+export type RouteViewTransitionHook = (
+  transition: ViewTransition
+) => void | Promise<void>
+
 export interface RouterViewTransition {
   defaultViewTransition?: boolean | 'always'
   /** Hook called right after the view transition starts */
-  onStart?: (transition: ViewTransition) => void
+  onStart?: RouteViewTransitionHook
   /** Hook called when the view transition animation is finished */
-  onFinished?: (transition: ViewTransition) => void
+  onFinished?: RouteViewTransitionHook
   /** Hook called if the transition is aborted */
-  onAborted?: (transition: ViewTransition) => void
+  onAborted?: RouteViewTransitionHook
 }