fix: support rspack ssr live reload (#2801)

Author: 2heal1

apps/modernjs-ssr/dynamic-nested-remote/tsconfig.json

@@ -10,6 +10,6 @@
       "*": ["./@mf-types/*"]
     }
   },
-  "include": ["src", "shared", "config", "modern.config.ts", "./@mf-types"],
+  "include": ["src", "shared", "config", "modern.config.ts", "@mf-types"],
   "exclude": ["**/node_modules"]
 }

packages/modernjs/src/cli/configPlugin.ts

@@ -36,11 +36,13 @@ export function modifyBundlerConfig<T extends Bundler>(options: {
     isServer,
     modernjsConfig,
     remoteIpStrategy = 'ipv4',
+    bundlerType,
   } = options;
 
   patchMFConfig(mfConfig, isServer, remoteIpStrategy);
 
   patchBundlerConfig({
+    bundlerType,
     bundlerConfig: config,
     isServer,
     modernjsConfig,

packages/modernjs/src/cli/ssrPlugin.ts

@@ -4,7 +4,7 @@ import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 import type { InternalModernPluginOptions } from '../types';
 import { ModuleFederationPlugin } from '@module-federation/enhanced';
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@module-federation/enhanced/rspack';
-import { EntryChunkTrackerPlugin } from '@module-federation/node';
+import { UniverseEntryChunkTrackerPlugin } from '@module-federation/node';
 import { updateStatsAndManifest } from './manifest';
 import { MODERN_JS_SERVER_DIR, PLUGIN_IDENTIFIER } from '../constant';
 import { isDev } from './constant';
@@ -82,12 +82,6 @@ export const moduleFederationSSRPlugin = (
                   // @ts-ignore
                   config.plugins?.push(userConfig.nodePlugin);
                 }
-                // config.plugins?.push(
-                //   new StreamingTargetPlugin(userConfig.nodePlugin),
-                // );
-                if (isDev) {
-                  config.plugins?.push(new EntryChunkTrackerPlugin());
-                }
               } else {
                 userConfig.distOutputDir =
                   userConfig.distOutputDir ||
@@ -137,6 +131,11 @@ export const moduleFederationSSRPlugin = (
             bundlerChain(chain, { isServer }) {
               if (isServer) {
                 chain.target('async-node');
+                if (isDev) {
+                  chain
+                    .plugin('UniverseEntryChunkTrackerPlugin')
+                    .use(UniverseEntryChunkTrackerPlugin);
+                }
               }
               if (isDev && !isServer) {
                 chain.externals({

packages/modernjs/src/cli/utils.spec.ts

@@ -98,6 +98,7 @@ describe('patchBundlerConfig', async () => {
       },
     };
     patchBundlerConfig<'webpack'>({
+      bundlerType: 'webpack',
       bundlerConfig,
       isServer: true,
       modernjsConfig: {
@@ -117,7 +118,7 @@ describe('patchBundlerConfig', async () => {
         uniqueName: 'host',
       },
       watchOptions: {
-        ignored: ['@mf-types'],
+        ignored: ['**/@mf-types/**'],
       },
     };
     // @ts-ignore temp ignore
@@ -134,6 +135,7 @@ describe('patchBundlerConfig', async () => {
       },
     };
     patchBundlerConfig<'webpack'>({
+      bundlerType: 'webpack',
       bundlerConfig,
       isServer: false,
       modernjsConfig: {
@@ -153,7 +155,7 @@ describe('patchBundlerConfig', async () => {
         uniqueName: 'host',
       },
       watchOptions: {
-        ignored: ['@mf-types'],
+        ignored: ['**/@mf-types/**'],
       },
     };
     // @ts-ignore temp ignore

packages/modernjs/src/cli/utils.ts

@@ -225,39 +225,44 @@ export function patchBundlerConfig<T extends Bundler>(options: {
   bundlerConfig: BundlerConfig<T>;
   isServer: boolean;
   modernjsConfig: UserConfig<AppTools>;
+  bundlerType: Bundler;
   mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;
 }) {
-  const { bundlerConfig, modernjsConfig, isServer, mfConfig } = options;
+  const { bundlerConfig, modernjsConfig, isServer, mfConfig, bundlerType } =
+    options;
   const enableSSR = Boolean(modernjsConfig.server?.ssr);
 
   delete bundlerConfig.optimization?.runtimeChunk;
 
   patchIgnoreWarning(bundlerConfig);
 
-  bundlerConfig.watchOptions = bundlerConfig.watchOptions || {};
-  if (!Array.isArray(bundlerConfig.watchOptions.ignored)) {
-    if (bundlerConfig.watchOptions.ignored) {
-      bundlerConfig.watchOptions.ignored = [
-        bundlerConfig.watchOptions.ignored as string,
-      ];
-    } else {
-      bundlerConfig.watchOptions.ignored = [];
+  if (bundlerType === 'webpack') {
+    bundlerConfig.watchOptions = bundlerConfig.watchOptions || {};
+    if (!Array.isArray(bundlerConfig.watchOptions.ignored)) {
+      if (bundlerConfig.watchOptions.ignored) {
+        bundlerConfig.watchOptions.ignored = [
+          bundlerConfig.watchOptions.ignored as string,
+        ];
+      } else {
+        bundlerConfig.watchOptions.ignored = [];
+      }
     }
-  }
-  if (mfConfig.dts !== false) {
-    if (
-      typeof mfConfig.dts === 'object' &&
-      typeof mfConfig.dts.consumeTypes === 'object' &&
-      mfConfig.dts.consumeTypes.remoteTypesFolder
-    ) {
-      bundlerConfig.watchOptions.ignored.push(
-        mfConfig.dts.consumeTypes.remoteTypesFolder,
-      );
+    if (mfConfig.dts !== false) {
+      if (
+        typeof mfConfig.dts === 'object' &&
+        typeof mfConfig.dts.consumeTypes === 'object' &&
+        mfConfig.dts.consumeTypes.remoteTypesFolder
+      ) {
+        bundlerConfig.watchOptions.ignored.push(
+          `**/${mfConfig.dts.consumeTypes.remoteTypesFolder}/**`,
+        );
+      } else {
+        bundlerConfig.watchOptions.ignored.push('**/@mf-types/**');
+      }
     } else {
-      bundlerConfig.watchOptions.ignored.push('@mf-types');
+      bundlerConfig.watchOptions.ignored.push('**/@mf-types/**');
     }
   }
-
   if (bundlerConfig.output) {
     if (!bundlerConfig.output?.chunkLoadingGlobal) {
       bundlerConfig.output.chunkLoadingGlobal = `chunk_${mfConfig.name}`;

packages/node/global.d.ts

@@ -11,7 +11,7 @@ declare module 'webpack/lib/RuntimeModule';
 declare module 'webpack/lib/Template';
 declare module 'webpack/lib/util/compileBooleanMatcher';
 declare module 'webpack/lib/util/identifier';
-
+declare module 'btoa';
 declare global {
   namespace NodeJS {
     interface Global {

packages/node/package.json

@@ -57,6 +57,7 @@
   "author": "Zack Jackson <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "btoa": "1.2.1",
     "encoding": "^0.1.13",
     "node-fetch": "2.7.0",
     "@module-federation/enhanced": "workspace:*",

packages/node/src/index.ts

@@ -4,3 +4,4 @@ export { default as UniversalFederationPlugin } from './plugins/UniversalFederat
 export { default as ChunkCorrelationPlugin } from './plugins/ChunkCorrelationPlugin';
 export { default as RemotePublicPathPlugin } from './plugins/RemotePublicPathRuntimeModule';
 export { default as EntryChunkTrackerPlugin } from './plugins/EntryChunkTrackerPlugin';
+export { default as UniverseEntryChunkTrackerPlugin } from './plugins/UniverseEntryChunkTrackerPlugin';

packages/node/src/plugins/UniverseEntryChunkTrackerPlugin.ts

@@ -0,0 +1,28 @@
+import pBtoa from 'btoa';
+import type { WebpackPluginInstance, Compiler } from 'webpack';
+
+class UniverseEntryChunkTrackerPlugin implements WebpackPluginInstance {
+  apply(compiler: Compiler) {
+    const code = `
+    if(typeof module !== 'undefined') {
+    globalThis.entryChunkCache = globalThis.entryChunkCache || new Set();
+    module.filename && globalThis.entryChunkCache.add(module.filename);
+    if(module.children) {
+    module.children.forEach(function(c) {
+      c.filename && globalThis.entryChunkCache.add(c.filename);
+    })
+}
+  }
+    `;
+    const base64Code = pBtoa(code);
+    const dataUrl = `data:text/javascript;base64,${base64Code}`;
+
+    compiler.hooks.afterPlugins.tap('UniverseEntryChunkTrackerPlugin', () => {
+      new compiler.webpack.EntryPlugin(compiler.context, dataUrl, {}).apply(
+        compiler,
+      );
+    });
+  }
+}
+
+export default UniverseEntryChunkTrackerPlugin;