feat: refactor module federation runtime (#1913)

Co-authored-by: ScriptedAlchemy <zackary.l.jackson@gmail.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: ScriptedAlchemy <zackaryjackson@bytedance.com>
Co-authored-by: rcanfield <Rcanfield86@gmail.com>
Co-authored-by: nyqykk <65393845+nyqykk@users.noreply.github.com>
Co-authored-by: Bruno Silva <bruno3dcontato@gmail.com>
Co-authored-by: zhouxiao.shaw <zhouxiao.shaw@bytdance.net>
Co-authored-by: zhouxiao.shaw <codingzx@gmail.com>
Co-authored-by: zhouxiao.shaw <zhouxiao.shaw@bytdance.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 11 people

.changeset/config.json

@@ -7,7 +7,8 @@
       "@module-federation/runtime",
       "@module-federation/enhanced",
       "@module-federation/webpack-bundler-runtime",
-      "@module-federation/sdk"
+      "@module-federation/sdk",
+      "@module-federation/runtime-tools"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/modern-peas-move.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/webpack-bundler-runtime': patch
+'@module-federation/nextjs-mf': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+Support offline remotes recovery in errorLoadRemote. Allows hook to return a Module / factory / fallback mock when a request fails or container cannot be accessed

.changeset/tender-balloons-knock.md

@@ -0,0 +1,9 @@
+---
+'@module-federation/webpack-bundler-runtime': patch
+'@module-federation/enhanced': patch
+'@module-federation/runtime': patch
+'@module-federation/runtime-tools': patch
+'@module-federation/sdk': patch
+---
+
+feat: enhanced

.github/.github/release.yml

@@ -8,19 +8,19 @@ changelog:
   categories:
     - title: Breaking Changes 🍭
       labels:
-        - "change: breaking"
+        - 'change: breaking'
     - title: New Features 🎉
       labels:
-        - "change: feat"
+        - 'change: feat'
     - title: Performance 🚀
       labels:
-        - "change: perf"
+        - 'change: perf'
     - title: Bug Fixes 🐞
       labels:
-        - "change: fix"
+        - 'change: fix'
     - title: Document 📖
       labels:
-        - "change: docs"
+        - 'change: docs'
     - title: Other Changes
       labels:
-        - "*"
+        - '*'

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

@@ -4,7 +4,6 @@ on:
   push:
     branches: ['main']
   pull_request:
-    branches: ['main', 'next', 'canary']
 
 jobs:
   main:
@@ -34,3 +33,6 @@ jobs:
       - run: npx nx run-many --target=serve --projects=3000-home,3001-shop,3002-checkout --parallel=3 & echo "done"
       - run: sleep 10 && npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1
       - run: lsof -ti tcp:3000,3001,3002 | xargs kill
+      - run: npx nx run-many --target=serve --projects=3005-runtime-host,3006-runtime-remote,3007-runtime-remote --parallel=3 & echo "done"
+      - run: sleep 6 && npx nx run-many --target=test:e2e --projects=3005-runtime-host --parallel=1
+      - run: lsof -ti tcp:3005,3006,3006 | xargs kill

.gitignore

@@ -48,4 +48,8 @@ migrations.json
 
 # build contnt
 packages/**/dist
-apps/**/dist
+apps/**/dist
+
+# test cases
+!packages/enhanced/test/configCases/**/**/node_modules
+packages/enhanced/test/js

apps/3000-home/cypress/e2e/app.cy.ts

@@ -36,11 +36,10 @@ describe('3000-home/', () => {
       cy.visit('/shop');
       cy.url().should('include', '/shop');
       getH1().contains('Shop Page');
+      //eslint-disable-next-line
       cy.wait(3000);
-
       cy.get('.home-menu-link').contains('Home 3000');
       cy.get('.home-menu-link').click();
-      //eslint-disable-next-line
       cy.wait(1000);
       cy.url().should('include', '/');
       cy.wait(700);

apps/3000-home/next.config.js

@@ -1,50 +1,5 @@
 const { withNx } = require('@nx/next/plugins/with-nx');
-const { workspaceRoot } = require('nx/src/utils/workspace-root');
-
-const path = require('path');
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
-const fs = require('fs');
-
-// function renameDefaultDelegate() {
-//   const filesToRename = [
-//     {
-//       oldPath: path.resolve(
-//         __dirname,
-//         '../../dist/packages/nextjs-mf/src/default-delegate.js',
-//       ),
-//       newPath: path.resolve(
-//         __dirname,
-//         '../../dist/packages/nextjs-mf/src/default-delegate.cjs',
-//       ),
-//     },
-//     {
-//       oldPath: path.resolve(
-//         __dirname,
-//         '../../dist/packages/nextjs-mf/src/federation-noop.js',
-//       ),
-//       newPath: path.resolve(
-//         __dirname,
-//         '../../dist/packages/nextjs-mf/src/federation-noop.cjs',
-//       ),
-//     },
-//   ];
-
-//   filesToRename.forEach(({ oldPath, newPath }) => {
-//     fs.rename(oldPath, newPath, function (err) {
-//       if (err) {
-//         // Do not log error
-//       }
-//     });
-//   });
-// }
-// try {
-//   renameDefaultDelegate();
-// } catch (e) {
-//   /* empty */
-// }
-const {
-  createDelegatedModule,
-} = require('@module-federation/nextjs-mf/utilities');
 
 /**
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
@@ -60,35 +15,12 @@ const nextConfig = {
 
     // used for testing build output snapshots
     const remotes = {
-      // shop:   {
-      //   name: 'shop',
-      //   alias: 'shop',
-      //   entry: `http://localhost:3001/_next/static/${
-      //     isServer ? 'ssr' : 'chunks'
-      //   }/remoteEntry.js`,
-      // },
-      // checkout:   {
-      //   name: 'checkout',
-      //   alias: 'checkout',
-      //   entry: `http://localhost:3002/_next/static/${
-      //     isServer ? 'ssr' : 'chunks'
-      //   }/remoteEntry.js`,
-      // },
-      // shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
-      //   remote: `shop@http://localhost:3001/_next/static/${
-      //     isServer ? 'ssr' : 'chunks'
-      //   }/remoteEntry.js`,
-      // }),
-      // checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
-      //   remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
-      // }),
-
-      // shop: `shop@http://localhost:3001/_next/static/${
-      //   isServer ? 'ssr' : 'chunks'
-      // }/remoteEntry.js`,
       checkout: `checkout@http://localhost:3002/_next/static/${
         isServer ? 'ssr' : 'chunks'
       }/remoteEntry.js`,
+      home_app: `home_app@http://localhost:3000/_next/static/${
+        isServer ? 'ssr' : 'chunks'
+      }/remoteEntry.js`,
       shop: `shop@http://localhost:3001/_next/static/${
         isServer ? 'ssr' : 'chunks'
       }/remoteEntry.js`,
@@ -115,8 +47,6 @@ const nextConfig = {
           exposePages: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,
-          skipSharingNextInternals: false,
-          automaticPageStitching: false,
         },
       }),
     );

apps/3000-home/package.json

@@ -12,7 +12,6 @@
   },
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",
-    "@module-federation/sdk": "workspace:*",
     "@module-federation/utilities": "workspace:*"
   }
 }