Merge branch 'main' into chore/external-runtime-core

.changeset/sour-carpets-walk.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+chore(modern-js-plugin): add ssr option

apps/website-new/docs/en/configure/shared.mdx

@@ -44,7 +44,7 @@ new ModuleFederationPlugin({
 
 - Type: `boolean`
 - Required: No
-- Default: `true`
+- Default: `false`
 
 Whether to allow only one version of the shared module within the shared scope (singleton mode).
 

apps/website-new/docs/en/guide/framework/modernjs.mdx

@@ -169,3 +169,39 @@ Set module loading status.
 A fault-tolerant component that is rendered when the component fails to **load** or **render**.
 
 Note: This component only renders this fault-tolerant component on the client side when **rendering** fails.
+
+## Configuration
+
+### ssr
+
+- Type: `false`
+- Is it required: No
+- Default value: `undefined`
+
+`@module-federation/modern-js` will automatically add SSR related build presets based on `server.ssr` in modern.js config.
+
+If the current project only needs to load MF in the CSR, you can set `ssr: false` to help progressive migration.
+
+```title='modern.config.ts'
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  dev: {
+    port: 3050,
+  },
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+  },
+  plugins: [
+    appTools(),
+    moduleFederationPlugin({ ssr: false })
+  ],
+});
+```

apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx

@@ -0,0 +1,12 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='RUNTIME-008'/>
+
+## Reasons
+
+Failed to load resource during the runtime process, which may be caused by network instability leading to resource loading timeout failure, or resource address error leading to resource loading failure.
+
+
+## Solutions
+
+check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](en/plugin/plugins/retry-plugin.html).

apps/website-new/docs/zh/configure/shared.mdx

@@ -44,13 +44,13 @@ new ModuleFederationPlugin({
 
 - 类型：`boolean`
 - 是否必填：否
-- 默认值：`true`
+- 默认值：`false`
 
 是否在共享作用域中只允许共享模块的一个版本 (单例模式).
 
 - 如果值为 true，开启单例模式；值为 false，不开启单例模式。
-- 如果启用单例模式，那么 remote 应用组件和 host 应用共享的依赖只加载一次，当版本不一致时加载更高的版本。此时对于版本更低的那一方会给出警告：
-- 不开启单例模式下，如果 remote 应用和 host 应用共享依赖的版本不一致，则 remote 应用和 host 应用加载各自的依赖
+- 如果启用单例模式，那么 remote 应用组件和 host 应用共享的依赖只加载一次，当版本不一致时加载更高的版本。此时对于版本更低的那一方会给出警告。
+- 不开启单例模式下，如果 remote 应用和 host 应用共享依赖的版本不一致，则 remote 应用和 host 应用加载各自的依赖。
 
 ## requiredVersion
 
@@ -61,7 +61,7 @@ new ModuleFederationPlugin({
 所需版本，可以是一个版本区间。默认值为当前应用的依赖版本。
 
 - 在使用共享依赖时，会判断该依赖版本是否大于等于 requiredVersion ，如果是则会正常使用。如果小于 requiredVersion 那么会在控制台警告，并使用当前共享依赖中最小的版本。
-- 当一方设置 requiredVersion ，另一方设置 singleton 时，会加载 requiredVersion 的依赖，singleton 方直接使用 requiredVersion 的依赖，不论版本高低
+- 当一方设置 requiredVersion ，另一方设置 singleton 时，会加载 requiredVersion 的依赖，singleton 方直接使用 requiredVersion 的依赖，不论版本高低。
 
 ## eager
 
@@ -121,13 +121,13 @@ new ModuleFederationPlugin({
 ```ts
 new ModuleFederationPlugin({
   name: '@demo/button',
-    shared: {
-      react: {
-        singleton: true,
-        requiredVersion: '~18.2.0'
-        fixedDependencies: true
-      }
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: '~18.2.0',
+      fixedDependencies: true
     }
+  },
   //...
 });
 ```

apps/website-new/docs/zh/guide/framework/modernjs.mdx

@@ -180,3 +180,39 @@ export default Product;
 当组件**加载**或**渲染**失败时，所渲染的容错组件。
 
 注意：当**渲染**失败的时候，该组件仅在客户端渲染此 容错组件。
+
+## 配置
+
+### ssr
+
+- 类型：`false`
+- 是否必填：否
+- 默认值：`undefined`
+
+`@module-federation/modern-js` 会根据 modern.js config 中的 `server.ssr` 来自动添加 SSR 相关的构建预设。
+
+如果当前项目仅需要在 CSR 加载 MF ，那么可以设置 `ssr: false` 来帮助渐进式迁移。
+
+```title='modern.config.ts'
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  dev: {
+    port: 3050,
+  },
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+  },
+  plugins: [
+    appTools(),
+    moduleFederationPlugin({ ssr: false })
+  ],
+});
+```

apps/website-new/docs/zh/guide/troubleshooting/runtime/RUNTIME-008.mdx

@@ -0,0 +1,13 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='RUNTIME-008'/>
+
+## 原因
+
+Runtime 运行时资源加载失败报错，可能原因为网络不稳定导致资源加载超时失败，或者为资源地址错误导致资源加载失败。
+
+
+## 解决方法
+
+检查资源地址是否正确，若资源地址正确，检查网络是否稳定。网络不稳定时可增加重试机制，参考 [Runtime 重试机制](zh/plugin/plugins/retry-plugin.html)。
+

packages/modernjs/src/cli/configPlugin.ts

@@ -72,7 +72,10 @@ export const moduleFederationConfigPlugin = (
         const bundlerType =
           useAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
         const ipv4 = getIPV4();
-        const enableSSR = Boolean(modernjsConfig?.server?.ssr);
+        const enableSSR =
+          userConfig.userConfig?.ssr === false
+            ? false
+            : Boolean(modernjsConfig?.server?.ssr);
 
         if (userConfig.remoteIpStrategy === undefined) {
           if (!enableSSR) {

packages/modernjs/src/cli/index.ts

@@ -21,6 +21,7 @@ export const moduleFederationPlugin = (
     distOutputDir: '',
     originPluginOptions: userConfig,
     remoteIpStrategy: userConfig?.remoteIpStrategy,
+    userConfig,
   };
   return {
     name: '@modern-js/plugin-module-federation',

packages/modernjs/src/cli/ssrPlugin.ts

@@ -15,7 +15,7 @@ export function setEnv() {
 }
 
 export const moduleFederationSSRPlugin = (
-  userConfig: Required<InternalModernPluginOptions>,
+  pluginOptions: Required<InternalModernPluginOptions>,
 ): CliPlugin<AppTools> => ({
   name: '@modern-js/plugin-module-federation-ssr',
   pre: [
@@ -25,7 +25,7 @@ export const moduleFederationSSRPlugin = (
   setup: async ({ useConfigContext, useAppContext }) => {
     const modernjsConfig = useConfigContext();
     const enableSSR = Boolean(modernjsConfig?.server?.ssr);
-    if (!enableSSR) {
+    if (!enableSSR || pluginOptions.userConfig?.ssr === false) {
       return {};
     }
 
@@ -50,32 +50,32 @@ export const moduleFederationSSRPlugin = (
                 // throw new Error(
                 //   `${PLUGIN_IDENTIFIER} Not support rspack ssr mode yet !`,
                 // );
-                if (!userConfig.nodePlugin) {
-                  userConfig.nodePlugin = new RspackModuleFederationPlugin(
-                    userConfig.ssrConfig,
+                if (!pluginOptions.nodePlugin) {
+                  pluginOptions.nodePlugin = new RspackModuleFederationPlugin(
+                    pluginOptions.ssrConfig,
                   );
                   // @ts-ignore
-                  config.plugins?.push(userConfig.nodePlugin);
+                  config.plugins?.push(pluginOptions.nodePlugin);
                 }
               } else {
-                userConfig.distOutputDir =
-                  userConfig.distOutputDir ||
+                pluginOptions.distOutputDir =
+                  pluginOptions.distOutputDir ||
                   config.output?.path ||
                   path.resolve(process.cwd(), 'dist');
               }
             },
             webpack(config, { isServer }) {
               if (isServer) {
-                if (!userConfig.nodePlugin) {
-                  userConfig.nodePlugin = new ModuleFederationPlugin(
-                    userConfig.ssrConfig,
+                if (!pluginOptions.nodePlugin) {
+                  pluginOptions.nodePlugin = new ModuleFederationPlugin(
+                    pluginOptions.ssrConfig,
                   );
                   // @ts-ignore
-                  config.plugins?.push(userConfig.nodePlugin);
+                  config.plugins?.push(pluginOptions.nodePlugin);
                 }
               } else {
-                userConfig.distOutputDir =
-                  userConfig.distOutputDir ||
+                pluginOptions.distOutputDir =
+                  pluginOptions.distOutputDir ||
                   config.output?.path ||
                   path.resolve(process.cwd(), 'dist');
               }
@@ -133,11 +133,11 @@ export const moduleFederationSSRPlugin = (
         };
       },
       afterBuild: () => {
-        const { nodePlugin, browserPlugin, distOutputDir } = userConfig;
+        const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions;
         updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir);
       },
       afterDev: () => {
-        const { nodePlugin, browserPlugin, distOutputDir } = userConfig;
+        const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions;
         updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir);
       },
     };

packages/modernjs/src/types/index.ts

@@ -5,6 +5,7 @@ import type { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@mo
 export interface PluginOptions {
   config?: moduleFederationPlugin.ModuleFederationPluginOptions;
   configPath?: string;
+  ssr?: false;
   remoteIpStrategy?: 'ipv4' | 'inherit';
 }
 
@@ -16,7 +17,9 @@ export interface InternalModernPluginOptions {
   browserPlugin?: BundlerPlugin;
   nodePlugin?: BundlerPlugin;
   remoteIpStrategy?: 'ipv4' | 'inherit';
+  userConfig?: PluginOptions;
 }
+
 export type BundlerPlugin =
   | WebpackModuleFederationPlugin
   | RspackModuleFederationPlugin;