feat: support modifyRoutes hook for router v5 (#3666)

Author: yimingjfe

.changeset/serious-bobcats-reflect.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': minor
+---
+
+feat: support modifyRoutes hook for router v5
+feat: 为 router v5 支持 modifyRoutes hook

packages/runtime/plugin-router-v5/package.json

@@ -61,6 +61,7 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
+    "@modern-js/plugin": "workspace:*",
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@types/history": "^4.7.9",

packages/runtime/plugin-router-v5/src/runtime/hooks.ts

@@ -0,0 +1,6 @@
+import { createWaterfall } from '@modern-js/plugin';
+import { RouteProps } from 'react-router-dom';
+
+const modifyRoutesHook = createWaterfall<RouteProps[]>();
+
+export { modifyRoutesHook };

packages/runtime/plugin-router-v5/src/runtime/plugin.tsx

@@ -18,6 +18,7 @@ import { RuntimeReactContext, isBrowser } from '@modern-js/runtime';
 import type { Plugin } from '@modern-js/runtime';
 import { parsedJSONFromElement } from '@modern-js/utils/runtime-browser';
 import { renderRoutes, getLocation, urlJoin } from './utils';
+import { modifyRoutesHook } from './hooks';
 
 declare global {
   interface Window {
@@ -75,6 +76,7 @@ export const routerPlugin = ({
   createRoutes,
   historyOptions = {},
 }: RouterConfig): Plugin => {
+  const originRoutes = routesConfig?.routes || [];
   const isBrow = isBrowser();
 
   const select = (pathname: string) =>
@@ -86,7 +88,10 @@ export const routerPlugin = ({
 
   return {
     name: '@modern-js/plugin-router',
-    setup: () => {
+    registerHook: {
+      modifyRoutes: modifyRoutesHook,
+    },
+    setup: api => {
       return {
         init({ context }, next) {
           context.router = {
@@ -111,16 +116,20 @@ export const routerPlugin = ({
                 (supportHtml5History
                   ? createBrowserHistory(historyOptions)
                   : createHashHistory(historyOptions));
-
-              return (props: any) => (
-                <Router history={history}>
-                  {createRoutes ? (
-                    <App {...props} Component={createRoutes()} />
-                  ) : (
-                    <App {...props}>{renderRoutes(routesConfig, props)}</App>
-                  )}
-                </Router>
-              );
+              return (props: any) => {
+                const runner = (api as any).useHookRunners();
+                const routes = runner.modifyRoutes(originRoutes);
+                routesConfig && (routesConfig.routes = routes);
+                return (
+                  <Router history={history}>
+                    {createRoutes ? (
+                      <App {...props} Component={createRoutes()} />
+                    ) : (
+                      <App {...props}>{renderRoutes(routesConfig, props)}</App>
+                    )}
+                  </Router>
+                );
+              };
             }
             return (props: any) => {
               const runtimeContext = useContext(RuntimeReactContext);
@@ -133,6 +142,9 @@ export const routerPlugin = ({
                 baseUrl === '/'
                   ? urlJoin(baseUrl, historyOptions.basename as string)
                   : baseUrl;
+              const runner = (api as any).useHookRunners();
+              const routes = runner.modifyRoutes(originRoutes);
+              routesConfig && (routesConfig.routes = routes);
               return (
                 <StaticRouter
                   basename={basename === '/' ? '' : basename}
@@ -148,18 +160,16 @@ export const routerPlugin = ({
               );
             };
           };
-          let RouteApp = getRouteApp();
 
+          let RouteApp = getRouteApp();
           if (App) {
             RouteApp = hoistNonReactStatics(RouteApp, App);
           }
-
           if (routesConfig?.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp),
             });
           }
-
           return next({
             App: RouteApp,
           });

packages/runtime/plugin-router-v5/tests/router.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { createBrowserHistory } from 'history';
 import { createApp, createPlugin } from '@modern-js/runtime';
-import createRouterPlugin, { useLocation } from '../src/runtime';
+import createRouterPlugin, { RouteProps, useLocation } from '../src/runtime';
 import { useHistory } from '../src';
 import { DefaultNotFound } from '../src/runtime/DefaultNotFound';
 
@@ -186,4 +186,45 @@ describe('@modern-js/plugin-router-v5', () => {
     const { container } = render(<DefaultNotFound />);
     expect(container.firstChild?.textContent).toEqual('404');
   });
+
+  it('support modify routes', () => {
+    type ModifyRoutesFn = (routes: RouteProps[]) => RouteProps[];
+    const expectedText = 'modify routes';
+    let modifyFn: ModifyRoutesFn | null = null;
+    const modifyRoutes = (fn: ModifyRoutesFn) => {
+      modifyFn = fn;
+    };
+
+    modifyRoutes(routes => {
+      routes[0].component = function () {
+        return <>{expectedText}</>;
+      };
+      return routes;
+    });
+
+    const AppWrapper = createApp({
+      plugins: [
+        createPlugin(() => ({
+          hoc: ({ App: App1 }, next) => next({ App: App1 }),
+          modifyRoutes(routes: RouteProps[]) {
+            return modifyFn?.(routes);
+          },
+        })),
+        createRouterPlugin({
+          routesConfig: { routes: [{ path: '/', component: App as any }] },
+        }),
+      ],
+    })(App);
+
+    interface Props {
+      children: React.ReactNode;
+    }
+    function App({ children }: Props) {
+      return <div>{children}</div>;
+    }
+    const { container } = render(<AppWrapper test={1} />);
+
+    expect(container.firstChild?.textContent).toBe(`${expectedText}`);
+    expect(container.innerHTML).toBe(`<div>${expectedText}</div>`);
+  });
 });