feat: support modernjs ssr (#2482)

Co-authored-by: Zhou xiao <[email protected]>

Author: 2heal1

.changeset/long-spies-march.md

@@ -0,0 +1,13 @@
+---
+'@module-federation/devtools': minor
+'@module-federation/dts-plugin': minor
+'@module-federation/enhanced': minor
+'@module-federation/manifest': minor
+'@module-federation/modern-js': minor
+'@module-federation/runtime': minor
+'@module-federation/rspack': minor
+'@module-federation/node': minor
+'@module-federation/sdk': minor
+---
+
+feat: support modern.js ssr [#2348](https://github.com/module-federation/core/issues/2348)

.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

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/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()],
+});