@modern-js/main-doc 3.0.0-alpha.0 → 3.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/apis/app/commands.mdx +6 -30
- package/docs/en/components/bff-upload.mdx +3 -5
- package/docs/en/components/bundler.mdx +1 -1
- package/docs/en/components/enable-bff.mdx +6 -2
- package/docs/en/components/enable-ssg.mdx +1 -0
- package/docs/en/components/esbuild.mdx +2 -2
- package/docs/en/components/extend-bff-function.mdx +2 -4
- package/docs/en/components/hono.mdx +119 -0
- package/docs/en/components/international/custom-instance-code.mdx +16 -0
- package/docs/en/components/international/init-options-desc.mdx +1 -0
- package/docs/en/components/international/install-command.mdx +15 -1
- package/docs/en/components/international/instance-code.mdx +26 -0
- package/docs/en/configure/app/builder-plugins.mdx +1 -2
- package/docs/en/configure/app/dev/server.mdx +108 -0
- package/docs/en/configure/app/experiments/source-build.mdx +0 -1
- package/docs/en/configure/app/output/assets-retry.mdx +1 -1
- package/docs/en/configure/app/output/disable-inline-runtime-chunk.mdx +2 -2
- package/docs/en/configure/app/output/filename.mdx +2 -4
- package/docs/en/configure/app/output/temp-dir.mdx +3 -3
- package/docs/en/configure/app/performance/build-cache.mdx +1 -1
- package/docs/en/configure/app/performance/profile.mdx +1 -1
- package/docs/en/configure/app/plugins.mdx +1 -3
- package/docs/en/configure/app/runtime/router.mdx +0 -4
- package/docs/en/configure/app/security/sri.mdx +0 -1
- package/docs/en/configure/app/source/alias.mdx +1 -1
- package/docs/en/configure/app/source/enable-async-entry.mdx +1 -1
- package/docs/en/configure/app/source/include.mdx +2 -14
- package/docs/en/configure/app/tools/dev-server.mdx +8 -8
- package/docs/en/configure/app/usage.mdx +0 -12
- package/docs/en/guides/_meta.json +5 -0
- package/docs/en/guides/advanced-features/bff/_meta.json +9 -1
- package/docs/en/guides/advanced-features/bff/cross-project.mdx +1 -1
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +2 -15
- package/docs/en/guides/advanced-features/bff/function.mdx +4 -4
- package/docs/en/guides/advanced-features/bff/operators.mdx +628 -0
- package/docs/en/guides/advanced-features/bff/sdk.mdx +17 -9
- package/docs/en/guides/advanced-features/bff/upload.mdx +3 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +7 -16
- package/docs/en/guides/advanced-features/international/quick-start.mdx +4 -32
- package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
- package/docs/en/guides/advanced-features/page-performance/react-compiler.mdx +18 -4
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/advanced-features/server-monitor/monitors.mdx +62 -5
- package/docs/en/guides/basic-features/data/data-cache.mdx +60 -76
- package/docs/en/guides/basic-features/data/data-fetch.mdx +15 -14
- package/docs/en/guides/basic-features/debug/proxy.mdx +6 -9
- package/docs/en/guides/basic-features/render/rsc.mdx +24 -19
- package/docs/en/guides/basic-features/render/ssg.mdx +4 -9
- package/docs/en/guides/basic-features/render/ssr-cache.mdx +0 -4
- package/docs/en/guides/basic-features/static-assets/svg-assets.mdx +0 -4
- package/docs/en/guides/get-started/tech-stack.mdx +1 -1
- package/docs/en/guides/upgrade/_meta.json +1 -0
- package/docs/en/guides/upgrade/config.mdx +936 -0
- package/docs/en/guides/upgrade/entry.mdx +463 -0
- package/docs/en/guides/upgrade/other.mdx +83 -0
- package/docs/en/guides/upgrade/overview.mdx +33 -0
- package/docs/en/guides/upgrade/tailwindcss.mdx +130 -0
- package/docs/en/guides/upgrade/web-server.mdx +91 -0
- package/docs/en/plugin/_meta.json +5 -0
- package/docs/en/plugin/cli-plugins/_meta.json +1 -1
- package/docs/en/plugin/cli-plugins/api.mdx +13 -63
- package/docs/en/plugin/cli-plugins/life-cycle.mdx +0 -4
- package/docs/en/plugin/introduction.mdx +8 -20
- package/docs/en/plugin/plugin-system.mdx +3 -3
- package/docs/en/plugin/runtime-plugins/_meta.json +1 -1
- package/docs/en/plugin/runtime-plugins/api.mdx +1 -1
- package/docs/en/plugin/server-plugins/_meta.json +1 -0
- package/docs/en/plugin/server-plugins/api.mdx +210 -1
- package/docs/en/plugin/server-plugins/life-cycle.mdx +41 -1
- package/docs/zh/apis/app/commands.mdx +6 -30
- package/docs/zh/components/bff-operator-code.mdx +5 -0
- package/docs/zh/components/bff-upload.mdx +0 -2
- package/docs/zh/components/bundler.mdx +1 -1
- package/docs/zh/components/enable-bff.mdx +6 -2
- package/docs/zh/components/enable-ssg.mdx +3 -1
- package/docs/zh/components/esbuild.mdx +2 -2
- package/docs/zh/components/extend-bff-function.mdx +2 -4
- package/docs/zh/components/hono.mdx +119 -0
- package/docs/zh/components/international/custom-instance-code.mdx +16 -0
- package/docs/zh/components/international/init-options-desc.mdx +1 -0
- package/docs/zh/components/international/install-command.mdx +15 -0
- package/docs/zh/components/international/instance-code.mdx +26 -0
- package/docs/zh/configure/app/builder-plugins.mdx +1 -2
- package/docs/zh/configure/app/dev/server.mdx +109 -2
- package/docs/zh/configure/app/experiments/source-build.mdx +0 -1
- package/docs/zh/configure/app/output/assets-retry.mdx +1 -1
- package/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx +2 -2
- package/docs/zh/configure/app/output/filename.mdx +2 -4
- package/docs/zh/configure/app/output/temp-dir.mdx +3 -3
- package/docs/zh/configure/app/performance/build-cache.mdx +1 -1
- package/docs/zh/configure/app/performance/profile.mdx +1 -1
- package/docs/zh/configure/app/plugins.mdx +1 -2
- package/docs/zh/configure/app/runtime/router.mdx +0 -4
- package/docs/zh/configure/app/security/sri.mdx +0 -1
- package/docs/zh/configure/app/source/alias.mdx +1 -1
- package/docs/zh/configure/app/source/enable-async-entry.mdx +1 -1
- package/docs/zh/configure/app/source/include.mdx +2 -16
- package/docs/zh/configure/app/tools/dev-server.mdx +5 -5
- package/docs/zh/configure/app/usage.mdx +0 -12
- package/docs/zh/guides/advanced-features/bff/_meta.json +9 -1
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +2 -16
- package/docs/zh/guides/advanced-features/bff/operators.mdx +628 -0
- package/docs/zh/guides/advanced-features/bff/sdk.mdx +19 -12
- package/docs/zh/guides/advanced-features/bff/upload.mdx +3 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +7 -16
- package/docs/zh/guides/advanced-features/international/quick-start.mdx +2 -25
- package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
- package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx +18 -4
- package/docs/zh/guides/advanced-features/server-monitor/monitors.mdx +60 -5
- package/docs/zh/guides/basic-features/data/data-cache.mdx +47 -54
- package/docs/zh/guides/basic-features/data/data-fetch.mdx +9 -12
- package/docs/zh/guides/basic-features/debug/proxy.mdx +4 -7
- package/docs/zh/guides/basic-features/render/rsc.mdx +23 -37
- package/docs/zh/guides/basic-features/render/ssr-cache.mdx +0 -4
- package/docs/zh/guides/basic-features/static-assets/svg-assets.mdx +0 -4
- package/docs/zh/guides/get-started/tech-stack.mdx +1 -1
- package/docs/zh/guides/troubleshooting/builder.mdx +1 -1
- package/docs/zh/guides/upgrade/config.mdx +132 -1
- package/docs/zh/plugin/_meta.json +5 -0
- package/docs/zh/plugin/cli-plugins/_meta.json +1 -1
- package/docs/zh/plugin/cli-plugins/api.mdx +15 -65
- package/docs/zh/plugin/cli-plugins/life-cycle.mdx +0 -4
- package/docs/zh/plugin/introduction.mdx +4 -16
- package/docs/zh/plugin/plugin-system.mdx +3 -14
- package/docs/zh/plugin/runtime-plugins/_meta.json +1 -1
- package/docs/zh/plugin/runtime-plugins/api.mdx +1 -1
- package/docs/zh/plugin/server-plugins/_meta.json +1 -0
- package/docs/zh/plugin/server-plugins/api.mdx +210 -1
- package/docs/zh/plugin/server-plugins/life-cycle.mdx +41 -1
- package/package.json +2 -2
- package/src/components/FrameworkCode/index.tsx +605 -0
- package/docs/en/configure/app/performance/bundle-analyze.mdx +0 -24
- package/docs/en/configure/app/tools/babel.mdx +0 -225
- package/docs/en/plugin/cli-plugins/migration.mdx +0 -83
- package/docs/en/plugin/runtime-plugins/migration.mdx +0 -110
- package/docs/zh/components/default-mwa-generate.mdx +0 -4
- package/docs/zh/configure/app/performance/bundle-analyze.mdx +0 -24
- package/docs/zh/configure/app/tools/babel.mdx +0 -224
- package/docs/zh/plugin/cli-plugins/migration.mdx +0 -83
- package/docs/zh/plugin/runtime-plugins/migration.mdx +0 -110
- /package/docs/en/components/{router-legacy-tip.mdx → upgrade-config-deploy.mdx} +0 -0
- /package/docs/zh/components/{router-legacy-tip.mdx → upgrade-config-deploy.mdx} +0 -0
|
@@ -19,7 +19,6 @@ Options:
|
|
|
19
19
|
-e --entry <entry> compiler by entry
|
|
20
20
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
|
21
21
|
-h, --help show command help
|
|
22
|
-
--analyze analyze the bundle and view size of each module
|
|
23
22
|
--web-only only start web service
|
|
24
23
|
--api-only only start API service
|
|
25
24
|
```
|
|
@@ -79,31 +78,8 @@ Options:
|
|
|
79
78
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
|
80
79
|
-h, --help show command help
|
|
81
80
|
-w --watch turn on watch mode, watch for changes and rebuild
|
|
82
|
-
--analyze analyze the bundle and view size of each module
|
|
83
81
|
```
|
|
84
82
|
|
|
85
|
-
### Analyze Bundle
|
|
86
|
-
|
|
87
|
-
execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
|
|
88
|
-
|
|
89
|
-
```text
|
|
90
|
-
Bundle Analyzer saved report to /example/dist/report.html
|
|
91
|
-
|
|
92
|
-
info Production file sizes:
|
|
93
|
-
|
|
94
|
-
File Size Gzipped
|
|
95
|
-
dist/static/js/lib-react.09721b5c.js 152.6 kB 49.0 kB
|
|
96
|
-
dist/html/main/index.html 5.8 kB 2.5 kB
|
|
97
|
-
dist/static/js/main.3568a38e.js 3.5 kB 1.4 kB
|
|
98
|
-
dist/static/css/main.03221f72.css 1.4 kB 741 B
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:
|
|
102
|
-
|
|
103
|
-
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
|
|
104
|
-
|
|
105
|
-
> this features based on [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).
|
|
106
|
-
|
|
107
83
|
## modern new
|
|
108
84
|
|
|
109
85
|
The `modern new` command is used to enable features in an existing project.
|
|
@@ -174,7 +150,7 @@ Options:
|
|
|
174
150
|
|
|
175
151
|
## modern inspect
|
|
176
152
|
|
|
177
|
-
The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://rsbuild.rs/config/index) and
|
|
153
|
+
The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://rsbuild.rs/config/index) and Rspack config of the project.
|
|
178
154
|
|
|
179
155
|
```bash
|
|
180
156
|
Usage: modern inspect [options]
|
|
@@ -191,7 +167,7 @@ After executing the command `npx modern inspect` in the project root directory,
|
|
|
191
167
|
|
|
192
168
|
- `modern.js.config.mjs`:The Modern.js configuration currently used.
|
|
193
169
|
- `rsbuild.config.mjs`: The Rsbuild config to use at build time.
|
|
194
|
-
- `
|
|
170
|
+
- `rspack.config.web.mjs`: The Rspack config used by to use at build time.
|
|
195
171
|
|
|
196
172
|
```bash
|
|
197
173
|
➜ npx modern inspect
|
|
@@ -199,7 +175,7 @@ After executing the command `npx modern inspect` in the project root directory,
|
|
|
199
175
|
Inspect config succeed, open following files to view the content:
|
|
200
176
|
|
|
201
177
|
- Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
|
|
202
|
-
-
|
|
178
|
+
- Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
|
|
203
179
|
- Modern.js Config: /root/my-project/dist/modern.js.config.mjs
|
|
204
180
|
```
|
|
205
181
|
|
|
@@ -221,7 +197,7 @@ modern inspect --verbose
|
|
|
221
197
|
|
|
222
198
|
### SSR Configuration
|
|
223
199
|
|
|
224
|
-
If the project has enabled SSR, an additional `
|
|
200
|
+
If the project has enabled SSR, an additional `rspack.config.node.mjs` file will be generated in the `dist/`, corresponding to the Rspack configuration at SSR build time.
|
|
225
201
|
|
|
226
202
|
```bash
|
|
227
203
|
➜ npx modern inspect
|
|
@@ -229,8 +205,8 @@ If the project has enabled SSR, an additional `webpack.config.node.mjs` file wil
|
|
|
229
205
|
Inspect config succeed, open following files to view the content:
|
|
230
206
|
|
|
231
207
|
- Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
|
|
232
|
-
-
|
|
233
|
-
-
|
|
208
|
+
- Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
|
|
209
|
+
- Rspack Config (node): /root/my-project/dist/rspack.config.node.mjs
|
|
234
210
|
- Modern.js Config: /root/my-project/dist/modern.js.config.mjs
|
|
235
211
|
```
|
|
236
212
|
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls.
|
|
2
|
-
|
|
3
1
|
### BFF Function
|
|
4
2
|
|
|
5
3
|
First, create the `api/lambda/upload.ts` file:
|
|
6
4
|
|
|
7
5
|
```ts title="api/lambda/upload.ts"
|
|
8
|
-
export const post = async ({ formData }: {formData: Record<string, any>}) => {
|
|
6
|
+
export const post = async ({ formData }: { formData: Record<string, any> }) => {
|
|
9
7
|
console.info('formData:', formData);
|
|
10
8
|
// do somethings
|
|
11
9
|
return {
|
|
@@ -15,11 +13,11 @@ export const post = async ({ formData }: {formData: Record<string, any>}) => {
|
|
|
15
13
|
};
|
|
16
14
|
};
|
|
17
15
|
```
|
|
16
|
+
|
|
18
17
|
:::tip
|
|
19
18
|
The `formData` parameter in the interface processing function can access files uploaded from the client side. It is an `Object` where the keys correspond to the field names used during the upload.
|
|
20
19
|
:::
|
|
21
20
|
|
|
22
|
-
|
|
23
21
|
### Integrated Calling
|
|
24
22
|
|
|
25
23
|
Next, directly import and call the function in `src/routes/upload/page.tsx`:
|
|
@@ -61,8 +59,8 @@ export default (): JSX.Element => {
|
|
|
61
59
|
Note: The input parameter type must be `{ formData: FormData }` for the upload to succeed.
|
|
62
60
|
:::
|
|
63
61
|
|
|
64
|
-
|
|
65
62
|
### Manual Calling
|
|
63
|
+
|
|
66
64
|
You can manually upload files using the `fetch API`, when calling `fetch`, set the `body` as `FormData` type and submit a post request.
|
|
67
65
|
|
|
68
66
|
```tsx title="routes/upload/page.tsx"
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
Refers to module bundlers such as [
|
|
1
|
+
Refers to module bundlers such as [Rspack](https://rspack.rs/).
|
|
2
2
|
|
|
3
3
|
The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.
|
|
@@ -23,7 +23,7 @@ pnpm add @modern-js/plugin-bff@<version>
|
|
|
23
23
|
|
|
24
24
|
:::
|
|
25
25
|
|
|
26
|
-
2. Configure modern.config.ts
|
|
26
|
+
2. Configure `modern.config.ts`
|
|
27
27
|
|
|
28
28
|
Import and add the BFF plugin in the `modern.config.[tj]s` file:
|
|
29
29
|
|
|
@@ -47,6 +47,10 @@ To correctly recognize the `@api` alias in TypeScript, it is recommended to add
|
|
|
47
47
|
..., // other paths,
|
|
48
48
|
"@api/*": ["./api/lambda/*"]
|
|
49
49
|
}
|
|
50
|
-
}
|
|
50
|
+
},
|
|
51
|
+
"include": [
|
|
52
|
+
..., // other include directories
|
|
53
|
+
"api" // Add api directory
|
|
54
|
+
]
|
|
51
55
|
}
|
|
52
56
|
```
|
|
@@ -9,6 +9,7 @@ pnpm add @modern-js/plugin-ssg
|
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
:::tip Version Consistency
|
|
12
|
+
|
|
12
13
|
Make sure the version of `@modern-js/plugin-ssg` matches the version of `@modern-js/app-tools` in your project. All Modern.js official packages are released with a uniform version number, and version mismatches may cause compatibility issues.
|
|
13
14
|
|
|
14
15
|
Check the version of `@modern-js/app-tools` first, then install the same version of `@modern-js/plugin-ssg`:
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code,
|
|
1
|
+
[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, esbuild has dozens of times better performance.
|
|
2
2
|
|
|
3
|
-
Modern.js provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader
|
|
3
|
+
Modern.js provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader for transformation and minification process. When you enable esbuild in a large project, **it can greatly reduce the time required for code compilation and compression, while effectively avoiding OOM (heap out of memory) problems**.
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
The standard BFF function writing method may not always meet your needs.
|
|
1
|
+
The standard BFF function writing method may not always meet your needs. For example, complex TS type requirements in business scenarios. EdenX provides a more powerful BFF function writing method.
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Coming soon
|
|
5
|
-
:::
|
|
3
|
+
For more details, please refer to - [Creating Extensible BFF Functions](/guides/advanced-features/bff/operators).
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
### Getting Request Context
|
|
2
|
+
|
|
3
|
+
Sometimes in BFF functions, it's necessary to obtain the request context to handle more logic. In such cases, you can use `useHonoContext` to get it:
|
|
4
|
+
|
|
5
|
+
```ts title="api/lambda/hello.ts"
|
|
6
|
+
import { useHonoContext } from '@modern-js/plugin-bff/server';
|
|
7
|
+
|
|
8
|
+
export const get = async () => {
|
|
9
|
+
const c = useHonoContext();
|
|
10
|
+
console.info(`access url: ${c.req.url}`);
|
|
11
|
+
return 'Hello Modern.js';
|
|
12
|
+
};
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
:::info
|
|
16
|
+
For more details, refer to [useHonoContext](/apis/app/runtime/bff/use-hono-context).
|
|
17
|
+
:::
|
|
18
|
+
|
|
19
|
+
### Getting Cookies
|
|
20
|
+
|
|
21
|
+
When getting cookies in BFF functions, you need to get the request context through `useHonoContext`, then use `c.req.header('cookie')` to get the Cookie string and parse it manually:
|
|
22
|
+
|
|
23
|
+
```ts title="api/lambda/cookies.ts"
|
|
24
|
+
import { Api, Get, useHonoContext } from '@modern-js/plugin-bff/server';
|
|
25
|
+
|
|
26
|
+
// Helper function to parse Cookie string
|
|
27
|
+
function parseCookies(
|
|
28
|
+
cookieHeader: string | undefined,
|
|
29
|
+
): Record<string, string> {
|
|
30
|
+
const cookies: Record<string, string> = {};
|
|
31
|
+
if (!cookieHeader) return cookies;
|
|
32
|
+
|
|
33
|
+
cookieHeader.split(';').forEach(cookie => {
|
|
34
|
+
const [name, ...rest] = cookie.trim().split('=');
|
|
35
|
+
if (name) {
|
|
36
|
+
cookies[name] = rest.join('=');
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
return cookies;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export const getCookies = Api(Get('/cookies'), async () => {
|
|
44
|
+
const c = useHonoContext();
|
|
45
|
+
const cookieHeader = c.req.header('cookie');
|
|
46
|
+
const cookies = parseCookies(cookieHeader);
|
|
47
|
+
const token = cookies.token;
|
|
48
|
+
const sessionId = cookies.sessionId;
|
|
49
|
+
return {
|
|
50
|
+
hasToken: !!token,
|
|
51
|
+
token: token || null,
|
|
52
|
+
sessionId: sessionId || null,
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
:::caution Note
|
|
58
|
+
The `c.req.cookie()` method does not exist in the current version. You need to use `c.req.header('cookie')` to get the Cookie string and parse it manually.
|
|
59
|
+
:::
|
|
60
|
+
|
|
61
|
+
### Defining BFF Functions
|
|
62
|
+
|
|
63
|
+
When using Hono as the runtime framework, you can define interfaces through [Api functions](/guides/advanced-features/bff/operators.html):
|
|
64
|
+
|
|
65
|
+
```ts title="api/lambda/user.ts"
|
|
66
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
67
|
+
import { z } from 'zod';
|
|
68
|
+
|
|
69
|
+
const QuerySchema = z.object({
|
|
70
|
+
id: z.string(),
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
export const getUser = Api(
|
|
74
|
+
Get('/user'),
|
|
75
|
+
Query(QuerySchema),
|
|
76
|
+
async ({ query }) => {
|
|
77
|
+
return {
|
|
78
|
+
id: query.id,
|
|
79
|
+
name: 'Modern.js',
|
|
80
|
+
email: 'modernjs@bytedance.com',
|
|
81
|
+
};
|
|
82
|
+
},
|
|
83
|
+
);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
:::info
|
|
87
|
+
For more details about Api functions and operators, refer to [Creating Extensible BFF Functions](/guides/advanced-features/bff/operators.html).
|
|
88
|
+
:::
|
|
89
|
+
|
|
90
|
+
### Using Middleware
|
|
91
|
+
|
|
92
|
+
Hono supports a rich middleware ecosystem, and you can use middleware in BFF functions:
|
|
93
|
+
|
|
94
|
+
```ts title="api/lambda/user.ts"
|
|
95
|
+
import { Api, Get, Middleware } from '@modern-js/plugin-bff/server';
|
|
96
|
+
|
|
97
|
+
export const getUser = Api(
|
|
98
|
+
Get('/user'),
|
|
99
|
+
Middleware(async (c, next) => {
|
|
100
|
+
// You can access Hono's Context in middleware
|
|
101
|
+
c.res.headers.set('X-Powered-By', 'Modern.js');
|
|
102
|
+
await next();
|
|
103
|
+
}),
|
|
104
|
+
async () => {
|
|
105
|
+
return {
|
|
106
|
+
name: 'Modern.js',
|
|
107
|
+
email: 'modernjs@bytedance.com',
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
);
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
:::info
|
|
114
|
+
For more details about middleware, refer to [Creating Extensible BFF Functions](/guides/advanced-features/bff/operators.html#middleware).
|
|
115
|
+
:::
|
|
116
|
+
|
|
117
|
+
### More Hono Documentation
|
|
118
|
+
|
|
119
|
+
For more detailed information about Hono, please refer to the [Hono official documentation](https://hono.dev/).
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
```ts
|
|
2
|
+
import { defineRuntimeConfig } from '@modern-js/runtime';
|
|
3
|
+
import i18next from 'i18next';
|
|
4
|
+
|
|
5
|
+
// Create custom instance
|
|
6
|
+
const customI18n = i18next.createInstance({
|
|
7
|
+
// Custom configuration
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export default defineRuntimeConfig({
|
|
11
|
+
i18n: {
|
|
12
|
+
i18nInstance: customI18n,
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
```
|
|
16
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`initOptions` will be passed to i18next's `init` method and supports all i18next configuration options:
|
|
@@ -2,8 +2,22 @@
|
|
|
2
2
|
pnpm add @modern-js/plugin-i18n i18next react-i18next
|
|
3
3
|
```
|
|
4
4
|
|
|
5
|
+
:::tip Version Consistency
|
|
6
|
+
Make sure the version of `@modern-js/plugin-i18n` matches the version of `@modern-js/app-tools` in your project. All Modern.js official packages are released with a uniform version number, and version mismatches may cause compatibility issues.
|
|
7
|
+
|
|
8
|
+
Check the version of `@modern-js/app-tools` first, then install the same version of `@modern-js/plugin-i18n`:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
# Check the current version of @modern-js/app-tools
|
|
12
|
+
pnpm list @modern-js/app-tools
|
|
13
|
+
|
|
14
|
+
# Install the same version of @modern-js/plugin-i18n
|
|
15
|
+
pnpm add @modern-js/plugin-i18n@<version> i18next react-i18next
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
:::
|
|
19
|
+
|
|
5
20
|
:::info
|
|
6
21
|
`i18next` and `react-i18next` are peer dependencies and need to be installed manually.
|
|
7
22
|
|
|
8
23
|
:::
|
|
9
|
-
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
Create the `src/modern.runtime.ts` file and configure i18n runtime options:
|
|
2
|
+
|
|
3
|
+
```ts
|
|
4
|
+
import { defineRuntimeConfig } from '@modern-js/runtime';
|
|
5
|
+
import i18next from 'i18next';
|
|
6
|
+
|
|
7
|
+
// It's recommended to create a new i18next instance to avoid using the global default instance
|
|
8
|
+
const i18nInstance = i18next.createInstance();
|
|
9
|
+
|
|
10
|
+
export default defineRuntimeConfig({
|
|
11
|
+
i18n: {
|
|
12
|
+
i18nInstance: i18nInstance,
|
|
13
|
+
initOptions: {
|
|
14
|
+
fallbackLng: 'en',
|
|
15
|
+
supportedLngs: ['zh', 'en'],
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
:::info
|
|
22
|
+
`modern.runtime.ts` is a runtime configuration file used to configure i18next initialization options. Even for the most basic configuration, it's recommended to create this file to ensure the plugin works correctly.
|
|
23
|
+
|
|
24
|
+
It's recommended to use `i18next.createInstance()` to create a new instance instead of directly using the default exported `i18next`. This avoids global state pollution and ensures each application has an independent i18n instance.
|
|
25
|
+
|
|
26
|
+
:::
|
|
@@ -16,8 +16,7 @@ Rsbuild is the build tool of Modern.js, please read [Build Engine](/guides/conce
|
|
|
16
16
|
This option **is used to configure the Rsbuild plugins**. If you need to configure other types of plugins, please select the corresponding configs:
|
|
17
17
|
|
|
18
18
|
- Use [plugins](/configure/app/plugins) to configure Modern.js framework plugins.
|
|
19
|
-
- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack
|
|
20
|
-
- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
|
|
19
|
+
- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack plugins.
|
|
21
20
|
|
|
22
21
|
## When to use
|
|
23
22
|
|
|
@@ -101,3 +101,111 @@ const defaultOptions = {
|
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
For more configuration options and detailed usage, please refer to the [Rsbuild - server.cors](https://rsbuild.rs/config/server/cors) documentation.
|
|
104
|
+
|
|
105
|
+
### proxy
|
|
106
|
+
|
|
107
|
+
- **Type:** `Record<string, string> | Record<string, ProxyDetail>`
|
|
108
|
+
- **Default:** `undefined`
|
|
109
|
+
|
|
110
|
+
Proxy requests to the specified service.
|
|
111
|
+
|
|
112
|
+
```js
|
|
113
|
+
export default {
|
|
114
|
+
dev: {
|
|
115
|
+
server: {
|
|
116
|
+
proxy: {
|
|
117
|
+
'/api': 'http://localhost:3000',
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
At this point, the /api/users request will be proxied to http://localhost:3000/api/users.
|
|
125
|
+
|
|
126
|
+
If you don't want to pass /api, you can rewrite the request path through `pathRewrite`:
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
export default {
|
|
130
|
+
dev: {
|
|
131
|
+
server: {
|
|
132
|
+
proxy: {
|
|
133
|
+
'/api': {
|
|
134
|
+
target: 'http://localhost:3000',
|
|
135
|
+
pathRewrite: { '^/api': '' },
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
};
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
DevServer Proxy is implemented based on [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware/tree/2.x). You can use all configuration items of http-proxy-middleware, see the documentation for details.
|
|
144
|
+
|
|
145
|
+
The full type definition of DevServer Proxy is:
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
import type { Options as HttpProxyOptions } from 'http-proxy-middleware';
|
|
149
|
+
|
|
150
|
+
type Filter = string | string[] | ((pathname: string, req: Request) => boolean);
|
|
151
|
+
|
|
152
|
+
type ProxyDetail = HttpProxyOptions & {
|
|
153
|
+
bypass?: (
|
|
154
|
+
req: IncomingMessage,
|
|
155
|
+
res: ServerResponse,
|
|
156
|
+
proxyOptions: ProxyOptions,
|
|
157
|
+
) => string | undefined | null | false;
|
|
158
|
+
context?: Filter;
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
type ProxyOptions =
|
|
162
|
+
| Record<string, string>
|
|
163
|
+
| Record<string, ProxyDetail>
|
|
164
|
+
| ProxyDetail[]
|
|
165
|
+
| ProxyDetail;
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
In addition to the http-proxy-middleware options, two configuration items are also supported: bypass and context:
|
|
169
|
+
|
|
170
|
+
- bypass: Bypass the proxy based on the return value of the function.
|
|
171
|
+
- Returning `null` or `undefined` will continue to process the request with proxy.
|
|
172
|
+
- Returning `false` will return a 404 error.
|
|
173
|
+
- Returning a specific service path will use this path to replace the original request path.
|
|
174
|
+
- context: If you want to proxy multiple specific paths to the same target, you can use the context configuration item.
|
|
175
|
+
|
|
176
|
+
```js
|
|
177
|
+
// Custom bypass method
|
|
178
|
+
export default {
|
|
179
|
+
dev: {
|
|
180
|
+
server: {
|
|
181
|
+
proxy: {
|
|
182
|
+
'/api': {
|
|
183
|
+
target: 'http://localhost:3000',
|
|
184
|
+
bypass: function (req, res, proxyOptions) {
|
|
185
|
+
if (req.headers.accept.indexOf('html') !== -1) {
|
|
186
|
+
console.log('Skipping proxy for browser request.');
|
|
187
|
+
return '/index.html';
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
},
|
|
191
|
+
},
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
};
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
```js
|
|
198
|
+
// Proxy multiple paths to the same target
|
|
199
|
+
export default {
|
|
200
|
+
dev: {
|
|
201
|
+
server: {
|
|
202
|
+
proxy: [
|
|
203
|
+
{
|
|
204
|
+
context: ['/auth', '/api'],
|
|
205
|
+
target: 'http://localhost:3000',
|
|
206
|
+
},
|
|
207
|
+
],
|
|
208
|
+
},
|
|
209
|
+
},
|
|
210
|
+
};
|
|
211
|
+
```
|
|
@@ -4,7 +4,6 @@ title: sourceBuild
|
|
|
4
4
|
|
|
5
5
|
- **Type:** `boolean | PluginSourceBuildOptions`
|
|
6
6
|
- **Default:** `false`
|
|
7
|
-
- **Version:** `MAJOR_VERSION.46.0`
|
|
8
7
|
|
|
9
8
|
Used to enable the ability for source code building. When this configuration option is enabled, Modern.js will read the source code files corresponding to the `source` field in the sub-project's package.json and compile them.
|
|
10
9
|
|
|
@@ -31,7 +31,7 @@ export type AssetsRetryOptions = {
|
|
|
31
31
|
|
|
32
32
|
- **Default:** `undefined`
|
|
33
33
|
|
|
34
|
-
- Since this feature injects some runtime code into your HTML and [
|
|
34
|
+
- Since this feature injects some runtime code into your HTML and [Rspack Runtime](https://rspack.rs/api/runtime-api/module-variables), it is disabled by default. To enable it, provide an object for the option, for example:
|
|
35
35
|
|
|
36
36
|
```js
|
|
37
37
|
export default {
|
|
@@ -10,9 +10,9 @@ title: disableInlineRuntimeChunk
|
|
|
10
10
|
Used to control whether to inline the bundler's runtime code into HTML.
|
|
11
11
|
|
|
12
12
|
:::tip What is runtimeChunk
|
|
13
|
-
Modern.js will generate a `builder-runtime.js` file in the dist directory, which is the runtime code of
|
|
13
|
+
Modern.js will generate a `builder-runtime.js` file in the dist directory, which is the runtime code of Rspack.
|
|
14
14
|
|
|
15
|
-
runtimeChunk is a piece of runtime code, which is provided by
|
|
15
|
+
runtimeChunk is a piece of runtime code, which is provided by Rspack, that contains the necessary module processing logic, such as module loading, module parsing, etc. See [Runtime Chunk](https://rspack.rs/config/optimization#optimizationruntimechunk) for details.
|
|
16
16
|
|
|
17
17
|
:::
|
|
18
18
|
|
|
@@ -2,16 +2,14 @@
|
|
|
2
2
|
title: filename
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
# output.filename
|
|
6
|
+
|
|
5
7
|
:::warning
|
|
6
8
|
|
|
7
9
|
In Modern.js `dev` command or use Modern.js server deployment, don't modify the html output filename. This will cause the page to be 404.
|
|
8
10
|
|
|
9
|
-
In common, you don't need to modify the html filename. If you want modify `main.html` to `index.html`, using [source.mainEntryName](/configure/app/source/main-entry-name).
|
|
10
|
-
|
|
11
11
|
:::
|
|
12
12
|
|
|
13
|
-
# output.filename
|
|
14
|
-
|
|
15
13
|
- **Type:**
|
|
16
14
|
|
|
17
15
|
```ts
|
|
@@ -7,7 +7,7 @@ title: tempDir
|
|
|
7
7
|
- **Type:** `string`
|
|
8
8
|
- **Default:** `''`
|
|
9
9
|
|
|
10
|
-
When developing or building a project, Modern.js generates real
|
|
10
|
+
When developing or building a project, Modern.js generates real Rspack entries and HTML templates, placing them in a temporary directory.
|
|
11
11
|
|
|
12
12
|
If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other.
|
|
13
13
|
|
|
@@ -19,6 +19,6 @@ Example:
|
|
|
19
19
|
export default {
|
|
20
20
|
output: {
|
|
21
21
|
tempDir: path.join('node_modules', '.temp-dir'),
|
|
22
|
-
}
|
|
23
|
-
}
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
24
|
```
|
|
@@ -19,7 +19,7 @@ type BuildCacheConfig =
|
|
|
19
19
|
cacheDigest?: Array<string | undefined>;
|
|
20
20
|
/**
|
|
21
21
|
* An arrays of additional code dependencies for the build.
|
|
22
|
-
* Rspack
|
|
22
|
+
* Rspack will use a hash of each of these items and all dependencies to invalidate the filesystem cache.
|
|
23
23
|
*/
|
|
24
24
|
buildDependencies?: string[];
|
|
25
25
|
}
|
|
@@ -7,7 +7,7 @@ title: profile
|
|
|
7
7
|
- **Type:** `boolean`
|
|
8
8
|
- **Default:** `false`
|
|
9
9
|
|
|
10
|
-
Whether capture timing information for each module, same as the [profile](https://
|
|
10
|
+
Whether capture timing information for each module, same as the [profile](https://rspack.rs/config/other-options#profile) config of Rspack.
|
|
11
11
|
|
|
12
12
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
|
13
13
|
|
|
@@ -10,11 +10,9 @@ Used to configure custom Modern.js framework CLI plugins. For information on how
|
|
|
10
10
|
This option is **specifically for configuring framework CLI plugins**. If you need to configure other types of plugins, use the appropriate configuration method:
|
|
11
11
|
|
|
12
12
|
- Use [builderPlugins](/configure/app/builder-plugins) for Rsbuild plugins.
|
|
13
|
-
- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) for Rspack
|
|
14
|
-
- Use [tools.babel](/configure/app/tools/babel) for Babel plugins.
|
|
13
|
+
- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) for Rspack plugins.
|
|
15
14
|
- Use the [plugins field in runtime config](/configure/app/runtime/plugins) for framework Runtime plugins.
|
|
16
15
|
|
|
17
|
-
|
|
18
16
|
## Examples
|
|
19
17
|
|
|
20
18
|
Below are examples of using CLI plugins:
|
|
@@ -12,7 +12,7 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
|
|
|
12
12
|
|
|
13
13
|
- **Default:** `undefined`
|
|
14
14
|
|
|
15
|
-
Create aliases to import or require certain modules, same as the [resolve.alias](https://
|
|
15
|
+
Create aliases to import or require certain modules, same as the [resolve.alias](https://rspack.rs/config/resolve#resolvealias) config of Rspack.
|
|
16
16
|
|
|
17
17
|
:::tip
|
|
18
18
|
For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file. The Rsbuild will automatically recognize it, so there is no need to configure the `source.alias` option separately. For more details, please refer to [Path Aliases](https://modernjs.dev/en/guides/basic-features/alias.html).
|
|
@@ -7,7 +7,7 @@ title: enableAsyncEntry
|
|
|
7
7
|
- **Type:** `boolean`
|
|
8
8
|
- **Default:** `false`
|
|
9
9
|
|
|
10
|
-
This option is used for
|
|
10
|
+
This option is used for Rspack Module Federation scenario.
|
|
11
11
|
|
|
12
12
|
When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
|
|
13
13
|
|