chore(modern-js-plugin): add disableSSR option (#3355)

Author: 2heal1

.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/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/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 })
+  ],
+});
+```

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;