chore: general housekeeping

bi-directional/app1/modern.config.js

@@ -1,28 +1,25 @@
 import appTools, { defineConfig } from '@modern-js/app-tools';
-
+import {ModuleFederationPlugin} from '@module-federation/enhanced/webpack'
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
     port: 3001,
   },
-  // dev: {
-  //   // set publicPath
-  //   assetPrefix: 'http://localhost:3001/',
-  // },
   runtime: {
     router: true,
   },
   source: {
-    // automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
-    enableAsyncEntry: true,
+    enableAsyncEntry: true, // Enable async entry for module federation
   },
   tools: {
     webpack: (config, { webpack, appendPlugins }) => {
+      // Remove splitChunks optimization
       delete config.optimization.splitChunks;
       config.output.publicPath = 'auto';
 
+      // Add Module Federation Plugin
       appendPlugins([
-        new webpack.container.ModuleFederationPlugin({
+        new ModuleFederationPlugin({
           name: 'app1',
           runtime: false,
           filename: 'static/js/remoteEntry.js',

bi-directional/app1/package.json

@@ -36,6 +36,7 @@
     "@modern-js/eslint-config": "2.50.0",
     "@modern-js/tsconfig": "2.50.0",
     "@modern-js-app/eslint-config": "2.50.0",
+    "@module-federation/enhanced": "0.1.13",
     "@modern-js/builder-rspack-provider": "2.46.1",
     "lint-staged": "15.0.2",
     "prettier": "3.0.3",

bi-directional/app1/src/routes/page.jsx

@@ -24,9 +24,7 @@ const Index = () => (
       <p className="description">
         FEDERATED: <Button />
       </p>
-      <p className="description">
-        go to http://localhost:3002
-      </p>
+      <p className="description">go to http://localhost:3002</p>
 
       <div className="grid">
         <a

bi-directional/app2/modern.config.js

@@ -1,4 +1,5 @@
 import appTools, { defineConfig } from '@modern-js/app-tools';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
@@ -22,7 +23,7 @@ export default defineConfig({
       config.output.publicPath = 'auto';
 
       appendPlugins([
-        new webpack.container.ModuleFederationPlugin({
+        new ModuleFederationPlugin({
           name: 'app2',
           runtime: false,
           filename: 'static/js/remoteEntry.js',

bi-directional/app2/package.json

@@ -37,6 +37,7 @@
     "@modern-js/tsconfig": "2.50.0",
     "@modern-js-app/eslint-config": "2.50.0",
     "@modern-js/builder-rspack-provider": "2.46.1",
+    "@module-federation/enhanced": "0.1.13",
     "lint-staged": "15.0.2",
     "prettier": "3.0.3",
     "husky": "8.0.3",

cypress-e2e/fixtures/constants.ts

@@ -893,7 +893,7 @@ export class Constants {
             componentState: 'Component in Action..',
         },
         dynamicSystemHostApp: {
-            hostParagraph: 'The Dynamic System will take advantage Module Federation ',
+            hostParagraph: 'The Dynamic System will take advantage of Module Federation ',
             paragraphText: [
                 'App2 Moment Dep',
                 'for format the date'

cypress-e2e/package.json

@@ -6,6 +6,7 @@
   "private": true,
   "ignored": true,
   "dependencies": {
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "moment": "^2.30.1"
   }
 }

dynamic-remotes-node/app1/index.js

@@ -14,5 +14,12 @@ init({
 
 
 loadRemote('app2/sample').then((sample) => {
+  if(process.env.TEST) {
+    if(sample === 'dynamically consumed from app2') {
+      process.exit(0)
+    } else {
+      process.exit(1)
+    }
+  }
   console.log(sample)
 });

dynamic-remotes-node/package.json

@@ -6,21 +6,24 @@
   "license": "MIT",
   "scripts": {
     "serve": "concurrently 'serve -s app1/dist -l 3001' 'serve -s app2/dist -l 3002'",
-    "build:legacy": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js'  'cd app2; webpack --config ./webpack.config.js'",
-    "build": "rimraf dist/server && concurrently 'cd app1; rspack --config ./rspack.config.js' 'cd runtime-container; rspack --config ./rspack.config.js'  'cd app2; rspack --config ./rspack.config.js'",
+    "build:legacy": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js' 'cd app2; webpack --config ./webpack.config.js'",
+    "build": "rimraf dist/server && concurrently 'cd app1; rspack --config ./rspack.config.js' 'cd runtime-container; rspack --config ./rspack.config.js' 'cd app2; rspack --config ./rspack.config.js'",
     "start:legacy": "pnpm build:legacy && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'",
-    "start": "pnpm build && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'"
+    "start": "pnpm build && concurrently 'TEST=true pnpm serve' 'sleep 5 && node app1/dist/main.js'"
   },
   "dependencies": {
     "@module-federation/node": "2.2.9",
     "@module-federation/enhanced": "0.1.18",
     "@module-federation/runtime": "0.1.18",
     "concurrently": "^8.0.1",
-    "webpack": "5.91.0",
+    "webpack": "^5.91.0",
     "rimraf": "^5.0.5",
     "webpack-cli": "^5.1.4",
-    "@rspack/cli": "0.6.5",
-    "@rspack/core": "0.6.5",
-    "@rspack/dev-server": "0.6.5"
+    "@rspack/cli": "^0.7.0-beta.0",
+    "@rspack/core": "^0.7.0-beta.0",
+    "@rspack/dev-server": "^0.7.0-beta.0"
+  },
+  "devDependencies": {
+    "kill-port": "^2.0.1"
   }
-}
+}

dynamic-system-host/app1/rspack.config.js

@@ -1,6 +1,4 @@
-const {
-  container: { ModuleFederationPlugin },
-} = require('@rspack/core');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
@@ -64,10 +62,4 @@ module.exports = {
       template: './public/index.html',
     }),
   ],
-  // it will be fixed soon...
-  resolve: {
-    alias: {
-      '@module-federation/runtime$': require.resolve('@module-federation/runtime'),
-    },
-  },
 };

dynamic-system-host/app1/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { loadRemote, init } from '@module-federation/runtime';
 import ReactDOM from 'react-dom';
 
@@ -27,7 +27,6 @@ init({
       },
       beforeLoadShare(args) {
         console.log('beforeLoadShare: ', args);
-
         return args;
       },
     },
@@ -53,32 +52,26 @@ init({
     },
   },
 });
-function System(props) {
-  const { request } = props;
 
+const System = ({ request }) => {
   if (!request) {
     return <h2>No system specified</h2>;
   }
 
-  const Component = React.lazy(() => loadRemote(request));
+  const Component = lazy(() => loadRemote(request));
 
   return (
-    <React.Suspense fallback="Loading System">
+    <Suspense fallback="Loading System">
       <Component />
-    </React.Suspense>
+    </Suspense>
   );
-}
-
-function App() {
-  const [system, setSystem] = React.useState(false);
+};
 
-  function setApp2() {
-    setSystem('app2/Widget');
-  }
+const App = () => {
+  const [system, setSystem] = useState(null);
 
-  function setApp3() {
-    setSystem('app3/Widget');
-  }
+  const setApp2 = () => setSystem('app2/Widget');
+  const setApp3 = () => setSystem('app3/Widget');
 
   return (
     <div
@@ -90,7 +83,7 @@ function App() {
       <h1>Dynamic System Host</h1>
       <h2>App 1</h2>
       <p>
-        The Dynamic System will take advantage Module Federation <strong>remotes</strong> and{' '}
+        The Dynamic System will take advantage of Module Federation <strong>remotes</strong> and{' '}
         <strong>exposes</strong>. It will not load any components or modules that have been loaded
         already.
       </p>
@@ -101,6 +94,6 @@ function App() {
       </div>
     </div>
   );
-}
+};
 
 export default App;

dynamic-system-host/app2/rspack.config.js

@@ -1,6 +1,4 @@
-const {
-  container: { ModuleFederationPlugin },
-} = require('@rspack/core');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const path = require('path');

dynamic-system-host/app3/rspack.config.js

@@ -1,6 +1,4 @@
-const {
-  container: { ModuleFederationPlugin },
-} = require('@rspack/core');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const path = require('path');

dynamic-system-host/package.json

@@ -10,8 +10,8 @@
     "legacy:build": "pnpm --filter dynamic-system-host_app* legacy:build",
     "serve": "pnpm --filter dynamic-system-host_app* --parallel serve",
     "clean": "pnpm --filter dynamic-system-host_app* --parallel clean",
-    "e2e:ci": "pnpm start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
-    "legacy:e2e:ci": "pnpm legacy:start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
+    "e2e:ci": "pnpm start & sleep 1 &&  wait-on tcp:3001 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
+    "legacy:e2e:ci": "pnpm legacy:start & sleep 1 && wait-on tcp:3001 tcp:3002 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
   },
   "devDependencies": {
     "wait-on": "7.2.0"