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;
+      });
+    });
+  });
+});