@modern-js/main-doc 3.2.2 → 3.4.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.
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
title: tsChecker
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
import { PackageManagerTabs } from '@theme';
|
|
6
|
+
|
|
5
7
|
# tools.tsChecker
|
|
6
8
|
|
|
7
9
|
- **Type:** `Object | Function`
|
|
@@ -14,6 +16,8 @@ const defaultOptions = {
|
|
|
14
16
|
memoryLimit: 8192,
|
|
15
17
|
// use tsconfig of user project
|
|
16
18
|
configFile: tsconfigPath,
|
|
19
|
+
// use TypeScript checker by default
|
|
20
|
+
tsgo: false,
|
|
17
21
|
// use typescript of user project
|
|
18
22
|
typescriptPath: require.resolve('typescript'),
|
|
19
23
|
},
|
|
@@ -35,7 +39,7 @@ const defaultOptions = {
|
|
|
35
39
|
},
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
By default, the [@rsbuild/plugin-type-check](https://github.com/
|
|
42
|
+
By default, the [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) is enabled for type checking. You can use `output.disableTsChecker` config to disable it.
|
|
39
43
|
|
|
40
44
|
## Example
|
|
41
45
|
|
|
@@ -53,4 +57,30 @@ export default {
|
|
|
53
57
|
};
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
> Please refer to [@rsbuild/plugin-type-check](https://github.com/
|
|
60
|
+
> Please refer to [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) for more details.
|
|
61
|
+
|
|
62
|
+
## TypeScript Go Support
|
|
63
|
+
|
|
64
|
+
`tools.tsChecker` supports enabling [TypeScript Go](https://github.com/microsoft/typescript-go) for type checking. This experimental 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 by about 5-10x.
|
|
65
|
+
|
|
66
|
+
Before using it, install `@typescript/native-preview`:
|
|
67
|
+
|
|
68
|
+
<PackageManagerTabs command="install @typescript/native-preview -D" />
|
|
69
|
+
|
|
70
|
+
Then set `typescript.tsgo` to `true`:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export default {
|
|
74
|
+
tools: {
|
|
75
|
+
tsChecker: {
|
|
76
|
+
typescript: {
|
|
77
|
+
tsgo: true,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
When `tsgo` is enabled, the default `typescript.typescriptPath` resolves to `@typescript/native-preview/package.json`. If you manually set `typescript.typescriptPath`, it must be an absolute path to `@typescript/native-preview/package.json`.
|
|
85
|
+
|
|
86
|
+
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).
|
|
@@ -8,6 +8,7 @@ This guide explains how to integrate Rstest with Modern.js for web app testing.
|
|
|
8
8
|
|
|
9
9
|
Install the base dependencies first:
|
|
10
10
|
|
|
11
|
+
import { Prompt } from '@rspress/core/theme';
|
|
11
12
|
import { PackageManagerTabs } from '@theme';
|
|
12
13
|
|
|
13
14
|
<PackageManagerTabs command="add @rstest/core @modern-js/adapter-rstest -D" />
|
|
@@ -161,3 +162,31 @@ Execute the `test` command above to run your tests:
|
|
|
161
162
|
If you need node mode tests for server-side logic such as `bff`, refer to the [Rstest documentation](https://rstest.rs) directly.
|
|
162
163
|
|
|
163
164
|
Modern.js mainly targets web apps, so this guide focuses on web UI testing and browser mode.
|
|
165
|
+
|
|
166
|
+
## Migrating from Existing Projects
|
|
167
|
+
|
|
168
|
+
If your project already uses Jest or Vitest, refer to the official Rstest migration guides:
|
|
169
|
+
|
|
170
|
+
- [Migrate from Jest to Rstest](https://rstest.rs/guide/migration/jest)
|
|
171
|
+
- [Migrate from Vitest to Rstest](https://rstest.rs/guide/migration/vitest)
|
|
172
|
+
|
|
173
|
+
We recommend installing the `migrate-to-rstest` skill first, then copying this prompt to your coding agent. It keeps the Modern.js `@modern-js/adapter-rstest` integration during migration:
|
|
174
|
+
|
|
175
|
+
<Prompt
|
|
176
|
+
title="Migrate to Rstest"
|
|
177
|
+
description="Copy this prompt and send it to your coding agent."
|
|
178
|
+
prompt={`Migrate this Modern.js project from Jest or Vitest to Rstest.
|
|
179
|
+
|
|
180
|
+
First install and use the migrate-to-rstest skill. If it is not installed, install it with:
|
|
181
|
+
npx skills add rstackjs/agent-skills --skill migrate-to-rstest
|
|
182
|
+
|
|
183
|
+
Follow the migrate-to-rstest skill instructions and the official Rstest migration guides:
|
|
184
|
+
- Jest: https://rstest.rs/guide/migration/jest
|
|
185
|
+
- Vitest: https://rstest.rs/guide/migration/vitest
|
|
186
|
+
|
|
187
|
+
Modern.js-specific requirement:
|
|
188
|
+
- Install and use @modern-js/adapter-rstest together with @rstest/core.
|
|
189
|
+
- Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
|
|
190
|
+
- Reuse the Modern.js app configuration with extends: withModernConfig().
|
|
191
|
+
- Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.`}
|
|
192
|
+
/>
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
title: tsChecker
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
import { PackageManagerTabs } from '@theme';
|
|
6
|
+
|
|
5
7
|
# tools.tsChecker
|
|
6
8
|
|
|
7
9
|
- **类型：** `Object | Function`
|
|
@@ -14,6 +16,8 @@ const defaultOptions = {
|
|
|
14
16
|
memoryLimit: 8192,
|
|
15
17
|
// use tsconfig of user project
|
|
16
18
|
configFile: tsconfigPath,
|
|
19
|
+
// use TypeScript checker by default
|
|
20
|
+
tsgo: false,
|
|
17
21
|
// use typescript of user project
|
|
18
22
|
typescriptPath: require.resolve('typescript'),
|
|
19
23
|
},
|
|
@@ -35,7 +39,7 @@ const defaultOptions = {
|
|
|
35
39
|
},
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
默认情况下，Modern.js 会开启 [@rsbuild/plugin-type-check](https://github.com/
|
|
42
|
+
默认情况下，Modern.js 会开启 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) 进行类型检查。你可以通过 `output.disableTsChecker` 配置项来关闭类型检查。
|
|
39
43
|
|
|
40
44
|
## 示例
|
|
41
45
|
|
|
@@ -53,4 +57,30 @@ export default {
|
|
|
53
57
|
};
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
> 请参考 [@rsbuild/plugin-type-check](https://github.com/
|
|
60
|
+
> 请参考 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) 了解更多用法。
|
|
61
|
+
|
|
62
|
+
## TypeScript Go 支持
|
|
63
|
+
|
|
64
|
+
`tools.tsChecker` 支持开启 [TypeScript Go](https://github.com/microsoft/typescript-go) 进行类型检查。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供，目前仍处于实验阶段，可以将类型检查耗时减少约 5-10 倍。
|
|
65
|
+
|
|
66
|
+
在使用前，需要安装 `@typescript/native-preview`：
|
|
67
|
+
|
|
68
|
+
<PackageManagerTabs command="install @typescript/native-preview -D" />
|
|
69
|
+
|
|
70
|
+
然后将 `typescript.tsgo` 设置为 `true`：
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export default {
|
|
74
|
+
tools: {
|
|
75
|
+
tsChecker: {
|
|
76
|
+
typescript: {
|
|
77
|
+
tsgo: true,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
开启 `tsgo` 后，默认的 `typescript.typescriptPath` 会解析到 `@typescript/native-preview/package.json`。如果你手动设置了 `typescript.typescriptPath`，它必须是指向 `@typescript/native-preview/package.json` 的绝对路径。
|
|
85
|
+
|
|
86
|
+
关于 `tsgo` 模式下生效的配置项和相关限制，请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
先安装基础依赖：
|
|
10
10
|
|
|
11
|
+
import { Prompt } from '@rspress/core/theme';
|
|
11
12
|
import { PackageManagerTabs } from '@theme';
|
|
12
13
|
|
|
13
14
|
<PackageManagerTabs command="add @rstest/core @modern-js/adapter-rstest -D" />
|
|
@@ -161,3 +162,31 @@ test('Page', () => {
|
|
|
161
162
|
如果你需要测试 `bff` 等 server-side logic，建议直接参考 [Rstest 文档](https://rstest.rs) 中关于 node mode 的说明。
|
|
162
163
|
|
|
163
164
|
Modern.js 主要面向 web app，因此这里重点介绍的是 Web UI 测试，以及更贴近真实运行环境的 browser mode。
|
|
165
|
+
|
|
166
|
+
## 从已有项目迁移
|
|
167
|
+
|
|
168
|
+
如果你的项目已经使用 Jest 或 Vitest，可以参考 Rstest 官方迁移指南：
|
|
169
|
+
|
|
170
|
+
- [从 Jest 迁移到 Rstest](https://rstest.rs/guide/migration/jest)
|
|
171
|
+
- [从 Vitest 迁移到 Rstest](https://rstest.rs/guide/migration/vitest)
|
|
172
|
+
|
|
173
|
+
推荐先安装 `migrate-to-rstest` skill，再复制下面的 Prompt 给编码 Agent；它会在迁移时保留 Modern.js 的 `@modern-js/adapter-rstest` 配置。
|
|
174
|
+
|
|
175
|
+
<Prompt
|
|
176
|
+
title="迁移到 Rstest"
|
|
177
|
+
description="复制这个 Prompt 并发送给你的编码 Agent。"
|
|
178
|
+
prompt={`Migrate this Modern.js project from Jest or Vitest to Rstest.
|
|
179
|
+
|
|
180
|
+
First install and use the migrate-to-rstest skill. If it is not installed, install it with:
|
|
181
|
+
npx skills add rstackjs/agent-skills --skill migrate-to-rstest
|
|
182
|
+
|
|
183
|
+
Follow the migrate-to-rstest skill instructions and the official Rstest migration guides:
|
|
184
|
+
- Jest: https://rstest.rs/guide/migration/jest
|
|
185
|
+
- Vitest: https://rstest.rs/guide/migration/vitest
|
|
186
|
+
|
|
187
|
+
Modern.js-specific requirement:
|
|
188
|
+
- Install and use @modern-js/adapter-rstest together with @rstest/core.
|
|
189
|
+
- Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
|
|
190
|
+
- Reuse the Modern.js app configuration with extends: withModernConfig().
|
|
191
|
+
- Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.`}
|
|
192
|
+
/>
|
package/package.json
CHANGED
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"modern",
|
|
17
17
|
"modern.js"
|
|
18
18
|
],
|
|
19
|
-
"version": "3.
|
|
19
|
+
"version": "3.4.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.4.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"rsbuild-plugin-open-graph": "1.1.3",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"classnames": "^2.5.1",
|
|
38
38
|
"clsx": "^1.2.1",
|
|
39
39
|
"fs-extra": "^10.1.0",
|
|
40
|
-
"react": "^19.2.
|
|
41
|
-
"react-dom": "^19.2.
|
|
40
|
+
"react": "^19.2.7",
|
|
41
|
+
"react-dom": "^19.2.7",
|
|
42
42
|
"ts-node": "^10.9.2",
|
|
43
43
|
"typescript": "^5"
|
|
44
44
|
},
|