feat(enhanced): make hoisted runtime the default implementation

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/next-app-router-4000/.env

@@ -0,0 +1,2 @@
+NEXT_PRIVATE_LOCAL_WEBPACK=true
+NODE_OPTIONS="--experimental-vm-modules"

apps/next-app-router-4001/.env

@@ -0,0 +1,2 @@
+NEXT_PRIVATE_LOCAL_WEBPACK=true
+NODE_OPTIONS="--experimental-vm-modules"

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 (