chore: add routes utils and expose new stuff

Author: userquin

packages/router/src/index.ts

@@ -141,6 +141,10 @@ export { createRouter } from './router'
 export { createNavigationApiRouter } from './navigation-api'
 export type { Router, RouterOptions, RouterScrollBehavior } from './router'
 export type { RouterApiOptions } from './navigation-api'
+export type { TransitionMode, RouterViewTransition } from './transition'
+export type { ClientRouterOptions } from './client-router'
+export { injectTransitionMode, transitionModeKey } from './transition'
+export { createClientRouter } from './client-router'
 
 export { NavigationFailureType, isNavigationFailure } from './errors'
 export type {
@@ -162,6 +166,7 @@ export type {
   UseLinkReturn,
 } from './RouterLink'
 export { RouterView } from './RouterView'
+export { isChangingPage } from './utils/routes'
 export type { RouterViewProps } from './RouterView'
 
 export type { TypesConfig } from './config'

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

@@ -60,6 +60,7 @@ import {
 } from '../history/common'
 import { RouteRecordNormalized } from '../matcher/types'
 import { TransitionMode, transitionModeKey } from '../transition'
+import { isChangingPage } from '../utils/routes'
 
 export interface RouterApiOptions extends Omit<RouterOptions, 'history'> {
   base?: string
@@ -854,7 +855,8 @@ export function createNavigationApiRouter(
             info?.isForwardBrowserButton ||
             transitionMode === false ||
             (transitionMode !== 'always' &&
-              window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+              window.matchMedia('(prefers-reduced-motion: reduce)').matches) ||
+            !isChangingPage(to, from)
           ) {
             next(true)
             return

packages/router/src/router.ts

@@ -66,14 +66,14 @@ import {
   routerViewLocationKey,
 } from './injectionSymbols'
 import { addDevtools } from './devtools'
-import { _LiteralUnion } from './types/utils'
 import { RouteLocationAsRelativeTyped } from './typed-routes/route-location'
 import { RouteMap } from './typed-routes/route-map'
 import {
   RouterViewTransition,
   TransitionMode,
   transitionModeKey,
 } from './transition'
+import { isChangingPage } from './utils/routes'
 
 /**
  * Internal type to define an ErrorHandler
@@ -1251,7 +1251,7 @@ export function createRouter(
   let beforeResolveTransitionGuard: (() => void) | undefined
   let afterEachTransitionGuard: (() => void) | undefined
   let onErrorTransitionGuard: (() => void) | undefined
-  let popStateListener: (() => void) | undefined
+  let popStateListener: ((event: PopStateEvent) => void) | undefined
 
   const router: Router = {
     currentRoute,
@@ -1401,27 +1401,6 @@ function extractChangingRecords(
   return [leavingRecords, updatingRecords, enteringRecords]
 }
 
-function isChangingPage(
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalized
-) {
-  if (to === from || from === START_LOCATION) {
-    return false
-  }
-
-  // If route keys are different then it will result in a rerender
-  if (generateRouteKey(to) !== generateRouteKey(from)) {
-    return true
-  }
-
-  const areComponentsSame = to.matched.every(
-    (comp, index) =>
-      comp.components &&
-      comp.components.default === from.matched[index]?.components?.default
-  )
-  return !areComponentsSame
-}
-
 function enableViewTransition(router: Router, options: RouterViewTransition) {
   let transition: undefined | ViewTransition
   let hasUAVisualTransition = false

packages/router/src/transition.ts

@@ -20,8 +20,3 @@ export interface RouterViewTransition {
   /** Hook called if the transition is aborted */
   onAborted?: (transition: ViewTransition) => void
 }
-
-export interface RouterTransitionOptions<T extends TransitionMode = 'auto'> {
-  mode: T
-  options?: T extends 'view-transition' ? ViewTransitionOptions : undefined
-}

packages/router/src/utils/routes.ts

@@ -0,0 +1,42 @@
+import { RouteLocationNormalized } from '../typed-routes'
+import { START_LOCATION } from '../index'
+
+// from Nuxt
+const ROUTE_KEY_PARENTHESES_RE = /(:\w+)\([^)]+\)/g
+const ROUTE_KEY_SYMBOLS_RE = /(:\w+)[?+*]/g
+const ROUTE_KEY_NORMAL_RE = /:\w+/g
+// TODO: consider refactoring into single utility
+// See https://github.com/nuxt/nuxt/tree/main/packages/nuxt/src/pages/runtime/utils.ts#L8-L19
+function generateRouteKey(route: RouteLocationNormalized) {
+  const source =
+    route?.meta.key ??
+    route.path
+      .replace(ROUTE_KEY_PARENTHESES_RE, '$1')
+      .replace(ROUTE_KEY_SYMBOLS_RE, '$1')
+      .replace(
+        ROUTE_KEY_NORMAL_RE,
+        r => route.params[r.slice(1)]?.toString() || ''
+      )
+  return typeof source === 'function' ? source(route) : source
+}
+
+export function isChangingPage(
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized
+) {
+  if (to === from || from === START_LOCATION) {
+    return false
+  }
+
+  // If route keys are different then it will result in a rerender
+  if (generateRouteKey(to) !== generateRouteKey(from)) {
+    return true
+  }
+
+  const areComponentsSame = to.matched.every(
+    (comp, index) =>
+      comp.components &&
+      comp.components.default === from.matched[index]?.components?.default
+  )
+  return !areComponentsSame
+}