@modern-js/main-doc 2.67.4 → 2.67.6
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/hooks/server/server.mdx +10 -0
- package/docs/en/apis/app/hooks/src/routes.mdx +3 -3
- package/docs/en/apis/app/runtime/bff/use-hono-context.mdx +30 -0
- package/docs/en/components/enable-bff.mdx +1 -27
- package/docs/en/components/rsbuild-config-tooltip.mdx +2 -2
- package/docs/en/components/tech-stack-node-framework.mdx +1 -1
- package/docs/en/configure/app/dev/asset-prefix.mdx +2 -3
- package/docs/en/configure/app/dev/client.mdx +2 -3
- package/docs/en/configure/app/dev/hmr.mdx +2 -3
- package/docs/en/configure/app/dev/live-reload.mdx +2 -3
- package/docs/en/configure/app/dev/progress-bar.mdx +2 -3
- package/docs/en/configure/app/dev/setup-middlewares.mdx +2 -3
- package/docs/en/configure/app/dev/watch-files.mdx +2 -3
- package/docs/en/configure/app/dev/write-to-disk.mdx +2 -3
- package/docs/en/configure/app/html/app-icon.mdx +2 -3
- package/docs/en/configure/app/html/crossorigin.mdx +2 -3
- package/docs/en/configure/app/html/favicon.mdx +2 -3
- package/docs/en/configure/app/html/inject.mdx +2 -3
- package/docs/en/configure/app/html/meta.mdx +2 -3
- package/docs/en/configure/app/html/mount-id.mdx +2 -3
- package/docs/en/configure/app/html/output-structure.mdx +2 -3
- package/docs/en/configure/app/html/script-loading.mdx +2 -3
- package/docs/en/configure/app/html/tags.mdx +2 -3
- package/docs/en/configure/app/html/template-parameters.mdx +2 -3
- package/docs/en/configure/app/html/template.mdx +2 -3
- package/docs/en/configure/app/html/title.mdx +2 -3
- package/docs/en/configure/app/output/asset-prefix.mdx +2 -3
- package/docs/en/configure/app/output/charset.mdx +2 -3
- package/docs/en/configure/app/output/copy.mdx +2 -3
- package/docs/en/configure/app/output/css-modules.mdx +2 -3
- package/docs/en/configure/app/output/data-uri-limit.mdx +2 -3
- package/docs/en/configure/app/output/dist-path.mdx +2 -4
- package/docs/en/configure/app/output/externals.mdx +2 -3
- package/docs/en/configure/app/output/filename-hash.mdx +2 -3
- package/docs/en/configure/app/output/filename.mdx +2 -3
- package/docs/en/configure/app/output/inject-styles.mdx +2 -3
- package/docs/en/configure/app/output/inline-scripts.mdx +2 -3
- package/docs/en/configure/app/output/inline-styles.mdx +2 -3
- package/docs/en/configure/app/output/legal-comments.mdx +2 -3
- package/docs/en/configure/app/output/minify.mdx +2 -3
- package/docs/en/configure/app/output/override-browserslist.mdx +2 -3
- package/docs/en/configure/app/output/polyfill.mdx +2 -3
- package/docs/en/configure/app/output/source-map.mdx +2 -3
- package/docs/en/configure/app/performance/build-cache.mdx +2 -3
- package/docs/en/configure/app/performance/bundle-analyze.mdx +2 -3
- package/docs/en/configure/app/performance/chunk-split.mdx +2 -3
- package/docs/en/configure/app/performance/dns-prefetch.mdx +2 -3
- package/docs/en/configure/app/performance/preconnect.mdx +2 -3
- package/docs/en/configure/app/performance/prefetch.mdx +2 -3
- package/docs/en/configure/app/performance/preload.mdx +2 -3
- package/docs/en/configure/app/performance/print-file-size.mdx +2 -3
- package/docs/en/configure/app/performance/profile.mdx +2 -3
- package/docs/en/configure/app/performance/remove-console.mdx +2 -3
- package/docs/en/configure/app/performance/remove-moment-locale.mdx +2 -3
- package/docs/en/configure/app/plugins.mdx +13 -33
- package/docs/en/configure/app/runtime/master-app.mdx +1 -5
- package/docs/en/configure/app/runtime/plugins.mdx +58 -0
- package/docs/en/configure/app/security/nonce.mdx +2 -3
- package/docs/en/configure/app/security/sri.mdx +0 -1
- package/docs/en/configure/app/server/port.mdx +2 -3
- package/docs/en/configure/app/source/alias-strategy.mdx +2 -3
- package/docs/en/configure/app/source/alias.mdx +2 -3
- package/docs/en/configure/app/source/decorators.mdx +2 -3
- package/docs/en/configure/app/source/define.mdx +2 -3
- package/docs/en/configure/app/source/exclude.mdx +2 -3
- package/docs/en/configure/app/source/include.mdx +2 -3
- package/docs/en/configure/app/source/pre-entry.mdx +2 -3
- package/docs/en/configure/app/source/transform-import.mdx +2 -3
- package/docs/en/configure/app/tools/css-extract.mdx +2 -3
- package/docs/en/configure/app/tools/css-loader.mdx +2 -2
- package/docs/en/configure/app/tools/html-plugin.mdx +7 -3
- package/docs/en/configure/app/tools/lightningcss-loader.mdx +2 -3
- package/docs/en/configure/app/tools/postcss.mdx +2 -3
- package/docs/en/configure/app/tools/rspack.mdx +2 -3
- package/docs/en/configure/app/tools/style-loader.mdx +2 -3
- package/docs/en/configure/app/tools/swc.mdx +1 -1
- package/docs/en/configure/app/usage.mdx +1 -1
- package/docs/en/guides/advanced-features/bff/extend-server.mdx +33 -82
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +12 -68
- package/docs/en/guides/advanced-features/bff.mdx +1 -1
- package/docs/en/guides/advanced-features/compatibility.mdx +1 -1
- package/docs/en/guides/advanced-features/page-performance/_meta.json +1 -1
- package/docs/en/guides/advanced-features/page-performance/inline-assets.mdx +2 -0
- package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
- package/docs/en/guides/advanced-features/page-performance/react-compiler.mdx +44 -0
- package/docs/en/guides/advanced-features/web-server.mdx +378 -14
- package/docs/en/guides/basic-features/data/data-fetch.mdx +2 -1
- package/docs/en/guides/basic-features/deploy.mdx +3 -3
- package/docs/en/guides/basic-features/html.mdx +3 -3
- package/docs/en/guides/basic-features/output-files.mdx +0 -28
- package/docs/en/guides/basic-features/render/ssr.mdx +2 -2
- package/docs/en/guides/concept/entries.mdx +1 -1
- package/docs/en/plugin/cli-plugins/api.mdx +6 -0
- package/docs/en/plugin/runtime-plugins/api.mdx +37 -12
- package/docs/en/tutorials/first-app/c04-routes.mdx +4 -2
- package/docs/en/tutorials/first-app/c05-loader.mdx +5 -2
- package/docs/zh/apis/app/hooks/server/server.mdx +10 -0
- package/docs/zh/apis/app/hooks/src/routes.mdx +3 -3
- package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx +31 -0
- package/docs/zh/components/enable-bff.mdx +2 -27
- package/docs/zh/components/rsbuild-config-tooltip.mdx +2 -2
- package/docs/zh/components/tech-stack-node-framework.mdx +1 -1
- package/docs/zh/configure/app/dev/asset-prefix.mdx +2 -3
- package/docs/zh/configure/app/dev/client.mdx +2 -3
- package/docs/zh/configure/app/dev/hmr.mdx +2 -3
- package/docs/zh/configure/app/dev/live-reload.mdx +2 -3
- package/docs/zh/configure/app/dev/progress-bar.mdx +2 -3
- package/docs/zh/configure/app/dev/setup-middlewares.mdx +2 -3
- package/docs/zh/configure/app/dev/watch-files.mdx +2 -3
- package/docs/zh/configure/app/dev/write-to-disk.mdx +2 -3
- package/docs/zh/configure/app/html/app-icon.mdx +2 -3
- package/docs/zh/configure/app/html/crossorigin.mdx +2 -3
- package/docs/zh/configure/app/html/favicon.mdx +2 -3
- package/docs/zh/configure/app/html/inject.mdx +2 -3
- package/docs/zh/configure/app/html/meta.mdx +2 -3
- package/docs/zh/configure/app/html/mount-id.mdx +2 -3
- package/docs/zh/configure/app/html/output-structure.mdx +2 -3
- package/docs/zh/configure/app/html/script-loading.mdx +2 -3
- package/docs/zh/configure/app/html/tags.mdx +2 -3
- package/docs/zh/configure/app/html/template-parameters.mdx +2 -3
- package/docs/zh/configure/app/html/template.mdx +2 -3
- package/docs/zh/configure/app/html/title.mdx +2 -3
- package/docs/zh/configure/app/output/asset-prefix.mdx +2 -3
- package/docs/zh/configure/app/output/charset.mdx +2 -3
- package/docs/zh/configure/app/output/copy.mdx +2 -3
- package/docs/zh/configure/app/output/css-modules.mdx +2 -3
- package/docs/zh/configure/app/output/data-uri-limit.mdx +2 -3
- package/docs/zh/configure/app/output/dist-path.mdx +2 -4
- package/docs/zh/configure/app/output/externals.mdx +2 -3
- package/docs/zh/configure/app/output/filename-hash.mdx +2 -3
- package/docs/zh/configure/app/output/filename.mdx +2 -3
- package/docs/zh/configure/app/output/inject-styles.mdx +2 -3
- package/docs/zh/configure/app/output/inline-scripts.mdx +2 -3
- package/docs/zh/configure/app/output/inline-styles.mdx +2 -3
- package/docs/zh/configure/app/output/legal-comments.mdx +2 -3
- package/docs/zh/configure/app/output/minify.mdx +2 -3
- package/docs/zh/configure/app/output/override-browserslist.mdx +2 -3
- package/docs/zh/configure/app/output/polyfill.mdx +2 -3
- package/docs/zh/configure/app/output/source-map.mdx +2 -3
- package/docs/zh/configure/app/performance/build-cache.mdx +2 -3
- package/docs/zh/configure/app/performance/bundle-analyze.mdx +2 -3
- package/docs/zh/configure/app/performance/chunk-split.mdx +2 -3
- package/docs/zh/configure/app/performance/dns-prefetch.mdx +2 -3
- package/docs/zh/configure/app/performance/preconnect.mdx +2 -3
- package/docs/zh/configure/app/performance/prefetch.mdx +2 -3
- package/docs/zh/configure/app/performance/preload.mdx +2 -3
- package/docs/zh/configure/app/performance/print-file-size.mdx +2 -3
- package/docs/zh/configure/app/performance/profile.mdx +2 -3
- package/docs/zh/configure/app/performance/remove-console.mdx +2 -3
- package/docs/zh/configure/app/performance/remove-moment-locale.mdx +2 -3
- package/docs/zh/configure/app/plugins.mdx +3 -24
- package/docs/zh/configure/app/runtime/master-app.mdx +1 -5
- package/docs/zh/configure/app/runtime/plugins.mdx +58 -0
- package/docs/zh/configure/app/security/nonce.mdx +2 -3
- package/docs/zh/configure/app/security/sri.mdx +0 -1
- package/docs/zh/configure/app/server/port.mdx +2 -3
- package/docs/zh/configure/app/source/alias-strategy.mdx +2 -3
- package/docs/zh/configure/app/source/alias.mdx +2 -3
- package/docs/zh/configure/app/source/decorators.mdx +2 -3
- package/docs/zh/configure/app/source/define.mdx +2 -3
- package/docs/zh/configure/app/source/exclude.mdx +2 -3
- package/docs/zh/configure/app/source/include.mdx +2 -3
- package/docs/zh/configure/app/source/pre-entry.mdx +2 -3
- package/docs/zh/configure/app/source/transform-import.mdx +2 -3
- package/docs/zh/configure/app/tools/css-extract.mdx +2 -3
- package/docs/zh/configure/app/tools/css-loader.mdx +2 -3
- package/docs/zh/configure/app/tools/html-plugin.mdx +6 -3
- package/docs/zh/configure/app/tools/lightningcss-loader.mdx +2 -3
- package/docs/zh/configure/app/tools/postcss.mdx +2 -3
- package/docs/zh/configure/app/tools/rspack.mdx +2 -3
- package/docs/zh/configure/app/tools/style-loader.mdx +2 -3
- package/docs/zh/configure/app/tools/swc.mdx +1 -1
- package/docs/zh/configure/app/usage.mdx +1 -1
- package/docs/zh/guides/advanced-features/bff/extend-server.mdx +28 -76
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +6 -66
- package/docs/zh/guides/advanced-features/page-performance/_meta.json +1 -1
- package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx +44 -0
- package/docs/zh/guides/advanced-features/web-server.mdx +375 -18
- package/docs/zh/guides/basic-features/deploy.mdx +4 -3
- package/docs/zh/guides/basic-features/output-files.mdx +0 -28
- package/docs/zh/plugin/cli-plugins/api.mdx +6 -0
- package/docs/zh/plugin/runtime-plugins/api.mdx +37 -12
- package/docs/zh/tutorials/first-app/c04-routes.mdx +4 -2
- package/docs/zh/tutorials/first-app/c05-loader.mdx +4 -1
- package/package.json +7 -4
- package/rspress.config.ts +16 -1
- package/src/components/RsbuildLink/index.tsx +2 -2
- package/src/i18n/index.ts +1 -1
- package/src/index.ts +1 -5
- package/src/pages/index.tsx +3 -3
- package/docs/en/apis/app/hooks/api/middleware.mdx +0 -11
- package/docs/en/apis/app/runtime/bff/hook.mdx +0 -44
- package/docs/en/apis/app/runtime/bff/use-context.mdx +0 -38
- package/docs/en/configure/app/bff/enable-handle-web.mdx +0 -24
- package/docs/zh/apis/app/hooks/api/middleware.mdx +0 -11
- package/docs/zh/apis/app/runtime/bff/hook.mdx +0 -44
- package/docs/zh/apis/app/runtime/bff/use-context.mdx +0 -38
- package/docs/zh/configure/app/bff/enable-handle-web.mdx +0 -24
@@ -1,6 +1,5 @@
|
|
1
1
|
---
|
2
2
|
title: lightningcssLoader
|
3
|
-
configName: tools.lightningcssLoader
|
4
3
|
---
|
5
4
|
|
6
5
|
# tools.lightningcssLoader
|
@@ -36,6 +35,6 @@ const defaultOptions = {
|
|
36
35
|
|
37
36
|
It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
|
38
37
|
|
39
|
-
import
|
38
|
+
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
40
39
|
|
41
|
-
<
|
40
|
+
<RsbuildConfig configName="tools.lightningcssLoader" />
|
@@ -1,6 +1,5 @@
|
|
1
1
|
---
|
2
2
|
title: postcss
|
3
|
-
configName: tools.postcss
|
4
3
|
---
|
5
4
|
|
6
5
|
# tools.postcss
|
@@ -34,6 +33,6 @@ Modern.js integrates PostCSS by default, you can configure [postcss-loader](http
|
|
34
33
|
|
35
34
|
It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins.
|
36
35
|
|
37
|
-
import
|
36
|
+
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
38
37
|
|
39
|
-
<
|
38
|
+
<RsbuildConfig configName="tools.postcss" />
|
@@ -1,6 +1,5 @@
|
|
1
1
|
---
|
2
2
|
title: rspack
|
3
|
-
configName: tools.rspack
|
4
3
|
---
|
5
4
|
|
6
5
|
# tools.rspack
|
@@ -10,6 +9,6 @@ configName: tools.rspack
|
|
10
9
|
|
11
10
|
`tools.rspack` is used to configure [Rspack](https://rspack.dev/).
|
12
11
|
|
13
|
-
import
|
12
|
+
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
14
13
|
|
15
|
-
<
|
14
|
+
<RsbuildConfig configName="tools.rspack" />
|
@@ -1,6 +1,5 @@
|
|
1
1
|
---
|
2
2
|
title: styleLoader
|
3
|
-
configName: tools.styleLoader
|
4
3
|
---
|
5
4
|
|
6
5
|
# tools.styleLoader
|
@@ -10,6 +9,6 @@ configName: tools.styleLoader
|
|
10
9
|
|
11
10
|
The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
|
12
11
|
|
13
|
-
import
|
12
|
+
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
14
13
|
|
15
|
-
<
|
14
|
+
<RsbuildConfig configName="tools.styleLoader" />
|
@@ -21,7 +21,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
|
|
21
21
|
|
22
22
|
You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.
|
23
23
|
|
24
|
-
```
|
24
|
+
```ts
|
25
25
|
import { defineConfig } from '@modern-js/app-tools';
|
26
26
|
|
27
27
|
export default defineConfig<'rspack'>({
|
@@ -13,7 +13,7 @@ Modern.js does not support configuring the same configuration item in both `pack
|
|
13
13
|
|
14
14
|
**Runtime configuration** can be configured in the `src/modern.runtime.(ts|js|mjs)` file.
|
15
15
|
|
16
|
-
**Server Runtime configuration** can be configured in the `modern.server
|
16
|
+
**Server Runtime configuration** can be configured in the `server/modern.server.(ts|js|mjs)` file.
|
17
17
|
|
18
18
|
## Compile Configuration
|
19
19
|
|
@@ -1,35 +1,41 @@
|
|
1
1
|
# Extend BFF Server
|
2
2
|
|
3
|
-
In some applications, developers may want to handle all BFF functions uniformly, such as
|
3
|
+
In some applications, developers may want to handle all BFF functions uniformly, such as authentication, logging, data processing, etc.
|
4
4
|
|
5
|
-
Modern.js
|
5
|
+
Modern.js allows users to freely extend the BFF Server through [Middleware](/guides/advanced-features/web-server.html#middleware) method.
|
6
6
|
|
7
|
-
## Middleware
|
7
|
+
## Using Middleware
|
8
8
|
|
9
|
-
Developers can
|
9
|
+
Developers can use middleware by configuring middlewares in `server/modern.server.ts`. The following describes how to write a BFF middleware manually to add permission verification:
|
10
10
|
|
11
|
-
```ts title="
|
12
|
-
import {
|
13
|
-
|
11
|
+
```ts title="server/modern.server.ts"
|
12
|
+
import {
|
13
|
+
type MiddlewareHandler,
|
14
|
+
defineServerConfig,
|
15
|
+
} from '@modern-js/server-runtime';
|
14
16
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
res.status(400);
|
21
|
-
res.json({ code: -1, message: 'need login' });
|
22
|
-
} else {
|
23
|
-
next();
|
24
|
-
}
|
25
|
-
} else {
|
26
|
-
next();
|
17
|
+
const requireAuthForApi: MiddlewareHandler = async (c, next) => {
|
18
|
+
if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
|
19
|
+
const sid = c.req.cookie('sid');
|
20
|
+
if (!sid) {
|
21
|
+
return c.json({ code: -1, message: 'need login' }, 400);
|
27
22
|
}
|
28
|
-
}
|
23
|
+
}
|
24
|
+
await next();
|
25
|
+
};
|
26
|
+
|
27
|
+
export default defineServerConfig({
|
28
|
+
middlewares: [
|
29
|
+
{
|
30
|
+
name: 'require-auth-for-api',
|
31
|
+
handler: requireAuthForApi,
|
32
|
+
},
|
33
|
+
]
|
29
34
|
});
|
35
|
+
|
30
36
|
```
|
31
37
|
|
32
|
-
Then add a
|
38
|
+
Then add a regular BFF function `api/lambda/hello.ts`:
|
33
39
|
|
34
40
|
```ts title="api/lambda/hello.ts"
|
35
41
|
export default async () => {
|
@@ -37,7 +43,7 @@ export default async () => {
|
|
37
43
|
};
|
38
44
|
```
|
39
45
|
|
40
|
-
Next, in the frontend
|
46
|
+
Next, in the frontend `src/routes/page.tsx`, add the interface access code and directly use the integrated method to call:
|
41
47
|
|
42
48
|
```ts title="src/routes/page.tsx"
|
43
49
|
import { useState, useEffect } from 'react';
|
@@ -59,14 +65,14 @@ export default () => {
|
|
59
65
|
};
|
60
66
|
```
|
61
67
|
|
62
|
-
Now run the `dev` command to start the project, and
|
68
|
+
Now run the `dev` command to start the project, and access `http://localhost:8080/` to find that the request for `/api/hello` has been intercepted:
|
63
69
|
|
64
70
|

|
65
71
|
|
66
|
-
Finally, modify the frontend code
|
72
|
+
Finally, modify the frontend code `src/routes/page.tsx`, and call the login interface before accessing `/api/hello`:
|
67
73
|
|
68
74
|
:::note
|
69
|
-
|
75
|
+
This part does not implement a real login interface; the code is just for demonstration.
|
70
76
|
:::
|
71
77
|
|
72
78
|
```ts
|
@@ -92,63 +98,8 @@ export default () => {
|
|
92
98
|
};
|
93
99
|
```
|
94
100
|
|
95
|
-
Refresh the page
|
101
|
+
Refresh the page, and you can see that the access to `/api/hello` is successful:
|
96
102
|
|
97
103
|

|
98
104
|
|
99
|
-
The above code simulates
|
100
|
-
|
101
|
-
:::info
|
102
|
-
The way middleware is written may differ depending on the runtime framework. For details, see [Runtime Frameworks](/guides/advanced-features/bff/frameworks).
|
103
|
-
:::
|
104
|
-
|
105
|
-
## Define Server Instance
|
106
|
-
|
107
|
-
In addition to middleware, you can also define a BFF Server instance via the `api/app.ts`. Developers need to export an instance that can be recognized by the runtime framework plugin. Here is a simple demonstration of how to define a server instance with Koa and Express.
|
108
|
-
|
109
|
-
import { Tabs, Tab as TabItem } from "@theme";
|
110
|
-
|
111
|
-
<Tabs>
|
112
|
-
<TabItem value="express" label="Express.js" default>
|
113
|
-
|
114
|
-
```ts title="api/app.ts"
|
115
|
-
import express from 'express';
|
116
|
-
|
117
|
-
const app = express();
|
118
|
-
app.use(async (req, res, next) => {
|
119
|
-
console.info(`access url: ${req.url}`);
|
120
|
-
next();
|
121
|
-
});
|
122
|
-
|
123
|
-
export default app;
|
124
|
-
```
|
125
|
-
|
126
|
-
</TabItem>
|
127
|
-
<TabItem value="koa" label="Koa.js">
|
128
|
-
|
129
|
-
```ts title="api/app.ts"
|
130
|
-
import koa from 'koa';
|
131
|
-
|
132
|
-
const app = new Koa();
|
133
|
-
app.use(async (ctx, next) => {
|
134
|
-
console.info(`access url: ${ctx.url}`);
|
135
|
-
await next();
|
136
|
-
});
|
137
|
-
|
138
|
-
export default app;
|
139
|
-
```
|
140
|
-
|
141
|
-
</TabItem>
|
142
|
-
</Tabs>
|
143
|
-
|
144
|
-
In complex BFF logic, defining a server instance allows for easier organization of code logic and directory structure design through a single entry point. In this file, you can perform initialization logic, add global middleware, declare routes, and even extend the original framework.
|
145
|
-
|
146
|
-
The routes defined by the BFF functions will be registered after the routes defined in the `app.ts` file. Therefore, you can also intercept the routes defined by the BFF functions here for preprocessing or early responses.
|
147
|
-
|
148
|
-
:::note
|
149
|
-
At this time, if `api/_app.ts` exists in the application, the defined middleware will be executed after the middleware exported by the `api/app.ts` instance. In most cases, middleware can cover most customization needs for BFF functions. Only when the application's server-side logic is more complex do you need to customize the server instance.
|
150
|
-
:::
|
151
|
-
|
152
|
-
:::caution
|
153
|
-
When `api/app.ts` does not exist in the application, Modern.js will default to adding [koa-body](https://www.npmjs.com/package/koa-body). When `api/app.ts` does exist in the application, if developers wish to use BFF functions with bodies, they will need to **add `koa-body` themselves**.
|
154
|
-
:::
|
105
|
+
The above code simulates defining middleware in `server/Modern.server.ts` and implements a simple login function. Similarly, other functionalities can be implemented in this configuration file to extend the BFF Server.
|
@@ -1,81 +1,25 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
---
|
2
|
+
sidebar_position: 3
|
3
|
+
title: Runtime Framework
|
4
|
+
---
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
## Accessing Request Context
|
6
|
+
# Runtime Framework
|
8
7
|
|
9
|
-
|
8
|
+
Modern.js uses [Hono.js](https://hono.dev/) as the BFF and Server runtime framework, so you can [extend BFF Server](/guides/advanced-features/bff/extend-server.html) based on the Hono.js ecosystem.
|
10
9
|
|
11
|
-
|
10
|
+
## Getting Request Context
|
12
11
|
|
13
|
-
|
14
|
-
<TabItem value="express" label="Express.js" default>
|
12
|
+
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:
|
15
13
|
|
16
14
|
```ts title="api/lambda/hello.ts"
|
17
|
-
import {
|
15
|
+
import { useHonoContext } from '@modern-js/plugin-bff/hono'
|
18
16
|
export const get = async () => {
|
19
|
-
const
|
20
|
-
console.info(`access url: ${req.url}`);
|
17
|
+
const c = useHonoContext();
|
18
|
+
console.info(`access url: ${c.req.url}`);
|
21
19
|
return 'Hello Modern.js'
|
22
20
|
};
|
23
21
|
```
|
24
22
|
|
25
|
-
</TabItem>
|
26
|
-
<TabItem value="koa" label="Koa.js">
|
27
|
-
|
28
|
-
```ts title="api/lambda/hello.ts"
|
29
|
-
import { useContext } from '@modern-js/runtime/koa'
|
30
|
-
export const get = async () => {
|
31
|
-
const ctx = useContext();
|
32
|
-
console.info(`access url: ${req.url}`);
|
33
|
-
return 'Hello Modern.js'
|
34
|
-
};
|
35
|
-
```
|
36
|
-
|
37
|
-
</TabItem>
|
38
|
-
</Tabs>
|
39
|
-
|
40
|
-
:::info
|
41
|
-
For more details, refer to [useContext](/apis/app/runtime/bff/use-context).
|
42
|
-
:::
|
43
|
-
|
44
|
-
## Using Middleware
|
45
|
-
|
46
|
-
In BFF functions, you may need to use middleware to handle more logic. Depending on the runtime framework, you need to use different APIs:
|
47
|
-
|
48
|
-
<Tabs>
|
49
|
-
<TabItem value="express" label="Express.js" default>
|
50
|
-
|
51
|
-
```ts title="api/_app.ts"
|
52
|
-
import { hook } from '@modern-js/runtime/express';
|
53
|
-
|
54
|
-
export default hook(({ addMiddleware }) => {
|
55
|
-
addMiddleware((req, res, next) => {
|
56
|
-
req.query.id = 'koa';
|
57
|
-
next();
|
58
|
-
});
|
59
|
-
});
|
60
|
-
```
|
61
|
-
|
62
|
-
</TabItem>
|
63
|
-
<TabItem value="koa" label="Koa.js">
|
64
|
-
|
65
|
-
```ts title="api/_app.ts"
|
66
|
-
import { hook } from '@modern-js/runtime/koa';
|
67
|
-
|
68
|
-
export default hook(({ addMiddleware }) => {
|
69
|
-
addMiddleware(async (ctx, next) => {
|
70
|
-
ctx.req.query.id = 'koa';
|
71
|
-
await next();
|
72
|
-
});
|
73
|
-
});
|
74
|
-
```
|
75
|
-
|
76
|
-
</TabItem>
|
77
|
-
</Tabs>
|
78
|
-
|
79
23
|
:::info
|
80
|
-
For more details, refer to [
|
24
|
+
For more details, refer to [useHonoContext](/apis/app/runtime/bff/use-hono-context).
|
81
25
|
:::
|
@@ -6,7 +6,7 @@ title: BFF
|
|
6
6
|
|
7
7
|
BFF (Backends for Frontends) is an architectural pattern primarily used to address issues of data aggregation in front-end and back-end collaboration. Under the BFF architecture, front-end applications do not communicate directly with backend services. Instead, they interact with backend services through a dedicated BFF middleware layer, custom-made for the front end.
|
8
8
|
|
9
|
-
The main problems it to solve include:
|
9
|
+
The main problems it tries to solve include:
|
10
10
|
|
11
11
|
- Aggregation, mapping, clipping, and proxying of lower-level APIs according to their own business needs.
|
12
12
|
- Cache data for some specific scenarios to improve performance and thus improve user experience.
|
@@ -26,7 +26,7 @@ Please refer to [Rsbuild - Browserslist](https://rsbuild.dev/guide/advanced/brow
|
|
26
26
|
|
27
27
|
### Polyfill At Compile
|
28
28
|
|
29
|
-
Modern.js defaults to importing corresponding polyfill code from [core-js]
|
29
|
+
Modern.js defaults to importing corresponding polyfill code from [core-js](https://github.com/zloirock/core-js) during compilation.
|
30
30
|
|
31
31
|
By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.
|
32
32
|
|
@@ -1 +1 @@
|
|
1
|
-
["code-split", "inline-assets", "optimize-bundle"]
|
1
|
+
["code-split", "inline-assets", "optimize-bundle", "react-compiler"]
|
@@ -96,6 +96,8 @@ When you reference a static asset in your CSS file, you can also force the asset
|
|
96
96
|
:::tip Do you really need to exclude assets from inlining?
|
97
97
|
Excluding assets from inlining will increase the number of assets that the Web App needs to load. This will reduce the efficiency of loading assets in a weak network environment or in scenarios where HTTP2 is not enabled. Please use force no Inline with caution.
|
98
98
|
|
99
|
+
:::
|
100
|
+
|
99
101
|
## Inline JS files
|
100
102
|
|
101
103
|
In addition to inlining static assets into JS files, Modern.js also supports inlining JS files into HTML files.
|
@@ -4,7 +4,7 @@ sidebar_position: 13
|
|
4
4
|
|
5
5
|
# Bundle Size Optimization
|
6
6
|
|
7
|
-
Bundle size optimization is an important part
|
7
|
+
Bundle size optimization is an important part of optimizing your production environment because it directly affects the user experience. In this document, we will introduce some common bundle size optimization methods in Modern.js.
|
8
8
|
|
9
9
|
## Reduce duplicate dependencies
|
10
10
|
|
@@ -0,0 +1,44 @@
|
|
1
|
+
# React Compiler
|
2
|
+
|
3
|
+
The React Compiler is an experimental compiler introduced in React 19 that can automatically optimize your React code.
|
4
|
+
|
5
|
+
Before starting to use the React Compiler, it is recommended to read the [React Compiler documentation](https://zh-hans.react.dev/learn/react-compiler) to understand its features, current status, and usage.
|
6
|
+
|
7
|
+
## How to Use
|
8
|
+
|
9
|
+
The steps to use the React Compiler in Modern.js are as follows:
|
10
|
+
|
11
|
+
1. Modern.js does not officially support React 19 yet, but you can install `react-compiler-runtime@rc` in React 17 or 18 projects to allow the compiled code to run on versions before 19.
|
12
|
+
|
13
|
+
2. Currently, the React Compiler only provides a Babel plugin, so you need to install `babel-plugin-react-compiler`.
|
14
|
+
|
15
|
+
3. Register the Babel plugin in your Modern.js configuration file:
|
16
|
+
|
17
|
+
```ts title="modern.config.ts"
|
18
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
19
|
+
|
20
|
+
export default defineConfig({
|
21
|
+
runtime: {
|
22
|
+
router: true,
|
23
|
+
},
|
24
|
+
tools: {
|
25
|
+
babel(_, { addPlugins }) {
|
26
|
+
addPlugins([
|
27
|
+
[
|
28
|
+
'babel-plugin-react-compiler',
|
29
|
+
{
|
30
|
+
target: '18',
|
31
|
+
},
|
32
|
+
],
|
33
|
+
]);
|
34
|
+
},
|
35
|
+
},
|
36
|
+
plugins: [
|
37
|
+
appTools({
|
38
|
+
bundler: 'rspack',
|
39
|
+
}),
|
40
|
+
],
|
41
|
+
});
|
42
|
+
```
|
43
|
+
|
44
|
+
> For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)
|