Skip to content

Commit e9a032d

Browse files
zhangHongEnzhangHongEn
committed
feat: shared-directory
1 parent 476e82a commit e9a032d

28 files changed

+7589
-6204
lines changed

‎pnpm-lock.yaml

+7,011-6,204
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shared-directory/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# React host and remote
2+
3+
## Getting started
4+
5+
From this directory execute:
6+
7+
- npm run install:deps
8+
- npm run dev
9+
- npm run preview
10+
11+
### host
12+
http://localhost:5172/
13+
14+
### remote
15+
http://localhost:5176/
16+
17+
Open your browser at http://localhost:5172/ to see the amazing result
18+
19+
![alt text](image.png)

‎shared-directory/image.png

25.3 KB
Loading

‎shared-directory/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "module-federation-vite-react",
3+
"version": "1.0.0",
4+
"description": "Module Federation Vite + React is now possible",
5+
"scripts": {
6+
"install:deps": "pnpm --filter shared-directory-* install",
7+
"postinstall:deps": "pnpm --filter shared-directory-* run build",
8+
"dev": "pnpm --filter shared-directory-* dev",
9+
"build": "pnpm --filter shared-directory-* build",
10+
"preview": "pnpm --filter shared-directory-* preview"
11+
},
12+
"author": {
13+
"name": "Giorgio Boa",
14+
"email": "[email protected]",
15+
"url": "https://github.com/gioboa"
16+
},
17+
"license": "ISC"
18+
}

‎shared-directory/rust-host/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Rsbuild Project
2+
3+
## Setup
4+
5+
Install the dependencies:
6+
7+
```bash
8+
pnpm install
9+
```
10+
11+
## Get Started
12+
13+
Start the dev server:
14+
15+
```bash
16+
pnpm dev
17+
```
18+
19+
Build the app for production:
20+
21+
```bash
22+
pnpm build
23+
```
24+
25+
Preview the production build locally:
26+
27+
```bash
28+
pnpm preview
29+
```

‎shared-directory/rust-host/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "shared-directory-rust-host",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "rsbuild dev",
6+
"build": "rsbuild build",
7+
"preview": "npm run build && rsbuild preview"
8+
},
9+
"dependencies": {
10+
"@module-federation/enhanced": "0.2.5",
11+
"@module-federation/runtime": "^0.6.13",
12+
"antd": "^5.16.2",
13+
"react": "^18.2.0",
14+
"react-dom": "^18.2.0",
15+
"react-router-dom": "^6.22.3",
16+
"vue": "^3.4.29"
17+
},
18+
"devDependencies": {
19+
"@rsbuild/core": "0.7.10",
20+
"@rsbuild/plugin-react": "0.7.10",
21+
"@types/react": "18.3.3",
22+
"@types/react-dom": "18.3.0",
23+
"typescript": "5.5.3"
24+
}
25+
}

‎shared-directory/rust-host/rsbuild.config.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
2+
import { defineConfig } from '@rsbuild/core';
3+
import { pluginReact } from '@rsbuild/plugin-react';
4+
5+
export default defineConfig({
6+
server: {
7+
port: 5172,
8+
open: true,
9+
},
10+
dev: {
11+
// It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
12+
assetPrefix: 'http://localhost:5172',
13+
},
14+
tools: {
15+
rspack: (config, { appendPlugins }) => {
16+
config.output!.uniqueName = 'examples_rust';
17+
appendPlugins([
18+
new ModuleFederationPlugin({
19+
name: 'examples_rust',
20+
remotes: {
21+
viteRemote: 'viteRemote@http://localhost:5176/mf-manifest.json',
22+
shared: 'shared@https://shared.js',
23+
},
24+
implementation: require.resolve('@module-federation/runtime'),
25+
runtimePlugins: ['./src/shared/plugin'],
26+
}),
27+
]);
28+
},
29+
},
30+
plugins: [
31+
pluginReact({
32+
splitChunks: {
33+
react: false,
34+
router: false,
35+
},
36+
}),
37+
],
38+
});

‎shared-directory/rust-host/src/bootstrap.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import file1Default from "shared/dir1/file1";
4+
import {A} from "shared/file2";
5+
import ViteApp from "viteRemote/App1"
6+
7+
//@ts-ignore
8+
const root = ReactDOM.createRoot(document.getElementById('root')!);
9+
root.render(
10+
<React.StrictMode>
11+
<div style={{ background: 'yellow', padding: 30 }}>
12+
host:
13+
<br />
14+
shared/{file1Default}
15+
<br />
16+
shared/file2{A}
17+
</div>
18+
<hr />
19+
<ViteApp />
20+
</React.StrictMode>
21+
);

‎shared-directory/rust-host/src/env.d.ts

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

‎shared-directory/rust-host/src/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import('./bootstrap');

‎shared-directory/rust-host/src/shared/dir1/file1.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export default "dir1/file1 default(host)"
2+
export const A = "file2 A(host)"

‎shared-directory/rust-host/src/shared/file2.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export default "file2 default(host)"
2+
export const A = "file2 A(host)"

‎shared-directory/rust-host/src/shared/plugin.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default function () {
2+
return {
3+
name: 'delegate-modules-plugin',
4+
loadEntry({ remoteInfo }) {
5+
if (remoteInfo.name === 'shared') {
6+
return {
7+
init() {},
8+
async get(path) {
9+
path = path.replace('./', '');
10+
const result = await import(`./${path}`);
11+
return () => ({
12+
...result,
13+
__esModule: true
14+
});
15+
},
16+
};
17+
}
18+
},
19+
};
20+
}

‎shared-directory/rust-host/tsconfig.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "./",
4+
"target": "ES2020",
5+
"lib": ["DOM", "ES2020"],
6+
"module": "ESNext",
7+
"jsx": "react-jsx",
8+
"strict": true,
9+
"skipLibCheck": true,
10+
"isolatedModules": true,
11+
"resolveJsonModule": true,
12+
"moduleResolution": "bundler",
13+
"useDefineForClassFields": true
14+
},
15+
"include": ["src"]
16+
}

‎shared-directory/vite-remote/.__mf__temp/_mf_0_namespace_mf_1_viteViteRemote/localSharedImportMap.js

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
2+
// Windows temporarily needs this file, https://github.com/module-federation/vite/issues/68
3+
4+
const importMap = {
5+
6+
"react": async () => {
7+
let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react__prebuild__.js")
8+
return pkg
9+
}
10+
,
11+
"react/jsx-dev-runtime": async () => {
12+
let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_1_jsx_mf_2_dev_mf_2_runtime__prebuild__.js")
13+
return pkg
14+
}
15+
,
16+
"react/jsx-runtime": async () => {
17+
let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_1_jsx_mf_2_runtime__prebuild__.js")
18+
return pkg
19+
}
20+
,
21+
"react-dom/client": async () => {
22+
let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_2_dom_mf_1_client__prebuild__.js")
23+
return pkg
24+
}
25+
,
26+
"react-dom": async () => {
27+
let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_2_dom__prebuild__.js")
28+
return pkg
29+
}
30+
31+
}
32+
const usedShared = {
33+
34+
"react": {
35+
name: "react",
36+
version: "18.3.1",
37+
scope: ["default"],
38+
loaded: false,
39+
from: "@namespace/viteViteRemote",
40+
async get () {
41+
usedShared["react"].loaded = true
42+
const {"react": pkgDynamicImport} = importMap
43+
const res = await pkgDynamicImport()
44+
const exportModule = {...res}
45+
// All npm packages pre-built by vite will be converted to esm
46+
Object.defineProperty(exportModule, "__esModule", {
47+
value: true,
48+
enumerable: false
49+
})
50+
return function () {
51+
return exportModule
52+
}
53+
},
54+
shareConfig: {
55+
singleton: false,
56+
requiredVersion: "18"
57+
}
58+
}
59+
,
60+
"react/jsx-dev-runtime": {
61+
name: "react/jsx-dev-runtime",
62+
version: "18.3.1",
63+
scope: ["default"],
64+
loaded: false,
65+
from: "@namespace/viteViteRemote",
66+
async get () {
67+
usedShared["react/jsx-dev-runtime"].loaded = true
68+
const {"react/jsx-dev-runtime": pkgDynamicImport} = importMap
69+
const res = await pkgDynamicImport()
70+
const exportModule = {...res}
71+
// All npm packages pre-built by vite will be converted to esm
72+
Object.defineProperty(exportModule, "__esModule", {
73+
value: true,
74+
enumerable: false
75+
})
76+
return function () {
77+
return exportModule
78+
}
79+
},
80+
shareConfig: {
81+
singleton: false,
82+
requiredVersion: "18"
83+
}
84+
}
85+
,
86+
"react/jsx-runtime": {
87+
name: "react/jsx-runtime",
88+
version: "18.3.1",
89+
scope: ["default"],
90+
loaded: false,
91+
from: "@namespace/viteViteRemote",
92+
async get () {
93+
usedShared["react/jsx-runtime"].loaded = true
94+
const {"react/jsx-runtime": pkgDynamicImport} = importMap
95+
const res = await pkgDynamicImport()
96+
const exportModule = {...res}
97+
// All npm packages pre-built by vite will be converted to esm
98+
Object.defineProperty(exportModule, "__esModule", {
99+
value: true,
100+
enumerable: false
101+
})
102+
return function () {
103+
return exportModule
104+
}
105+
},
106+
shareConfig: {
107+
singleton: false,
108+
requiredVersion: "18"
109+
}
110+
}
111+
,
112+
"react-dom/client": {
113+
name: "react-dom/client",
114+
version: "18.3.1",
115+
scope: ["default"],
116+
loaded: false,
117+
from: "@namespace/viteViteRemote",
118+
async get () {
119+
usedShared["react-dom/client"].loaded = true
120+
const {"react-dom/client": pkgDynamicImport} = importMap
121+
const res = await pkgDynamicImport()
122+
const exportModule = {...res}
123+
// All npm packages pre-built by vite will be converted to esm
124+
Object.defineProperty(exportModule, "__esModule", {
125+
value: true,
126+
enumerable: false
127+
})
128+
return function () {
129+
return exportModule
130+
}
131+
},
132+
shareConfig: {
133+
singleton: false,
134+
requiredVersion: "^18.3.1"
135+
}
136+
}
137+
,
138+
"react-dom": {
139+
name: "react-dom",
140+
version: "18.3.1",
141+
scope: ["default"],
142+
loaded: false,
143+
from: "@namespace/viteViteRemote",
144+
async get () {
145+
usedShared["react-dom"].loaded = true
146+
const {"react-dom": pkgDynamicImport} = importMap
147+
const res = await pkgDynamicImport()
148+
const exportModule = {...res}
149+
// All npm packages pre-built by vite will be converted to esm
150+
Object.defineProperty(exportModule, "__esModule", {
151+
value: true,
152+
enumerable: false
153+
})
154+
return function () {
155+
return exportModule
156+
}
157+
},
158+
shareConfig: {
159+
singleton: false,
160+
requiredVersion: "^18.3.1"
161+
}
162+
}
163+
164+
}
165+
const usedRemotes = [
166+
{
167+
entryGlobalName: "shared",
168+
name: "shared",
169+
type: "var",
170+
entry: "https://shared.js",
171+
}
172+
173+
]
174+
export {
175+
usedShared,
176+
usedRemotes
177+
}
178+

0 commit comments

Comments
 (0)