feat(enhanced): make hoisted runtime the default implementation

.cursorrules

@@ -0,0 +1,40 @@
+an assistant that engages in extremely thorough, self-questioning reasoning. Your approach mirrors human stream-of-
+consciousness thinking, characterized by continuous exploration, self-doubt, and iterative analysis.
+## Core Principles
+1. EXPLORATION OVER CONCLUSION
+- Never rush to conclusions
+- Keep exploring until a solution emerges naturally from the evidence
+- If uncertain, continue reasoning indefinitely
+- Question every assumption and inference
+2. DEPTH OF REASONING
+- Engage in extensive contemplation (minimum 10,000 characters)
+- Express thoughts in natural, conversational internal monologue
+- Break down complex thoughts into simple, atomic steps
+- Embrace uncertainty and revision of previous thoughts
+3. THINKING PROCESS
+- Use short, simple sentences that mirror natural thought patterns
+- Express uncertainty and internal debate freely
+- Show work-in-progress thinking
+- Acknowledge and explore dead ends
+- Frequently backtrack and revise
+- Contemplate before each new action
+- Contemplate after each and every step
+4. PERSISTENCE
+- Value thorough exploration over quick resolution
+## Output Format
+Your responses
+must follow this exact structure given below.
+Make sure
+to
+always include the final answer.
+...
+<contemplator>
+Your extensive internal monologue goes here
+- Begin with small, foundational observations
+- read each file related to the subject in full, make functional observations
+- Question each step thoroughly
+- Show natural thought progression
+- Express doubts and uncertainties
+- Revise and backtrack if you need to
+- Continue until natural resolution </contemplator>
+

.gitignore

@@ -9,7 +9,7 @@
 /.nx
 # dependencies
 node_modules
-
+./webpack-lib
 # IDEs and editors
 /.idea
 .project
@@ -70,4 +70,4 @@ packages/enhanced/test/js
 # storybook cases
 !apps/rslib-module/@mf-types/**
 
-**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*
+**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*

apps/manifest-demo/webpack-host/webpack.config.js

@@ -44,11 +44,10 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
         },
       },
       dataPrefetch: true,
-      // experiments: { federationRuntime: 'hoisted' },
       runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
       experiments: {
         provideExternalRuntime: true,
-        federationRuntime: 'hoisted',
+        asyncStartup: true,
       },
     }),
   );
@@ -61,6 +60,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   });
   if (config.devServer) {
     config.devServer.client.overlay = false;
+    config.devServer.devMiddleware.writeToDisk = true;
   }
   config.entry = './src/index.tsx';
   //Temporary workaround - https://github.com/nrwl/nx/issues/16983

apps/modernjs/modern.config.ts

@@ -41,6 +41,9 @@ export default defineConfig({
             './react-component': './src/components/react-component.tsx',
           },
           runtimePlugins: ['./runtimePlugin.ts'],
+          experiments: {
+            asyncStartup: true,
+          },
           filename: 'remoteEntry.js',
           shared: {
             'react/': {
@@ -60,9 +63,6 @@ export default defineConfig({
               requiredVersion: '^18.3.1',
             },
           },
-          experiments: {
-            federationRuntime: 'hoisted',
-          },
           dataPrefetch: true,
         }) as any,
       ]);

apps/node-host/src/bootstrap.js

@@ -38,8 +38,8 @@ app.get('/api', async (req, res) => {
   res.send({
     message: 'Welcome to node-host!',
     remotes: {
-      node_remote: await remoteMsg,
-      node_local_remote,
+      // node_remote: await remoteMsg,
+      // node_local_remote,
     },
   });
 });

apps/runtime-demo/3005-runtime-host/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   config.plugins.push(
     new ModuleFederationPlugin({
       name: 'runtime_host',
-      experiments: { federationRuntime: 'hoisted' },
+      experiments: { asyncStartup: true },
       remotes: {
         // remote2: 'runtime_remote2@http://localhost:3007/remoteEntry.js',
         remote1: 'runtime_remote1@http://127.0.0.1:3006/mf-manifest.json',

apps/runtime-demo/3006-runtime-remote/webpack.config.js

@@ -39,6 +39,9 @@ module.exports = composePlugins(
           './WebpackPng': './src/components/WebpackPng',
         },
         shareStrategy: 'loaded-first',
+        experiments: {
+          asyncStartup: true,
+        },
         shared: {
           lodash: {
             singleton: true,

packages/enhanced/src/lib/container/ContainerEntryDependency.ts

@@ -20,32 +20,27 @@ class ContainerEntryDependency extends Dependency {
   public exposes: [string, ExposeOptions][];
   public shareScope: string;
   public injectRuntimeEntry: string;
-  /** Additional experimental options for container plugin customization */
-  public experiments: containerPlugin.ContainerPluginOptions['experiments'];
   public dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'];
 
   /**
    * @param {string} name entry name
    * @param {[string, ExposeOptions][]} exposes list of exposed modules
    * @param {string} shareScope name of the share scope
    * @param {string[]} injectRuntimeEntry the path of injectRuntime file.
-   * @param {containerPlugin.ContainerPluginOptions['experiments']} experiments additional experiments options
    * @param {containerPlugin.ContainerPluginOptions['dataPrefetch']} dataPrefetch whether enable dataPrefetch
    */
   constructor(
     name: string,
     exposes: [string, ExposeOptions][],
     shareScope: string,
     injectRuntimeEntry: string,
-    experiments: containerPlugin.ContainerPluginOptions['experiments'],
     dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'],
   ) {
     super();
     this.name = name;
     this.exposes = exposes;
     this.shareScope = shareScope;
     this.injectRuntimeEntry = injectRuntimeEntry;
-    this.experiments = experiments;
     this.dataPrefetch = dataPrefetch;
   }
 

packages/enhanced/src/lib/container/ContainerEntryModule.ts

@@ -64,31 +64,27 @@ class ContainerEntryModule extends Module {
   private _exposes: [string, ExposeOptions][];
   private _shareScope: string;
   private _injectRuntimeEntry: string;
-  private _experiments: containerPlugin.ContainerPluginOptions['experiments'];
   private _dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'];
 
   /**
    * @param {string} name container entry name
    * @param {[string, ExposeOptions][]} exposes list of exposed modules
    * @param {string} shareScope name of the share scope
    * @param {string} injectRuntimeEntry the path of injectRuntime file.
-   * @param {containerPlugin.ContainerPluginOptions['experiments']} experiments additional experiments options
    * @param {containerPlugin.ContainerPluginOptions['dataPrefetch']} dataPrefetch whether enable dataPrefetch
    */
   constructor(
     name: string,
     exposes: [string, ExposeOptions][],
     shareScope: string,
     injectRuntimeEntry: string,
-    experiments: containerPlugin.ContainerPluginOptions['experiments'],
     dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'],
   ) {
     super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, null);
     this._name = name;
     this._exposes = exposes;
     this._shareScope = shareScope;
     this._injectRuntimeEntry = injectRuntimeEntry;
-    this._experiments = experiments;
     this._dataPrefetch = dataPrefetch;
   }
 
@@ -104,7 +100,6 @@ class ContainerEntryModule extends Module {
       read(),
       read(),
       read(),
-      read(),
     );
     obj.deserialize(context);
     return obj;
@@ -122,7 +117,7 @@ class ContainerEntryModule extends Module {
   override identifier(): string {
     return `container entry (${this._shareScope}) ${JSON.stringify(
       this._exposes,
-    )} ${this._injectRuntimeEntry} ${JSON.stringify(this._experiments)} ${JSON.stringify(this._dataPrefetch)}`;
+    )} ${this._injectRuntimeEntry} ${JSON.stringify(this._dataPrefetch)}`;
   }
   /**
    * @param {RequestShortener} requestShortener the request shortener
@@ -203,9 +198,8 @@ class ContainerEntryModule extends Module {
       ) as unknown as Dependency,
     );
 
-    if (!this._experiments?.federationRuntime) {
-      this.addDependency(new EntryDependency(this._injectRuntimeEntry));
-    }
+    this.addDependency(new EntryDependency(this._injectRuntimeEntry));
+
     callback();
   }
 
@@ -272,18 +266,6 @@ class ContainerEntryModule extends Module {
         )}`,
       );
     }
-    const initRuntimeDep = this.dependencies[1];
-    // no runtime module getter needed if runtime is hoisted
-    const initRuntimeModuleGetter = this._experiments?.federationRuntime
-      ? ''
-      : runtimeTemplate.moduleRaw({
-          module: moduleGraph.getModule(initRuntimeDep),
-          chunkGraph,
-          // @ts-expect-error flaky type definition for Dependency
-          request: initRuntimeDep.userRequest,
-          weak: false,
-          runtimeRequirements,
-        });
     const federationGlobal = getFederationGlobalScope(
       RuntimeGlobals || ({} as typeof RuntimeGlobals),
     );
@@ -326,7 +308,6 @@ class ContainerEntryModule extends Module {
         ],
       )};`,
       this._dataPrefetch ? PrefetchPlugin.setRemoteIdentifier() : '',
-      `${initRuntimeModuleGetter}`,
       this._dataPrefetch ? PrefetchPlugin.removeRemoteIdentifier() : '',
       '// This exports getters to disallow modifications',
       `${RuntimeGlobals.definePropertyGetters}(exports, {`,
@@ -366,7 +347,6 @@ class ContainerEntryModule extends Module {
     write(this._exposes);
     write(this._shareScope);
     write(this._injectRuntimeEntry);
-    write(this._experiments);
     write(this._dataPrefetch);
     super.serialize(context);
   }

packages/enhanced/src/lib/container/ContainerEntryModuleFactory.ts

@@ -38,7 +38,6 @@ export default class ContainerEntryModuleFactory extends ModuleFactory {
         dep.exposes,
         dep.shareScope,
         dep.injectRuntimeEntry,
-        dep.experiments,
         dep.dataPrefetch,
       ),
     });

packages/enhanced/src/lib/container/ContainerPlugin.ts

@@ -68,7 +68,6 @@ class ContainerPlugin {
         }),
       ),
       runtimePlugins: options.runtimePlugins,
-      experiments: options.experiments,
       dataPrefetch: options.dataPrefetch,
     };
   }
@@ -205,7 +204,6 @@ class ContainerPlugin {
           exposes,
           shareScope,
           federationRuntimePluginInstance.entryFilePath,
-          this._options.experiments,
           this._options.dataPrefetch,
         );
         dep.loc = { name };
@@ -284,7 +282,6 @@ class ContainerPlugin {
           exposes,
           shareScope,
           federationRuntimePluginInstance.entryFilePath,
-          this._options.experiments,
           this._options.dataPrefetch,
         );
 

packages/enhanced/src/lib/container/ModuleFederationPlugin.ts

@@ -93,8 +93,10 @@ class ModuleFederationPlugin implements WebpackPluginInstance {
       }).apply(compiler);
     }
 
-    if (options.experiments?.federationRuntime) {
-      new FederationModulesPlugin().apply(compiler);
+    // federation hooks
+    new FederationModulesPlugin().apply(compiler);
+
+    if (options.experiments?.asyncStartup) {
       new StartupChunkDependenciesPlugin({
         asyncChunkLoading: true,
       }).apply(compiler);
@@ -158,7 +160,6 @@ class ModuleFederationPlugin implements WebpackPluginInstance {
           shareScope: options.shareScope,
           exposes: options.exposes!,
           runtimePlugins: options.runtimePlugins,
-          experiments: options.experiments,
         }).apply(compiler);
       }
       if (

packages/enhanced/src/lib/container/runtime/EmbedFederationRuntimeModule.ts

@@ -8,14 +8,15 @@ import ContainerEntryDependency from '../ContainerEntryDependency';
 import type { NormalModule as NormalModuleType } from 'webpack';
 import type FederationRuntimeDependency from './FederationRuntimeDependency';
 
-const { RuntimeModule, Template } = require(
+const { RuntimeModule, Template, RuntimeGlobals } = require(
   normalizeWebpackPath('webpack'),
 ) as typeof import('webpack');
 
 class EmbedFederationRuntimeModule extends RuntimeModule {
   private containerEntrySet: Set<
     ContainerEntryDependency | FederationRuntimeDependency
   >;
+  public override _cachedGeneratedCode: string | undefined;
 
   constructor(
     containerEntrySet: Set<
@@ -24,13 +25,17 @@ class EmbedFederationRuntimeModule extends RuntimeModule {
   ) {
     super('embed federation', RuntimeModule.STAGE_ATTACH);
     this.containerEntrySet = containerEntrySet;
+    this._cachedGeneratedCode = undefined;
   }
 
   override identifier() {
     return 'webpack/runtime/embed/federation';
   }
 
   override generate(): string | null {
+    if (this._cachedGeneratedCode !== undefined) {
+      return this._cachedGeneratedCode;
+    }
     const { compilation, chunk, chunkGraph } = this;
     if (!chunk || !chunkGraph || !compilation) {
       return null;
@@ -55,7 +60,16 @@ class EmbedFederationRuntimeModule extends RuntimeModule {
       weak: false,
       runtimeRequirements: new Set(),
     });
-    return Template.asString([`${initRuntimeModuleGetter}`]);
+
+    const result = Template.asString([
+      `var oldStartup = ${RuntimeGlobals.startup};`,
+      `${RuntimeGlobals.startup} = ${compilation.runtimeTemplate.basicFunction(
+        '',
+        [`${initRuntimeModuleGetter};`, `return oldStartup();`],
+      )};`,
+    ]);
+    this._cachedGeneratedCode = result;
+    return result;
   }
 }
 export default EmbedFederationRuntimeModule;