chore(enhanced): adjust add federation init process (#2035)

Co-authored-by: ScriptedAlchemy <zackary.l.jackson@gmail.com>
Co-authored-by: ScriptedAlchemy <zackaryjackson@bytedance.com>
Co-authored-by: Zhou xiao <codingzx@gmail.com>
Co-authored-by: 2heal1 <TwoHeal@163.com>

.changeset/early-kids-suffer.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+Support multiple runtime chunks, single runtime chunks in reference hoisting

.changeset/fifty-swans-call.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/node': minor
+---
+
+entry tracking and improved hot reloading for node

.changeset/happy-crabs-know.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/enhanced': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+chore: adjust add federation init process

.changeset/moody-brooms-burn.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/sdk': patch
+---
+
+Remove log of container exports in sdk

.changeset/smooth-turkeys-raise.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+chore: redefine prefetch types

.changeset/stupid-mangos-switch.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/nextjs-mf': minor
+'@module-federation/enhanced': minor
+'@module-federation/sdk': patch
+---
+
+use chunk integration to initalize federation runtime and plugins in runtime bootstrap

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

@@ -47,11 +47,14 @@ jobs:
       - name: Run Affected Test
         run: npx nx affected -t test --parallel=3 --exclude='*,!tag:package'
 
-      - name: E2E Test for 3000-home
-        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3000-home && lsof -ti tcp:3000,3001,3002 | xargs kill
+      - name: E2E Test for Next.js
+        run: pnpm run app:next:dev & echo "done" && sleep 50 && npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=2 && lsof -ti tcp:3000,3001,3002 | xargs kill
 
-      - name: E2E Test for 3001-shop
-        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill
+      #      - name: E2E Test for 3001-shop
+      #        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill
+
+      - name: E2E Test for ModernJS
+        run: npx nx run-many --target=test:e2e --projects=modernjs --parallel=1 && lsof -ti tcp:8080 | xargs kill
 
       #      - 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

apps/3000-home/cypress.config.ts

@@ -5,4 +5,8 @@ export default defineConfig({
   projectId: 'sa6wfn',
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
   defaultCommandTimeout: 20000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
 });

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

@@ -31,7 +31,7 @@ describe('3000-home/', () => {
   });
 
   describe('Routing checks', () => {
-    xit('check that clicking back and forwards in client side routeing still renders the content correctly', () => {
+    it('check that clicking back and forwards in client side routeing still renders the content correctly', () => {
       cy.visit('/');
       cy.visit('/shop');
       cy.visit('/');
@@ -51,7 +51,11 @@ describe('3000-home/', () => {
   });
 
   describe('3000-home/checkout', () => {
-    beforeEach(() => cy.visit('/checkout'));
+    beforeEach(() => {
+      cy.visit('/checkout');
+      cy.visit('/');
+      cy.visit('/checkout');
+    });
 
     describe('Welcome message', () => {
       it('should display welcome message', () => {
@@ -102,7 +106,8 @@ describe('3000-home/', () => {
             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('/');
         cy.visit('/shop');
         cy.url().should('include', '/shop');
         getH1().contains('Shop Page');

apps/3000-home/package.json

@@ -25,6 +25,7 @@
     "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.3.3",
+    "upath": "2.0.1",
     "url": "0.11.3",
     "util": "0.12.5",
     "webpack-sources": "3.2.3"

apps/3000-home/pages/_app.tsx

@@ -24,7 +24,9 @@ function MyApp(props) {
     }
   };
   // handle first route hit.
-  React.useMemo(() => handleRouteChange(asPath), [asPath]);
+  React.useEffect(() => {
+    handleRouteChange(asPath);
+  }, [asPath]);
 
   //handle route change
   React.useEffect(() => {

apps/3000-home/pages/_document.js

@@ -8,15 +8,19 @@ import {
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
+    if (ctx.pathname) {
+      if (!ctx.pathname.endsWith('_error')) {
+        await revalidate().then((shouldUpdate) => {
+          if (shouldUpdate) {
+            console.log('should HMR', shouldUpdate);
+          }
+        });
+      }
+    }
+
     const initialProps = await Document.getInitialProps(ctx);
+
     const chunks = await flushChunks();
-    ctx?.res?.on('finish', () => {
-      revalidate().then((shouldUpdate) => {
-        if (shouldUpdate) {
-          console.log('should HMR', shouldUpdate);
-        }
-      });
-    });
 
     return {
       ...initialProps,

apps/3001-shop/cypress.config.ts

@@ -4,4 +4,8 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
   defaultCommandTimeout: 10000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
 });

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

@@ -3,9 +3,6 @@ import { getH1, getH3 } from '../support/app.po';
 describe('3001-shop/', () => {
   beforeEach(() => {
     cy.visit('/');
-    cy.visit('/shop');
-    cy.visit('/checkout');
-    cy.visit('/');
   });
 
   describe('Welcome message', () => {

apps/3001-shop/package.json

@@ -24,6 +24,7 @@
     "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.3.3",
+    "upath": "2.0.1",
     "url": "0.11.3",
     "util": "0.12.5",
     "webpack-sources": "3.2.3"

apps/3001-shop/pages/_app.tsx

@@ -26,7 +26,9 @@ function MyApp({ Component, pageProps }) {
     }
   };
   // handle first route hit.
-  React.useMemo(() => handleRouteChange(asPath), [asPath]);
+  React.useEffect(() => {
+    handleRouteChange(asPath);
+  }, [asPath]);
 
   //handle route change
   React.useEffect(() => {

apps/3001-shop/pages/_document.js

@@ -8,21 +8,18 @@ import {
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    await revalidate().then((shouldUpdate) => {
-      if (shouldUpdate) {
-        ctx.res.writeHead(307, { Location: ctx.req.url });
-        ctx.res.end();
+    if (ctx.pathname) {
+      if (!ctx.pathname.endsWith('_error')) {
+        await revalidate().then((shouldUpdate) => {
+          if (shouldUpdate) {
+            console.log('should HMR', shouldUpdate);
+          }
+        });
       }
-    });
+    }
+
     const initialProps = await Document.getInitialProps(ctx);
     const chunks = await flushChunks();
-    ctx?.res?.on('finish', () => {
-      // revalidate().then((shouldUpdate) => {
-      //   if (shouldUpdate) {
-      //     console.log('should HMR', shouldUpdate);
-      //   }
-      // });
-    });
 
     return {
       ...initialProps,

apps/3002-checkout/cypress.config.ts

@@ -4,4 +4,8 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
   defaultCommandTimeout: 15000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
 });

apps/3002-checkout/cypress/e2e/app.cy.ts

@@ -101,7 +101,7 @@ describe('3002-checkout/', () => {
             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/3002-checkout/package.json

@@ -23,15 +23,16 @@
     "styled-jsx": "5.1.2",
     "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
+    "typescript": "5.3.3",
+    "upath": "2.0.1",
     "url": "0.11.3",
     "util": "0.12.5",
-    "webpack-sources": "3.2.3",
-    "typescript": "5.3.3"
+    "webpack-sources": "3.2.3"
   },
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",
-    "@module-federation/sdk": "workspace:*",
     "@module-federation/runtime": "workspace:*",
+    "@module-federation/sdk": "workspace:*",
     "@module-federation/utilities": "workspace:*"
   },
   "scripts": {

apps/3002-checkout/pages/_app.tsx

@@ -25,7 +25,9 @@ function MyApp({ Component, pageProps }) {
     }
   };
   // handle first route hit.
-  React.useMemo(() => handleRouteChange(asPath), [asPath]);
+  React.useEffect(() => {
+    handleRouteChange(asPath);
+  }, [asPath]);
 
   //handle route change
   React.useEffect(() => {

apps/3002-checkout/pages/_document.js

@@ -8,15 +8,18 @@ import {
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
+    if (ctx.pathname) {
+      if (!ctx.pathname.endsWith('_error')) {
+        await revalidate().then((shouldUpdate) => {
+          if (shouldUpdate) {
+            console.log('should HMR', shouldUpdate);
+          }
+        });
+      }
+    }
+
     const initialProps = await Document.getInitialProps(ctx);
     const chunks = await flushChunks();
-    ctx?.res?.on('finish', () => {
-      revalidate().then((shouldUpdate) => {
-        if (shouldUpdate) {
-          console.log('should HMR', shouldUpdate);
-        }
-      });
-    });
 
     return {
       ...initialProps,

apps/modernjs/project.json

@@ -33,7 +33,7 @@
         "commands": [
           {
             "command": "cd apps/modernjs; pnpm run dev",
-            "forwardAllArgs": true
+            "forwardAllArgs": false
           }
         ]
       }
@@ -61,11 +61,11 @@
         "parallel": true,
         "commands": [
           {
-            "command": "lsof -i :8080 || nx run modernjs:serve && echo 'done'",
+            "command": "lsof -i :8080 || nx run modernjs:serve & echo 'done'",
             "forwardAllArgs": false
           },
           {
-            "command": "sleep 4 && nx run modernjs:e2e",
+            "command": "sleep 20 && nx run modernjs:e2e",
             "forwardAllArgs": true
           }
         ]

apps/node-host/src/bootstrap.js

@@ -5,27 +5,23 @@
 
 import express from 'express';
 import * as path from 'path';
-
+import node_local_remote from 'node_local_remote/test';
 const remoteMsg = import('node_remote/test').then((m) => {
   console.log('\x1b[32m%s\x1b[0m', m.default || m);
   return m.default || m;
 });
+console.log('\x1b[32m%s\x1b[0m', node_local_remote);
 
 const app = express();
 
 app.use('/assets', express.static(path.join(__dirname, 'assets')));
 
 app.get('/api', async (req, res) => {
-  const localRemoteMsg = import('node_local_remote/test').then((m) => {
-    console.log('\x1b[32m%s\x1b[0m', m.default || m);
-    return m.default || m;
-  });
-
   res.send({
     message: 'Welcome to node-host!',
     remotes: {
       node_remote: await remoteMsg,
-      node_local_remote: await localRemoteMsg,
+      node_local_remote,
     },
   });
 });

apps/node-remote/webpack.config.js

@@ -24,7 +24,6 @@ module.exports = composePlugins(withNx(), (config) => {
       exposes: {
         './test': './src/expose.js',
       },
-      experiments: {},
     }),
   );
   return config;

package.json

@@ -39,7 +39,8 @@
     "app:manifest:dev": "nx run-many --target=serve --parallel=5 -p 3008-webpack-host,3009-webpack-provider,3010-rspack-provider,3011-rspack-manifest-provider,3012-rspack-js-entry-provider",
     "commitlint": "commitlint --edit",
     "prepare": "husky install",
-    "changeset": "changeset"
+    "changeset": "changeset",
+    "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:package'"
   },
   "dependencies": {
     "adm-zip": "0.5.10",
@@ -65,6 +66,7 @@
     "unplugin": "1.9.0"
   },
   "devDependencies": {
+    "terser-webpack-plugin": "^5.3.10",
     "@antora/cli": "3.1.5",
     "@antora/lunr-extension": "1.0.0-alpha.8",
     "@antora/site-generator": "3.1.7",

packages/enhanced/jest.config.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { readFileSync } from 'fs';
+import { readFileSync, rmdirSync, existsSync } from 'fs';
 import path from 'path';
 
 // Reading the SWC compilation config and remove the "exclude"
@@ -8,6 +8,10 @@ const { exclude: _, ...swcJestConfig } = JSON.parse(
   readFileSync(`${__dirname}/.swcrc`, 'utf-8'),
 );
 
+if (existsSync(__dirname + '/test/js')) {
+  rmdirSync(__dirname + '/test/js', { recursive: true });
+}
+
 // disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
 // If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
 if (swcJestConfig.swcrc === undefined) {

packages/enhanced/src/lib/container/ContainerEntryModule.ts

@@ -189,7 +189,6 @@ class ContainerEntryModule extends Module {
       // @ts-ignore
       new EntryDependency(this._injectRuntimeEntry),
     );
-
     callback();
   }