feat: support interface data prefetch (#2543)

Author: nyqykk

.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');
     });
   });
 });