feat: generate manifest and consume it (#2108)

Co-authored-by: ScriptedAlchemy <[email protected]>

.changeset/config.json

@@ -6,9 +6,12 @@
     [
       "@module-federation/runtime",
       "@module-federation/enhanced",
+      "@module-federation/enhanced-rspack",
       "@module-federation/webpack-bundler-runtime",
       "@module-federation/sdk",
-      "@module-federation/runtime-tools"
+      "@module-federation/runtime-tools",
+      "@module-federation/managers",
+      "@module-federation/manifest"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/lazy-tables-prove.md

@@ -0,0 +1,9 @@
+---
+'@module-federation/enhanced-rspack': patch
+'@module-federation/enhanced': patch
+'@module-federation/managers': patch
+'@module-federation/manifest': patch
+'@module-federation/sdk': patch
+---
+
+feat: support manifest

.changeset/rude-melons-press.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced-rspack': patch
+---
+
+feat: add enhanced-rspack

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

@@ -56,14 +56,11 @@ jobs:
       #      - name: E2E Test for 3002-checkout
       #        run: pnpm run app:next:dev & echo "done" && sleep 15 && npx nx run-many --target=test:e2e --projects=3002-checkout && lsof -ti tcp:3000,3001,3002 | xargs kill
 
-      - name: Serve Projects 3005-runtime-host, 3006-runtime-remote, 3007-runtime-remote
-        run: npx nx run-many --target=serve --projects=3005-runtime-host,3006-runtime-remote,3007-runtime-remote --parallel=3 & echo "done"
-
       - name: E2E Test for 3005-runtime-host
-        run: sleep 6 && npx nx run-many --target=test:e2e --projects=3005-runtime-host --parallel=1
+        run: pnpm run app:runtime:dev & echo "done" && sleep 6 && npx nx run-many --target=test:e2e --projects=3005-runtime-host --parallel=1 && lsof -ti tcp:3005,3006,3007 | xargs kill
 
-      - name: Kill Processes on Ports 3005, 3006, 3007
-        run: lsof -ti tcp:3005,3006,3007 | xargs kill
+      - name: E2E Test for 3008-webpack-host
+        run: pnpm run app:manifest:dev & echo "done" && sleep 6 && npx nx run-many --target=test:e2e --projects=3008-webpack-host --parallel=1 && lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill
 
       - name: Build Next.js Apps in Production Mode
         run: pnpm app:next:build

apps/3001-shop/cypress/e2e/app.cy.ts

@@ -105,7 +105,7 @@ describe('3001-shop/', () => {
             cy.request(src).its('status').should('eq', 200);
           });
       });
-      xit('should check that shop-webpack-png images are not 404 between route clicks', () => {
+      it('should check that shop-webpack-png images are not 404 between route clicks', () => {
         cy.visit('/shop');
         cy.url().should('include', '/shop');
         getH1().contains('Shop Page');

apps/manifest-demo/3008-webpack-host/.babelrc

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

apps/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-host/cypress/e2e/basic-usage.cy.ts

@@ -0,0 +1,80 @@
+import { getH1, getH2 } from '../support/app.po';
+
+describe('3008-webpack-host/basic', () => {
+  beforeEach(() => cy.visit('/basic'));
+
+  describe('Welcome message', () => {
+    it('should display welcome message', () => {
+      getH2().contains('Manifest Basic Usage');
+    });
+  });
+
+  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:3009 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/manifest-demo/3008-webpack-host/cypress/e2e/preload.cy.ts

@@ -0,0 +1,51 @@
+import { getH1, getH2 } from '../support/app.po';
+
+describe('3008-webpack-host/preload', () => {
+  beforeEach(() => cy.visit('/preload'));
+
+  describe('Welcome message', () => {
+    it('should display welcome message', () => {
+      getH2().contains('MF runtime can preload assets with');
+    });
+  });
+
+  describe('Manifest provider will load component more quickly than js entry provider', () => {
+    it('manifest provider will load component more quickly than js entry provider', () => {
+      // simulate browser idle time
+      cy.wait(2000);
+
+      // should load remote successfully
+      // load manifest provider component
+      cy.get('#loadManifestProvider').click();
+      cy.wait(2000);
+      cy.get('#3011-rspack-manifest-provider').should('exist');
+
+      // load js entry provider component
+      cy.get('#loadJSEntryProvider').click();
+      cy.wait(2000);
+      cy.get('#3012-rspack-js-entry-provider').should('exist');
+
+      // manifest provider will load component more quickly than js entry provider
+      let manifestTime = 0;
+      let jsEntryTime = 0;
+      cy.get('#manifest-time')
+        .invoke('text')
+        .then((text) => {
+          manifestTime = parseFloat(text);
+        });
+
+      cy.get('#js-entry-time')
+        .invoke('text')
+        .then((text) => {
+          jsEntryTime = parseFloat(text);
+        });
+
+      cy.then(() => {
+        assert(
+          manifestTime < jsEntryTime,
+          'manifest time should be less than js entry time',
+        );
+      });
+    });
+  });
+});

apps/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-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/manifest-demo/3008-webpack-host/package.json

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