@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.
Files changed (87) hide show
  1. package/docs/en/apis/app/commands.mdx +41 -51
  2. package/docs/en/community/blog/2022-0708-updates.md +1 -1
  3. package/docs/en/community/blog/2022-0910-updates.md +2 -2
  4. package/docs/en/community/contributing-guide.mdx +2 -3
  5. package/docs/en/community/releases.mdx +1 -5
  6. package/docs/en/components/init-app.mdx +40 -66
  7. package/docs/en/components/init-rspack-app.mdx +1 -1
  8. package/docs/en/components/prerequisites.mdx +1 -2
  9. package/docs/en/components/serve-command.mdx +1 -1
  10. package/docs/en/configure/app/bff/effect.mdx +27 -3
  11. package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
  12. package/docs/en/configure/app/performance/rsdoctor.mdx +7 -4
  13. package/docs/en/configure/app/tools/ts-checker.mdx +30 -2
  14. package/docs/en/guides/advanced-features/bff/data-platform.mdx +3 -1
  15. package/docs/en/guides/advanced-features/bff/frameworks.mdx +3 -1
  16. package/docs/en/guides/advanced-features/international/api.mdx +4 -1
  17. package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
  18. package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
  19. package/docs/en/guides/advanced-features/international/routing.mdx +45 -2
  20. package/docs/en/guides/basic-features/debug/rsdoctor.mdx +2 -3
  21. package/docs/en/guides/basic-features/deploy.mdx +1 -1
  22. package/docs/en/guides/basic-features/render/_meta.json +1 -10
  23. package/docs/en/guides/basic-features/render/overview.mdx +0 -1
  24. package/docs/en/guides/basic-features/render/rsc.mdx +0 -1
  25. package/docs/en/guides/basic-features/routes/routes.mdx +24 -9
  26. package/docs/en/guides/basic-features/testing/_meta.json +1 -1
  27. package/docs/en/guides/concept/server.mdx +2 -2
  28. package/docs/en/guides/get-started/quick-start.mdx +1 -1
  29. package/docs/en/guides/get-started/tech-stack.mdx +10 -4
  30. package/docs/en/guides/get-started/ultramodern.mdx +94 -20
  31. package/docs/en/guides/upgrade/config.mdx +1 -2
  32. package/docs/en/guides/upgrade/other.mdx +4 -4
  33. package/docs/zh/apis/app/commands.mdx +38 -48
  34. package/docs/zh/community/blog/2022-0708-updates.md +1 -1
  35. package/docs/zh/community/blog/2022-0910-updates.md +2 -2
  36. package/docs/zh/community/contributing-guide.mdx +2 -3
  37. package/docs/zh/community/releases.mdx +1 -5
  38. package/docs/zh/components/init-app.mdx +33 -62
  39. package/docs/zh/components/init-rspack-app.mdx +1 -1
  40. package/docs/zh/components/prerequisites.mdx +1 -2
  41. package/docs/zh/components/serve-command.mdx +1 -1
  42. package/docs/zh/configure/app/bff/effect.mdx +26 -2
  43. package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
  44. package/docs/zh/configure/app/performance/rsdoctor.mdx +7 -4
  45. package/docs/zh/configure/app/tools/ts-checker.mdx +30 -2
  46. package/docs/zh/configure/app/usage.mdx +1 -1
  47. package/docs/zh/guides/advanced-features/bff/data-platform.mdx +3 -1
  48. package/docs/zh/guides/advanced-features/bff/frameworks.mdx +3 -1
  49. package/docs/zh/guides/advanced-features/international/api.mdx +4 -1
  50. package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
  51. package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
  52. package/docs/zh/guides/advanced-features/international/routing.mdx +45 -2
  53. package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +2 -3
  54. package/docs/zh/guides/basic-features/deploy.mdx +2 -2
  55. package/docs/zh/guides/basic-features/render/_meta.json +1 -10
  56. package/docs/zh/guides/basic-features/render/overview.mdx +0 -1
  57. package/docs/zh/guides/basic-features/render/rsc.mdx +0 -1
  58. package/docs/zh/guides/basic-features/routes/routes.mdx +24 -9
  59. package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
  60. package/docs/zh/guides/concept/server.mdx +2 -2
  61. package/docs/zh/guides/get-started/quick-start.mdx +1 -1
  62. package/docs/zh/guides/get-started/tech-stack.mdx +10 -4
  63. package/docs/zh/guides/get-started/ultramodern.mdx +88 -4
  64. package/docs/zh/guides/upgrade/config.mdx +1 -2
  65. package/docs/zh/guides/upgrade/other.md +4 -5
  66. package/package.json +15 -14
  67. package/rspress.config.ts +17 -5
  68. package/src/components/Footer/index.tsx +3 -3
  69. package/src/components/SecondaryTitle/index.module.css +7 -2
  70. package/src/components/ShowcaseList/useShowcases.ts +23 -65
  71. package/src/i18n/enUS.ts +0 -9
  72. package/src/i18n/zhCN.ts +0 -9
  73. package/src/sandbox/csr-auth/src/routes/page-tsx.txt +1 -1
  74. package/static/img/logo.svg +7 -0
  75. package/static/img/social-card.svg +12 -0
  76. package/builder-doc/docs/en/config/performance/rsdoctor.md +0 -37
  77. package/builder-doc/docs/zh/config/performance/rsdoctor.md +0 -37
  78. package/docs/en/guides/basic-features/render/tanstack-rsc.mdx +0 -226
  79. package/docs/en/guides/basic-features/testing/cypress.mdx +0 -95
  80. package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
  81. package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
  82. package/docs/zh/guides/basic-features/render/tanstack-rsc.mdx +0 -226
  83. package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
  84. package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
  85. package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
  86. package/main-doc/docs/en/guides/get-started/ultramodern.mdx +0 -320
  87. package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +0 -304
@@ -1,64 +1,32 @@
1
- Modern.js 提供了 `@modern-js/create` 工具来创建项目,不需要全局安装,直接使用 `npx` 按需运行即可。
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
- npx @modern-js/create@latest
11
+ pnpm dlx @bleedingdev/modern-js-create .
8
12
  ```
9
13
 
10
14
  也可以直接用新目录创建项目:
11
15
 
12
16
  ```bash
13
- npx @modern-js/create@latest myapp
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
- npx @modern-js/create@latest myapp --router tanstack --bff-runtime effect --workspace
23
+ pnpm dlx @bleedingdev/modern-js-create myapp --workspace
56
24
  ```
57
25
 
58
- `@modern-js/create` 会直接创建应用,不再提供问答界面:
26
+ BleedingDev create 包会直接创建应用,不再提供问答界面:
59
27
 
60
28
  ```bash
61
- 🚀 欢迎使用 Modern.js
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
- ├── biome.json
91
- ├── modern.config.ts
58
+ ├── apps
59
+ │ └── shell-super-app
92
60
  ├── package.json
93
- ├── README.md
94
- ├── src
95
- │ ├── modern-app-env.d.ts
96
- ├── modern.runtime.ts
97
- │ └── routes
98
- ├── index.css
99
- │ ├── layout.tsx
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
- 当启用 `--tailwind` 时,项目根目录会额外生成 `postcss.config.mjs` `tailwind.config.ts`。
70
+ 默认 workspace shell 起步,并安装已发布的 BleedingDev 包别名:
105
71
 
106
- 当启用 `--bff` 或 `--bff-runtime effect` 时,会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/effect/index.ts` 与 `shared/effect/api.ts`,并将 `bff.runtimeFramework` 设置为 `effect`。
107
- 当启用 `--bff-runtime hono` 时,会在 `modern.config.ts` 中启用 `@modern-js/plugin-bff`,生成 `api/lambda/hello.ts`,并将 `bff.runtimeFramework` 设置为 `hono`。
108
- 当启用 `--workspace` 时,`@modern-js/*` 依赖会使用 `workspace:*` 版本,便于本地 monorepo 联调。
72
+ ```bash
73
+ pnpm dlx @bleedingdev/modern-js-create my-super-app
74
+ ```
109
75
 
110
- 如果你需要公开的 UltraModern.js SuperApp 路径,请使用 BleedingDev create 包。
111
- 它默认生成规范的 Effect + TanStack + SSR + Micro Verticals workspace,并使用已发布的 BleedingDev 包别名:
76
+ 在已生成的 SuperApp workspace 根目录中,可以就地添加业务
77
+ MicroVertical:
112
78
 
113
79
  ```bash
114
- pnpm dlx @bleedingdev/modern-js-create myapp
80
+ pnpm dlx @bleedingdev/modern-js-create transportation --vertical
115
81
  ```
116
82
 
117
- 底层 `--ultramodern-*` 参数只保留给发布工程和本地包源测试使用。
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,5 +1,5 @@
1
1
  ```bash
2
- $ npx @modern-js/create@latest myapp
2
+ $ pnpm dlx @bleedingdev/modern-js-create myapp
3
3
  ? 请选择开发语言:TS
4
4
  ? 请选择包管理工具:pnpm
5
5
  ```
@@ -9,8 +9,7 @@ import NodeVersion from '@site-docs/components/nodeVersion.mdx';
9
9
  推荐使用 [pnpm](https://pnpm.io/installation) 来管理依赖:
10
10
 
11
11
  ```bash
12
- corepack enable pnpm
13
- corepack prepare pnpm@11.1.2 --activate
12
+ mise use pnpm@11.4.0
14
13
  ```
15
14
 
16
15
  :::note
@@ -1,6 +1,6 @@
1
1
  ## modern serve
2
2
 
3
- `modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
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
- - **默认值:** `{ enabled: true }`
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
- `validateOrigin` 开启时,运行时会优先将 envelope 中的 origin 与请求 `Origin` 头比对;若请求无 `Origin`,则回退到请求 URL 的 origin。
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
- 如果需要优先使用 Effect 分支的公开 UltraModern 预设,请在应用中显式设置,或使用 create 模板提供的 Effect 脚手架路径。
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
- - **默认值:** 生产构建时为 `true`,开发模式下为 `false`。
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: false,
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/rspack-contrib/rsbuild-plugin-type-check) 进行类型检查。你可以通过 `output.disableTsChecker` 配置项来关闭类型检查。
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
- > 请参考 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 了解更多用法。
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)。
@@ -117,7 +117,7 @@ Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称
117
117
  ```json title="package.json"
118
118
  {
119
119
  "scripts": {
120
- "dev": "modern modern",
120
+ "dev": "modern dev",
121
121
  "build": "modern build --config modern.prod.config.ts"
122
122
  }
123
123
  }
@@ -55,12 +55,14 @@ export default defineConfig({
55
55
  });
56
56
  ```
57
57
 
58
- 当启用 `validateOrigin` 时,Effect 运行时会优先使用请求中的 `Origin` 头进行 origin 校验;若不存在 `Origin`,则回退到请求 URL 的 origin。
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
- 在浏览器端通过 `@api/effect/index` 调用接口:
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 | — | 否 | 继承自 `@modern-js/runtime/router` 的 `Link` 组件 |
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
- 指定哪些路径跳过语言路径重定向,适用于 API 路由、静态资源等不需要语言前缀的路径。
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
- 某些路径(如 API 路由、静态资源)不需要语言前缀,可以通过 `ignoreRedirectRoutes` 跳过重定向,详见[语言检测 → ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes)。
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` 继承自 `@modern-js/runtime/router` 的 `Link` 组件,支持 `replace`、`state`、`className` 等所有标准 Link props,完整 Props 类型见 [API 参考](./api.md#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 默认会在生产构建中开启 Rsdoctor
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
- 如果你希望关闭 Rsdoctor:
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` 命令时,Modern.js 将生成可执行的部署产物,并在控制台输出以下内容:
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`,Modern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
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
  :::
@@ -1,10 +1 @@
1
- [
2
- "overview",
3
- "ssr",
4
- "streaming-ssr",
5
- "ssr-cache",
6
- "ssg",
7
- "rsc",
8
- "tanstack-rsc",
9
- "before-render"
10
- ]
1
+ ["overview", "ssr", "streaming-ssr", "ssr-cache", "ssg", "rsc", "before-render"]
@@ -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
- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
479
+ SSR 项目中,同源路由会为匹配到且带有可调用 loader 的路由预取 [Data Loader](/guides/basic-features/data/data-fetch) 返回的数据。如果某个路由的 loader 数据不应该在导航前请求,可以将该路由的 `handle.navigationWarmup.data` 设置为 `false`。
480
480
 
481
481
  :::
482
482
 
483
- `prefetch` 属性有三个可选值:
483
+ 默认情况下,同源链接会在 `<Link>` 渲染时预取路由模块和匹配到的 loader 数据。当用户开启 Save-Data 或处于慢速网络时,Modern.js 会跳过这些自动预热。
484
484
 
485
- - `none`, 默认值,不会做 prefetch,没有任何额外的行为。
486
- - `intent`,这是我们推荐大多数场景下使用的值,当你把鼠标放在 Link 上时,会自动开始加载对应的分片和 Data Loader 中定义的数据,当鼠标移开时,会自动取消加载。在我们的测试中,即使是快速点击,也能减少大约 200ms 的加载时间。
487
- - `render`,当 `<Link>` 组件渲染时,就会加载对应的分片和 Data Loader 中定义的数据。
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` 加载路由分片的时机是可控的,只有在 `<Link>` 组件进入视窗时才触发,可以通过控制 `<Link>` 组件的渲染位置来控制分片加载时机。
492
- - `render` 仅在空闲时对静态资源进行加载,不占用重要模块的加载时间。
493
- - 除了预加载路由分片,`render` SSR 项目中还会发起数据预取。
506
+ - `render` 可以通过 `<Link>` 组件在组件树中的位置控制路由模块预热时机。
507
+ - `viewport` 可以把模块预热推迟到链接接近可操作时再触发。
508
+ - SSR 数据预取默认开启;当路由的 loader 数据不适合在导航前获取时,使用 `handle.navigationWarmup.data = false` 关闭。
494
509
 
495
510
  :::
496
511
 
@@ -1 +1 @@
1
- ["playwright", "rstest", "vitest", "jest", "cypress"]
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 服务器,启动 Modern.js 应用。
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
- Modern.js 提供了独立的部署方案,当运行 [`modern deploy`](/apis/app/commands#modern-deploy) 命令时,产物中会包含可运行 Web 服务器的入口文件。
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/create` 创建的 Modern.js 项目中,会默认生成 `modern.config.ts` 文件。
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
- - 默认使用 [React Router 7](https://reactrouter.com/en/main),通过 `@modern-js/runtime/router` 导出 API。
22
- - 支持 [TanStack Router](https://tanstack.com/router),通过 `@modern-js/plugin-tanstack/runtime` 导出 API。
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
- 创建项目时,可通过以下命令选择 TanStack Router:
24
+ 创建 UltraModern 项目时,默认会包含 TanStack Router:
25
25
 
26
26
  ```bash
27
- npx @modern-js/create@latest myapp --router tanstack
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';