feat(runtime-core): add import-map remote entry support

.changeset/clean-cobras-rest.md

@@ -0,0 +1,14 @@
+---
+"@module-federation/runtime-core": patch
+"@module-federation/enhanced": patch
+"@module-federation/rspack": patch
+"@module-federation/sdk": patch
+---
+
+Add import map remote entry support in runtime-core with a tree-shakeable
+`FEDERATION_OPTIMIZE_NO_IMPORTMAP` flag, and expose `disableImportMap`
+in Module Federation plugin optimization options (defaulting to `true`
+in build plugins).
+
+Shared modules now honor the `import` field to load shared dependencies
+via dynamic import (including bare specifiers resolved by import maps).

apps/import-map/README.md

@@ -0,0 +1,26 @@
+# Import Map Runtime Demo
+
+This example demonstrates using `@module-federation/runtime-core` with an
+import map. The host (app1) loads the remote (app2) by using a bare specifier
+mapped in the import map.
+
+## Running the demo
+
+Start both apps in separate terminals:
+
+```bash
+pnpm --filter import-map-app2 run build
+pnpm --filter import-map-app2 run serve
+
+pnpm --filter import-map-app1 run build
+pnpm --filter import-map-app1 run serve
+```
+
+- Host: http://127.0.0.1:3101
+- Remote entry (import map target): http://127.0.0.1:3102/remoteEntry.js
+
+## E2E
+
+```bash
+pnpm --filter import-map-app1 run test:e2e
+```

apps/import-map/app1/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.cy.{js,ts,jsx,tsx}',
+    supportFile: 'cypress/support/e2e.ts',
+  },
+  defaultCommandTimeout: 20000,
+});

apps/import-map/app1/cypress/e2e/import-map.cy.ts

@@ -0,0 +1,10 @@
+describe('import-map runtime host', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('loads the remote module via import map', () => {
+    cy.get('[data-test="status"]').contains('Loaded');
+    cy.get('[data-test="remote-message"]').contains(
+      'Hello from import map remote',
+    );
+  });
+});

apps/import-map/app1/cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "name": "import-map"
+}

apps/import-map/app1/cypress/support/commands.ts

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+Cypress.Commands.add('login', (email, password) => {
+  void email;
+  void password;
+});

apps/import-map/app1/cypress/support/e2e.ts

@@ -0,0 +1,6 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+// ***********************************************************
+
+import './commands';

apps/import-map/app1/cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "../cypress.config.js",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}

apps/import-map/app1/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "import-map-app1",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js --mode=development",
+    "build:prod": "webpack --config ./webpack.config.js --mode=production",
+    "serve": "node ../serve-static.js --root ./dist --port 3101",
+    "e2e": "cypress run --config-file ./cypress.config.js --config baseUrl=http://127.0.0.1:3101 --browser chrome",
+    "test:e2e": "concurrently -k \"pnpm --filter import-map-app2 run build\" \"pnpm --filter import-map-app1 run build\" \"pnpm --filter import-map-app2 run serve\" \"pnpm --filter import-map-app1 run serve\" \"wait-on http://127.0.0.1:3102/remoteEntry.js http://127.0.0.1:3101 && pnpm --filter import-map-app1 run e2e\""
+  },
+  "devDependencies": {
+    "@module-federation/runtime-core": "workspace:*"
+  }
+}

apps/import-map/app1/src/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Import Map Runtime Host</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "import_map_remote": "http://127.0.0.1:3102/remoteEntry.js"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <main id="root">
+      <h1>Import Map Runtime Host</h1>
+      <p data-test="status">Idle</p>
+      <p data-test="remote-message">Waiting for remote...</p>
+    </main>
+  </body>
+</html>

apps/import-map/app1/src/index.ts

@@ -0,0 +1,48 @@
+import { ModuleFederation } from '@module-federation/runtime-core';
+
+const statusEl = document.querySelector('[data-test="status"]');
+const messageEl = document.querySelector('[data-test="remote-message"]');
+
+const setStatus = (message: string) => {
+  if (statusEl) {
+    statusEl.textContent = message;
+  }
+};
+
+const setMessage = (message: string) => {
+  if (messageEl) {
+    messageEl.textContent = message;
+  }
+};
+
+const federation = new ModuleFederation({
+  name: 'import-map-host',
+  remotes: [
+    {
+      name: 'import_map_remote',
+      entry: 'import_map_remote',
+      type: 'module',
+      entryFormat: 'importmap',
+    },
+  ],
+  shared: {},
+});
+
+const loadRemoteMessage = async () => {
+  try {
+    setStatus('Loading remote...');
+    const remoteModule = await federation.loadRemote<{
+      default?: () => string;
+    }>('import_map_remote/hello');
+
+    const message =
+      remoteModule?.default?.() ?? 'Remote module did not return a message.';
+    setMessage(message);
+    setStatus('Loaded');
+  } catch (error) {
+    setStatus('Failed');
+    setMessage(`Error loading remote: ${String(error)}`);
+  }
+};
+
+void loadRemoteMessage();

apps/import-map/app1/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "dist/**"
+  ],
+  "include": ["**/*.ts"]
+}

apps/import-map/app1/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

apps/import-map/app1/webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: path.resolve(__dirname, 'src/index.ts'),
+  devtool: false,
+  experiments: {
+    outputModule: true,
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'main.js',
+    publicPath: 'http://127.0.0.1:3101/',
+    module: true,
+    scriptType: 'module',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+              },
+              target: 'es2021',
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'src/index.html'),
+      scriptLoading: 'module',
+    }),
+  ],
+  optimization: {
+    runtimeChunk: false,
+    splitChunks: false,
+  },
+};

apps/import-map/app2/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "import-map-app2",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js --mode=development",
+    "build:prod": "webpack --config ./webpack.config.js --mode=production",
+    "serve": "node ../serve-static.js --root ./dist --port 3102"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "workspace:*"
+  }
+}

apps/import-map/app2/src/hello.ts

@@ -0,0 +1,3 @@
+const hello = () => 'Hello from import map remote';
+
+export default hello;

apps/import-map/app2/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Import Map Remote</title>
+  </head>
+  <body>
+    <main id="root">Import Map Remote</main>
+  </body>
+</html>

apps/import-map/app2/src/index.ts

@@ -0,0 +1,5 @@
+const root = document.getElementById('root');
+
+if (root) {
+  root.textContent = 'Import Map Remote is running.';
+}

apps/import-map/app2/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "dist/**"
+  ],
+  "include": ["**/*.ts"]
+}

apps/import-map/app2/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}