feat(enhanced): make hoisted runtime the default implementation (#3453)

Author: ScriptedAlchemy

.changeset/ai-eager-lion.md

@@ -0,0 +1,13 @@
+---
+"@module-federation/enhanced": minor
+---
+
+Enhanced module federation plugin to remove the `federationRuntime` experiment and replace it with `asyncStartup`.
+
+- Dropped support for `federationRuntime` experiment and introduced `asyncStartup` to enable asynchronous container startup.
+- Refactored EmbedFederationRuntimePlugin for improved runtime embedding and startup management.
+  - Added options to enable runtime embedding for all chunks.
+  - Integrated measures to ensure proper initialization and avoid duplicate hooks.
+- Simplified constructor and class dependencies by removing the `experiments` parameter.
+- Revised schema and validation definitions to accommodate new asynchronous startup configurations.
+- Updated test cases to reflect the change from `federationRuntime` to `asyncStartup`.

.changeset/ai-happy-bear.md

@@ -0,0 +1,6 @@
+---
+"@module-federation/nextjs-mf": patch
+---
+
+- Changed experiment configuration from `federationRuntime: 'hoisted'` to `asyncStartup: true`.
+- Improved initialization logic in the runtime module to enable better caching and startup handling.

.changeset/ai-lazy-dog.md

@@ -0,0 +1,7 @@
+---
+"@module-federation/sdk": minor
+---
+
+- Removed `federationRuntime` option from `ContainerPluginOptions`'s `experiments`.
+- Removed `federationRuntime` option from `ModuleFederationPluginOptions`'s `experiments`.
+- Added `asyncStartup` option to `ModuleFederationPluginOptions`'s `experiments`.

.cursorignore

@@ -52,6 +52,8 @@ tools/
 .vscode/
 .verdaccio/
 
+!apps/manifest-demo/*.ts
+
 # Ignore specific files
 .cursorignore
 jest.preset.js

.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>
+

.github/workflows/e2e-next-dev.yml

@@ -48,6 +48,7 @@ jobs:
       - name: E2E Test for Next.js Dev
         if: steps.check-ci.outcome == 'success'
         run: |
+          npx kill-port 3000,3001,3002 &&
           pnpm run app:next:dev &
           sleep 1 &&
           npx wait-on tcp:3001 &&

.gitignore

@@ -9,7 +9,7 @@
 /.nx
 # dependencies
 node_modules
-
+./webpack-lib
 # IDEs and editors
 /.idea
 .project
@@ -70,4 +70,5 @@ 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*
+/webpack-lib/

apps/manifest-demo/3009-webpack-provider/webpack.config.js

@@ -15,6 +15,12 @@ module.exports = composePlugins(
     config.watchOptions = {
       ignored: ['**/node_modules/**', '**/@mf-types/**'],
     };
+    config.devServer = {
+      ...config.devServer,
+      devMiddleware: {
+        writeToDisk: true,
+      },
+    };
     // publicPath must be specific url
     config.output.publicPath = 'auto';
     config.plugins.push(

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

@@ -13,6 +13,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   };
   config.plugins.push(
     new ModuleFederationPlugin({
+      runtime: false,
       name: 'manifest_host',
       remotes: {
         remote1: 'webpack_provider@http://localhost:3009/mf-manifest.json',
@@ -44,11 +45,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,7 +61,9 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
   });
   if (config.devServer) {
     config.devServer.client.overlay = false;
+    config.devServer.devMiddleware.writeToDisk = true;
   }
+  config.devtool = false;
   config.entry = './src/index.tsx';
   //Temporary workaround - https://github.com/nrwl/nx/issues/16983
   config.experiments = { outputModule: false };

apps/modernjs/modern.config.ts

@@ -35,12 +35,16 @@ export default defineConfig({
 
       appendPlugins([
         new ModuleFederationPlugin({
+          runtime: false,
           name: 'app1',
           exposes: {
             './thing': './src/test.ts',
             './react-component': './src/components/react-component.tsx',
           },
           runtimePlugins: ['./runtimePlugin.ts'],
+          experiments: {
+            asyncStartup: true,
+          },
           filename: 'remoteEntry.js',
           shared: {
             'react/': {
@@ -60,9 +64,6 @@ export default defineConfig({
               requiredVersion: '^18.3.1',
             },
           },
-          experiments: {
-            federationRuntime: 'hoisted',
-          },
           dataPrefetch: true,
         }) as any,
       ]);