feat: support interface data prefetch (#2543)

.changeset/light-items-battle.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/data-prefetch': patch
+---
+
+feat(@module-federation/data-prefetch): support data prefetch in Module Federation

.github/workflows/e2e-manifest.yml

@@ -43,4 +43,4 @@ jobs:
 
       - name: E2E Test for Manifest Demo
         if: steps.check-ci.outcome == 'success'
-        run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && npx kill-port 3013 3009 3010 3011 3012
+        run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx wait-on http://127.0.0.1:4001/ && npx nx run-many --target=e2e --projects=manifest-webpack-host --parallel=1 && npx kill-port 3013 3009 3010 3011 3012 4001

apps/manifest-demo/3009-webpack-provider/tsconfig.app.json

@@ -1,6 +1,16 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "outDir": "../../../dist/out-tsc",
     "types": [
       "node",

apps/manifest-demo/3009-webpack-provider/tsconfig.json

@@ -10,12 +10,29 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
+  "files": [
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "dist/**"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

apps/manifest-demo/3010-rspack-provider/package.json

@@ -9,6 +9,7 @@
     "@rspack/plugin-react-refresh": "0.5.9"
   },
   "dependencies": {
-    "antd": "4.24.15"
+    "antd": "4.24.15",
+    "react-router-dom": "^6.23.1"
   }
 }

apps/manifest-demo/3010-rspack-provider/rspack.config.js

@@ -66,6 +66,7 @@ module.exports = composePlugins(
           'react-dom': {},
           'react-dom/': {},
         },
+        dataPrefetch: true,
       }),
     );
     (config.devServer = {

apps/manifest-demo/3010-rspack-provider/src/App.tsx

@@ -1,4 +1,6 @@
 import LocalButton from './Button';
+import { Await } from 'react-router-dom';
+console.log(Await);
 
 const App = () => (
   <div>

apps/manifest-demo/webpack-host/src/App.tsx

@@ -1,4 +1,6 @@
 import React, { Suspense, lazy } from 'react';
+// @ts-ignore
+import ReactComponent from 'modern-js-provider/react-component';
 import TestRemoteHook from './test-remote-hook';
 import { loadRemote } from '@module-federation/runtime';
 import LocalBtn from './components/ButtonOldAnt';
@@ -29,6 +31,7 @@ const WebpackPngRemote = lazy(() => import('remote1/WebpackPng'));
 
 const App = () => (
   <div>
+    <ReactComponent />
     <h2>Manifest Basic Usage</h2>
     <h3>check static remote</h3>
     <table border={1} cellPadding={5}>

apps/manifest-demo/webpack-host/webpack.config.js

@@ -20,6 +20,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
           'rspack_manifest_provider@http://localhost:3011/mf-manifest.json',
         'js-entry-provider':
           'rspack_js_entry_provider@http://localhost:3012/remoteEntry.js',
+        'modern-js-provider': 'app1@http://127.0.0.1:4001/mf-manifest.json',
       },
       filename: 'remoteEntry.js',
       exposes: {

apps/modernjs/cypress/e2e/app.cy.ts

@@ -3,7 +3,7 @@ describe('modernjs/', () => {
 
   describe('Welcome message', () => {
     it('should display welcome message', () => {
-      cy.get('.title').contains('Welcome');
+      cy.get('.container-box').contains('Resend request with parameters');
     });
   });
 });

apps/modernjs/modern.config.ts

@@ -32,7 +32,8 @@ export default defineConfig({
     },
     webpack: (config, { webpack, appendPlugins }) => {
       if (config?.output) {
-        config.output.publicPath = 'http://localhost:4001/';
+        config.output.publicPath = 'http://127.0.0.1:4001/';
+        config.output.uniqueName = 'modern-js-app1';
       }
 
       appendPlugins([
@@ -44,12 +45,14 @@ export default defineConfig({
           name: 'app1',
           exposes: {
             './thing': './src/test.ts',
+            './react-component': './src/components/react-component.tsx',
           },
           runtimePlugins: ['./runtimePlugin.ts'],
           shared: {
             react: { singleton: true },
             'react-dom': { singleton: true },
           },
+          dataPrefetch: true,
         }),
       ]);
     },

apps/modernjs/src/components/react-component.prefetch.ts

@@ -0,0 +1,19 @@
+import { defer } from '@modern-js/runtime/router';
+import React from 'react';
+
+console.log(React);
+const defaultVal = {
+  data: {
+    id: 1,
+    title: 'A Prefetch Title',
+  },
+};
+
+export default (params = defaultVal) =>
+  defer({
+    userInfo: new Promise(resolve => {
+      setTimeout(() => {
+        resolve(params);
+      }, 2000);
+    }),
+  });

apps/modernjs/src/components/react-component.tsx

@@ -0,0 +1,44 @@
+import { Suspense } from 'react';
+import { usePrefetch } from '@module-federation/enhanced/prefetch';
+import { Await } from '@modern-js/runtime/router';
+
+interface UserInfo {
+  id: number;
+  title: string;
+}
+const reFetchParams = {
+  data: {
+    id: 2,
+    title: 'Another Prefetch Title',
+  },
+};
+
+const ReactComponent = () => {
+  const [prefetchResult, reFetchUserInfo] = usePrefetch<UserInfo>({
+    id: 'app1/react-component',
+    // Optional parameters, required after using defer
+    deferId: 'userInfo',
+  });
+
+  return (
+    <>
+      <button onClick={() => reFetchUserInfo(reFetchParams)}>
+        Resend request with parameters
+      </button>
+      <Suspense fallback={<p>Loading...</p>}>
+        <Await
+          resolve={prefetchResult}
+          // eslint-disable-next-line react/no-children-prop
+          children={userInfo => (
+            <div>
+              <div>{userInfo.data.id}</div>
+              <div>{userInfo.data.title}</div>
+            </div>
+          )}
+        />
+      </Suspense>
+    </>
+  );
+};
+
+export default ReactComponent;

apps/modernjs/src/routes/page.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { Helmet } from '@modern-js/runtime/head';
+import Component from '../components/react-component';
 import './index.css';
 
 const Index = () => (
@@ -87,6 +88,7 @@ const Index = () => (
         </a>
       </div>
     </main>
+    <Component />
   </div>
 );
 

apps/website-new/docs/en/guide/_meta.json

@@ -13,5 +13,10 @@
     "type": "dir",
     "name": "framework",
     "label": "Frameworks"
+  },
+  {
+    "type": "dir",
+    "name": "performance",
+    "label": "Performance"
   }
 ]

apps/website-new/docs/en/guide/performance/_meta.json

@@ -0,0 +1 @@
+["prefetch"]