Strongly type Router.events.on and Router.events.off (#26456)

This strongly types `Router.events.on` and `Router.events.off`. Previously the event type was `string` but now it's `'routeChangeStart' | 'beforeHistoryChange' | 'routeChangeComplete' | 'routeChangeError' | 'hashChangeStart' | 'hashChangeComplete'`


## Bug

- ~[ ] Related issues linked using `fixes #number`~
- [x] Integration tests added

Closes #25679
Closes #23753
Closes #15497

packages/next/client/index.tsx

@@ -259,7 +259,7 @@ class Container extends React.Component<{
   }
 }
 
-export const emitter: MittEmitter = mitt()
+export const emitter: MittEmitter<string> = mitt()
 let CachedComponent: React.ComponentType
 
 export default async (opts: { webpackHMR?: any } = {}) => {

packages/next/client/router.ts

@@ -52,7 +52,9 @@ const routerEvents = [
   'routeChangeError',
   'hashChangeStart',
   'hashChangeComplete',
-]
+] as const
+export type RouterEvent = typeof routerEvents[number]
+
 const coreMethodFields = [
   'push',
   'replace',
@@ -90,7 +92,7 @@ coreMethodFields.forEach((field: string) => {
   }
 })
 
-routerEvents.forEach((event: string) => {
+routerEvents.forEach((event) => {
   singletonRouter.ready(() => {
     Router.events.on(event, (...args) => {
       const eventField = `on${event.charAt(0).toUpperCase()}${event.substring(

packages/next/next-server/lib/mitt.ts

@@ -16,13 +16,13 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 type Handler = (...evts: any[]) => void
 
-export type MittEmitter = {
-  on(type: string, handler: Handler): void
-  off(type: string, handler: Handler): void
-  emit(type: string, ...evts: any[]): void
+export type MittEmitter<T> = {
+  on(type: T, handler: Handler): void
+  off(type: T, handler: Handler): void
+  emit(type: T, ...evts: any[]): void
 }
 
-export default function mitt(): MittEmitter {
+export default function mitt(): MittEmitter<string> {
   const all: { [s: string]: Handler[] } = Object.create(null)
 
   return {

packages/next/next-server/lib/router/router.ts

@@ -12,6 +12,7 @@ import {
   isAssetError,
   markAssetError,
 } from '../../../client/route-loader'
+import { RouterEvent } from '../../../client/router'
 import { DomainLocales } from '../../server/config'
 import { denormalizePagePath } from '../../server/denormalize-page-path'
 import { normalizeLocalePath } from '../i18n/normalize-locale-path'
@@ -522,7 +523,7 @@ export default class Router implements BaseRouter {
   clc: ComponentLoadCancel
   pageLoader: any
   _bps: BeforePopStateCallback | undefined
-  events: MittEmitter
+  events: MittEmitter<RouterEvent>
   _wrapApp: (App: AppComponent) => any
   isSsr: boolean
   isFallback: boolean
@@ -538,7 +539,7 @@ export default class Router implements BaseRouter {
 
   private _idx: number = 0
 
-  static events: MittEmitter = mitt()
+  static events: MittEmitter<RouterEvent> = mitt()
 
   constructor(
     pathname: string,

test/integration/typescript/components/router.tsx

@@ -4,12 +4,16 @@ import Router, { withRouter } from 'next/router'
 
 export default withRouter(({ router }) => {
   React.useEffect(() => {
+    Router.events.on('routeChangeComplete', () => {})
+    //@ts-expect-error
     Router.events.on('event', () => {})
     Router.prefetch('/page')
     Router.push
     Router.back
     Router.reload
 
+    router.events.on('routeChangeComplete', () => {})
+    //@ts-expect-error
     router.events.on('event', () => {})
     router.prefetch('/page')
     router.push