@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121
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 +41 -51
- package/docs/en/community/blog/2022-0708-updates.md +1 -1
- package/docs/en/community/blog/2022-0910-updates.md +2 -2
- package/docs/en/community/contributing-guide.mdx +2 -3
- package/docs/en/community/releases.mdx +1 -5
- package/docs/en/components/init-app.mdx +40 -66
- package/docs/en/components/init-rspack-app.mdx +1 -1
- package/docs/en/components/prerequisites.mdx +1 -2
- package/docs/en/components/serve-command.mdx +1 -1
- package/docs/en/configure/app/bff/effect.mdx +27 -3
- package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/en/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/en/configure/app/tools/ts-checker.mdx +30 -2
- package/docs/en/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/en/guides/advanced-features/international/api.mdx +4 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +45 -2
- package/docs/en/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/en/guides/basic-features/deploy.mdx +1 -1
- package/docs/en/guides/basic-features/render/_meta.json +1 -10
- package/docs/en/guides/basic-features/render/overview.mdx +0 -1
- package/docs/en/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/en/guides/basic-features/routes/routes.mdx +24 -9
- package/docs/en/guides/basic-features/testing/_meta.json +1 -1
- package/docs/en/guides/concept/server.mdx +2 -2
- package/docs/en/guides/get-started/quick-start.mdx +1 -1
- package/docs/en/guides/get-started/tech-stack.mdx +10 -4
- package/docs/en/guides/get-started/ultramodern.mdx +94 -20
- package/docs/en/guides/upgrade/config.mdx +1 -2
- package/docs/en/guides/upgrade/other.mdx +4 -4
- package/docs/zh/apis/app/commands.mdx +38 -48
- package/docs/zh/community/blog/2022-0708-updates.md +1 -1
- package/docs/zh/community/blog/2022-0910-updates.md +2 -2
- package/docs/zh/community/contributing-guide.mdx +2 -3
- package/docs/zh/community/releases.mdx +1 -5
- package/docs/zh/components/init-app.mdx +33 -62
- package/docs/zh/components/init-rspack-app.mdx +1 -1
- package/docs/zh/components/prerequisites.mdx +1 -2
- package/docs/zh/components/serve-command.mdx +1 -1
- package/docs/zh/configure/app/bff/effect.mdx +26 -2
- package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/zh/configure/app/performance/rsdoctor.mdx +7 -4
- package/docs/zh/configure/app/tools/ts-checker.mdx +30 -2
- package/docs/zh/configure/app/usage.mdx +1 -1
- package/docs/zh/guides/advanced-features/bff/data-platform.mdx +3 -1
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +3 -1
- package/docs/zh/guides/advanced-features/international/api.mdx +4 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +45 -2
- package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +2 -3
- package/docs/zh/guides/basic-features/deploy.mdx +2 -2
- package/docs/zh/guides/basic-features/render/_meta.json +1 -10
- package/docs/zh/guides/basic-features/render/overview.mdx +0 -1
- package/docs/zh/guides/basic-features/render/rsc.mdx +0 -1
- package/docs/zh/guides/basic-features/routes/routes.mdx +24 -9
- package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
- package/docs/zh/guides/concept/server.mdx +2 -2
- package/docs/zh/guides/get-started/quick-start.mdx +1 -1
- package/docs/zh/guides/get-started/tech-stack.mdx +10 -4
- package/docs/zh/guides/get-started/ultramodern.mdx +88 -4
- package/docs/zh/guides/upgrade/config.mdx +1 -2
- package/docs/zh/guides/upgrade/other.md +4 -5
- package/package.json +15 -14
- package/rspress.config.ts +17 -5
- package/src/components/Footer/index.tsx +3 -3
- package/src/components/SecondaryTitle/index.module.css +7 -2
- package/src/components/ShowcaseList/useShowcases.ts +23 -65
- package/src/i18n/enUS.ts +0 -9
- package/src/i18n/zhCN.ts +0 -9
- package/src/sandbox/csr-auth/src/routes/page-tsx.txt +1 -1
- package/static/img/logo.svg +7 -0
- package/static/img/social-card.svg +12 -0
- package/builder-doc/docs/en/config/performance/rsdoctor.md +0 -37
- package/builder-doc/docs/zh/config/performance/rsdoctor.md +0 -37
- package/docs/en/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/docs/en/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
- package/docs/zh/guides/basic-features/render/tanstack-rsc.mdx +0 -226
- package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +0 -320
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +0 -304
|
@@ -1,64 +1,32 @@
|
|
|
1
|
-
|
|
1
|
+
UltraModern.js 提供 BleedingDev create 包来创建 SuperApp workspace,不需要全局安装,直接使用 `pnpm dlx` 按需运行即可。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
pnpm 支持的命令契约是 scoped package specifier:
|
|
4
|
+
`pnpm dlx @bleedingdev/modern-js-create <target>`。不要简写成
|
|
5
|
+
`pnpm dlx modern-js-create`;npm 上没有这个未加 scope 的包。
|
|
6
|
+
|
|
7
|
+
你可以在当前已有的空目录中初始化项目:
|
|
4
8
|
|
|
5
9
|
```bash
|
|
6
10
|
mkdir myapp && cd myapp
|
|
7
|
-
|
|
11
|
+
pnpm dlx @bleedingdev/modern-js-create .
|
|
8
12
|
```
|
|
9
13
|
|
|
10
14
|
也可以直接用新目录创建项目:
|
|
11
15
|
|
|
12
16
|
```bash
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
初始化 TanStack Router 模板:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npx @modern-js/create@latest myapp --router tanstack
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
初始化 Tailwind CSS v4 模板:
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npx @modern-js/create@latest myapp --tailwind
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
同时初始化 TanStack Router + Tailwind CSS v4:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
npx @modern-js/create@latest myapp --router tanstack --tailwind
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
初始化当前默认运行时的 BFF 模板:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
npx @modern-js/create@latest myapp --bff
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
初始化带 Effect HttpApi 运行时的 BFF 模板:
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npx @modern-js/create@latest myapp --bff-runtime effect
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
初始化带 Hono 运行时的 BFF 模板:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
npx @modern-js/create@latest myapp --bff-runtime hono
|
|
17
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
50
18
|
```
|
|
51
19
|
|
|
52
20
|
使用 workspace 协议依赖初始化(用于在本地 monorepo 中联调未发布的 Modern.js 包):
|
|
53
21
|
|
|
54
22
|
```bash
|
|
55
|
-
|
|
23
|
+
pnpm dlx @bleedingdev/modern-js-create myapp --workspace
|
|
56
24
|
```
|
|
57
25
|
|
|
58
|
-
|
|
26
|
+
BleedingDev create 包会直接创建应用,不再提供问答界面:
|
|
59
27
|
|
|
60
28
|
```bash
|
|
61
|
-
🚀 欢迎使用
|
|
29
|
+
🚀 欢迎使用 UltraModern.js
|
|
62
30
|
|
|
63
31
|
📦 正在创建项目 "myapp"...
|
|
64
32
|
|
|
@@ -87,31 +55,34 @@ npx @modern-js/create@latest myapp --router tanstack --bff-runtime effect --work
|
|
|
87
55
|
|
|
88
56
|
```
|
|
89
57
|
.
|
|
90
|
-
├──
|
|
91
|
-
|
|
58
|
+
├── apps
|
|
59
|
+
│ └── shell-super-app
|
|
92
60
|
├── package.json
|
|
93
|
-
├──
|
|
94
|
-
├──
|
|
95
|
-
│ ├──
|
|
96
|
-
│
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
│ └── page.tsx
|
|
101
|
-
└── tsconfig.json
|
|
61
|
+
├── packages
|
|
62
|
+
│ ├── shared-contracts
|
|
63
|
+
│ ├── shared-design-tokens
|
|
64
|
+
│ └── shared-effect-client
|
|
65
|
+
├── scripts
|
|
66
|
+
├── topology
|
|
67
|
+
└── verticals
|
|
102
68
|
```
|
|
103
69
|
|
|
104
|
-
|
|
70
|
+
默认 workspace 从 shell 起步,并安装已发布的 BleedingDev 包别名:
|
|
105
71
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
72
|
+
```bash
|
|
73
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app
|
|
74
|
+
```
|
|
109
75
|
|
|
110
|
-
|
|
111
|
-
|
|
76
|
+
在已生成的 SuperApp workspace 根目录中,可以就地添加业务
|
|
77
|
+
MicroVertical:
|
|
112
78
|
|
|
113
79
|
```bash
|
|
114
|
-
pnpm dlx @bleedingdev/modern-js-create
|
|
80
|
+
pnpm dlx @bleedingdev/modern-js-create transportation --vertical
|
|
115
81
|
```
|
|
116
82
|
|
|
117
|
-
|
|
83
|
+
`--vertical` 会修改当前 workspace:新增 vertical 包,并写入 topology、
|
|
84
|
+
ownership 元数据、shell Module Federation、开发 overlays、包依赖、生成契约、
|
|
85
|
+
路由归属 i18n、CSS 隔离,以及 Effect BFF/client surface。
|
|
86
|
+
|
|
87
|
+
底层 `--ultramodern-package-*` 参数只保留给发布工程和本地包源测试使用。
|
|
88
|
+
BleedingDev 包通过 GitHub Actions trusted publishing 发布;不要从开发机器手动发布。
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
## modern serve
|
|
2
2
|
|
|
3
|
-
`modern serve` 命令用于在生产环境下启动
|
|
3
|
+
`modern serve` 命令用于在生产环境下启动 UltraModern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
Usage: modern serve [options]
|
|
@@ -123,13 +123,35 @@ export default defineConfig({
|
|
|
123
123
|
}
|
|
124
124
|
```
|
|
125
125
|
|
|
126
|
-
- **默认值:**
|
|
126
|
+
- **默认值:**
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
{
|
|
130
|
+
enabled: true,
|
|
131
|
+
requireEnvelope: false,
|
|
132
|
+
envelopeHeader: 'x-modernjs-data-envelope',
|
|
133
|
+
validateOrigin: true,
|
|
134
|
+
requireTraceContext: false,
|
|
135
|
+
batch: {
|
|
136
|
+
enabled: true,
|
|
137
|
+
endpoint: '/_data/batch',
|
|
138
|
+
maxBatchSize: 16,
|
|
139
|
+
maxBatchBytes: 64 * 1024,
|
|
140
|
+
flushIntervalMs: 8,
|
|
141
|
+
maxConcurrency: 4,
|
|
142
|
+
requestTimeoutMs: 10000,
|
|
143
|
+
allowedMethods: ['GET'],
|
|
144
|
+
},
|
|
145
|
+
}
|
|
146
|
+
```
|
|
127
147
|
|
|
128
148
|
用于配置 Effect 运行时的数据请求信封(envelope)校验策略。
|
|
129
149
|
|
|
130
150
|
生成的 Effect 客户端会将批处理请求发送到 `${bff.prefix}${batch.endpoint}`(例如 `/bff-api/_data/batch`)。
|
|
131
151
|
|
|
132
|
-
|
|
152
|
+
Envelope 校验默认开启但不是强制的:未携带 envelope 的请求会继续通过,除非将 `requireEnvelope` 设为 `true`。如果请求携带 envelope,运行时会按配置校验命名空间、origin、trace 与 selection 策略。`expectedNamespace` 默认不设置,`selection` 默认也不限制,除非显式配置。
|
|
153
|
+
|
|
154
|
+
Origin 校验默认开启。运行时会优先将 envelope 中的 origin 与请求 `Origin` 头比对;若请求无 `Origin`,则回退到请求 URL 的 origin;设置 `validateOrigin: false` 可关闭该比对。
|
|
133
155
|
|
|
134
156
|
```ts title="modern.config.ts"
|
|
135
157
|
export default defineConfig({
|
|
@@ -150,3 +172,5 @@ export default defineConfig({
|
|
|
150
172
|
```
|
|
151
173
|
|
|
152
174
|
`batch.flushIntervalMs` 用于控制生成的 Effect 客户端微批处理窗口;`maxConcurrency` 与 `requestTimeoutMs` 由服务端批处理网关用于内部请求分发。
|
|
175
|
+
|
|
176
|
+
生成的 `effectBff.client.*` API 只存在于 loader 物化后的 `@api/effect/*` 导入中。直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
|
|
@@ -25,4 +25,4 @@ export default defineConfig({
|
|
|
25
25
|
- 设置为 `'hono'` 时,仅从 `api/lambda/**` 的文件约定处理函数运行 BFF。
|
|
26
26
|
|
|
27
27
|
两种运行时之间没有隐式回退,应用需要显式选择其一。
|
|
28
|
-
|
|
28
|
+
生成的 UltraModern 应用默认使用 Effect 分支;仅在需要兼容运行时时设置 `runtimeFramework: 'hono'`。
|
|
@@ -11,22 +11,23 @@ type RsdoctorConfig =
|
|
|
11
11
|
| boolean
|
|
12
12
|
| {
|
|
13
13
|
enabled?: boolean;
|
|
14
|
+
disableClientServer?: boolean;
|
|
14
15
|
};
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
- **默认值:**
|
|
18
|
+
- **默认值:** `undefined`,未配置该选项时不会启用 Rsdoctor。
|
|
18
19
|
|
|
19
|
-
用于配置 Modern.js 构建过程中的 Rsdoctor
|
|
20
|
+
用于配置 Modern.js 构建过程中的 Rsdoctor 诊断能力。将该选项设为 `true` 即可启用 Rsdoctor:
|
|
20
21
|
|
|
21
22
|
```ts title="modern.config.ts"
|
|
22
23
|
export default defineConfig({
|
|
23
24
|
performance: {
|
|
24
|
-
rsdoctor:
|
|
25
|
+
rsdoctor: true,
|
|
25
26
|
},
|
|
26
27
|
});
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
你也可以使用对象形式。提供对象配置时,除非将 `enabled` 设为 `false`,否则会启用 Rsdoctor:
|
|
30
31
|
|
|
31
32
|
```ts title="modern.config.ts"
|
|
32
33
|
export default defineConfig({
|
|
@@ -37,3 +38,5 @@ export default defineConfig({
|
|
|
37
38
|
},
|
|
38
39
|
});
|
|
39
40
|
```
|
|
41
|
+
|
|
42
|
+
如果需要在共享配置中关闭已经启用的 Rsdoctor,可以将 `rsdoctor` 设为 `false`,或将 `enabled` 设为 `false`。
|
|
@@ -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 Go checker by default
|
|
20
|
+
tsgo: true,
|
|
17
21
|
// use TS-Go native preview of user project
|
|
18
22
|
typescriptPath: require.resolve('@typescript/native-preview/package.json'),
|
|
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,28 @@ export default {
|
|
|
53
57
|
};
|
|
54
58
|
```
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
## TypeScript Go 默认开启
|
|
61
|
+
|
|
62
|
+
类型检查默认使用 [TypeScript Go](https://github.com/microsoft/typescript-go)(`tsgo`)。该能力由 [`@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 倍。
|
|
63
|
+
|
|
64
|
+
`@typescript/native-preview` 已随构建器内置,无需额外安装。如需固定版本,可在项目中自行安装:
|
|
65
|
+
|
|
66
|
+
<PackageManagerTabs command="install @typescript/native-preview -D" />
|
|
67
|
+
|
|
68
|
+
开启 `tsgo` 后,默认的 `typescript.typescriptPath` 会解析到 `@typescript/native-preview/package.json`。如果你手动设置了 `typescript.typescriptPath`,它必须是指向 `@typescript/native-preview/package.json` 的绝对路径。
|
|
69
|
+
|
|
70
|
+
如需回退到经典 TypeScript 检查器,请将 `typescript.tsgo` 设置为 `false`,并确保项目中安装了 `typescript`:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
export default {
|
|
74
|
+
tools: {
|
|
75
|
+
tsChecker: {
|
|
76
|
+
typescript: {
|
|
77
|
+
tsgo: false,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
关于 `tsgo` 模式下生效的配置项和相关限制,请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
|
|
@@ -55,12 +55,14 @@ export default defineConfig({
|
|
|
55
55
|
});
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
Envelope 校验默认开启,但只有设置 `requireEnvelope` 时才强制要求请求携带 envelope。Origin 校验默认开启;设置 `validateOrigin: false` 后,运行时不会再将 envelope 中的 origin 与请求 `Origin` 头比对,也不会在缺少该请求头时回退到请求 URL 的 origin。
|
|
59
59
|
|
|
60
60
|
## Effect 客户端自动行为
|
|
61
61
|
|
|
62
62
|
使用生成的 Effect 客户端(`@api/effect/index`)时,Modern.js 会在同源请求中自动附加序列化的 envelope 请求头(`x-modernjs-data-envelope`)。
|
|
63
63
|
|
|
64
|
+
生成客户端由 loader 物化。请在浏览器或会被客户端打包的代码中通过 `@api/effect/*` 导入;直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义,其中只包含占位的 `client`。
|
|
65
|
+
|
|
64
66
|
Envelope 默认包含:
|
|
65
67
|
|
|
66
68
|
- operation 元数据
|
|
@@ -105,7 +105,7 @@ const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
|
|
|
105
105
|
export default defineEffectBff({ api: bffEffectApi, layer });
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
在浏览器代码中通过 `@api/effect/index` 调用接口:
|
|
109
109
|
|
|
110
110
|
```ts title="src/routes/page.tsx"
|
|
111
111
|
import effectBff from '@api/effect/index';
|
|
@@ -113,6 +113,8 @@ import effectBff from '@api/effect/index';
|
|
|
113
113
|
const response = await effectBff.client.hello.ping({});
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
+
`effectBff.client.*` 由 BFF loader 针对 `@api/effect/*` 导入物化生成。不要直接导入 `api/effect/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
|
|
117
|
+
|
|
116
118
|
import Hono from '@site-docs/components/hono';
|
|
117
119
|
|
|
118
120
|
<Hono />
|
|
@@ -15,10 +15,13 @@ title: API 参考
|
|
|
15
15
|
| `language` | `string` | 当前语言代码 |
|
|
16
16
|
| `changeLanguage` | `(lang: string) => Promise<void>` | 切换语言 |
|
|
17
17
|
| `supportedLanguages` | `string[]` | 支持的语言列表(来自 `localeDetection.languages`) |
|
|
18
|
+
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` | 来自 `localeDetection.localisedUrls` 的本地化 URL 映射 |
|
|
18
19
|
| `isLanguageSupported` | `(lang: string) => boolean` | 检查语言是否在支持列表中 |
|
|
19
20
|
| `isResourcesReady` | `boolean` | 当前语言的翻译资源是否已加载完成 |
|
|
20
21
|
| `i18nInstance` | `I18nInstance` | i18next 实例(用于高级场景) |
|
|
21
22
|
|
|
23
|
+
启用 `localePathRedirect` 且省略 `localisedUrls` 时,Modern.js 会保持 `/en/about` 这类仅语言前缀路径。只有提供非空 `localisedUrls` 映射时,才会启用路径片段翻译。也只有在该映射启用时,路由生成才会校验每个可本地化路径是否覆盖所有已配置语言。
|
|
24
|
+
|
|
22
25
|
### 基本用法
|
|
23
26
|
|
|
24
27
|
```tsx
|
|
@@ -91,7 +94,7 @@ function MyComponent() {
|
|
|
91
94
|
| `children` | `React.ReactNode` | 是 | 链接内容 |
|
|
92
95
|
| `replace` | `boolean` | 否 | 使用 `history.replace` 而非 `push` |
|
|
93
96
|
| `state` | `any` | 否 | 传递给目标路由的状态 |
|
|
94
|
-
| 其他 Link props | — | 否 |
|
|
97
|
+
| 其他 Link props | — | 否 | 有可用路由时会传递给当前路由的 Link 组件 |
|
|
95
98
|
|
|
96
99
|
### 用法
|
|
97
100
|
|
|
@@ -48,6 +48,7 @@ export default defineConfig({
|
|
|
48
48
|
| `languages` | `string[]` | `[]` | 支持的语言列表 |
|
|
49
49
|
| `fallbackLanguage` | `string` | `''` | 语言检测失败时的兜底语言 |
|
|
50
50
|
| `localePathRedirect` | `boolean` | `false` | 接管 URL 语言前缀的识别、重定向和切换,详见[路由集成](./routing.md#启用语言路径前缀) |
|
|
51
|
+
| `localisedUrls` | `boolean \| Record<string, Record<string, string>>` | 仅语言前缀行为 | 本地化路由路径映射。只有非空映射会启用路径片段翻译;省略、`true`、`false` 和 `{}` 都会保留语言前缀但不翻译路径片段。 |
|
|
51
52
|
| `i18nextDetector` | `boolean` | `false` | 启用 i18next 检测器(Cookie / Header 等) |
|
|
52
53
|
| `detection` | `LanguageDetectorOptions` | — | i18next 检测器详细配置,见[语言检测](./locale-detection.md) |
|
|
53
54
|
| `ignoreRedirectRoutes` | `string[] \| Function` | — | 跳过重定向的路由,见[语言检测](./locale-detection.md#ignoreredirectroutes) |
|
|
@@ -113,7 +113,7 @@ i18nPlugin({
|
|
|
113
113
|
|
|
114
114
|
## ignoreRedirectRoutes
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
指定哪些额外路径跳过语言路径重定向。Modern.js 会自动跳过服务端 API 路由、启用 BFF 但未配置前缀时的默认 `/api` 前缀,以及自定义 `bff.prefix`。`ignoreRedirectRoutes` 适用于其他不需要语言前缀的非 API 业务路径。
|
|
117
117
|
|
|
118
118
|
**写法一:字符串数组**(支持精确匹配和前缀匹配)
|
|
119
119
|
|
|
@@ -32,7 +32,50 @@ i18nPlugin({
|
|
|
32
32
|
| `/en/about` | 正常访问,语言为 `en` |
|
|
33
33
|
| `/zh/about` | 正常访问,语言为 `zh` |
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
API 和 BFF 前缀会自动跳过,包括服务端 API 路由、启用 BFF 但未配置前缀时的默认 `/api` 前缀,以及自定义 `bff.prefix`。这些路由不需要语言前缀,也不需要配置 `localisedUrls`。如果还有其他业务路径不应该重定向,可以使用 `ignoreRedirectRoutes`,详见[语言检测 → ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes)。
|
|
36
|
+
|
|
37
|
+
## 本地化 URL 路径
|
|
38
|
+
|
|
39
|
+
默认情况下,`localePathRedirect` 只会添加和识别语言前缀,例如 `/en/about`。翻译路径片段需要显式开启:只有提供非空 `localisedUrls` 映射时才会启用。省略 `localisedUrls`、设置为 `true`、设置为 `false` 或传入空对象时,都会保持仅语言前缀的行为。
|
|
40
|
+
|
|
41
|
+
配置非空 `localisedUrls` 映射后,每个可本地化的路由路径都必须为所有已配置语言提供 URL。如果向 `languages` 中新增语言,Modern.js 会在路由生成阶段失败,直到每个 `localisedUrls` 条目都补齐该语言。
|
|
42
|
+
|
|
43
|
+
`localisedUrls` 同时适用于 React Router 和 TanStack Router 项目的约定式路由。不要为 API 路由、BFF 前缀或配置的 `bff.prefix` 添加本地化 URL 条目;这些路径会自动排除在语言重定向之外。
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// modern.config.ts
|
|
47
|
+
i18nPlugin({
|
|
48
|
+
localeDetection: {
|
|
49
|
+
localePathRedirect: true,
|
|
50
|
+
languages: ['en', 'cs'],
|
|
51
|
+
fallbackLanguage: 'en',
|
|
52
|
+
localisedUrls: {
|
|
53
|
+
'/terms-of-service': {
|
|
54
|
+
en: '/terms-of-service',
|
|
55
|
+
cs: '/podminky-pouzivani',
|
|
56
|
+
},
|
|
57
|
+
'/products': {
|
|
58
|
+
en: '/products',
|
|
59
|
+
cs: '/produkty',
|
|
60
|
+
},
|
|
61
|
+
'/products/:slug': {
|
|
62
|
+
en: '/products/:slug',
|
|
63
|
+
cs: '/produkty/:slug',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**效果:**
|
|
71
|
+
|
|
72
|
+
| 访问路径 | 结果 |
|
|
73
|
+
| --- | --- |
|
|
74
|
+
| `/terms-of-service` | 重定向到 `/en/terms-of-service` |
|
|
75
|
+
| `/cs/terms-of-service` | 重定向到 `/cs/podminky-pouzivani` |
|
|
76
|
+
| `/cs/podminky-pouzivani` | 正常访问,语言为 `cs` |
|
|
77
|
+
|
|
78
|
+
当 preset、共享配置或生成的元数据本来会提供映射,但当前入口只希望保留语言前缀、不翻译路径片段时,可以设置 `localisedUrls: false` 作为逃生口。
|
|
36
79
|
|
|
37
80
|
## 路由配置
|
|
38
81
|
|
|
@@ -131,4 +174,4 @@ function Navigation() {
|
|
|
131
174
|
<I18nLink to="/en/about">关于</I18nLink>
|
|
132
175
|
```
|
|
133
176
|
|
|
134
|
-
`I18nLink`
|
|
177
|
+
`I18nLink` 会使用当前启用的 Modern.js 路由。在 React Router 项目中渲染 React Router 的 `Link`;在 TanStack Router 项目中通过 TanStack Router 导航。完整 Props 类型见 [API 参考](./api.md#i18nlink-组件)。
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Rsdoctor 是一个 Rspack 构建分析工具。在 Modern.js 中,我们推荐使用 Rsdoctor 来对构建过程与构建产物进行诊断和分析。
|
|
4
4
|
|
|
5
|
-
Modern.js
|
|
5
|
+
Modern.js 不会默认启用 Rsdoctor。当你需要在构建中运行 Rsdoctor 时,请配置 `performance.rsdoctor`。
|
|
6
6
|
|
|
7
7
|
## 执行构建
|
|
8
8
|
|
|
9
9
|
```ts title="modern.config.ts"
|
|
10
10
|
export default defineConfig({
|
|
11
11
|
performance: {
|
|
12
|
-
// 在 production build 默认启用
|
|
13
12
|
rsdoctor: true,
|
|
14
13
|
},
|
|
15
14
|
});
|
|
@@ -21,7 +20,7 @@ npm run build
|
|
|
21
20
|
|
|
22
21
|
## 关闭 Rsdoctor
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
如果你希望在共享配置中关闭已经启用的 Rsdoctor:
|
|
25
24
|
|
|
26
25
|
```ts title="modern.config.ts"
|
|
27
26
|
export default defineConfig({
|
|
@@ -38,7 +38,7 @@ MODERNJS_DEPLOY=netlify npx modern deploy
|
|
|
38
38
|
npx modern deploy
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
当执行 `modern deploy` 命令时,
|
|
41
|
+
当执行 `modern deploy` 命令时,UltraModern.js 将生成可执行的部署产物,并在控制台输出以下内容:
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
44
|
Static directory: `.output/static`
|
|
@@ -316,7 +316,7 @@ Github Pages 支持两种部署方式,通过分支部署或通过 Github Actio
|
|
|
316
316
|
|
|
317
317
|
:::info
|
|
318
318
|
|
|
319
|
-
1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`,
|
|
319
|
+
1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`,UltraModern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
|
|
320
320
|
2. 可以参考项目[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
|
|
321
321
|
|
|
322
322
|
:::
|
|
@@ -48,6 +48,5 @@ Modern.js 支持多种渲染模式组合使用:
|
|
|
48
48
|
- [服务端渲染(SSR)](/guides/basic-features/render/ssr)
|
|
49
49
|
- [流式服务端渲染(Streaming SSR)](/guides/basic-features/render/streaming-ssr)
|
|
50
50
|
- [React Server Components(RSC)](/guides/basic-features/render/rsc)
|
|
51
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
52
51
|
- [静态站点生成(SSG)](/guides/basic-features/render/ssg)
|
|
53
52
|
- [渲染缓存](/guides/basic-features/render/ssr-cache)
|
|
@@ -616,4 +616,3 @@ import DeployTip from '@site-docs/components/rsc-deploy-tip';
|
|
|
616
616
|
- [数据缓存](/guides/basic-features/data/data-cache)
|
|
617
617
|
- [服务端渲染(SSR)](/guides/basic-features/render/ssr)
|
|
618
618
|
- [Streaming SSR](/guides/basic-features/render/streaming-ssr)
|
|
619
|
-
- [TanStack Router RSC](/guides/basic-features/render/tanstack-rsc)
|
|
@@ -466,7 +466,7 @@ Modern.js 支持通过 `loading.tsx` 文件来解决这个问题,`routes/` 下
|
|
|
466
466
|
|
|
467
467
|
## 预加载
|
|
468
468
|
|
|
469
|
-
大多数切换路由时白屏的情况,都可以通过定义 `<Loading>` 组件来优化体验。Modern.js 也支持在 `<Link>` 组件上定义 `prefetch`
|
|
469
|
+
大多数切换路由时白屏的情况,都可以通过定义 `<Loading>` 组件来优化体验。Modern.js 也支持在 `<Link>` 组件上定义 `prefetch` 和 `preload` 属性,提前对导航进行预热。
|
|
470
470
|
|
|
471
471
|
对于有更高性能要求的应用,预加载可以进一步提升用户体验,减少展示 `<Loading>` 组件的时间:
|
|
472
472
|
|
|
@@ -476,21 +476,36 @@ Modern.js 支持通过 `loading.tsx` 文件来解决这个问题,`routes/` 下
|
|
|
476
476
|
|
|
477
477
|
:::tip
|
|
478
478
|
|
|
479
|
-
|
|
479
|
+
在 SSR 项目中,同源路由会为匹配到且带有可调用 loader 的路由预取 [Data Loader](/guides/basic-features/data/data-fetch) 返回的数据。如果某个路由的 loader 数据不应该在导航前请求,可以将该路由的 `handle.navigationWarmup.data` 设置为 `false`。
|
|
480
480
|
|
|
481
481
|
:::
|
|
482
482
|
|
|
483
|
-
|
|
483
|
+
默认情况下,同源链接会在 `<Link>` 渲染时预取路由模块和匹配到的 loader 数据。当用户开启 Save-Data 或处于慢速网络时,Modern.js 会跳过这些自动预热。
|
|
484
484
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
- `render
|
|
485
|
+
`prefetch` 属性有四个可选值:
|
|
486
|
+
|
|
487
|
+
- `render`,默认值。当 `<Link>` 组件渲染时,就会预热对应的路由模块。
|
|
488
|
+
- `intent`,当用户聚焦、悬停或触摸链接时,会开始预热对应的路由模块。如果意图在预热开始前取消,预热也会取消。
|
|
489
|
+
- `viewport`,当 `<Link>` 组件进入视窗时,会开始预热对应的路由模块。
|
|
490
|
+
- `none`,关闭自动 prefetch。如果没有显式设置 `preload`,也会关闭隐式 preload。
|
|
491
|
+
|
|
492
|
+
`preload` 属性接受同样的时机值,默认跟随 `prefetch` 的时机。显式设置的 `preload` 总是优先生效,`preload={false}` 会关闭 preload 行为。
|
|
493
|
+
|
|
494
|
+
如果要让某个路由关闭 SSR 数据预热:
|
|
495
|
+
|
|
496
|
+
```ts title="routes/page.config.ts"
|
|
497
|
+
export const handle = {
|
|
498
|
+
navigationWarmup: {
|
|
499
|
+
data: false,
|
|
500
|
+
},
|
|
501
|
+
};
|
|
502
|
+
```
|
|
488
503
|
|
|
489
504
|
:::details 值为 render 和不做路由分片的区别
|
|
490
505
|
|
|
491
|
-
- `render`
|
|
492
|
-
- `
|
|
493
|
-
-
|
|
506
|
+
- `render` 可以通过 `<Link>` 组件在组件树中的位置控制路由模块预热时机。
|
|
507
|
+
- `viewport` 可以把模块预热推迟到链接接近可操作时再触发。
|
|
508
|
+
- SSR 数据预取默认开启;当路由的 loader 数据不适合在导航前获取时,使用 `handle.navigationWarmup.data = false` 关闭。
|
|
494
509
|
|
|
495
510
|
:::
|
|
496
511
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["
|
|
1
|
+
["rstest", "playwright"]
|
|
@@ -26,10 +26,10 @@ Modern.js 开发环境和生产环境的 Web 服务器流程是完全同构的
|
|
|
26
26
|
|
|
27
27
|
Modern.js 支持在任何 Node.js 环境运行构建产物。在 CI 环境中,通常情况下已经安装了应用全部的依赖。
|
|
28
28
|
|
|
29
|
-
你可以执行 [`modern build`](/apis/app/commands#modern-build) 来构建应用,执行 [`modern serve`](/apis/app/commands#modern-serve) 命令来运行 Web 服务器,启动
|
|
29
|
+
你可以执行 [`modern build`](/apis/app/commands#modern-build) 来构建应用,执行 [`modern serve`](/apis/app/commands#modern-serve) 命令来运行 Web 服务器,启动 UltraModern.js 应用。
|
|
30
30
|
|
|
31
31
|
## 在生产环境中运行
|
|
32
32
|
|
|
33
33
|
在部署到生产环境时,产物体积应该尽可能小,而上述在 CI 中运行的方案,会保留原项目的所有产物。因此在生产环境,不推荐通过上述命令运行应用。
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
UltraModern.js 提供了独立的部署方案,当运行 [`modern deploy`](/apis/app/commands#modern-deploy) 命令时,产物中会包含可运行 Web 服务器的入口文件。
|
|
@@ -25,7 +25,7 @@ import DebugApp from '@site-docs/components/debug-app';
|
|
|
25
25
|
|
|
26
26
|
## 使用配置
|
|
27
27
|
|
|
28
|
-
通过 `@modern-js
|
|
28
|
+
通过 `@bleedingdev/modern-js-create` 创建的 UltraModern.js 项目中,会默认生成 `modern.config.ts` 文件。
|
|
29
29
|
|
|
30
30
|
你可以通过该配置文件修改配置,覆盖 Modern.js 的默认行为。例如添加如下配置,开启 SSR:
|
|
31
31
|
|
|
@@ -18,13 +18,13 @@ Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue
|
|
|
18
18
|
|
|
19
19
|
Modern.js 提供两套一方路由方案:
|
|
20
20
|
|
|
21
|
-
- 默认使用 [
|
|
22
|
-
-
|
|
21
|
+
- 默认使用 [TanStack Router](https://tanstack.com/router),通过 `@modern-js/plugin-tanstack/runtime` 导出 API。
|
|
22
|
+
- 兼容 [React Router 7](https://reactrouter.com/en/main),通过 `@modern-js/runtime/router` 导出 API。
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
创建 UltraModern 项目时,默认会包含 TanStack Router:
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
|
|
27
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Modern.js 支持约定式路由、自控式路由或其他路由方案,请参考 [页面入口](/guides/concept/entries) 进行选择。
|
|
@@ -84,6 +84,12 @@ Modern.js 可以与社区中任意的 React 组件库搭配使用,比如 [MUI]
|
|
|
84
84
|
|
|
85
85
|
Modern.js 支持使用 [Storybook](https://storybook.js.org/) 来开发 UI 组件。该功能为可选功能,请参考 [使用 Storybook](/guides/basic-features/debug/using-storybook) 启用。
|
|
86
86
|
|
|
87
|
+
## 测试框架
|
|
88
|
+
|
|
89
|
+
Modern.js 推荐使用 [Rstest](https://rstest.rs/) 编写单元测试和组件测试。Rstest 基于 Rspack 构建,启动和执行速度快,并且可以通过 [`@modern-js/adapter-rstest`](/guides/basic-features/testing/rstest) 复用 Modern.js 的应用配置。
|
|
90
|
+
|
|
91
|
+
如果需要编写端到端(E2E)测试,可以使用 [Playwright](/guides/basic-features/testing/playwright)。
|
|
92
|
+
|
|
87
93
|
## Node.js 框架
|
|
88
94
|
|
|
89
95
|
import TechStackNodeFramework from '@site-docs/components/tech-stack-node-framework';
|