From 078a5820f5c29c8d68d9b9152990fae2018b857c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 4 Oct 2024 00:49:46 +0100 Subject: [PATCH] Type the router package (#65854) Co-authored-by: youknowriad Co-authored-by: sirreal --- packages/router/CHANGELOG.md | 4 +++ packages/router/package.json | 1 + .../router/src/{history.js => history.ts} | 26 ++++++++++++------- packages/router/src/{index.js => index.ts} | 0 .../src/{lock-unlock.js => lock-unlock.ts} | 0 .../src/{private-apis.js => private-apis.ts} | 0 packages/router/src/{router.js => router.tsx} | 7 ++--- packages/router/tsconfig.json | 17 ++++++++++++ tsconfig.json | 1 + 9 files changed, 44 insertions(+), 12 deletions(-) rename packages/router/src/{history.js => history.ts} (75%) rename packages/router/src/{index.js => index.ts} (100%) rename packages/router/src/{lock-unlock.js => lock-unlock.ts} (100%) rename packages/router/src/{private-apis.js => private-apis.ts} (100%) rename packages/router/src/{router.js => router.tsx} (71%) create mode 100644 packages/router/tsconfig.json diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md index bd259351a8799..0ce856ea20e88 100644 --- a/packages/router/CHANGELOG.md +++ b/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) diff --git a/packages/router/package.json b/packages/router/package.json index 7686f90a27c49..eadc360d8e0cb 100644 --- a/packages/router/package.json +++ b/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", diff --git a/packages/router/src/history.js b/packages/router/src/history.ts similarity index 75% rename from packages/router/src/history.js rename to packages/router/src/history.ts index 3a04745923a81..e046522a75189 100644 --- a/packages/router/src/history.js +++ b/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, +}; diff --git a/packages/router/src/index.js b/packages/router/src/index.ts similarity index 100% rename from packages/router/src/index.js rename to packages/router/src/index.ts diff --git a/packages/router/src/lock-unlock.js b/packages/router/src/lock-unlock.ts similarity index 100% rename from packages/router/src/lock-unlock.js rename to packages/router/src/lock-unlock.ts diff --git a/packages/router/src/private-apis.js b/packages/router/src/private-apis.ts similarity index 100% rename from packages/router/src/private-apis.js rename to packages/router/src/private-apis.ts diff --git a/packages/router/src/router.js b/packages/router/src/router.tsx similarity index 71% rename from packages/router/src/router.js rename to packages/router/src/router.tsx index 55807175a5bdd..9a1d01aa5f8d8 100644 --- a/packages/router/src/router.js +++ b/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, diff --git a/packages/router/tsconfig.json b/packages/router/tsconfig.json new file mode 100644 index 0000000000000..e4945eef8bac0 --- /dev/null +++ b/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/**/*" ] +} diff --git a/tsconfig.json b/tsconfig.json index 8821ef4404e3b..4dafc0acc958c 100644 --- a/tsconfig.json +++ b/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" },