fix: get routes from context

module-federation · Sep 13, 2024 · 154e8df · 154e8df
1 parent 0d1b350
commit 154e8df
Show file tree

Hide file tree

Showing 4 changed files with 550 additions and 70 deletions.
diff --git a/apps/modernjs-ssr-data-loader/host/package.json b/apps/modernjs-ssr-data-loader/host/package.json
@@ -25,7 +25,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "^2.59.0",
+    "@modern-js/runtime": "2.60.1-alpha.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "@module-federation/modern-js": "workspace:*",

diff --git a/packages/modernjs/src/runtime/dataLoader/plugin-inject-assets.tsx b/packages/modernjs/src/runtime/dataLoader/plugin-inject-assets.tsx
@@ -4,6 +4,14 @@ import { getInstance } from '@module-federation/enhanced/runtime';
 import { collectSSRAssets } from '../createRemoteSSRComponent';
 import { RuntimeReactContext } from '@meta/runtime';
 import { decodeId, getRemoteId } from './utils';
+import type { RouteObject } from '@modern-js/runtime/router';
+
+function traverseRoutes(routes: RouteObject[], remoteNames: Set<string>) {
+  routes.forEach((route) => {
+    route.id && remoteNames.add(decodeId(route.id));
+    route.children && traverseRoutes(route.children, remoteNames);
+  });
+}
 
 export const ssrDataLoaderInjectAssetsPlugin = ({
   metaName,
@@ -12,30 +20,25 @@ export const ssrDataLoaderInjectAssetsPlugin = ({
 }): Plugin => {
   return {
     name: '@modern-js/plugin-mf-data-loader-inject-assets',
-    pre: [`@${metaName}/plugin-router`, '@modern-js/plugin-mf-data-loader'],
-    post: ['@module-federation/modern-js'],
+    pre: ['@modern-js/plugin-mf-data-loader'],
+    post: ['@module-federation/modern-js', `@${metaName}/plugin-router`],
     setup: () => {
       return {
         wrapRoot(App) {
-          return App;
+          // return App;
           const AppWrapper = (props: any) => {
             const instance = getInstance();
             if (!instance || !instance.options.remotes.length) {
               console.log('plugin-mf-data-loader-inject-assets no instance!');
-              return (
-                <>
-                  <App {...props} />
-                </>
-              );
+              return <>{props.children}</>;
             }
             const context = useContext(RuntimeReactContext);
             const { remotes } = instance.options;
 
-            const remoteNames =
-              context.routerContext?.matches.map((match) =>
-                decodeId(match.route.id),
-              ) || [];
-            const remoteIds = remoteNames.reduce((sum, cur) => {
+            const remoteNames: Set<string> = new Set();
+            traverseRoutes(context.routes!, remoteNames);
+
+            const remoteIds = [...remoteNames].reduce((sum, cur) => {
               const matchRemote = remotes.find((r) => r.name === cur);
               if (matchRemote) {
                 sum.add(getRemoteId(cur));
@@ -60,7 +63,7 @@ export const ssrDataLoaderInjectAssetsPlugin = ({
             return (
               <>
                 {assets}
-                <App {...props} />
+                {props.children}
               </>
             );
           };

diff --git a/packages/modernjs/src/ssr-runtime/plugin.tsx b/packages/modernjs/src/ssr-runtime/plugin.tsx
@@ -22,16 +22,16 @@ export const mfSSRPlugin = ({ metaName }: { metaName: string }): Plugin => ({
         }
         return;
       },
-      wrapRoot(App) {
-        console.log('live reload wrapRoot');
-        const AppWrapper = (props: any) => (
-          <>
-            <SSRLiveReload />
-            <App {...props} />
-          </>
-        );
-        return hoistNonReactStatics(AppWrapper, App);
-      },
+      // wrapRoot(App) {
+      //   console.log('live reload wrapRoot');
+      //   const AppWrapper = (props: any) => (
+      //     <>
+      //       <SSRLiveReload />
+      //       <App {...props} />
+      //     </>
+      //   );
+      //   return hoistNonReactStatics(AppWrapper, App);
+      // },
     };
   },
 });