feat: support component data fetch in ssr mode (#3753)

Author: 2heal1

.changeset/rich-bees-applaud.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/manifest': patch
+---
+
+fix(manifest): record all exposes even if the expose value is the same file

.changeset/spotty-trains-stare.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': minor
+---
+
+feat(modern-js-plugin): support component-level data fetch

apps/manifest-demo/webpack-host/runtimePlugin.ts

@@ -4,6 +4,10 @@ export default function (): FederationRuntimePlugin {
   return {
     name: 'custom-plugin-build',
     beforeInit(args) {
+      const { userOptions, origin } = args;
+      if (origin.options.name && origin.options.name !== userOptions.name) {
+        userOptions.name = origin.options.name;
+      }
       console.log('[build time inject] beforeInit: ', args);
       return args;
     },

apps/modern-component-data-fetch/README.md

@@ -0,0 +1,20 @@
+# modern-component-data-fetch
+
+## Running Demo
+
+- host: [localhost:5001](http://localhost:5001/)
+- provider: [localhost:5002](http://localhost:5002/)
+- provider-csr: [localhost:5003](http://localhost:5003/)
+
+## How to start the demos ?
+
+```bash
+# Root directory
+pnpm i
+
+nx build modern-js-plugin
+
+pnpm run app:component-data-fetch:dev
+
+open http://localhost:5001/
+```

apps/modern-component-data-fetch/host/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

apps/modern-component-data-fetch/host/CHANGELOG.md

@@ -0,0 +1 @@
+# modernjs-ssr-nested-remote

apps/modern-component-data-fetch/host/cypress.config.ts

@@ -0,0 +1,12 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  projectId: 'sa6wfn',
+  e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
+});

apps/modern-component-data-fetch/host/cypress/e2e/csr-with-fetch-data.cy.ts

@@ -0,0 +1,27 @@
+import { getH2 } from '../support/app.po';
+
+describe('csr with fetch data', () => {
+  it('[ /csr ] - should render in client side and fetch data from server', () => {
+    cy.visit('/csr');
+    cy.wait(3000);
+    cy.url().should('include', '/csr');
+    getH2().contains('[ csr provider - server ] fetched data');
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#provider-csr-btn')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[provider-csr-btn] Client side Javascript works!',
+        );
+      });
+
+    // it only render in client side, so it not have downgrade identifier
+    cy.window().then((win) => {
+      expect(win.globalThis._mfSSRDowngrade).to.not.exist;
+    });
+  });
+});

apps/modern-component-data-fetch/host/cypress/e2e/downgrade.cy.ts

@@ -0,0 +1,63 @@
+import { getH1, getH2, getH3 } from '../support/app.po';
+
+declare global {
+  interface Window {
+    globalThis: {
+      _mfSSRDowngrade?: boolean | string[];
+    };
+  }
+}
+
+describe('downgrade', () => {
+  beforeEach(() => {
+    // the page will hydrate failed and downgrade, so catch the error, keep on testing
+    cy.on('uncaught:exception', (err, runnable) => {
+      return false;
+    });
+  });
+
+  it('[ /client-downgrade ] - should downgrade load data.client.js to fetch data', () => {
+    cy.visit('/client-downgrade');
+    cy.wait(3000);
+    cy.url().should('include', '/client-downgrade');
+    getH2().contains('fetch data from provider client');
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#client-downgrade-btn')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[client-downgrade] Client side Javascript works!',
+        );
+      });
+    cy.window().then((win) => {
+      expect(win.globalThis._mfSSRDowngrade).to.exist;
+    });
+  });
+
+  it('[ /server-downgrade ] - should downgrade and fetch data from server', () => {
+    cy.visit('/server-downgrade');
+    cy.wait(3000);
+    cy.url().should('include', '/server-downgrade');
+    getH2().contains('[ provider - server - ServerDowngrade]');
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#server-downgrade-btn')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[server-downgrade] Client side Javascript works!',
+        );
+      });
+    cy.window().then((win) => {
+      console.log(win);
+      expect(win.globalThis._mfSSRDowngrade).to.exist;
+    });
+  });
+});

apps/modern-component-data-fetch/host/cypress/e2e/route-check.cy.ts

@@ -0,0 +1,68 @@
+import { getH1, getH2, getH3 } from '../support/app.po';
+
+declare global {
+  interface Window {
+    globalThis: {
+      _mfSSRDowngrade?: boolean | string[];
+    };
+  }
+}
+
+describe('/', () => {
+  beforeEach(() => cy.visit('/'));
+
+  describe('Welcome message', () => {
+    it('should display welcome message', () => {
+      getH1().contains('Welcome message from host');
+    });
+  });
+
+  // check that clicking back and forwards in client side routeing still renders the content correctly
+  describe('Routing checks', () => {
+    it('[ /basic ] - should render in client side and fetch data from server side', () => {
+      // wait nav hydration
+      cy.wait(3000);
+      cy.get('.basic').parent().click();
+      cy.url().should('include', '/basic');
+      getH2().contains('[ provider - client ] fetched data');
+
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+
+      cy.get('#provider-btn')
+        .should('be.visible')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            '[provider] Client side Javascript works!',
+          );
+        });
+
+      cy.window().then((win) => {
+        expect(win.globalThis._mfSSRDowngrade).to.not.exist;
+      });
+    });
+
+    it('[ /client-downgrade ] - should render in client side and load data.client.js to fetch data', () => {
+      cy.wait(3000);
+      cy.get('.client-downgrade').parent().click();
+      cy.url().should('include', '/client-downgrade');
+      getH2().contains('fetch data from provider client');
+
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+
+      cy.get('#client-downgrade-btn')
+        .should('be.visible')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            '[client-downgrade] Client side Javascript works!',
+          );
+        });
+      cy.window().then((win) => {
+        expect(win.globalThis._mfSSRDowngrade).to.not.exist;
+      });
+    });
+  });
+});

apps/modern-component-data-fetch/host/cypress/e2e/ssr-with-fetch-data.cy.ts

@@ -0,0 +1,26 @@
+import { getH1, getH2, getH3 } from '../support/app.po';
+
+describe('ssr with fetch data', () => {
+  it('[ /basic ] - should render in server side and fetch data from server', () => {
+    cy.visit('/basic');
+    cy.wait(3000);
+    cy.url().should('include', '/basic');
+    getH2().contains('[ provider - server ] fetched data');
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#provider-btn')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[provider] Client side Javascript works!',
+        );
+      });
+
+    cy.window().then((win) => {
+      expect(win.globalThis._mfSSRDowngrade).to.not.exist;
+    });
+  });
+});

apps/modern-component-data-fetch/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/modern-component-data-fetch/host/cypress/support/commands.ts

@@ -0,0 +1,32 @@
+/// <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 --
+//
+// -- 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/modern-component-data-fetch/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/modern-component-data-fetch/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/modern-component-data-fetch/host/modern.config.ts

@@ -0,0 +1,23 @@
+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({
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+    port: 5001,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+    moduleFederationPlugin({
+      fetchServerQuery: { extraQuery: true },
+    }),
+  ],
+});

apps/modern-component-data-fetch/host/module-federation.config.ts

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'provider@http://localhost:5002/mf-manifest.json',
+    'provider-csr': 'provider_csr@http://localhost:5003/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});