Skip to content

Commit f5461b4

Browse files
zhoushawScriptedAlchemy2heal1
authored
doc: module federation new doc (#2224)
Co-authored-by: Zack Jackson <[email protected]> Co-authored-by: Hanric <[email protected]> Co-authored-by: 2heal1 <[email protected]>
1 parent 1bb03d1 commit f5461b4

File tree

148 files changed

+8922
-306
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

148 files changed

+8922
-306
lines changed

‎.prettierignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
*.md
77
!README.md
88
pnpm-lock.yaml
9-
**/dist/**
9+
**/dist/**
10+
apps/website-new/docs

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"diffEditor.wordWrap": "on"
3+
}

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson)
3+
Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎apps/website-new/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
doc_build

‎apps/website-new/LICENSE‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
https://creativecommons.org/licenses/by/4.0/legalcode.en

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
[
2+
{
3+
"text": "Guide",
4+
"link": "/guide/start/",
5+
"activeMatch": "/guide/"
6+
},
7+
{
8+
"text": "Configuration",
9+
"link": "/configure/",
10+
"activeMatch": "/configure/"
11+
},
12+
{
13+
"text": "Plugins",
14+
"link": "/plugin/dev/index",
15+
"activeMatch": "/plugin/"
16+
},
17+
{
18+
"text": "Community",
19+
"link": "/community/showcase/",
20+
"activeMatch": "/community/",
21+
"items": [
22+
{
23+
"text": "Showcase",
24+
"link": "/community/showcase/"
25+
},
26+
{
27+
"text": "Module Federation Examples",
28+
"link": "https://github.com/module-federation/module-federation-examples"
29+
},
30+
{
31+
"text": "Practical Module Federation",
32+
"link": "https://module-federation.myshopify.com/products/practical-module-federation"
33+
}
34+
]
35+
}
36+
]

‎apps/website-new/docs/en/community/showcase.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
sidebar_position: 0
3+
---
4+
5+
# Showcase
6+
7+
Welcome to the Module Federation showcase page! Here, we present a collection of websites built using the Module Federation technology.
8+
9+
If you have built a website using Module Federation and would like to share it with the community, we would greatly appreciate it. Simply reply in the GitHub discussion thread with a link to your website. We will regularly collect submissions and feature them on this page.
10+
11+
## The Cases
12+
13+
import { ShowcaseList } from '@components/ShowcaseList/index.tsx';
14+
15+
<ShowcaseList />

‎apps/website-new/docs/en/configure/_meta.json‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
[
2+
{
3+
"type": "file",
4+
"name": "index",
5+
"label": "Overview"
6+
},
7+
{
8+
"type": "file",
9+
"name": "name",
10+
"label": "name"
11+
},
12+
{
13+
"type": "file",
14+
"name": "filename",
15+
"label": "filename"
16+
},
17+
{
18+
"type": "file",
19+
"name": "remotes",
20+
"label": "remotes"
21+
},
22+
{
23+
"type": "file",
24+
"name": "exposes",
25+
"label": "exposes"
26+
},
27+
{
28+
"type": "file",
29+
"name": "shared",
30+
"label": "shared"
31+
},
32+
{
33+
"type": "file",
34+
"name": "runtimeplugins",
35+
"label": "runtimePlugins"
36+
},
37+
{
38+
"type": "file",
39+
"name": "getpublicpath",
40+
"label": "getPublicPath"
41+
},
42+
{
43+
"type": "file",
44+
"name": "implementation",
45+
"label": "implementation"
46+
},
47+
{
48+
"type": "file",
49+
"name": "dts",
50+
"label": "dts"
51+
},
52+
{
53+
"type": "file",
54+
"name": "dev",
55+
"label": "dev"
56+
},
57+
{
58+
"type": "file",
59+
"name": "manifest",
60+
"label": "manifest"
61+
}
62+
]

‎apps/website-new/docs/en/configure/dev.mdx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# dev
2+
3+
- Type: `boolean | PluginDevOptions`
4+
- Required: No
5+
- Default value: `true`
6+
- Usage scenario: used to control `Module Federation` dev behavior
7+
8+
The `PluginDevOptions` types are as follows:
9+
10+
```ts
11+
interface PluginDevOptions {
12+
disableLiveReload?: boolean;
13+
disableHotTypesReload?: boolean;
14+
}
15+
```
16+
17+
## disableHotTypesReload
18+
19+
- Type: `boolean`
20+
- Required: No
21+
- Default value: `false`
22+
23+
Whether to disable type hot reloading
24+
25+
## disableLiveReload
26+
27+
- Type: `boolean`
28+
- Required: No
29+
- Default value: `false`
30+
31+
Whether to disable `liveReload`, after setting `true`, any updates from the producer will not trigger the consumer's **page** `liveReload`

‎apps/website-new/docs/en/configure/dts.mdx‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# dts
2+
3+
- Type: `boolean | PluginDtsOptions`
4+
- Required: No
5+
- Default value: `true`
6+
- Usage scenario: used to control `Module Federation` generation/consumption type behavior
7+
8+
After configuration, the producer will automatically generate a compressed type file `@mf-types.zip` (default name) during build, and the consumer will automatically pull the type file of `remotes` and decompress it to `@mf-types` (default name).
9+
10+
The `PluginDtsOptions` types are as follows:
11+
12+
```ts
13+
interface PluginDtsOptions {
14+
generateTypes?: boolean | DtsRemoteOptions;
15+
consumeTypes?: boolean | DtsHostOptions;
16+
}
17+
```
18+
19+
### generateTypes
20+
21+
- Type: `boolean | DtsRemoteOptions`
22+
- Required: No
23+
- Default value: `true`
24+
- Usage scenario: used to control `Module Federation` generation type behavior
25+
26+
The `DtsRemoteOptions` types are as follows:
27+
28+
```ts
29+
interface DtsRemoteOptions {
30+
tsConfigPath?: string;
31+
typesFolder?: string;
32+
deleteTypesFolder?: boolean;
33+
additionalFilesToCompile?: string[];
34+
compilerInstance?: 'tsc' | 'vue-tsc';
35+
generateAPITypes?: boolean;
36+
extractThirdParty?: boolean;
37+
extractRemoteTypes?: boolean;
38+
abortOnError?: boolean;
39+
}
40+
```
41+
42+
When configuring `generateTypes` to `true`, the following configuration will be generated by default:
43+
44+
```json
45+
{
46+
"generateAPITypes": true,
47+
"abortOnError": false,
48+
"extractThirdParty": true,
49+
"extractRemoteTypes": true
50+
}
51+
```
52+
53+
#### extractRemoteTypes
54+
55+
- Type: `boolean`
56+
- Required: No
57+
- Default value: `undefined`
58+
- Usage scenario: When the content of the producer `exposes` has its own `remotes` module that re-exports itself, then `extractRemoteTypes: true` can ensure that the consumer can normally obtain the module type of the producer `exposes`
59+
- Example: [Nested type re-export](../guide/basic/type-prompt#Nested type re-export)
60+
61+
Whether to extract the type of `remotes`.
62+
63+
#### extractThirdParty
64+
65+
- Type: `boolean`
66+
- Required: No
67+
- Default value: `undefined`
68+
- Usage scenario: When the content of the producer `exposes` contains a module containing `antd`, and the consumer does not have `antd` installed, then `extractThirdParty: true` can ensure that the consumer can normally obtain the module of the producer `exposes` type
69+
- Example: [Third-party package type extraction](../guide/basic/type-prompt#Third-party package type extraction)
70+
71+
Whether to extract third-party package types.
72+
73+
#### generateAPITypes
74+
75+
- Type: `boolean`
76+
- Required: No
77+
- Default value: `undefined`
78+
- Example: [Federation Runtime API type prompt](../guide/basic/type-prompt#federation-runtime-api-type-prompt)
79+
80+
Whether to generate the `loadRemote` type in `Federation Runtime`
81+
82+
#### abortOnError
83+
84+
- Type: `boolean`
85+
- Required: No
86+
- Default value: `false`
87+
88+
Whether to throw an error when a problem is encountered during type generation
89+
90+
#### tsConfigPath
91+
92+
- Type: `string`
93+
- Required: No
94+
- Default value: `path.join(process.cwd(),'./tsconfig.json')`
95+
96+
tsconfig configuration file path
97+
98+
#### typesFolder
99+
100+
- Type: `string`
101+
- Required: No
102+
- Default value: `'@mf-types'`
103+
104+
The name of the generated compression type file. For example, if typesFolder is set to `custom`, then the name of the generated compression type file is: `custom.zip`
105+
106+
#### deleteTypesFolder
107+
108+
- Type: `boolean`
109+
- Required: No
110+
-Default: `true`
111+
112+
Whether to delete the generated type folder
113+
114+
#### compilerInstance
115+
116+
- Type: `'tsc' | 'vue-tsc'`
117+
- Required: No
118+
- Default value: `'tsc'`
119+
120+
Example of compiled type
121+
122+
### consumeTypes
123+
124+
- Type: `boolean | DtsHostOptions`
125+
- Required: No
126+
- Default value: `true`
127+
- Usage scenario: used to control `Module Federation` consumption (loading) type behavior
128+
129+
The `DtsHostOptions` types are as follows:
130+
131+
```ts
132+
interface DtsHostOptions {
133+
typesFolder?: string;
134+
abortOnError?: boolean;
135+
remoteTypesFolder?: string;
136+
deleteTypesFolder?: boolean;
137+
maxRetries?: number;
138+
consumeAPITypes?: boolean;
139+
}
140+
```
141+
142+
When configuring `consumeTypes` to `true`, the following configuration will be generated by default:
143+
144+
```json
145+
{
146+
"abortOnError": false,
147+
"consumeAPITypes": true
148+
}
149+
```
150+
151+
#### consumeAPITypes
152+
153+
- Type: `boolean`
154+
- Required: No
155+
- Default value: `true`
156+
- Example: [Federation Runtime API type prompt](../guide/basic/type-prompt#federation-runtime-api-type-prompt)
157+
158+
Whether to generate the type of runtime `loadRemote` API
159+
160+
#### maxRetries
161+
162+
- Type: `number`
163+
- Required: No
164+
- Default value: `3`
165+
166+
Maximum number of retries for failed loading
167+
168+
#### abortOnError
169+
170+
- Type: `boolean`
171+
- Required: No
172+
- Default value: `false`
173+
174+
Whether to throw an error when a problem is encountered during type loading
175+
176+
#### typesFolder
177+
178+
- Type: `string`
179+
- Required: No
180+
- Default value: `'@mf-types'`
181+
182+
Type storage directory after successful loading
183+
184+
#### deleteTypesFolder
185+
186+
- Type: `boolean`
187+
- Required: No
188+
- Default value: `true`
189+
190+
Before loading type files, whether to delete the previously loaded `typesFolder` directory
191+
192+
#### remoteTypesFolder
193+
194+
- Type: `string`
195+
- Required: No
196+
- Default value: `'@mf-types'`
197+
198+
`typesFolder` corresponding to `remotes` directory configuration

0 commit comments

Comments
 (0)