fix: fix some issues in module-federation/bridge

.changeset/config.json

@@ -18,7 +18,8 @@
       "@module-federation/bridge-react",
       "@module-federation/bridge-vue3",
       "@module-federation/bridge-shared",
-      "@module-federation/bridge-react-webpack-plugin"
+      "@module-federation/bridge-react-webpack-plugin",
+      "@module-federation/modern-js"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

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

@@ -66,3 +66,8 @@ jobs:
     needs: checkout-install
     uses: ./.github/workflows/e2e-next.yml
     secrets: inherit
+
+  e2e-modern-ssr:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-modern-ssr.yml
+    secrets: inherit

.github/workflows/e2e-modern-ssr.yml

@@ -0,0 +1,57 @@
+name: E2E Test for ModernJS SSR
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-modern:
+    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=modernjs
+
+      - name: E2E Test for Modern.js SSR
+        if: steps.check-ci.outcome == 'success'
+        run: |
+          lsof -ti tcp:3050,3051,3052,3053,3054,3055,3056 | xargs -r kill &&
+          pnpm run app:modern:dev &
+          sleep 1 &&
+          npx wait-on http://127.0.0.1:3050/ &&
+          npx wait-on http://127.0.0.1:3051/ &&
+          npx wait-on http://127.0.0.1:3052/ &&
+          npx wait-on http://127.0.0.1:3053/ &&
+          npx wait-on http://127.0.0.1:3054/ &&
+          npx wait-on http://127.0.0.1:3055/ &&
+          npx wait-on http://127.0.0.1:3056/ &&
+          npx nx run modernjs-ssr-host:e2e &&
+          lsof -ti tcp:3050,3051,3052,3053,3054,3055,3056 | xargs kill

.gitignore

@@ -60,3 +60,8 @@ packages/enhanced/test/js
 
 /apps/manifest-demo/**/@mf-types/
 /apps/manifest-demo/webpack-host/@mf-types/
+/apps/manifest-demo/3008-webpack-host/@mf-types/
+
+# dts test cases
+**/dist-test
+**/dist-test/**

apps/3000-home/cypress/support/commands.ts

@@ -19,9 +19,9 @@ declare namespace Cypress {
 }
 
 // -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
-  console.log('Custom command example: Login', email, password);
-});
+// 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) => { ... })

apps/3001-shop/cypress/support/commands.ts

@@ -19,9 +19,6 @@ declare namespace Cypress {
 }
 
 // -- 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) => { ... })

apps/3002-checkout/cypress/support/commands.ts

@@ -19,9 +19,6 @@ declare namespace Cypress {
 }
 
 // -- 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) => { ... })

apps/modernjs-ssr/README.md

@@ -0,0 +1,24 @@
+# modernjs-ssr
+
+## Running Demo
+
+- host: [localhost:3050](http://localhost:3050/)
+- remote: [localhost:3051](http://localhost:3051/)
+- nested-remote: [localhost:3052](http://localhost:3052/)
+- dynamic-remote: [localhost:3053](http://localhost:3053/)
+- dynamic-nested-remote: [localhost:3054](http://localhost:3054/)
+- remote-new-version: [localhost:3055](http://localhost:3055/)
+- dynamic-remote-new-version: [localhost:3056](http://localhost:3056/)
+
+## How to start the demos ?
+
+```bash
+# Root directory
+pnpm i 
+
+nx build modern-js-plugin 
+
+pnpm run app:modern:dev  
+
+open http://localhost:3050/
+```

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/Image.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/Image';
+export { default } from './compiled-types/Image';

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/compiled-types/Image.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ text }: {
+    text: string;
+}) => JSX.Element;
+export default _default;

apps/modernjs-ssr/dynamic-nested-remote/CHANGELOG.md

@@ -0,0 +1,14 @@
+# modernjs-ssr-dynamic-nested-remote
+
+## 0.1.13
+
+### Patch Changes
+
+- @module-federation/modern-js@0.3.1
+
+## 0.1.12
+
+### Patch Changes
+
+- Updated dependencies [fa37cc4]
+  - @module-federation/modern-js@0.2.0

apps/modernjs-ssr/dynamic-nested-remote/modern.config.ts

@@ -0,0 +1,19 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  dev: {
+    port: 3054,
+  },
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+    port: 3054,
+  },
+  plugins: [appTools(), moduleFederationPlugin()],
+});

apps/modernjs-ssr/dynamic-nested-remote/module-federation.config.ts

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'dynamic_nested_remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Content': './src/components/Content.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

apps/modernjs-ssr/dynamic-nested-remote/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "modernjs-ssr-dynamic-nested-remote",
+  "private": true,
+  "version": "0.1.13",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "FEDERATION_DEBUG=true modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@modern-js/runtime": "2.56.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@module-federation/modern-js": "workspace:*",
+    "@babel/runtime": "7.24.4",
+    "antd": "4.24.15"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "2.56.1",
+    "@modern-js/eslint-config": "2.56.1",
+    "@modern-js/tsconfig": "2.56.1",
+    "@modern-js-app/eslint-config": "2.56.1",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.5.0",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "lint-staged": "~13.1.0",
+    "prettier": "~2.8.1",
+    "rimraf": "~3.0.2"
+  }
+}

apps/modernjs-ssr/dynamic-nested-remote/project.json

@@ -0,0 +1,77 @@
+{
+  "name": "modernjs-ssr-dynamic-nested-remote",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-dynamic-nested-remote/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-ssr/dynamic-nested-remote; pnpm run build",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-ssr/dynamic-nested-remote; pnpm run dev",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/modernjs-ssr/modernjs-ssr-dynamic-nested-remote/cypress.config.ts",
+        "testingType": "e2e",
+        "baseUrl": "http://localhost:4001",
+        "browser": "chrome"
+      },
+      "configurations": {
+        "development": {
+          "runnerUi": true,
+          "browser": "electron",
+          "exit": false,
+          "watch": true
+        }
+      }
+    },
+    "test:e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": true,
+        "commands": [
+          {
+            "command": "lsof -i :8080 || nx run modernjs-ssr-dynamic-nested-remote:serve & echo 'done'",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "sleep 20 && nx run modernjs-ssr-dynamic-nested-remote:e2e",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["typescript"]
+}

apps/modernjs-ssr/dynamic-nested-remote/src/.eslintrc.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};

apps/modernjs-ssr/dynamic-nested-remote/src/components/Button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+
+export default (): JSX.Element => (
+  <div className="testlll">
+    <Button onClick={() => alert('Client side Javascript works!')}>
+      This button will appear after 1000ms
+    </Button>
+  </div>
+);

apps/modernjs-ssr/dynamic-nested-remote/src/components/Button2.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+
+export default (): JSX.Element => (
+  <div className="testlll">
+    <Button onClick={() => alert('Client side Javascript works!')}>
+      This button will appear after 2000ms
+    </Button>
+  </div>
+);