feat(enhanced): make hoisted runtime the default implementation

.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,
       ]);

apps/modernjs/project.json

@@ -8,13 +8,13 @@
   "targets": {
     "build": {
       "executor": "nx:run-commands",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "dependencies": true
-          }
-        ],
         "commands": [
           {
             "command": "cd apps/modernjs; pnpm run build",
@@ -25,13 +25,13 @@
     },
     "serve": {
       "executor": "nx:run-commands",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "dependencies": true
-          }
-        ],
         "commands": [
           {
             "command": "cd apps/modernjs; pnpm run dev",

apps/node-host/src/bootstrap.js

@@ -1,93 +0,0 @@
-/**
- * This is not a production server yet!
- * This is only a minimal backend to get started.
- */
-
-import express from 'express';
-import * as path from 'path';
-import node_local_remote from 'node_local_remote/test';
-import { registerRemotes, loadRemote } from '@module-federation/runtime';
-
-registerRemotes([
-  {
-    name: 'node_dynamic_remote',
-    entry: 'http://localhost:3026/remoteEntry.js',
-  },
-]);
-
-const getMemoryUsage = () => {
-  const formatSize = (bytes) => `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-
-  const memory = process.memoryUsage();
-  return `Time: ${new Date()}\nheap total: ${formatSize(
-    memory.heapTotal,
-  )} heapUsed: ${formatSize(memory.heapUsed)} rss: ${formatSize(memory.rss)}`;
-};
-
-const remoteMsg = import('node_remote/test').then((m) => {
-  console.log('\x1b[32m%s\x1b[0m', m.default || m);
-  return m.default || m;
-});
-console.log('\x1b[32m%s\x1b[0m', node_local_remote);
-
-const app = express();
-
-app.use('/assets', express.static(path.join(__dirname, 'assets')));
-
-app.get('/api', async (req, res) => {
-  res.send({
-    message: 'Welcome to node-host!',
-    remotes: {
-      node_remote: await remoteMsg,
-      node_local_remote,
-    },
-  });
-});
-
-app.get('/dynamic-remote', async (req, res) => {
-  const dynamicRemote = await loadRemote('node_dynamic_remote/test-with-axios');
-
-  res.send({
-    message: 'dynamic remote',
-    dynamicRemote: dynamicRemote(),
-  });
-});
-
-app.get('/upgrade-remote', async (req, res) => {
-  registerRemotes(
-    [
-      {
-        name: 'node_dynamic_remote',
-        entry: 'http://localhost:3027/remoteEntry.js',
-      },
-    ],
-    { force: true },
-  );
-
-  res.send({
-    message: 'Upgrade success!',
-  });
-});
-
-app.get('/memory-cache', async (req, res) => {
-  const memoryUsage = getMemoryUsage();
-  console.log(memoryUsage);
-  res.send({
-    message: 'memory-cache',
-    memoryUsage: memoryUsage,
-  });
-});
-
-app.get('/federation-info', async (req, res) => {
-  console.log(global.__FEDERATION__);
-  console.log(global.__FEDERATION__.__INSTANCES__[0].moduleCache);
-  res.send({
-    message: 'federation info will be output in terminal !',
-  });
-});
-
-const port = process.env.PORT || 3333;
-const server = app.listen(port, () => {
-  console.log(`Listening at http://localhost:${port}/api`);
-});
-server.on('error', console.error);