switch middleware to beforeNavigate

WordPress · Nov 25, 2024 · d03a835 · d03a835
1 parent e604227
commit d03a835
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -11,7 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,27 +54,22 @@ export default function App() {
 			)
 		);
 	}
-	const middlewares = useMemo(
-		() => [
-			( { path, query } ) => {
-				if ( ! isPreviewingTheme() ) {
-					return { path, query };
-				}
+	const beforeNavigate = useCallback( ( { path, query } ) => {
+		if ( ! isPreviewingTheme() ) {
+			return { path, query };
+		}
 
-				return {
-					path,
-					query: {
-						...query,
-						wp_theme_preview:
-							'wp_theme_preview' in query
-								? query.wp_theme_preview
-								: currentlyPreviewingTheme(),
-					},
-				};
+		return {
+			path,
+			query: {
+				...query,
+				wp_theme_preview:
+					'wp_theme_preview' in query
+						? query.wp_theme_preview
+						: currentlyPreviewingTheme(),
 			},
-		],
-		[]
-	);
+		};
+	}, [] );
 
 	return (
 		<SlotFillProvider>
@@ -83,7 +78,7 @@ export default function App() {
 				<RouterProvider
 					routes={ routes }
 					pathArg="p"
-					middlewares={ middlewares }
+					beforeNavigate={ beforeNavigate }
 				>
 					<AppLayout />
 					<PluginArea onError={ onPluginAreaError } />

diff --git a/packages/router/package.json b/packages/router/package.json
@@ -29,7 +29,6 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/compose": "*",
 		"@wordpress/element": "*",
 		"@wordpress/private-apis": "*",
 		"@wordpress/url": "*",

diff --git a/packages/router/src/link.tsx b/packages/router/src/link.tsx
@@ -3,33 +3,26 @@
  */
 import { useContext, useMemo } from '@wordpress/element';
 import { getQueryArgs, getPath, buildQueryString } from '@wordpress/url';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import {
-	ConfigContext,
-	type Middleware,
-	type NavigationOptions,
-	useHistory,
-} from './router';
+import { ConfigContext, type NavigationOptions, useHistory } from './router';
 
 export function useLink( to: string, options: NavigationOptions = {} ) {
 	const history = useHistory();
-	const { pathArg, middlewares } = useContext( ConfigContext );
+	const { pathArg, beforeNavigate } = useContext( ConfigContext );
 	function onClick( event: React.SyntheticEvent< HTMLAnchorElement > ) {
 		event?.preventDefault();
 		history.navigate( to, options );
 	}
 	const query = getQueryArgs( to );
 	const path = getPath( 'http://domain.com/' + to ) ?? '';
 	const link = useMemo( () => {
-		const runMiddlewares = (
-			middlewares ? compose( ...middlewares ) : ( i: unknown ) => i
-		) as Middleware;
-		return runMiddlewares( { path, query } );
-	}, [ path, query, middlewares ] );
+		return beforeNavigate
+			? beforeNavigate( { path, query } )
+			: { path, query };
+	}, [ path, query, beforeNavigate ] );
 
 	const [ before ] = window.location.href.split( '?' );
 

diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -19,7 +19,6 @@ import {
 	getPath,
 	buildQueryString,
 } from '@wordpress/url';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -47,7 +46,7 @@ interface Match {
 	params?: Record< string, any >;
 }
 
-export type Middleware = ( arg: {
+export type BeforeNavigate = ( arg: {
 	path: string;
 	query: Record< string, any >;
 } ) => {
@@ -57,7 +56,7 @@ export type Middleware = ( arg: {
 
 interface Config {
 	pathArg: string;
-	middlewares?: Middleware[];
+	beforeNavigate?: BeforeNavigate;
 }
 
 export interface NavigationOptions {
@@ -87,19 +86,16 @@ export function useLocation() {
 }
 
 export function useHistory() {
-	const { pathArg, middlewares } = useContext( ConfigContext );
+	const { pathArg, beforeNavigate } = useContext( ConfigContext );
 	return useMemo(
 		() => ( {
 			navigate( rawPath: string, options: NavigationOptions = {} ) {
-				const runMiddlewares = (
-					middlewares
-						? compose( ...middlewares )
-						: ( i: unknown ) => i
-				) as Middleware;
 				const query = getQueryArgs( rawPath );
 				const path = getPath( 'http://domain.com/' + rawPath ) ?? '';
 				const performPush = () => {
-					const result = runMiddlewares( { path, query } );
+					const result = beforeNavigate
+						? beforeNavigate( { path, query } )
+						: { path, query };
 					return history.push(
 						{
 							search: buildQueryString( {
@@ -137,7 +133,7 @@ export function useHistory() {
 				} );
 			},
 		} ),
-		[ pathArg, middlewares ]
+		[ pathArg, beforeNavigate ]
 	);
 }
 
@@ -196,12 +192,12 @@ export default function useMatch(
 export function RouterProvider( {
 	routes,
 	pathArg,
-	middlewares,
+	beforeNavigate,
 	children,
 }: {
 	routes: Route[];
 	pathArg: string;
-	middlewares?: Middleware[];
+	beforeNavigate?: BeforeNavigate;
 	children: React.ReactNode;
 } ) {
 	const location = useSyncExternalStore(
@@ -211,8 +207,8 @@ export function RouterProvider( {
 	);
 	const match = useMatch( location, routes, pathArg );
 	const config = useMemo(
-		() => ( { middlewares, pathArg } ),
-		[ middlewares, pathArg ]
+		() => ( { beforeNavigate, pathArg } ),
+		[ beforeNavigate, pathArg ]
 	);
 
 	return (

diff --git a/packages/router/tsconfig.json b/packages/router/tsconfig.json
@@ -7,7 +7,6 @@
 		"types": [ "gutenberg-env" ]
 	},
 	"references": [
-		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../private-apis" },
 		{ "path": "../url" }