feat: add hook modifyRoutes (#3459)

* feat: add hook `modifyRoutes` * chore: changeset
web-infra-dev · Apr 17, 2023 · afe5d35 · afe5d35
1 parent fefd1c5
commit afe5d35
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 2 deletions.
diff --git a/.changeset/lovely-beans-begin.md b/.changeset/lovely-beans-begin.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': patch
+---
+
+feat: add hook `modifyRoutes`
+feat: 增加 hook `modifyRoutes`
diff --git a/packages/runtime/plugin-runtime/src/router/runtime/hooks.ts b/packages/runtime/plugin-runtime/src/router/runtime/hooks.ts
@@ -0,0 +1,6 @@
+import { createWaterfall } from '@modern-js/plugin';
+import { RouteObject } from 'react-router-dom';
+
+const modifyRoutes = createWaterfall<RouteObject[]>();
+
+export { modifyRoutes };
diff --git a/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx b/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx
@@ -12,6 +12,7 @@ import { SSRServerContext } from '../../ssr/serverRender/types';
 import type { RouteManifest, RouterConfig } from './types';
 import { renderRoutes, urlJoin } from './utils';
 import { installGlobals } from './fetch';
+import { modifyRoutes as modifyRoutesHook } from './hooks';
 
 // Polyfill Web Fetch API
 installGlobals();
@@ -69,7 +70,10 @@ export const routerPlugin = ({
 }: RouterConfig): Plugin => {
   return {
     name: '@modern-js/plugin-router',
-    setup: () => {
+    registerHook: {
+      modifyRoutes: modifyRoutesHook,
+    },
+    setup: api => {
       return {
         async init({ context }, next) {
           // can not get routes config, skip wrapping React Router.
@@ -111,6 +115,10 @@ export const routerPlugin = ({
           // set routeManifest in context to be consistent with csr context
           context.routeManifest = context.ssrContext!
             .routeManifest as RouteManifest;
+
+          const runner = (api as any).useHookRunners();
+          runner.modifyRoutes(routes);
+
           return next({ context });
         },
         hoc: ({ App }, next) => {

diff --git a/packages/runtime/plugin-runtime/src/router/runtime/plugin.tsx b/packages/runtime/plugin-runtime/src/router/runtime/plugin.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { Plugin } from '../../core';
+import { modifyRoutes as modifyRoutesHook } from './hooks';
 import { deserializeErrors, renderRoutes, urlJoin } from './utils';
 import type { RouterConfig, Routes } from './types';
 
@@ -45,7 +46,10 @@ export const routerPlugin = ({
   finalRouteConfig = routesConfig;
   return {
     name: '@modern-js/plugin-router',
-    setup: () => {
+    registerHook: {
+      modifyRoutes: modifyRoutesHook,
+    },
+    setup: api => {
       return {
         init({ context }, next) {
           context.router = {
@@ -80,6 +84,9 @@ export const routerPlugin = ({
                     }),
                   );
 
+              const runner = (api as any).useHookRunners();
+              routes = runner.modifyRoutes(routes);
+
               const baseUrl =
                 window._SERVER_DATA?.router.baseUrl ||
                 select(location.pathname);

diff --git a/packages/runtime/plugin-runtime/tests/router/router.test.tsx b/packages/runtime/plugin-runtime/tests/router/router.test.tsx
@@ -216,5 +216,52 @@ describe('@modern-js/plugin-router', () => {
     const { container } = render(<DefaultNotFound />);
     expect(container.firstChild?.textContent).toEqual('404');
   });
+
+  it('modifyRoutes hook', async () => {
+    const AppWrapper = createApp({
+      plugins: [
+        createPlugin(
+          () =>
+            ({
+              modifyRoutes: (routes: any) => {
+                routes[0].element = <App2>{routes[0].element}</App2>;
+                return routes;
+              },
+            } as any),
+        ),
+        createRouterPlugin({
+          routesConfig: {
+            routes: [
+              {
+                path: '/',
+                component: App1 as any,
+                type: 'nested',
+                _component: '',
+              },
+            ],
+          },
+        }),
+      ],
+    })();
+
+    function App1() {
+      return <div>App1</div>;
+    }
+
+    function App2(props: any) {
+      const { children } = props;
+      return (
+        <div>
+          <div> App2 </div>
+          <div>{children}</div>
+        </div>
+      );
+    }
+
+    const { container } = render(<AppWrapper />);
+    await waitFor(() => {
+      expect(container.innerHTML).toMatch('App2');
+    });
+  });
 });
 /* eslint-enable @typescript-eslint/ban-ts-comment */