Type the router package

packages/router/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Rewrite the package in typescript ([#65854](https://github.com/WordPress/gutenberg/pull/65854)).
+
 ## 1.9.0 (2024-10-03)
 
 ## 1.8.0 (2024-09-19)

packages/router/package.json

@@ -25,6 +25,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/element": "file:../element",

packages/router/src/history.js → packages/router/src/history.ts

@@ -1,13 +1,17 @@
 /**
  * External dependencies
  */
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, type BrowserHistory } from 'history';
 
 /**
  * WordPress dependencies
  */
 import { buildQueryString } from '@wordpress/url';
 
+export interface EnhancedHistory extends BrowserHistory {
+	getLocationWithParams: () => Location;
+}
+
 const history = createBrowserHistory();
 
 const originalHistoryPush = history.push;
@@ -16,7 +20,7 @@ const originalHistoryReplace = history.replace;
 // Preserve the `wp_theme_preview` query parameter when navigating
 // around the Site Editor.
 // TODO: move this hack out of the router into Site Editor code.
-function preserveThemePreview( params ) {
+function preserveThemePreview( params: Record< string, any > ) {
 	if ( params.hasOwnProperty( 'wp_theme_preview' ) ) {
 		return params;
 	}
@@ -28,12 +32,15 @@ function preserveThemePreview( params ) {
 	return { ...params, wp_theme_preview: currentThemePreview };
 }
 
-function push( params, state ) {
+function push( params: Record< string, any >, state: Record< string, any > ) {
 	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryPush.call( history, { search }, state );
 }
 
-function replace( params, state ) {
+function replace(
+	params: Record< string, any >,
+	state: Record< string, any >
+) {
 	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryReplace.call( history, { search }, state );
 }
@@ -54,8 +61,9 @@ function getLocationWithParams() {
 	return locationWithParams;
 }
 
-history.push = push;
-history.replace = replace;
-history.getLocationWithParams = getLocationWithParams;
-
-export default history;
+export default {
+	...history,
+	push,
+	replace,
+	getLocationWithParams,
+};

packages/router/src/router.js → packages/router/src/router.tsx

@@ -11,9 +11,10 @@ import {
  * Internal dependencies
  */
 import history from './history';
+import type { EnhancedHistory } from './history';
 
-const RoutesContext = createContext();
-const HistoryContext = createContext();
+const RoutesContext = createContext< Location | null >( null );
+const HistoryContext = createContext< EnhancedHistory >( history );
 
 export function useLocation() {
 	return useContext( RoutesContext );
@@ -23,7 +24,7 @@ export function useHistory() {
 	return useContext( HistoryContext );
 }
 
-export function RouterProvider( { children } ) {
+export function RouterProvider( { children }: { children: React.ReactNode } ) {
 	const location = useSyncExternalStore(
 		history.listen,
 		history.getLocationWithParams,

packages/router/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ],
+		"allowJs": false,
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../element" },
+		{ "path": "../private-apis" },
+		{ "path": "../url" }
+	],
+	"include": [ "src/**/*" ]
+}

tsconfig.json

@@ -49,6 +49,7 @@
 		{ "path": "packages/redux-routine" },
 		{ "path": "packages/report-flaky-tests" },
 		{ "path": "packages/rich-text" },
+		{ "path": "packages/router" },
 		{ "path": "packages/style-engine" },
 		{ "path": "packages/sync" },
 		{ "path": "packages/token-list" },