@modern-js/main-doc 3.5.0 → 3.7.0
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/configure/app/server/rsc.mdx +1 -1
- package/docs/en/configure/app/source/react-compiler.mdx +72 -0
- package/docs/en/configure/app/tools/ts-checker.mdx +7 -23
- package/docs/en/guides/advanced-features/page-performance/react-compiler.mdx +43 -28
- package/docs/en/guides/basic-features/deploy.mdx +6 -6
- package/docs/en/guides/basic-features/render/rsc.mdx +2 -2
- package/docs/en/guides/get-started/tech-stack.mdx +1 -1
- package/docs/en/guides/topic-detail/module-federation/application.mdx +4 -4
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +1 -1
- package/docs/zh/configure/app/server/rsc.mdx +1 -1
- package/docs/zh/configure/app/source/react-compiler.mdx +72 -0
- package/docs/zh/configure/app/tools/ts-checker.mdx +7 -23
- package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx +43 -28
- package/docs/zh/guides/basic-features/deploy.mdx +6 -6
- package/docs/zh/guides/basic-features/render/rsc.mdx +2 -2
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +4 -4
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +1 -1
- package/package.json +2 -2
|
@@ -22,7 +22,7 @@ export default defineConfig({
|
|
|
22
22
|
:::tip Prerequisites
|
|
23
23
|
Before enabling RSC, ensure:
|
|
24
24
|
1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
|
|
25
|
-
2. Install the `react-server-dom-rspack@0.0.
|
|
25
|
+
2. Install the `react-server-dom-rspack@0.0.2` dependency
|
|
26
26
|
|
|
27
27
|
:::
|
|
28
28
|
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: reactCompiler
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# source.reactCompiler
|
|
6
|
+
|
|
7
|
+
- **Type:** `boolean | ReactCompilerOptions`
|
|
8
|
+
- **Default:** `undefined` (disabled)
|
|
9
|
+
|
|
10
|
+
Whether to enable [React Compiler](https://react.dev/learn/react-compiler). React Compiler is a build-time tool that optimizes re-rendering performance of React applications through automatic memoization.
|
|
11
|
+
|
|
12
|
+
Modern.js implements this capability based on the Rust-based React Compiler built into Rspack's `builtin:swc-loader` (equivalent to setting SWC's `jsc.transform.reactCompiler`), reusing Rspack's built-in SWC transform chain without introducing Babel.
|
|
13
|
+
|
|
14
|
+
:::tip
|
|
15
|
+
This option is disabled by default. It must be enabled explicitly for any React version, including React 19.
|
|
16
|
+
:::
|
|
17
|
+
|
|
18
|
+
## Example
|
|
19
|
+
|
|
20
|
+
### Enable React Compiler (React 19)
|
|
21
|
+
|
|
22
|
+
```ts title="modern.config.ts"
|
|
23
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
24
|
+
|
|
25
|
+
export default defineConfig({
|
|
26
|
+
source: {
|
|
27
|
+
reactCompiler: true,
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Using with React 18
|
|
33
|
+
|
|
34
|
+
The compiled output targets React 19 by default. To use it in React 18 projects, you need to:
|
|
35
|
+
|
|
36
|
+
1. Install [react-compiler-runtime](https://www.npmjs.com/package/react-compiler-runtime) as a **runtime dependency** (the compiled output references it at runtime):
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm add react-compiler-runtime
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
2. Specify the React version via `target`:
|
|
43
|
+
|
|
44
|
+
```ts title="modern.config.ts"
|
|
45
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
46
|
+
|
|
47
|
+
export default defineConfig({
|
|
48
|
+
source: {
|
|
49
|
+
reactCompiler: {
|
|
50
|
+
target: '18',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Customize compilation behavior
|
|
57
|
+
|
|
58
|
+
When passing an object, the options are the same as Rspack's `jsc.transform.reactCompiler`. For example, use `compilationMode: 'annotation'` to only compile functions annotated with the `"use memo"` directive:
|
|
59
|
+
|
|
60
|
+
```ts title="modern.config.ts"
|
|
61
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
62
|
+
|
|
63
|
+
export default defineConfig({
|
|
64
|
+
source: {
|
|
65
|
+
reactCompiler: {
|
|
66
|
+
compilationMode: 'annotation',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
For the complete list of options, see [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) and the [React Compiler configuration docs](https://react.dev/reference/react-compiler/configuration).
|
|
@@ -81,32 +81,16 @@ export default {
|
|
|
81
81
|
|
|
82
82
|
> Please refer to [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) for more details.
|
|
83
83
|
|
|
84
|
-
## TypeScript
|
|
84
|
+
## TypeScript 7+ Support
|
|
85
85
|
|
|
86
|
-
`tools.tsChecker` supports
|
|
86
|
+
`tools.tsChecker` supports the native checker included in TypeScript 7+. This capability is provided by [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin), which is integrated by [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check), and can reduce type-checking time on large projects.
|
|
87
87
|
|
|
88
|
-
Install TypeScript 7.0
|
|
88
|
+
Install TypeScript >= 7.0.0 to enable `tsgo` automatically:
|
|
89
89
|
|
|
90
|
-
<PackageManagerTabs command="install typescript@
|
|
90
|
+
<PackageManagerTabs command="install typescript@latest -D" />
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
When `tsgo` is enabled and `typescript.typescriptPath` is set manually, it must point to an absolute TypeScript 7+ `typescript/package.json` path or the legacy `@typescript/native-preview/package.json` path.
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
> The `@typescript/native-preview` path is kept only for compatibility. New setups should use TypeScript 7+ from the standard `typescript` package.
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
export default {
|
|
98
|
-
tools: {
|
|
99
|
-
tsChecker: {
|
|
100
|
-
typescript: {
|
|
101
|
-
tsgo: true,
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
When `tsgo` is enabled and `typescript.typescriptPath` is set manually, it must point to an absolute `typescript/package.json` path from TypeScript 7+ or `@typescript/native-preview/package.json`.
|
|
109
|
-
|
|
110
|
-
> The `@typescript/native-preview` usage is deprecated and kept only for compatibility. We recommend installing `typescript@rc` to use `tsgo`.
|
|
111
|
-
|
|
112
|
-
For supported options and limitations, please refer to [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support).
|
|
96
|
+
For supported options and limitations, please refer to [ts-checker-rspack-plugin - TypeScript 7+ support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-7-support).
|
|
@@ -1,54 +1,69 @@
|
|
|
1
1
|
# React Compiler
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React Compiler is a build-time compiler from the React team that reduces unnecessary re-renders through automatic memoization, without manually writing `useMemo`, `useCallback`, or `React.memo`.
|
|
4
4
|
|
|
5
|
-
Before starting to use
|
|
5
|
+
Before starting to use React Compiler, it is recommended to read the [React Compiler documentation](https://react.dev/learn/react-compiler) to understand its features, current status, and usage.
|
|
6
6
|
|
|
7
7
|
## How to Use
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Modern.js provides built-in support for React Compiler via the [source.reactCompiler](/configure/app/source/react-compiler) option, powered by the Rust-based React Compiler implementation in Rspack's `builtin:swc-loader`. It reuses Rspack's built-in SWC transform chain without introducing Babel (`babel-plugin-react-compiler`).
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
This capability is **disabled by default** and must be enabled explicitly for any React version.
|
|
12
12
|
|
|
13
|
-
### React
|
|
13
|
+
### React 19
|
|
14
14
|
|
|
15
|
-
If you are using React
|
|
15
|
+
If you are using React 19, simply enable `source.reactCompiler` — no additional dependencies are required:
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
```ts title="modern.config.ts"
|
|
18
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
source: {
|
|
22
|
+
reactCompiler: true,
|
|
23
|
+
},
|
|
24
|
+
plugins: [appTools()],
|
|
25
|
+
});
|
|
21
26
|
```
|
|
22
27
|
|
|
23
|
-
|
|
28
|
+
### React 18
|
|
29
|
+
|
|
30
|
+
If you are using React 18, configure it as follows:
|
|
31
|
+
|
|
32
|
+
1. Install `react-compiler-runtime` as a **runtime dependency** to allow the compiled code to run on versions before React 19:
|
|
24
33
|
|
|
25
34
|
```bash
|
|
26
|
-
npm
|
|
35
|
+
npm add react-compiler-runtime
|
|
27
36
|
```
|
|
28
37
|
|
|
29
|
-
|
|
38
|
+
2. Specify the React version via `target` in the configuration:
|
|
30
39
|
|
|
31
40
|
```ts title="modern.config.ts"
|
|
32
41
|
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
33
|
-
import { pluginBabel } from '@rsbuild/plugin-babel';
|
|
34
42
|
|
|
35
43
|
export default defineConfig({
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
'babel-plugin-react-compiler',
|
|
42
|
-
{
|
|
43
|
-
target: '18', // 或 '17'，根据你使用的 React 版本
|
|
44
|
-
},
|
|
45
|
-
],
|
|
46
|
-
]);
|
|
47
|
-
},
|
|
48
|
-
});
|
|
49
|
-
];
|
|
44
|
+
source: {
|
|
45
|
+
reactCompiler: {
|
|
46
|
+
target: '18',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
50
49
|
plugins: [appTools()],
|
|
51
50
|
});
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
|
|
53
|
+
## Customize Compilation Behavior
|
|
54
|
+
|
|
55
|
+
`source.reactCompiler` accepts an object to configure the compilation behavior, with the same options as Rspack's `jsc.transform.reactCompiler`. For example, use `compilationMode: 'annotation'` to only compile functions annotated with the `"use memo"` directive, enabling React Compiler incrementally:
|
|
56
|
+
|
|
57
|
+
```ts title="modern.config.ts"
|
|
58
|
+
export default defineConfig({
|
|
59
|
+
source: {
|
|
60
|
+
reactCompiler: {
|
|
61
|
+
compilationMode: 'annotation',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
For the complete list of options, see [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) and the [React Compiler configuration docs](https://react.dev/reference/react-compiler/configuration).
|
|
68
|
+
|
|
69
|
+
> For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern.js/tree/main/examples/react-compiler)
|
|
@@ -112,7 +112,7 @@ Add the following content to `netlify.toml`:
|
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
:::info
|
|
115
|
-
You can refer to the [deployment project example](https://github.com/web-infra-dev/modern
|
|
115
|
+
You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
116
116
|
|
|
117
117
|
:::
|
|
118
118
|
|
|
@@ -137,7 +137,7 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
|
|
|
137
137
|
:::info
|
|
138
138
|
|
|
139
139
|
1. Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
|
|
140
|
-
2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern
|
|
140
|
+
2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
|
|
141
141
|
|
|
142
142
|
:::
|
|
143
143
|
|
|
@@ -223,7 +223,7 @@ Commit your project to git, select Framework Preset as `Other` on the Vercel pla
|
|
|
223
223
|
<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
|
|
224
224
|
|
|
225
225
|
:::info
|
|
226
|
-
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern
|
|
226
|
+
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
227
227
|
|
|
228
228
|
:::
|
|
229
229
|
|
|
@@ -237,7 +237,7 @@ In addition to configuring `vercel.json` in the same way as a [pure front-end pr
|
|
|
237
237
|
2. The Node.js version for function execution is determined by the project configuration on the Vercel platform.
|
|
238
238
|
|
|
239
239
|
:::info
|
|
240
|
-
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern
|
|
240
|
+
You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
|
|
241
241
|
|
|
242
242
|
:::
|
|
243
243
|
|
|
@@ -335,10 +335,10 @@ For branch deployment, follow these steps:
|
|
|
335
335
|
:::info
|
|
336
336
|
|
|
337
337
|
1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
|
|
338
|
-
2. You can refer to the [project](https://github.com/web-infra-dev/modern
|
|
338
|
+
2. You can refer to the [project](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)
|
|
339
339
|
:::
|
|
340
340
|
|
|
341
|
-
For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern
|
|
341
|
+
For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
|
|
342
342
|
|
|
343
343
|
## Using Self-Built Node.js Server
|
|
344
344
|
|
|
@@ -23,10 +23,10 @@ Before starting, we recommend reading React's official [Server Components docume
|
|
|
23
23
|
|
|
24
24
|
1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.4 or above)
|
|
25
25
|
|
|
26
|
-
2. **Install the `react-server-dom-rspack@0.0.
|
|
26
|
+
2. **Install the `react-server-dom-rspack@0.0.2` dependency**
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
npm install react-server-dom-rspack@0.0.
|
|
29
|
+
npm install react-server-dom-rspack@0.0.2
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
:::warning Notes
|
|
@@ -10,7 +10,7 @@ In this document, you can learn about the main technology stack involved in the
|
|
|
10
10
|
|
|
11
11
|
## UI Library
|
|
12
12
|
|
|
13
|
-
Modern.js uses [React
|
|
13
|
+
Modern.js uses [React 19](https://react.dev/) to build user interfaces and is also compatible with React 18.
|
|
14
14
|
|
|
15
15
|
Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.rs/guide/framework/vue).
|
|
16
16
|
|
|
@@ -62,7 +62,7 @@ export default createModuleFederationConfig({
|
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
:::info
|
|
65
|
-
[`createBridgeComponent`](https://module-federation.io/
|
|
65
|
+
[`createBridgeComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
|
|
66
66
|
:::
|
|
67
67
|
|
|
68
68
|
## Using Modules in Consumer
|
|
@@ -98,7 +98,7 @@ export default RemoteApp;
|
|
|
98
98
|
```
|
|
99
99
|
|
|
100
100
|
:::info
|
|
101
|
-
[`createRemoteAppComponent`](https://module-federation.io/
|
|
101
|
+
[`createRemoteAppComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to load application-level modules.
|
|
102
102
|
:::
|
|
103
103
|
|
|
104
104
|
## Start the Application
|
|
@@ -109,8 +109,8 @@ After startup, when the consumer application accesses the `/remote` route, it wi
|
|
|
109
109
|
|
|
110
110
|
You can create new route files in the producer application and add route navigation in the code. These functionalities will also work as expected.
|
|
111
111
|
|
|
112
|
-
You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern
|
|
112
|
+
You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/app-export).
|
|
113
113
|
|
|
114
114
|
## Related Documentation
|
|
115
115
|
|
|
116
|
-
- [Module Federation Bridge](https://module-federation.io/
|
|
116
|
+
- [Module Federation Bridge](https://module-federation.io/guide/bridge/overview)
|
|
@@ -195,7 +195,7 @@ Now, in the producer, run `modern build && MODERN_MF_AUTO_CORS=true modern serv
|
|
|
195
195
|
When using the `modern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
|
|
196
196
|
:::
|
|
197
197
|
|
|
198
|
-
You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern
|
|
198
|
+
You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/base).
|
|
199
199
|
|
|
200
200
|
## Related Documentation
|
|
201
201
|
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: reactCompiler
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# source.reactCompiler
|
|
6
|
+
|
|
7
|
+
- **类型：** `boolean | ReactCompilerOptions`
|
|
8
|
+
- **默认值：** `undefined`（不开启）
|
|
9
|
+
|
|
10
|
+
是否启用 [React Compiler](https://zh-hans.react.dev/learn/react-compiler)。React Compiler 是一个构建期工具，通过自动记忆化（memoization）优化 React 应用的重渲染性能。
|
|
11
|
+
|
|
12
|
+
Modern.js 基于 Rspack `builtin:swc-loader` 内置的 Rust 版 React Compiler 实现该能力（等价于设置 SWC 的 `jsc.transform.reactCompiler`），复用 Rspack 内置的 SWC 转换链，无需额外引入 Babel。
|
|
13
|
+
|
|
14
|
+
:::tip
|
|
15
|
+
该配置默认关闭，任何 React 版本下都需要显式开启，包括 React 19。
|
|
16
|
+
:::
|
|
17
|
+
|
|
18
|
+
## 示例
|
|
19
|
+
|
|
20
|
+
### 开启 React Compiler（React 19）
|
|
21
|
+
|
|
22
|
+
```ts title="modern.config.ts"
|
|
23
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
24
|
+
|
|
25
|
+
export default defineConfig({
|
|
26
|
+
source: {
|
|
27
|
+
reactCompiler: true,
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 在 React 18 中使用
|
|
33
|
+
|
|
34
|
+
React Compiler 编译产物默认面向 React 19。在 React 18 项目中使用时，需要：
|
|
35
|
+
|
|
36
|
+
1. 将 [react-compiler-runtime](https://www.npmjs.com/package/react-compiler-runtime) 安装为**运行时依赖**（编译产物会在运行时引用它）：
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm add react-compiler-runtime
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
2. 通过 `target` 指定 React 版本：
|
|
43
|
+
|
|
44
|
+
```ts title="modern.config.ts"
|
|
45
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
46
|
+
|
|
47
|
+
export default defineConfig({
|
|
48
|
+
source: {
|
|
49
|
+
reactCompiler: {
|
|
50
|
+
target: '18',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 自定义编译行为
|
|
57
|
+
|
|
58
|
+
传入对象时，选项与 Rspack `jsc.transform.reactCompiler` 一致，例如通过 `compilationMode: 'annotation'` 仅编译带有 `"use memo"` 指令的函数：
|
|
59
|
+
|
|
60
|
+
```ts title="modern.config.ts"
|
|
61
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
62
|
+
|
|
63
|
+
export default defineConfig({
|
|
64
|
+
source: {
|
|
65
|
+
reactCompiler: {
|
|
66
|
+
compilationMode: 'annotation',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
完整选项请参考 [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) 与 [React Compiler 配置文档](https://zh-hans.react.dev/reference/react-compiler/configuration)。
|
|
@@ -81,32 +81,16 @@ export default {
|
|
|
81
81
|
|
|
82
82
|
> 请参考 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) 了解更多用法。
|
|
83
83
|
|
|
84
|
-
## TypeScript
|
|
84
|
+
## TypeScript 7+ 支持
|
|
85
85
|
|
|
86
|
-
`tools.tsChecker`
|
|
86
|
+
`tools.tsChecker` 支持使用 TypeScript 7+ 的原生检查器进行类型检查。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供，可以减少大型项目的类型检查耗时。
|
|
87
87
|
|
|
88
|
-
安装 TypeScript 7.0
|
|
88
|
+
安装 TypeScript >= 7.0.0 后会自动启用 `tsgo`：
|
|
89
89
|
|
|
90
|
-
<PackageManagerTabs command="install typescript@
|
|
90
|
+
<PackageManagerTabs command="install typescript@latest -D" />
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
开启 `tsgo` 后，如果手动设置 `typescript.typescriptPath`，它必须指向 TypeScript 7+ 的 `typescript/package.json` 或旧版 `@typescript/native-preview/package.json` 的绝对路径。
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
> `@typescript/native-preview` 路径仅作为兼容保留。新项目应使用标准 `typescript` 包提供的 TypeScript 7+。
|
|
95
95
|
|
|
96
|
-
|
|
97
|
-
export default {
|
|
98
|
-
tools: {
|
|
99
|
-
tsChecker: {
|
|
100
|
-
typescript: {
|
|
101
|
-
tsgo: true,
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
开启 `tsgo` 后，如果手动设置 `typescript.typescriptPath`，它必须指向 TypeScript 7+ 的 `typescript/package.json` 或 `@typescript/native-preview/package.json` 的绝对路径。
|
|
109
|
-
|
|
110
|
-
> `@typescript/native-preview` 的用法已废弃，仅作为兼容保留。推荐安装 `typescript@rc` 使用 `tsgo`。
|
|
111
|
-
|
|
112
|
-
关于 `tsgo` 模式下生效的配置项和相关限制，请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
|
|
96
|
+
关于 `tsgo` 模式下生效的配置项和相关限制，请参考 [ts-checker-rspack-plugin - TypeScript 7+ support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-7-support)。
|
|
@@ -1,54 +1,69 @@
|
|
|
1
1
|
# React Compiler
|
|
2
2
|
|
|
3
|
-
React Compiler 是 React
|
|
3
|
+
React Compiler 是 React 官方提供的构建期编译器，通过自动记忆化（memoization）减少不必要的重渲染，无需手动编写 `useMemo`、`useCallback` 和 `React.memo`。
|
|
4
4
|
|
|
5
|
-
在开始使用 React Compiler 之前，建议阅读 [React Compiler 文档](https://zh-hans.react.dev/learn/react-compiler)
|
|
5
|
+
在开始使用 React Compiler 之前，建议阅读 [React Compiler 文档](https://zh-hans.react.dev/learn/react-compiler)，以了解它的功能、当前状态和使用方法。
|
|
6
6
|
|
|
7
7
|
## 如何使用
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Modern.js 通过 [source.reactCompiler](/configure/app/source/react-compiler) 配置内置支持 React Compiler，底层使用 Rspack `builtin:swc-loader` 中 Rust 实现的 React Compiler，复用 Rspack 内置的 SWC 转换链，无需额外引入 Babel（`babel-plugin-react-compiler`）。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
该能力**默认关闭**，任何 React 版本下都需要显式开启。
|
|
12
12
|
|
|
13
|
-
### React
|
|
13
|
+
### React 19
|
|
14
14
|
|
|
15
|
-
如果你使用的是 React
|
|
15
|
+
如果你使用的是 React 19，开启 `source.reactCompiler` 即可，无需安装任何额外依赖：
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
```ts title="modern.config.ts"
|
|
18
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
source: {
|
|
22
|
+
reactCompiler: true,
|
|
23
|
+
},
|
|
24
|
+
plugins: [appTools()],
|
|
25
|
+
});
|
|
21
26
|
```
|
|
22
27
|
|
|
23
|
-
|
|
28
|
+
### React 18
|
|
29
|
+
|
|
30
|
+
如果你使用的是 React 18，需要按照以下步骤配置：
|
|
31
|
+
|
|
32
|
+
1. 将 `react-compiler-runtime` 安装为**运行时依赖**，以允许编译后的代码在 React 19 之前的版本上运行：
|
|
24
33
|
|
|
25
34
|
```bash
|
|
26
|
-
npm
|
|
35
|
+
npm add react-compiler-runtime
|
|
27
36
|
```
|
|
28
37
|
|
|
29
|
-
|
|
38
|
+
2. 在配置中通过 `target` 指定 React 版本：
|
|
30
39
|
|
|
31
40
|
```ts title="modern.config.ts"
|
|
32
41
|
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
33
|
-
import { pluginBabel } from '@rsbuild/plugin-babel';
|
|
34
42
|
|
|
35
43
|
export default defineConfig({
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
'babel-plugin-react-compiler',
|
|
42
|
-
{
|
|
43
|
-
target: '18', // 或 '17'，根据你使用的 React 版本
|
|
44
|
-
},
|
|
45
|
-
],
|
|
46
|
-
]);
|
|
47
|
-
},
|
|
48
|
-
});
|
|
49
|
-
];
|
|
44
|
+
source: {
|
|
45
|
+
reactCompiler: {
|
|
46
|
+
target: '18',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
50
49
|
plugins: [appTools()],
|
|
51
50
|
});
|
|
52
51
|
```
|
|
53
52
|
|
|
54
|
-
|
|
53
|
+
## 自定义编译行为
|
|
54
|
+
|
|
55
|
+
`source.reactCompiler` 支持传入对象来配置编译行为，选项与 Rspack 的 `jsc.transform.reactCompiler` 一致。例如，通过 `compilationMode: 'annotation'` 可以只编译带有 `"use memo"` 指令的函数，渐进式地启用 React Compiler：
|
|
56
|
+
|
|
57
|
+
```ts title="modern.config.ts"
|
|
58
|
+
export default defineConfig({
|
|
59
|
+
source: {
|
|
60
|
+
reactCompiler: {
|
|
61
|
+
compilationMode: 'annotation',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
完整选项请参考 [Rsbuild - reactCompiler](https://rsbuild.rs/plugins/list/plugin-react#reactcompiler) 与 [React Compiler 配置文档](https://zh-hans.react.dev/reference/react-compiler/configuration)。
|
|
68
|
+
|
|
69
|
+
> 详细代码可以参考：[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern.js/tree/main/examples/react-compiler)
|
|
@@ -109,7 +109,7 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
|
|
|
109
109
|
```
|
|
110
110
|
|
|
111
111
|
:::info
|
|
112
|
-
你可参考部署[项目示例](https://github.com/web-infra-dev/modern
|
|
112
|
+
你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
|
|
113
113
|
:::
|
|
114
114
|
|
|
115
115
|
在 Netlify 平台上添加项目，部署即可。
|
|
@@ -133,7 +133,7 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
|
|
|
133
133
|
:::info
|
|
134
134
|
|
|
135
135
|
1. 目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署，我们将在后续的版本中支持。
|
|
136
|
-
2. 你可参考部署[项目示例](https://github.com/web-infra-dev/modern
|
|
136
|
+
2. 你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr)。
|
|
137
137
|
|
|
138
138
|
:::
|
|
139
139
|
|
|
@@ -217,7 +217,7 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
|
|
|
217
217
|
<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
|
|
218
218
|
|
|
219
219
|
:::info
|
|
220
|
-
你可参考部署[项目示例](https://github.com/web-infra-dev/modern
|
|
220
|
+
你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
|
|
221
221
|
:::
|
|
222
222
|
|
|
223
223
|
### 全栈项目
|
|
@@ -230,7 +230,7 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
|
|
|
230
230
|
2. 函数运行的 node.js 版本由项目在 Vercel 平台配置决定。
|
|
231
231
|
|
|
232
232
|
:::info
|
|
233
|
-
你可参考部署[项目示例](https://github.com/web-infra-dev/modern
|
|
233
|
+
你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr)。
|
|
234
234
|
|
|
235
235
|
:::
|
|
236
236
|
|
|
@@ -317,11 +317,11 @@ Github Pages 支持两种部署方式，通过分支部署或通过 Github Actio
|
|
|
317
317
|
:::info
|
|
318
318
|
|
|
319
319
|
1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`，Modern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
|
|
320
|
-
2. 可以参考项目[示例](https://github.com/web-infra-dev/modern
|
|
320
|
+
2. 可以参考项目[示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
|
|
321
321
|
|
|
322
322
|
:::
|
|
323
323
|
|
|
324
|
-
如果通过 Github Actions 部署，可以选择 Settings > Pages > Source > GitHub Actions，并在项目中添加 workflow 文件，可参考[示例](https://github.com/web-infra-dev/modern
|
|
324
|
+
如果通过 Github Actions 部署，可以选择 Settings > Pages > Source > GitHub Actions，并在项目中添加 workflow 文件，可参考[示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
|
|
325
325
|
|
|
326
326
|
## 自建 Node.js 服务器
|
|
327
327
|
|
|
@@ -23,10 +23,10 @@ React Server Components (RSC) 是一种新的组件类型，允许在服务端
|
|
|
23
23
|
|
|
24
24
|
1. **确保 React 和 React DOM 升级到 19 版本**（建议 19.2.4 以上版本）
|
|
25
25
|
|
|
26
|
-
2. **安装 `react-server-dom-rspack@0.0.
|
|
26
|
+
2. **安装 `react-server-dom-rspack@0.0.2` 依赖**
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
npm install react-server-dom-rspack@0.0.
|
|
29
|
+
npm install react-server-dom-rspack@0.0.2
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
:::warning 注意事项
|
|
@@ -63,7 +63,7 @@ export default createModuleFederationConfig({
|
|
|
63
63
|
```
|
|
64
64
|
|
|
65
65
|
:::info
|
|
66
|
-
[`createBridgeComponent`](https://module-federation.io/zh/
|
|
66
|
+
[`createBridgeComponent`](https://module-federation.io/zh/guide/bridge/overview.html#%E6%A0%B8%E5%BF%83-api) 用于导出应用级别模块，Modern.js 相关 API 可以查看 [createRoot](/apis/app/runtime/core/create-root)、[render](/apis/app/runtime/core/render)。
|
|
67
67
|
:::
|
|
68
68
|
|
|
69
69
|
## 消费者使用模块
|
|
@@ -99,7 +99,7 @@ export default RemoteApp;
|
|
|
99
99
|
```
|
|
100
100
|
|
|
101
101
|
:::info
|
|
102
|
-
[`createRemoteAppComponent`](https://module-federation.io/zh/
|
|
102
|
+
[`createRemoteAppComponent`](https://module-federation.io/zh/guide/bridge/overview.html#%E6%A0%B8%E5%BF%83-api) 用于加载应用级别模块。
|
|
103
103
|
:::
|
|
104
104
|
|
|
105
105
|
## 启动应用
|
|
@@ -110,8 +110,8 @@ export default RemoteApp;
|
|
|
110
110
|
|
|
111
111
|
你可以在生产者应用中，创建新的路由文件，并在代码中添加路由导航，可以发现这些功能也能够正常运行。
|
|
112
112
|
|
|
113
|
-
上述用例可以参考：[Modern.js & Module Federation 应用级别模块](https://github.com/web-infra-dev/modern
|
|
113
|
+
上述用例可以参考：[Modern.js & Module Federation 应用级别模块](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/app-export)。
|
|
114
114
|
|
|
115
115
|
## 相关文档
|
|
116
116
|
|
|
117
|
-
- [Module Federation Bridge](https://module-federation.io/zh/
|
|
117
|
+
- [Module Federation Bridge](https://module-federation.io/zh/guide/bridge/overview)
|
|
@@ -193,7 +193,7 @@ export default defineConfig({
|
|
|
193
193
|
在使用 `modern serve` 命令时，需要在启动生产者项目时携带 `MODERN_MF_AUTO_CORS=true` 环境变量，以自动处理跨域问题，确保消费者可以正常访问生产者的远程模块资源。
|
|
194
194
|
:::
|
|
195
195
|
|
|
196
|
-
上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern
|
|
196
|
+
上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/base)。
|
|
197
197
|
|
|
198
198
|
## 相关文档
|
|
199
199
|
|
package/package.json
CHANGED
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"modern",
|
|
17
17
|
"modern.js"
|
|
18
18
|
],
|
|
19
|
-
"version": "3.
|
|
19
|
+
"version": "3.7.0",
|
|
20
20
|
"publishConfig": {
|
|
21
21
|
"registry": "https://registry.npmjs.org/",
|
|
22
22
|
"access": "public"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"mermaid": "^11.15.0",
|
|
26
|
-
"@modern-js/sandpack-react": "3.
|
|
26
|
+
"@modern-js/sandpack-react": "3.7.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"rsbuild-plugin-open-graph": "1.1.3",
|