feat(enhanced): fully hoisted runtime (#2932)

Co-authored-by: squadronai[bot] <170149692+squadronai[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Hanric <[email protected]>

Author: 4 people

.changeset/ai-brave-tiger.md

@@ -0,0 +1,10 @@
+---
+"@module-federation/data-prefetch": patch
+---
+
+Refactored the way prefetch entries are imported for improved dynamic loading handling.
+
+- Changed the import of prefetch entries to use a function wrapper for more dynamic control.
+- Updated data types to ensure consistency with the new function-based import approach.
+- Modified the `injectPrefetch` function structure to incorporate the new import method.
+- Modified the `MFDataPrefetch` class to handle the new import function when resolving exports.

.changeset/ai-brave-wolf.md

@@ -0,0 +1,11 @@
+---
+"@module-federation/nextjs-mf": minor
+---
+
+Simplified InvertedContainerPlugin by removing configuration dependencies and improving runtime module integration.
+
+- Refactored `InvertedContainerPlugin` to remove redundant configurations.
+- Deleted `EmbeddedContainerPlugin` and moved its logic into `InvertedContainerPlugin`.
+- Modified `InvertedContainerRuntimeModule` to dynamically locate and integrate container entry modules.
+- Commented out runtime chunk creation in `configureServerCompilerOptions`.
+- Enhanced module dependency handling using `FederationModulesPlugin` hooks.

.changeset/ai-hungry-wolf.md

@@ -0,0 +1,13 @@
+---
+"@module-federation/runtime": patch
+---
+
+Added comprehensive integration tests for the API synchronization and enhanced the embedded module proxy implementation.
+
+- Added detailed integration tests for API consistency between embedded and index modules.
+  - Tests include export comparison and method consistency for `FederationHost` and `Module` classes.
+- Introduced and updated the `embedded.ts` file to dynamically access the runtime modules at runtime.
+  - Included detailed implementations for accessing and wrapping existing runtime functions.
+- Exposed the previously private `formatOptions` method in the `FederationHost` class publicly.
+- Enhanced error handling for uninstantiated or unregistered runtime access.
+```

.changeset/ai-lazy-cat.md

@@ -0,0 +1,11 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Added support for hoisting federation runtime modules and enhancing dependency management.
+
+- Introduced `FederationModulesPlugin` to handle federation-related hooks and dependencies.
+- Added new `FederationRuntimeDependency` and logic to include it conditionally.
+- Enhanced `ContainerPlugin` and related plugins to support experimental `federationRuntime` options.
+- Modified `HoistContainerReferencesPlugin` to hoist additional modules in chunks.
+- Implemented changes across multiple files to support the new plugin and dependency management features.

.changeset/ai-quick-lion.md

@@ -0,0 +1,9 @@
+---
+"@module-federation/sdk": patch
+---
+
+Added experimental option for federation runtime in ContainerPluginOptions.
+
+- Extended `ContainerPluginOptions` to include an `experiments` property.
+  - Within `experiments`, added a `federationRuntime` option.
+    - `federationRuntime` can be either `false` or `'hoisted'`.

.changeset/ai-sleepy-lion.md

@@ -0,0 +1,9 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Refactor `HoistContainerReferencesPlugin` to optimize module disconnection and cleanup logic.
+
+- Removed `moduleToDelete` set as it was redundant.
+- Ensured all referenced modules are disconnected from unused chunks directly.
+- Added call to `cleanUpChunks` within the main loop to clean up chunks using `allReferencedModules`.

.changeset/chilly-rocks-deliver.md

@@ -0,0 +1,14 @@
+---
+"@module-federation/runtime": patch
+---
+
+- Refactor `embedded.ts` to use a proxy pattern for better runtime compatibility:
+  - Implement FederationHost and Module classes that delegate to the actual runtime implementation
+  - Expose all public methods and properties from the original classes
+  - Use a lazy initialization approach to ensure proper runtime loading
+- Add comprehensive test suite for API synchronization between embedded.ts and index.ts
+  - Introduce new test file `sync.spec.ts` with extensive tests for API compatibility
+  - Ensure FederationHost and Module classes have the same methods in both files
+  - Test various scenarios including remote loading, manifest handling, and circular dependencies
+  - Modify `core.ts` to make `formatOptions` method public
+

.changeset/eight-comics-reflect.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+handle chunk entry modules correctly in MfStartupChunkDependenciesPlugin

.github/workflows/build-and-test.yml

@@ -36,14 +36,17 @@ jobs:
       - name: Check Code Format
         run: npx nx format:check
 
+      - name: Warm Nx Cache
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
+
       - name: Run Build for All
         run: npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache
 
       - name: Run Affected Test
         run: npx nx affected -t test --parallel=2 --exclude='*,!tag:type:pkg' --skip-nx-cache
 
-      - name: Warm Nx Cache
-        run: npx nx run-many --targets=build --projects=tag:type:pkg
+      - name: Run Affected Experimental Tests
+        run: npx nx affected -t test:experiments --parallel=2 --exclude='*,!tag:type:pkg' --skip-nx-cache
 
   e2e-modern:
     needs: checkout-install

.github/workflows/devtools.yml

@@ -35,14 +35,35 @@ jobs:
         run: pnpm install
 
       - name: Run Affected Build
-        run: npx nx run-many --targets=build --projects=tag:type:pkg  --skip-nx-cache
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
 
       - name: Configuration xvfb
         shell: bash
         run: sudo apt-get update && sudo apt-get install xvfb
 
-      - name: E2E Chrome Devtools
-        run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 tcp:3010 tcp:3011 tcp:3012 && sleep 10 && npx nx e2e:devtools chrome-devtools
+      - name: E2E Chrome Devtools Dev
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 10
+          max_attempts: 3 # Initial attempt + 2 retries
+          command: |
+            npx kill-port 3009 3010 3011 3012 3013 4001 &&
+            pnpm run app:manifest:dev & echo "done" && \
+            npx wait-on tcp:3009 tcp:3010 tcp:3011 tcp:3012 tcp:3013 && \
+            sleep 10 &&
+            npx nx e2e:devtools chrome-devtools
+
+      - name: E2E Chrome Devtools Prod
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 10
+          max_attempts: 3 # Initial attempt + 2 retries
+          command: |
+            npx kill-port 3009 3010 3011 3012 3013 4001 &&
+            pnpm run app:manifest:prod & echo "done" && \
+            npx wait-on tcp:3009 tcp:3010 tcp:3011 tcp:3012 tcp:3013 && \
+            sleep 10 &&
+            npx nx e2e:devtools chrome-devtools
 
       - name: kill port
-        run: lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill
+        run: npx kill-port 3013 3009 3010 3011 3012 4001

.github/workflows/e2e-manifest.yml

@@ -41,6 +41,10 @@ jobs:
         id: check-ci
         run: node tools/scripts/ci-is-affected.mjs --appName=manifest-webpack-host
 
-      - name: E2E Test for Manifest Demo
+      - name: E2E Test for Manifest Demo Development
         if: steps.check-ci.outcome == 'success'
         run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx wait-on http://127.0.0.1:4001/ && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && npx kill-port 3013 3009 3010 3011 3012 4001
+
+      - name: E2E Test for Manifest Demo Production
+        if: steps.check-ci.outcome == 'success'
+        run: pnpm run app:manifest:prod & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx wait-on http://127.0.0.1:4001/ && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && npx kill-port 3013 3009 3010 3011 3012 4001

.gitignore

@@ -66,3 +66,4 @@ packages/enhanced/test/js
 **/cache/**
 **/dist-test/**
 **/cypress/downloads
+/packages/data-prefetch/jest/cache/

ai-lint-fix.js

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+
+const { execSync, execFileSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const { OpenAI } = require('openai');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const glob = require('glob');
+// Initialize OpenAI client
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+// Parse command line arguments
+const argv = yargs(hideBin(process.argv))
+  .option('pattern', {
+    alias: 'p',
+    type: 'string',
+    description: 'Glob pattern to match files',
+  })
+  .option('path', {
+    alias: 'f',
+    type: 'string',
+    description: 'Path to a specific file',
+  })
+  .check((argv) => {
+    if (!argv.pattern && !argv.path) {
+      throw new Error('You must provide either a --pattern or --path argument');
+    }
+    return true;
+  })
+  .help()
+  .alias('help', 'h').argv;
+
+async function lintFileContent(fileContent) {
+  const prompt = `Perform safe cleanup and linting on the following file content.
+RULES:
+-Should preserve uses of normalizeWebpackPath
+-Should preserve uses of ts-ignore
+-Removed commented out code
+-Return only the updated file content with no other response text:
+
+${fileContent}`;
+
+  const response = await openai.chat.completions.create({
+    model: 'gpt-4o',
+    messages: [{ role: 'user', content: prompt }],
+    max_tokens: 4096,
+  });
+
+  let res = response.choices[0].message.content.trim().split('\n');
+  if (res[0].startsWith('`')) {
+    res[0] = undefined;
+  }
+
+  if (res[res.length - 1].startsWith('`')) {
+    res[res.length - 1] = undefined;
+  }
+
+  return res.filter((r) => r).join('\n');
+}
+
+async function processFile(filePath) {
+  const fileContent = fs.readFileSync(filePath, 'utf8');
+  try {
+    const lintedContent = await lintFileContent(fileContent);
+    fs.writeFileSync(filePath, lintedContent, 'utf8');
+    console.log(`File has been linted and updated successfully: ${filePath}`);
+    const tsConfigPath = findTsConfig(filePath);
+    try {
+      const tscOutput = execFileSync(
+        'tsc',
+        ['--noEmit', '--project', tsConfigPath],
+        {
+          stdio: 'pipe',
+        },
+      ).toString();
+      console.log(`TypeScript check passed for ${filePath}:\n${tscOutput}`);
+    } catch (error) {
+      console.error(
+        `TypeScript check failed for ${filePath}:\n${error.stdout.toString()}`,
+      );
+    }
+  } catch (error) {
+    console.error(`Error performing linting on ${filePath}:`, error.message);
+    process.exit(1);
+  }
+}
+
+function findTsConfig(filePath) {
+  let dir = path.dirname(filePath);
+  while (dir !== path.resolve(dir, '..')) {
+    const tsConfigPath = path.join(dir, 'tsconfig.json');
+    if (fs.existsSync(tsConfigPath)) {
+      return tsConfigPath;
+    }
+    dir = path.resolve(dir, '..');
+  }
+  throw new Error('tsconfig.json not found');
+}
+
+async function main() {
+  if (argv.path) {
+    await processFile(argv.path);
+  } else if (argv.pattern) {
+    console.log('pattern', argv.pattern);
+    try {
+      const files = await glob.glob(argv.pattern);
+
+      for (const filePath of files) {
+        await processFile(filePath);
+      }
+    } catch (err) {
+      console.error('Error finding files:', err.message);
+      process.exit(1);
+    }
+  }
+  execSync('nx format:write');
+}
+
+main();

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

@@ -55,7 +55,6 @@ module.exports = composePlugins(
     config.optimization = {
       ...config.optimization,
       runtimeChunk: false,
-      minimize: false,
     };
     return config;
   },

apps/manifest-demo/webpack-host/project.json

@@ -1,6 +1,6 @@
 {
   "name": "manifest-webpack-host",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/manifest-demo/webpack-host/src",
   "projectType": "application",
   "targets": {

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

@@ -57,6 +57,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
     scriptType: 'text/javascript',
   };
   config.optimization = {
+    ...config.optimization,
     runtimeChunk: 'single',
     minimize: false,
     moduleIds: 'named',

apps/modernjs/modern.config.ts

@@ -37,21 +37,21 @@ export default defineConfig({
       }
 
       appendPlugins([
-        new AsyncBoundaryPlugin({
-          excludeChunk: chunk => chunk.name === 'app1',
-          eager: module => /\.federation/.test(module?.request || ''),
-        }),
         new ModuleFederationPlugin({
           name: 'app1',
           exposes: {
             './thing': './src/test.ts',
             './react-component': './src/components/react-component.tsx',
           },
           runtimePlugins: ['./runtimePlugin.ts'],
+          filename: 'remoteEntry.js',
           shared: {
             react: { singleton: true },
             'react-dom': { singleton: true },
           },
+          experiments: {
+            federationRuntime: 'hoisted',
+          },
           dataPrefetch: true,
         }),
       ]);

apps/modernjs/package.json

@@ -7,7 +7,7 @@
     "dev": "modern dev",
     "build": "modern build",
     "start": "modern start",
-    "serve": "modern serve",
+    "serve": "PORT=4001 modern serve",
     "new": "modern new",
     "lint": "modern lint",
     "upgrade": "modern upgrade"