feat: shared-directory (#4300)

zhangHongEn · web-flow · commit a3e5705411d7 · 2024-11-01T15:23:05.000-07:00
* feat: shared-directory

* Delete shared-directory/vite-remote/.__mf__temp/_mf_0_namespace_mf_1_viteViteRemote/localSharedImportMap.js

* Update package.json

* delete pic
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/shared-directory/README.md b/shared-directory/README.md
@@ -0,0 +1,19 @@
+# React host and remote
+
+## Getting started
+
+From this directory execute:
+
+- npm run install:deps
+- npm run dev
+- npm run preview
+
+### host
+http://localhost:5172/
+
+### remote
+http://localhost:5176/
+
+Open your browser at http://localhost:5172/ to see the amazing result
+
+![alt text](image.png)
diff --git a/shared-directory/image.png b/shared-directory/image.png
diff --git a/shared-directory/package.json b/shared-directory/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "module-federation-vite-react",
+  "version": "1.0.0",
+  "description": "Module Federation Vite + React is now possible",
+  "scripts": {
+    "install:deps": "pnpm --filter shared-directory-* install",
+    "postinstall:deps": "pnpm --filter shared-directory-* run build",
+    "dev": "pnpm --filter shared-directory-* dev",
+    "build": "pnpm --filter shared-directory-* build",
+    "preview": "pnpm --filter shared-directory-* preview"
+  },
+  "license": "ISC"
+}
diff --git a/shared-directory/rust-host/README.md b/shared-directory/rust-host/README.md
@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```
diff --git a/shared-directory/rust-host/package.json b/shared-directory/rust-host/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "shared-directory-rust-host",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "npm run build && rsbuild preview"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "0.2.5",
+    "@module-federation/runtime": "^0.6.13",
+    "antd": "^5.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "0.7.10",
+    "@rsbuild/plugin-react": "0.7.10",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "typescript": "5.5.3"
+  }
+}
diff --git a/shared-directory/rust-host/rsbuild.config.ts b/shared-directory/rust-host/rsbuild.config.ts
@@ -0,0 +1,38 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  server: {
+    port: 5172,
+    open: true,
+  },
+  dev: {
+    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
+    assetPrefix: 'http://localhost:5172',
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      config.output!.uniqueName = 'examples_rust';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'examples_rust',
+          remotes: {
+            viteRemote: 'viteRemote@http://localhost:5176/mf-manifest.json',
+            shared: 'shared@https://shared.js',
+          },
+          implementation: require.resolve('@module-federation/runtime'),
+          runtimePlugins: ['./src/shared/plugin'],
+        }),
+      ]);
+    },
+  },
+  plugins: [
+    pluginReact({
+      splitChunks: {
+        react: false,
+        router: false,
+      },
+    }),
+  ],
+});
diff --git a/shared-directory/rust-host/src/bootstrap.tsx b/shared-directory/rust-host/src/bootstrap.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import file1Default from "shared/dir1/file1";
+import {A} from "shared/file2";
+import ViteApp from "viteRemote/App1"
+
+//@ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <div style={{ background: 'yellow', padding: 30 }}>
+      host:
+      <br />
+      shared/{file1Default}
+      <br />
+      shared/file2{A}
+    </div>
+    <hr />
+    <ViteApp />
+  </React.StrictMode>
+);
diff --git a/shared-directory/rust-host/src/env.d.ts b/shared-directory/rust-host/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />
diff --git a/shared-directory/rust-host/src/index.tsx b/shared-directory/rust-host/src/index.tsx
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/shared-directory/rust-host/src/shared/dir1/file1.js b/shared-directory/rust-host/src/shared/dir1/file1.js
@@ -0,0 +1,2 @@
+export default "dir1/file1 default(host)"
+export const A = "file2 A(host)"
diff --git a/shared-directory/rust-host/src/shared/file2.js b/shared-directory/rust-host/src/shared/file2.js
@@ -0,0 +1,2 @@
+export default "file2 default(host)"
+export const A = "file2 A(host)"
diff --git a/shared-directory/rust-host/src/shared/plugin.js b/shared-directory/rust-host/src/shared/plugin.js
@@ -0,0 +1,20 @@
+export default function () {
+  return {
+    name: 'delegate-modules-plugin',
+    loadEntry({ remoteInfo }) {
+      if (remoteInfo.name === 'shared') {
+        return {
+          init() {},
+          async get(path) {
+            path = path.replace('./', '');
+            const result = await import(`./${path}`);
+            return () => ({
+              ...result,
+              __esModule: true
+            });
+          },
+        };
+      }
+    },
+  };
+}
diff --git a/shared-directory/rust-host/tsconfig.json b/shared-directory/rust-host/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}
diff --git a/shared-directory/vite-remote/.gitignore b/shared-directory/vite-remote/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+pnpm-lock.yaml
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/shared-directory/vite-remote/index.html b/shared-directory/vite-remote/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite React Remote</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/shared-directory/vite-remote/package.json b/shared-directory/vite-remote/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "shared-directory-vite-remote",
+  "version": "0.0.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite build&&vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@module-federation/vite": "^1.1.4",
+    "@mui/material": "^5.13.4",
+    "ag-grid-community": "^30.2.0",
+    "ag-grid-react": "^30.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass-embedded": "^1.77.8",
+    "styled-components": "5.3.3",
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3"
+  },
+  "devDependencies": {
+    "@swc/core": "~1.7.10",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0",
+    "vite-plugin-top-level-await": "^1.4.4"
+  }
+}
diff --git a/shared-directory/vite-remote/src/App1.jsx b/shared-directory/vite-remote/src/App1.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import vueImg from "./assets/vue.svg";
+import file1Default from "shared/dir1/file1";
+import {A} from "shared/file2";
+
+export default function () {
+  return (
+    <div style={{ background: 'green', padding: 30 }}>
+      remote:
+      <br />
+      shared/{file1Default}
+      <br />
+      shared/file2{A}
+    </div>
+  );
+}
diff --git a/shared-directory/vite-remote/src/main.jsx b/shared-directory/vite-remote/src/main.jsx
@@ -0,0 +1,16 @@
+import file1Default from "shared/dir1/file1";
+import {A} from "shared/file2";
+console.log('shared/dir1/file1 Default', file1Default)
+console.log('shared/file2 A', A)
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App1 from './App1';
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+
+    <h2>App1</h2>
+    <App1 />
+
+  </React.StrictMode>
+);
diff --git a/shared-directory/vite-remote/src/shared/dir1/file1.js b/shared-directory/vite-remote/src/shared/dir1/file1.js
@@ -0,0 +1,2 @@
+export default "dir1/file1 default(remote)"
+export const A = "file2 A(remote)"
diff --git a/shared-directory/vite-remote/src/shared/file2.js b/shared-directory/vite-remote/src/shared/file2.js
@@ -0,0 +1,2 @@
+export default "file2 default(remote)"
+export const A = "file2 A(remote)"
diff --git a/shared-directory/vite-remote/src/shared/plugin.js b/shared-directory/vite-remote/src/shared/plugin.js
@@ -0,0 +1,20 @@
+export default function () {
+  return {
+    name: 'delegate-modules-plugin',
+    loadEntry({ remoteInfo }) {
+      if (remoteInfo.name === 'shared') {
+        return {
+          init() {},
+          async get(path) {
+            path = path.replace('./', '');
+            const result = await import(`./${path}`);
+            return () => ({
+              ...result,
+              __esModule: true
+            });
+          },
+        };
+      }
+    },
+  };
+}
diff --git a/shared-directory/vite-remote/vite.config.js b/shared-directory/vite-remote/vite.config.js
@@ -0,0 +1,52 @@
+import { federation } from '@module-federation/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    open: true,
+    port: 5176,
+    origin: 'http://localhost:5176',
+  },
+  preview: {
+    port: 5176,
+  },
+  resolve: {
+  },
+  base: 'http://localhost:5176',
+  plugins: [
+    react({ }),
+    federation({
+      name: '@namespace/viteViteRemote',
+      exposes: {
+        './App1': './src/App1',
+      },
+      manifest: true,
+      remotes: {
+        shared: 'shared@https://shared.js',
+      },
+      runtimePlugins: ['./src/shared/plugin'],
+      shared: {
+        'react/': {},
+        react: {
+          requiredVersion: '18',
+        },
+        'react-dom/': {},
+      },
+    }),
+    // If you set build.target: "chrome89", you can remove this plugin
+    false && topLevelAwait(),
+  ],
+  build: {
+    target: 'chrome89',
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'static/js/[name]-[hash].js',
+        entryFileNames: 'static/js/[name]-[hash].js',
+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+      },
+    },
+  },
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+/// <reference types="@rsbuild/core/types" />`