feat: shareable runtime

.changeset/ai-eager-cat.md

@@ -0,0 +1,14 @@
+---
+"@module-federation/enhanced": minor
+---
+
+Introduce minimal runtime and experiment options for FederationRuntimePlugin.
+
+- Added support for minimal federation runtime dependency in `FederationRuntimeDependency` class.
+- Introduced `experiments` property to `EmbedFederationRuntimePlugin` class.
+- Enhanced `FederationRuntimePlugin` to support both standard and minimal runtime dependencies.
+  - Added logic to handle `useMinimalRuntime` option.
+  - Conditionally modified entry file path based on the runtime mode.
+- Adjusted constructor to initialize new experimental paths and dependencies.
+- Modified `getTemplate` and `getFilePath` methods to accommodate minimal runtime.
+- Updated `setRuntimeAlias` and `apply` methods to utilize new experiment options and embedded paths.

.changeset/ai-eager-tiger.md

@@ -0,0 +1,11 @@
+---
+"@module-federation/runtime": patch
+---
+
+Refactored the script loading mechanism to use a more generalized loaderHook.
+
+- Replaced `createScriptHook` with `loaderHook` across various functions.
+  - Updated `loadEntryScript` function to use `loaderHook.lifecycle.createScript`.
+  - Modified `loadEntryDom` function to accept `loaderHook` instead of `createScriptHook`.
+  - Adjusted `loadEntryNode` function to handle `loaderHook.lifecycle.createScript`.
+- Streamlined the handling of script loading in `getRemoteEntry`.

.changeset/ai-gentle-eagle.md

@@ -0,0 +1,11 @@
+---
+"@module-federation/runtime": patch
+---
+
+Added support for defining and setting a shareable runtime globally to enhance modularity and reusability within the Federation system.
+
+- Defined a `ShareableRuntime` type encapsulating the core functionalities of the module federation.
+- Introduced `__SHAREABLE_RUNTIME__` to the `Federation` interface to store the `ShareableRuntime`.
+- Implemented `setGlobalShareableRuntime` function to set the shareable runtime if not already set.
+- Modified `FederationManager` methods (`preloadRemote`, `registerRemotes`, `registerPlugins`) to use the spread operator for cleaner code.
+- Initialized the global shareable runtime at the module's root with key components like `FederationManager`, `FederationHost`, etc.

.changeset/ai-noisy-fox.md

@@ -0,0 +1,8 @@
+---
+"@module-federation/runtime": patch
+---
+
+- Added optional `bundlerId` parameter to FederationHost constructor.
+- Modified default logic to choose `bundlerId` if provided, otherwise fallback to `getBuilderId()`.
+- Updated `getGlobalFederationInstance` function to accept and utilize an optional `builderId`.
+- Ensured internal checks compare with the provided `bundlerId` for consistency in federation instances lookup.

.changeset/ai-sleepy-bear.md

@@ -0,0 +1,12 @@
+---
+"@module-federation/runtime": minor
+---
+
+Refactor initialization and management of Federation instances with the new FederationManager class.
+
+- Introduced FederationManager class to encapsulate federation management logic.
+  - FederationManager class now handles the initialization and operation methods.
+  - Methods `init`, `loadRemote`, `loadShare`, `loadShareSync`, `preloadRemote`, `registerRemotes`, and `registerPlugins` are now routed through an instance of FederationManager.
+- Updated test to exclude `FederationManager` from index.ts exports.
+- Minor code cleanup and added import for `getBuilderId` in `index.ts`.
+- Removed direct manipulation of a singleton FederationHost instance and replaced it with the FederationManager pattern.

.changeset/ai-sleepy-fox.md

@@ -0,0 +1,6 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Use shareable runtime from federation global over custom global top levels
+```

.changeset/real-baboons-complain.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/nextjs-mf': minor
+---
+
+support shareable runtime with experiments `use-host`. Defaults to `hoisted`

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

@@ -66,6 +66,11 @@ jobs:
     uses: ./.github/workflows/e2e-runtime.yml
     secrets: inherit
 
+  e2e-shareable-runtime:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-shareruntime.yml
+    secrets: inherit
+
   e2e-manifest:
     needs: checkout-install
     uses: ./.github/workflows/e2e-manifest.yml

.github/workflows/e2e-shareruntime.yml

@@ -0,0 +1,46 @@
+# .github/workflows/e2e-share-host.yml
+name: E2E Test for Shared Runtime
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-runtime:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable
+        run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Install Cypress
+        run: npx cypress install
+
+      - name: Run Build for All
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
+
+      - name: Run condition check script
+        id: check-ci
+        run: node tools/scripts/ci-is-affected.mjs --appName=3005-runtime-host
+
+      - name: E2E Test for Runtime Demo
+        if: steps.check-ci.outcome == 'success'
+        run: npx kill-port --port 3005,3006,3007 && pnpm run app:shareable:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3005-share-host --parallel=1 && lsof -ti tcp:3005,3006,3007 | xargs kill

apps/3000-home/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/3001-shop/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/3001-shop/next.config.js

@@ -26,6 +26,9 @@ const nextConfig = {
             isServer ? 'ssr' : 'chunks'
           }/remoteEntry.js`,
         },
+        experiments: {
+          federationRuntime: 'use-host',
+        },
         exposes: {
           './useCustomRemoteHook': './components/useCustomRemoteHook',
           './WebpackSvg': './components/WebpackSvg',

apps/3002-checkout/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/shared-runtime/3005-share-host/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/shared-runtime/3005-share-host/cypress.config.ts

@@ -0,0 +1,7 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
+});

apps/shared-runtime/3005-share-host/cypress/e2e/app.cy.ts

@@ -0,0 +1,80 @@
+import { getH1, getH3 } from '../support/app.po';
+
+describe('3005-share-host/', () => {
+  beforeEach(() => cy.visit('/'));
+
+  describe('Welcome message', () => {
+    it('should display welcome message', () => {
+      getH1().contains('Runtime Demo');
+    });
+  });
+
+  describe('Image checks', () => {
+    it('should check that the home-webpack-png and remote1-webpack-png images are not 404', () => {
+      // Get the src attribute of the home-webpack-png image
+      cy.get('img.home-webpack-png')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          cy.log(src);
+          cy.request(src).its('status').should('eq', 200);
+        });
+
+      // Get the src attribute of the shop-webpack-png image
+      cy.get('img.remote1-webpack-png')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          // Send a GET request to the src URL
+          cy.request(src).its('status').should('eq', 200);
+        });
+    });
+
+    it('should check that the home-webpack-svg and remote1-webpack-svg images are not 404', () => {
+      // Get the src attribute of the home-webpack-png image
+      cy.get('img.home-webpack-svg')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          cy.log(src);
+          cy.request(src).its('status').should('eq', 200);
+        });
+
+      // Get the src attribute of the shop-webpack-png image
+      cy.get('img.remote1-webpack-svg')
+        .invoke('attr', 'src')
+        .then((src) => {
+          if (!src) {
+            throw new Error('src must not be empty');
+          }
+          // Send a GET request to the src URL
+          cy.request(src).its('status').should('eq', 200);
+        });
+    });
+  });
+
+  describe('Shared react hook check', () => {
+    it('should display text which comes from remote1 hook', () => {
+      cy.get('.remote1-text')
+        .invoke('html')
+        .should('equal', 'Custom hook from localhost:3006 works!');
+    });
+  });
+
+  describe('dynamic remote check', () => {
+    describe('dynamic-remote/ButtonOldAnt', () => {
+      it('should display remote button', () => {
+        cy.get('button.test-remote2').contains('Button');
+      });
+      it('should use host shared(antd)', () => {
+        cy.get('button.test-remote2').contains('Button from [email protected]');
+      });
+    });
+  });
+});

apps/shared-runtime/3005-share-host/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/shared-runtime/3005-share-host/cypress/support/app.po.ts

@@ -0,0 +1,3 @@
+export const getH1 = () => cy.get('h1');
+export const getH2 = () => cy.get('h2');
+export const getH3 = () => cy.get('h3');

apps/shared-runtime/3005-share-host/cypress/support/commands.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// 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;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  // console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/shared-runtime/3005-share-host/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

apps/shared-runtime/3005-share-host/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.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}

apps/shared-runtime/3005-share-host/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "share-host",
+  "private": true,
+  "version": "0.0.0",
+  "devDependencies": {
+    "@module-federation/core": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
+    "@module-federation/typescript": "workspace:*",
+    "@module-federation/enhanced": "workspace:*",
+    "@module-federation/dts-plugin": "workspace:*",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "react-refresh": "0.14.0"
+  },
+  "dependencies": {
+    "antd": "4.24.15"
+  }
+}