chore: merge main branch

danpeen · danpeen · commit be577f74f3df · 2024-11-15T14:10:01.000+08:00
diff --git a/.changeset/tender-insects-agree.md b/.changeset/tender-insects-agree.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+fix(modern-js-plugin): prevent components render multiple times if props change
diff --git a/package.json b/package.json
@@ -106,23 +106,23 @@
     "@commitlint/cz-commitlint": "19.5.0",
     "@fontsource/roboto": "5.1.0",
     "@fontsource/roboto-mono": "5.1.0",
-    "@nx/cypress": "20.1.0",
-    "@nx/devkit": "20.1.0",
-    "@nx/esbuild": "20.1.0",
-    "@nx/eslint": "20.1.0",
-    "@nx/eslint-plugin": "20.1.0",
-    "@nx/express": "20.1.0",
-    "@nx/jest": "20.1.0",
-    "@nx/js": "20.1.0",
-    "@nx/next": "20.1.0",
-    "@nx/node": "20.1.0",
-    "@nx/react": "20.1.0",
-    "@nx/rollup": "20.1.0",
-    "@nx/rspack": "20.1.0",
-    "@nx/storybook": "20.1.0",
-    "@nx/vite": "20.1.0",
-    "@nx/web": "20.1.0",
-    "@nx/webpack": "20.1.0",
+    "@nx/cypress": "20.1.1",
+    "@nx/devkit": "20.1.1",
+    "@nx/esbuild": "20.1.1",
+    "@nx/eslint": "20.1.1",
+    "@nx/eslint-plugin": "20.1.1",
+    "@nx/express": "20.1.1",
+    "@nx/jest": "20.1.1",
+    "@nx/js": "20.1.1",
+    "@nx/next": "20.1.1",
+    "@nx/node": "20.1.1",
+    "@nx/react": "20.1.1",
+    "@nx/rollup": "20.1.1",
+    "@nx/rspack": "20.1.1",
+    "@nx/storybook": "20.1.1",
+    "@nx/vite": "20.1.1",
+    "@nx/web": "20.1.1",
+    "@nx/webpack": "20.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@rollup/plugin-alias": "5.1.1",
     "@rollup/plugin-replace": "6.0.1",
@@ -200,7 +200,7 @@
     "mime-types": "2.1.35",
     "msw": "^1.2.1",
     "node-fetch": "~3.3.2",
-    "nx": "20.1.0",
+    "nx": "20.1.1",
     "open": "^10.1.0",
     "postcss-calc": "9.0.1",
     "postcss-custom-properties": "13.3.12",
diff --git a/packages/modernjs/src/runtime/createRemoteSSRComponent.tsx b/packages/modernjs/src/runtime/createRemoteSSRComponent.tsx
@@ -143,62 +143,63 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
       ? ReactKey
       : Parameters<T[E]>[0] & ReactKey
     : ReactKey;
+  const exportName = info?.export || 'default';
 
-  return (props: ComponentType) => {
-    const exportName = info?.export || 'default';
-    const LazyComponent = React.lazy(async () => {
-      try {
-        const m = (await info.loader()) as Record<string, React.FC> &
-          Record<symbol, string>;
-        if (!m) {
-          throw new Error('load remote failed');
-        }
-        const moduleId = m && m[Symbol.for('mf_module_id')];
+  const LazyComponent = React.lazy(async () => {
+    try {
+      const m = (await info.loader()) as Record<string, React.FC> &
+        Record<symbol, string>;
+      if (!m) {
+        throw new Error('load remote failed');
+      }
+      const moduleId = m && m[Symbol.for('mf_module_id')];
 
-        const assets = collectSSRAssets({
-          id: moduleId,
-        });
+      const assets = collectSSRAssets({
+        id: moduleId,
+      });
 
-        const Com = m[exportName] as React.FC;
-        if (exportName in m && typeof Com === 'function') {
-          return {
-            default: () => (
-              <>
-                {assets}
-                <Com {...props} />
-              </>
-            ),
-          };
-        } else {
-          throw Error(
-            `Make sure that ${moduleId} has the correct export when export is ${String(
-              exportName,
-            )}`,
-          );
-        }
-      } catch (err) {
-        if (!info.fallback) {
-          throw err;
-        }
-        const FallbackFunctionComponent = info.fallback;
-        const FallbackNode = (
-          <FallbackFunctionComponent
-            error={err}
-            resetErrorBoundary={() => {
-              console.log('SSR mode not support "resetErrorBoundary" !');
-            }}
-          />
-        );
+      const Com = m[exportName] as React.FC;
+      if (exportName in m && typeof Com === 'function') {
         return {
-          default: () => FallbackNode,
+          default: (props: Omit<ComponentType, 'key'>) => (
+            <>
+              {assets}
+              <Com {...props} />
+            </>
+          ),
         };
+      } else {
+        throw Error(
+          `Make sure that ${moduleId} has the correct export when export is ${String(
+            exportName,
+          )}`,
+        );
       }
-    });
-
+    } catch (err) {
+      if (!info.fallback) {
+        throw err;
+      }
+      const FallbackFunctionComponent = info.fallback;
+      const FallbackNode = (
+        <FallbackFunctionComponent
+          error={err}
+          resetErrorBoundary={() => {
+            console.log('SSR mode not support "resetErrorBoundary" !');
+          }}
+        />
+      );
+      return {
+        default: () => FallbackNode,
+      };
+    }
+  });
+  return (props: ComponentType) => {
+    const { key, ...args } = props;
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent />
+          {/* @ts-ignore */}
+          <LazyComponent {...args} />
         </React.Suspense>
       </ErrorBoundary>
     );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@module-federation/modern-js': patch
 +---
++
 +fix(modern-js-plugin): prevent components render multiple times if props change