@bleedingdev/modern-js-main-doc 3.4.0-ultramodern.9 → 3.5.0-ultramodern.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.
Files changed (40) hide show
  1. package/docs/en/community/blog/v3-release-note.mdx +1 -1
  2. package/docs/en/configure/app/bff/effect.mdx +15 -3
  3. package/docs/en/configure/app/bff/runtime-framework.mdx +4 -2
  4. package/docs/en/configure/app/experiments/source-build.mdx +1 -1
  5. package/docs/en/configure/app/html/template-parameters.mdx +1 -1
  6. package/docs/en/configure/app/output/convert-to-rem.mdx +1 -1
  7. package/docs/en/configure/app/security/check-syntax.mdx +1 -1
  8. package/docs/en/configure/app/tools/html-plugin.mdx +1 -1
  9. package/docs/en/configure/app/tools/ts-checker.mdx +20 -1
  10. package/docs/en/guides/advanced-features/bff/data-platform.mdx +4 -4
  11. package/docs/en/guides/advanced-features/bff/frameworks.mdx +25 -14
  12. package/docs/en/guides/advanced-features/bff/function.mdx +4 -0
  13. package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  14. package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
  15. package/docs/en/guides/basic-features/static-assets/json-files.mdx +2 -2
  16. package/docs/en/guides/get-started/_meta.json +2 -1
  17. package/docs/en/guides/get-started/ai-coding-agents.mdx +48 -0
  18. package/docs/en/guides/get-started/ultramodern.mdx +74 -23
  19. package/docs/en/guides/upgrade/config.mdx +1 -1
  20. package/docs/en/plugin/introduction.mdx +9 -9
  21. package/docs/zh/community/blog/v3-release-note.mdx +1 -1
  22. package/docs/zh/configure/app/bff/effect.mdx +14 -3
  23. package/docs/zh/configure/app/bff/runtime-framework.mdx +4 -2
  24. package/docs/zh/configure/app/experiments/source-build.mdx +1 -1
  25. package/docs/zh/configure/app/html/template-parameters.mdx +1 -1
  26. package/docs/zh/configure/app/output/convert-to-rem.mdx +1 -1
  27. package/docs/zh/configure/app/security/check-syntax.mdx +1 -1
  28. package/docs/zh/configure/app/tools/html-plugin.mdx +1 -1
  29. package/docs/zh/configure/app/tools/ts-checker.mdx +19 -0
  30. package/docs/zh/guides/advanced-features/bff/data-platform.mdx +2 -2
  31. package/docs/zh/guides/advanced-features/bff/frameworks.mdx +24 -14
  32. package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  33. package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
  34. package/docs/zh/guides/basic-features/static-assets/json-files.mdx +2 -2
  35. package/docs/zh/guides/get-started/_meta.json +2 -1
  36. package/docs/zh/guides/get-started/ai-coding-agents.mdx +48 -0
  37. package/docs/zh/guides/get-started/ultramodern.mdx +59 -19
  38. package/docs/zh/guides/upgrade/config.mdx +1 -1
  39. package/docs/zh/plugin/introduction.mdx +9 -9
  40. package/package.json +2 -2
@@ -591,7 +591,7 @@ Modern.js 3.0 新项目默认使用 React 19,最低支持 React 18。
591
591
 
592
592
  #### Storybook Rsbuild
593
593
 
594
- 在 Modern.js 3.0 中,我们基于 [Storybook Rsbuild](https://github.com/rspack-contrib/storybook-rsbuild) 实现了使用 Storybook 构建 Modern.js 应用。
594
+ 在 Modern.js 3.0 中,我们基于 [Storybook Rsbuild](https://github.com/rstackjs/storybook-rsbuild) 实现了使用 Storybook 构建 Modern.js 应用。
595
595
 
596
596
  通过 Storybook Addon,我们将 Modern.js 配置转换合并为 Rsbuild 配置,并通过 Storybook Rsbuild 驱动构建,让 Storybook 调试与开发命令保持配置对齐。
597
597
 
@@ -9,6 +9,7 @@ title: effect
9
9
  ```ts
10
10
  type BffEffectUserConfig = {
11
11
  entry?: string;
12
+ strictEffectApproach?: true;
12
13
  openapi?: boolean | { path?: string };
13
14
  dataPlatform?: {
14
15
  enabled?: boolean;
@@ -58,7 +59,7 @@ import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
58
59
  ## bff.effect.entry
59
60
 
60
61
  - **类型:** `string`
61
- - **默认值:** `<apiDirectory>/effect/index`
62
+ - **默认值:** `<apiDirectory>/index`
62
63
 
63
64
  用于指定 Effect HttpApi 运行时入口模块。
64
65
 
@@ -67,12 +68,22 @@ export default defineConfig({
67
68
  bff: {
68
69
  runtimeFramework: 'effect',
69
70
  effect: {
70
- entry: './api/effect/index',
71
+ entry: './api/index',
71
72
  },
72
73
  },
73
74
  });
74
75
  ```
75
76
 
77
+ ## bff.effect.strictEffectApproach
78
+
79
+ - **类型:** `true`
80
+ - **默认值:** `true`
81
+
82
+ Effect BFF 模块必须导出严格 Effect API surface(`defineEffectBff(...)` 或
83
+ `{ api, layer }`),原始 request handler 会被拒绝。生成的 UltraModern 应用会显式
84
+ 写入这个标记,并通过源码检查拒绝生成 API 模块中的 Hono server import、手写
85
+ request parsing 和手写 `Response`。
86
+
76
87
  ## bff.effect.openapi
77
88
 
78
89
  - **类型:** `boolean | { path?: string }`
@@ -173,4 +184,4 @@ export default defineConfig({
173
184
 
174
185
  `batch.flushIntervalMs` 用于控制生成的 Effect 客户端微批处理窗口;`maxConcurrency` 与 `requestTimeoutMs` 由服务端批处理网关用于内部请求分发。
175
186
 
176
- 生成的 `effectBff.client.*` API 只存在于 loader 物化后的 `@api/effect/*` 导入中。直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
187
+ 生成的 `api.client.*` API 只存在于 loader 物化后的 `@api/index` 导入中。直接导入服务端入口(`api/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
@@ -21,8 +21,10 @@ export default defineConfig({
21
21
  });
22
22
  ```
23
23
 
24
- - 设置为 `'effect'` 时,仅从 `api/effect/index` 运行 BFF(Effect HttpApi 运行时)。
24
+ - 设置为 `'effect'` 时,仅从 `api/index` 运行 BFF(Effect HttpApi 运行时)。
25
25
  - 设置为 `'hono'` 时,仅从 `api/lambda/**` 的文件约定处理函数运行 BFF。
26
26
 
27
27
  两种运行时之间没有隐式回退,应用需要显式选择其一。
28
- 生成的 UltraModern 应用默认使用 Effect 分支;仅在需要兼容运行时时设置 `runtimeFramework: 'hono'`。
28
+ 生成的 UltraModern 应用默认使用严格 Effect API,并设置
29
+ `bff.effect.strictEffectApproach: true`;`hono` 与 `api/lambda/**` 不是生成
30
+ UltraModern HTTP API 的有效路径。
@@ -21,7 +21,7 @@ export default {
21
21
 
22
22
  ### 选项
23
23
 
24
- `experiments.sourceBuild` 底层基于 [@rsbuild/plugin-source-build](https://github.com/rspack-contrib/rsbuild-plugin-source-build?tab=readme-ov-file#options) 实现,你可以传入插件选项,比如:
24
+ `experiments.sourceBuild` 底层基于 [@rsbuild/plugin-source-build](https://github.com/rstackjs/rsbuild-plugin-source-build?tab=readme-ov-file#options) 实现,你可以传入插件选项,比如:
25
25
 
26
26
  ```ts
27
27
  export default {
@@ -30,7 +30,7 @@ type DefaultParameters = {
30
30
  };
31
31
  ```
32
32
 
33
- 定义 HTML 模板中的参数,对应 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 的 `templateParameters` 配置项。
33
+ 定义 HTML 模板中的参数,对应 [html-rspack-plugin](https://github.com/rstackjs/html-rspack-plugin) 的 `templateParameters` 配置项。
34
34
 
35
35
  import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
36
36
 
@@ -80,5 +80,5 @@ export default {
80
80
  };
81
81
  ```
82
82
 
83
- 详细用法可参考 [rsbuild-plugin-rem](https://github.com/rspack-contrib/rsbuild-plugin-rem)。
83
+ 详细用法可参考 [rsbuild-plugin-rem](https://github.com/rstackjs/rsbuild-plugin-rem)。
84
84
 
@@ -70,4 +70,4 @@ error [Syntax Checker] Find some syntax errors after production build:
70
70
 
71
71
  ### 选项
72
72
 
73
- `security.checkSyntax` 底层基于 `@rsbuild/plugin-check-syntax` 实现,具体选项可参考 [@rsbuild/plugin-check-syntax](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)。
73
+ `security.checkSyntax` 底层基于 `@rsbuild/plugin-check-syntax` 实现,具体选项可参考 [@rsbuild/plugin-check-syntax](https://github.com/rstackjs/rsbuild-plugin-check-syntax)。
@@ -38,7 +38,7 @@ const defaultOptions = {
38
38
  SSR 应用请勿启用 `minify.removeComments` 配置项,否则会导致 SSR 渲染失败。
39
39
  :::
40
40
 
41
- 通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 的配置项。
41
+ 通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rstackjs/html-rspack-plugin) 的配置项。
42
42
 
43
43
  import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
44
44
 
@@ -43,6 +43,8 @@ const defaultOptions = {
43
43
 
44
44
  ## 示例
45
45
 
46
+ ### Object 类型
47
+
46
48
  当 `tsChecker` 的值为 Object 类型时,会与默认配置进行深层合并。
47
49
 
48
50
  ```ts
@@ -57,6 +59,23 @@ export default {
57
59
  };
58
60
  ```
59
61
 
62
+ ### Function 类型
63
+
64
+ 当 `tsChecker` 的值为函数时,默认配置会作为第一个参数传入。你可以直接修改配置对象,也可以返回一个对象作为最终配置。
65
+
66
+ ```ts
67
+ export default {
68
+ tools: {
69
+ tsChecker(options) {
70
+ options.async = false;
71
+ return options;
72
+ },
73
+ },
74
+ };
75
+ ```
76
+
77
+ > 更多详情请参考 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check)。
78
+
60
79
  ## TypeScript Go 默认开启
61
80
 
62
81
  类型检查默认使用 [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 倍。
@@ -59,9 +59,9 @@ Envelope 校验默认开启,但只有设置 `requireEnvelope` 时才强制要
59
59
 
60
60
  ## Effect 客户端自动行为
61
61
 
62
- 使用生成的 Effect 客户端(`@api/effect/index`)时,Modern.js 会在同源请求中自动附加序列化的 envelope 请求头(`x-modernjs-data-envelope`)。
62
+ 使用生成的 Effect 客户端(`@api/index`)时,Modern.js 会在同源请求中自动附加序列化的 envelope 请求头(`x-modernjs-data-envelope`)。
63
63
 
64
- 生成客户端由 loader 物化。请在浏览器或会被客户端打包的代码中通过 `@api/effect/*` 导入;直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义,其中只包含占位的 `client`。
64
+ 生成客户端由 loader 物化。请在浏览器或会被客户端打包的代码中通过 `@api/index` 导入;直接导入服务端入口(`api/index`)时拿到的是 Effect BFF 定义,其中只包含占位的 `client`。
65
65
 
66
66
  Envelope 默认包含:
67
67
 
@@ -7,11 +7,19 @@ title: 运行时框架
7
7
 
8
8
  Modern.js 目前支持两种 BFF 运行时框架:
9
9
 
10
- - `effect`(默认):使用 `api/effect/index` 的 [Effect HttpApi](https://effect.website/) 运行时。
10
+ - `effect`(默认):使用 `api/index` 的 [Effect HttpApi](https://effect.website/) 运行时。
11
11
  - `hono`:使用 `api/lambda/**` 的文件约定 BFF 处理函数。
12
12
 
13
13
  `effect` 与 `hono` 为严格模式,两者之间不会自动回退。
14
14
 
15
+ ::::info
16
+ 本页记录通用 Modern.js 运行时能力。生成的 UltraModern workspace 始终使用
17
+ `effect` 运行时,并设置 `bff.effect.strictEffectApproach: true`。新增或修改生成的
18
+ UltraModern HTTP API 时,先改 `shared/api.ts`,再改 `api/index.ts`;不要在这些
19
+ workspace 中加入 Hono/file-convention handler、原始 request parsing 或手写
20
+ `Response`。
21
+ ::::
22
+
15
23
  ## 切换到 Effect 运行时
16
24
 
17
25
  ```ts title="modern.config.ts"
@@ -23,6 +31,8 @@ export default defineConfig({
23
31
  bff: {
24
32
  runtimeFramework: 'effect',
25
33
  effect: {
34
+ entry: './api/index',
35
+ strictEffectApproach: true,
26
36
  openapi: {
27
37
  path: '/openapi.json',
28
38
  },
@@ -33,7 +43,7 @@ export default defineConfig({
33
43
 
34
44
  先在共享目录中定义 Effect HttpApi 契约(前后端共享类型):
35
45
 
36
- ```ts title="shared/effect/api.ts"
46
+ ```ts title="shared/api.ts"
37
47
  import {
38
48
  HttpApi,
39
49
  HttpApiEndpoint,
@@ -41,18 +51,18 @@ import {
41
51
  Schema,
42
52
  } from '@modern-js/plugin-bff/effect-client';
43
53
 
44
- export const bffEffectApi = HttpApi.make('MyApi').add(
54
+ export const bffApi = HttpApi.make('MyApi').add(
45
55
  HttpApiGroup.make('hello').add(
46
- HttpApiEndpoint.get('ping', '/effect/ping', {
56
+ HttpApiEndpoint.get('ping', '/ping', {
47
57
  success: Schema.String,
48
58
  }),
49
59
  ),
50
60
  );
51
61
  ```
52
62
 
53
- 然后在 `api/effect/index.ts` 中实现 Effect BFF 入口:
63
+ 然后在 `api/index.ts` 中实现 Effect BFF 入口:
54
64
 
55
- ```ts title="api/effect/index.ts"
65
+ ```ts title="api/index.ts"
56
66
  import {
57
67
  Schema,
58
68
  Effect,
@@ -61,7 +71,7 @@ import {
61
71
  Layer,
62
72
  ServiceMap,
63
73
  } from '@modern-js/plugin-bff/effect-server';
64
- import { bffEffectApi } from '../../shared/effect/api';
74
+ import { bffApi } from '../shared/api';
65
75
 
66
76
  class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
67
77
  'GreetingUnavailableError',
@@ -87,7 +97,7 @@ class GreetingService extends ServiceMap.Service<GreetingService>()('GreetingSer
87
97
  static readonly layer = Layer.effect(this, this.make);
88
98
  }
89
99
 
90
- const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
100
+ const group = HttpApiBuilder.group(bffApi, 'hello', handlers =>
91
101
  handlers.handle('ping', () =>
92
102
  GreetingService.use(service => service.hello()).pipe(
93
103
  Effect.catchTag('GreetingUnavailableError', error =>
@@ -97,23 +107,23 @@ const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
97
107
  ),
98
108
  );
99
109
 
100
- const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
110
+ const layer = HttpApiBuilder.layer(bffApi).pipe(
101
111
  Layer.provide(group),
102
112
  Layer.provide(GreetingService.layer),
103
113
  );
104
114
 
105
- export default defineEffectBff({ api: bffEffectApi, layer });
115
+ export default defineEffectBff({ api: bffApi, layer });
106
116
  ```
107
117
 
108
- 在浏览器代码中通过 `@api/effect/index` 调用接口:
118
+ 在浏览器代码中通过 `@api/index` 调用接口:
109
119
 
110
120
  ```ts title="src/routes/page.tsx"
111
- import effectBff from '@api/effect/index';
121
+ import api from '@api/index';
112
122
 
113
- const response = await effectBff.client.hello.ping({});
123
+ const response = await api.client.hello.ping({});
114
124
  ```
115
125
 
116
- `effectBff.client.*` 由 BFF loader 针对 `@api/effect/*` 导入物化生成。不要直接导入 `api/effect/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
126
+ `api.client.*` 由 BFF loader 针对 `@api/index` 导入物化生成。不要直接导入 `api/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
117
127
 
118
128
  import Hono from '@site-docs/components/hono';
119
129
 
@@ -92,7 +92,7 @@ export default {
92
92
  };
93
93
  ```
94
94
 
95
- 详见 [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)。
95
+ 详见 [Image Compress 插件](https://github.com/rstackjs/rsbuild-plugin-image-compress)。
96
96
 
97
97
  ## 代码拆包
98
98
 
@@ -89,4 +89,4 @@ pnpm storybook
89
89
 
90
90
  ## 示例
91
91
 
92
- 你可以查看 [示例](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/modernjs-react) 了解 Modern.js 中使用 Storybook 的方式。
92
+ 你可以查看 [示例](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react) 了解 Modern.js 中使用 Storybook 的方式。
@@ -38,7 +38,7 @@ import { name } from './example.json';
38
38
 
39
39
  YAML 是一种数据序列化语言,通常用于编写配置文件。
40
40
 
41
- 你可以 `modern.config.ts` 中配置 [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml) 来支持引用 `.yaml` 或 `.yml` 文件,它们会被自动转换为 JSON 格式。
41
+ 你可以 `modern.config.ts` 中配置 [YAML 插件](https://github.com/rstackjs/rsbuild-plugin-yaml) 来支持引用 `.yaml` 或 `.yml` 文件,它们会被自动转换为 JSON 格式。
42
42
 
43
43
  ```ts
44
44
  import { defineConfig } from '@modern-js/app-tools';
@@ -85,7 +85,7 @@ declare module '*.yml' {
85
85
 
86
86
  TOML 是一种语义明显、易于阅读的配置文件格式。
87
87
 
88
- 你可以 `modern.config.ts` 中配置 [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml) 来支持引用 `.toml` 文件,它会被自动转换为 JSON 格式。
88
+ 你可以 `modern.config.ts` 中配置 [TOML 插件](https://github.com/rstackjs/rsbuild-plugin-toml) 来支持引用 `.toml` 文件,它会被自动转换为 JSON 格式。
89
89
 
90
90
  ```ts
91
91
  import { defineConfig } from '@modern-js/app-tools';
@@ -4,5 +4,6 @@
4
4
  "quick-start",
5
5
  "upgrade",
6
6
  "glossary",
7
- "tech-stack"
7
+ "tech-stack",
8
+ "ai-coding-agents"
8
9
  ]
@@ -0,0 +1,48 @@
1
+ ---
2
+ title: AI 工具
3
+ sidebar_position: 6
4
+ ---
5
+
6
+ # Modern.js For AI
7
+
8
+ Modern.js 为 AI Agent 提供了一套工具套件,帮助开发者利用 AI 高效完成 Modern.js 应用的功能开发、依赖升级与版本迁移工作。
9
+
10
+ ## llms.txt
11
+
12
+ Modern.js 文档遵循 [llms.txt 规范](https://llmstxt.org/),由 [`@rspress/plugin-llms`](https://rspress.rs/plugin/official-plugins/llms) 自动生成,可通过 `/llms.txt` 或 `/llms-full.txt` 供 AI 工具检索:
13
+
14
+ - 索引:[`https://modernjs.dev/llms.txt`](https://modernjs.dev/llms.txt)
15
+ - 全文:`https://modernjs.dev/llms-full.txt`(体积较大,按需取片段)
16
+
17
+ 大部分「这个 API / 配置是什么」类问题,靠 llms.txt 即可解决。让你的 Agent 按需检索它即可,不必把文档复制进项目。
18
+
19
+ ## Skills
20
+
21
+ Skills 是按需触发的 AI 辅助能力,遵循 [Agent Skills 开放标准](https://github.com/vercel-labs/skills)。用户向 Skills:
22
+
23
+ | Skill | 标识 | 说明 |
24
+ |---|---|---|
25
+ | 升级到 v3 | `modernjs-migrate-to-v3` | v2 应用迁移到 v3:安全改写 + 复杂项人工清单 + 迁移报告 |
26
+ | 启用特性 | `modernjs-feature-enable` | 为 v3 应用启用 BFF / SSG / styled-components,并脚手架化 Tailwind CSS / 自定义 Web Server |
27
+
28
+ > Skills 默认不强装、不隐式安装,由你显式安装。RSC、微前端等属于配置或架构决策,不是 `modernjs-feature-enable` 的一键启用项。
29
+
30
+ ## 安装 Skills
31
+
32
+ Modern.js 的用户向 Skill 就放在仓库根 `skills/` 目录,遵循 [Agent Skills 开放标准](https://github.com/vercel-labs/skills)。推荐用标准的 `skills` CLI 直接从 GitHub 安装:
33
+
34
+ ```bash
35
+ # 列出可安装的 Skills
36
+ npx skills add web-infra-dev/modern.js --list
37
+
38
+ # 安装单个 Skill 到你的 Agent 目录(--agent 可选 claude-code / codex / cursor 等)
39
+ npx skills add web-infra-dev/modern.js --skill modernjs-migrate-to-v3 --agent codex -y
40
+ ```
41
+
42
+ 它会把整个 Skill 目录(`SKILL.md` + `scripts/` + `references/`)安装到对应 Agent 目录,随后即可在该 Agent 里触发。
43
+
44
+ > 需锁定到某个版本时,在仓库后加 `#<ref>`(ref 可为 tag / 分支 / commit),即安装该版本上的 Skill(把 `<tag>` 换成含本 Skill 的发布 tag):
45
+ >
46
+ > ```bash
47
+ > npx skills add web-infra-dev/modern.js#<tag> --skill modernjs-migrate-to-v3 --agent codex -y
48
+ > ```
@@ -7,14 +7,14 @@ sidebar_position: 2
7
7
 
8
8
  本文对比 **UltraModern.js 3.0** 与本 fork 持续跟进的 Modern.js 3.x 版本线。这里的基线应理解为当前已合并的 Modern.js `release-v3.x` 基线,而不是固定的补丁版本快照。
9
9
 
10
- UltraModern.js 3.0 是我们从 Modern.js 分叉出来的 SuperApp 框架。它保留有利于接入的 Modern.js 插件/运行时心智模型,但产品定位是独立框架:面向 Effect-first BFF、TanStack Router、SSR、Module Federation 与可独立部署的 Micro Verticals。
10
+ UltraModern.js 3.0 是我们从 Modern.js 分叉出来的 SuperApp 框架。它保留有利于接入的 Modern.js 插件/运行时心智模型,但产品定位是独立框架:面向 Effect HttpApi-first HTTP API、TanStack Router、SSR、Module Federation 与可独立部署的 Micro Verticals。
11
11
 
12
12
  ## 设计原则
13
13
 
14
14
  - 差异要明确、可审计。
15
- - 保留有价值的 Modern.js 兼容概念,但不再把 UltraModern.js 表达成“只是一个预设”。
15
+ - 明确维护与上游 Modern.js 的合并兼容性:通用 Modern.js 运行时代码保留在其应在的位置,UltraModern 生成 surface 保持严格。
16
16
  - 仅在跨团队稳定性场景增加平台契约。
17
- - 保留按应用关闭和显式兼容分支的能力。
17
+ - 保留显式 escape hatch,但它们必须位于生成 HTTP API 模块之外。
18
18
 
19
19
  ## 兼容性承诺
20
20
 
@@ -24,7 +24,7 @@ UltraModern.js 3.0 保持以下不变:
24
24
  - 既有项目结构与命令使用方式。
25
25
  - 渐进式接入路径(应用无需大规模重构)。
26
26
 
27
- UltraModern.js 的增强能力是新 SuperApp 的默认产品面。兼容分支仍然存在,用于降低迁移风险,但框架方向是 Effect + TanStack + SSR + Micro Verticals
27
+ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。框架方向是 Effect + TanStack + SSR + Micro Verticals,生成的 HTTP API 只走严格 Effect HttpApi surface。既有 Modern.js 应用可以渐进迁移;一旦某个 API surface 被生成为或迁移为 UltraModern HTTP API,就必须使用严格 Effect HttpApi 路径。
28
28
 
29
29
  ## 有意引入的差异(3.0 线)
30
30
 
@@ -33,7 +33,7 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。兼容分支
33
33
  | 构建诊断能力 | RsDoctor 多为显式开启 | 新增一等的 `performance.rsdoctor` 配置项(按需开启;早期的默认开启行为与诊断契约产物已回退) |
34
34
  | 输出与静态资源回源 | 预压缩策略通常由业务自定义 | 默认开启 `output.precompress`,并按 `Accept-Encoding` 协商 `.br` / `.gz` 回源 |
35
35
  | BFF 运行时与契约 | 提供标准 BFF 运行时与客户端生成能力 | 增加 `requestId` 维度隔离、初始化 fail-fast 校验与操作/追踪关联 Header |
36
- | BFF 运行时选型 | Modern.js 3.0 基线仅提供 Hono 运行时路径(无内建 Effect 运行时) | Effect 设为默认运行时,并采用严格运行时拆分(`effect` -> `api/effect`,`hono` -> `api/lambda`),同时补齐 Effect-Schema-first 契约与 MF failure-injection 覆盖 |
36
+ | BFF 运行时选型 | 标准 request-handler BFF 路径 | 生成的 HTTP API 只走 Effect `HttpApi`,入口固定为 `api/index.ts`,共享契约固定为 `shared/api.ts`,并通过 `strictEffectApproach`、Oxlint 与生成检查拒绝原始 request handler、手写解析、手写 `Response` Hono server import |
37
37
  | Telemetry 标准化 | 可观测链路通常由业务侧自行拼装 | 增加框架级 telemetry 管线,内置 OTLP/VictoriaMetrics,支持脱敏、批处理与背压 |
38
38
  | 应用级 MF SSR 协议 | 没有以 super-app 为重点的应用级稳定性契约开关 | 增加 `server.ssr.moduleFederationAppSSR` 配置/环境变量握手,并补齐集成级回归保障 |
39
39
  | MF vertical 加载可靠性 | 重试/降级策略通常由各业务单独实现 | 增加 timeout/network/contract-error 的确定性可靠性矩阵与分布式 OTEL 连续性断言 |
@@ -46,16 +46,17 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。兼容分支
46
46
 
47
47
  - 不再把这个 fork 隐藏在旧 Modern.js 品牌后面。
48
48
  - 当通用 Modern.js 默认值与 SuperApp 可靠性冲突时,不优先优化通用默认值。
49
- - 运行时保持 `effect` `hono` 双模式并存,但不提供隐式回退。
49
+ - 不为了执行 UltraModern 策略而删除通用 Modern.js 的 Hono/file-convention 运行时支持;约束应落在 UltraModern 生成器、配置、检查和生成 workspace 中。
50
+ - 生成的 UltraModern HTTP API 只走严格 Effect HttpApi surface;原始 request handler 和 Hono/file-function API 不属于生成架构。
50
51
  - 除非稳定性硬需求,否则避免引入破坏性 API 变更。
51
52
 
52
53
  ## 迁移指南
53
54
 
54
- 对于已经在使用 Modern.js 3.0 或旧版 BleedingDev UltraModern scaffold 的团队,迁移路径是“兼容感知”:保留能降低风险的部分,逐步向 MV-first / TanStack-first / Effect-first 默认方向收敛,并把 UltraModern.js 3.0 作为独立框架采用。
55
+ 对于已经在使用 Modern.js 3.0 或旧版 BleedingDev UltraModern scaffold 的团队,迁移路径是把 API 工作迁到严格 Effect HttpApi surface,而不是保留旧的原始 handler 布局。
55
56
 
56
- 1. 既有 React Router 应用可以继续按现状运行。TanStack Router 是新脚手架与增量迁移的优先路径,但 React Router 兼容分支仍然保留,团队可以按自己的节奏迁移。
57
- 2. 新建或迁移中的 BFF 能力优先使用 `bff.runtimeFramework: 'effect'`,并将入口实现放在 `api/effect/index.ts`。如果当前应用已经在 `api/lambda/**` 下使用 Hono 处理函数,就继续显式使用 `bff.runtimeFramework: 'hono'`,等准备好再迁移;Hono 仍是受支持的兼容分支。
58
- 3. 将基线契约视为渐进式默认值,而不是一次性强制切换。`MODERN_BASELINE_ENABLE_MF_SSR`、`MODERN_BASELINE_ENABLE_BFF_REQUEST_ID` `MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS` 已经提供了按应用、按环境关闭的能力,方便在收敛到目标栈之前逐步过渡。
57
+ 1. 既有 Modern.js 应用在尚未进入生成 UltraModern surface 前可以继续按现状运行。TanStack Router 是新脚手架与增量迁移的优先路径,团队可以按自己的节奏迁移路由层。
58
+ 2. 新建或迁移中的 BFF 能力使用 `bff.runtimeFramework: 'effect'`、`bff.effect.entry: './api/index'` 和 `bff.effect.strictEffectApproach: true`。接口先改 `shared/api.ts` `HttpApi` 契约,再在 `api/index.ts` `defineEffectBff(...)` / `HttpApiBuilder` 实现。
59
+ 3. 在生成或已迁移的 UltraModern workspace 中,把 raw handler、`api/lambda/**`、手写 `Response` 和手写 request parsing 视为迁移缺陷。
59
60
  4. 这套公开预设现在已经附带显式的发布 / 认证 gate。生成 workspace 会自带 `.github/workflows/ultramodern-workspace-gates.yml`,因此 `pnpm check` 与 `pnpm build` 从第一天开始就是本地接入契约的一部分;CI 会以并行矩阵运行这些基础 gate。
60
61
 
61
62
  旧版生成 workspace 迁移时,以已发布的包 cohort 作为事实来源:
@@ -70,9 +71,48 @@ mise exec -- pnpm check
70
71
  mise exec -- pnpm build
71
72
  ```
72
73
 
74
+ 严格生成 API 迁移要求 `3.5.0-ultramodern.0` 或更新版本。
75
+ `3.4.0-ultramodern.20` 及更早 cohort 还没有这套完整的直接
76
+ `api/index.ts` 生成器、生成的 `.mts` 检查和严格 Oxlint 边界规则。还不能安装该
77
+ BleedingDev cohort 的 agent 应使用本地 Modern.js workspace 做迁移校验;否则用
78
+ `--ultramodern-package-version` 固定 `3.5.0-ultramodern.0` 或更新版本。
79
+
80
+ 渐进迁移意味着尚未迁移的旧 Modern.js app 可以保留现有 runtime,直到被转换为
81
+ UltraModern。一个 surface 一旦生成为或迁移为 UltraModern HTTP API,就只能使用
82
+ Effect HttpApi;不要在该 UltraModern API surface 中保留 Hono、lambda handler 或原始
83
+ request handler。
84
+
85
+ 迁移已经带有 Effect API 文件的生成 workspace 时,明确移动文件,不保留兼容别名:
86
+
87
+ 1. 将每个 vertical 服务端入口从 `verticals/<id>/api/effect/index.ts` 移到
88
+ `verticals/<id>/api/index.ts`。
89
+ 2. 将每个共享 API 契约从 `verticals/<id>/shared/effect/api.ts` 移到
90
+ `verticals/<id>/shared/api.ts`。
91
+ 3. 将生成客户端从 `verticals/<id>/src/effect/*-client.ts` 移到
92
+ `verticals/<id>/src/api/*-client.ts`。
93
+ 4. 将 shell API 聚合从 `apps/shell-super-app/src/effect/*` 移到
94
+ `apps/shell-super-app/src/api/*`。
95
+ 5. 更新 imports 和 package exports,使用 `./api`、`./api/client` 与
96
+ `@<workspace>/<vertical>/api/client`;删除 `./effect/client`、
97
+ `./shared/effect/api` 和 shared Effect API 包。
98
+ 6. 更新每个 vertical 的 `modern.config.ts`,设置
99
+ `bff.effect.entry: './api/index'` 和
100
+ `bff.effect.strictEffectApproach: true`。
101
+ 7. 更新 topology,让 API metadata 直接位于 `api` 下,并设置
102
+ `api.bff.strictEffectApproach: true`;不要保留 `api.effect`。
103
+ 8. 运行 `pnpm api:check`、`scripts/validate-ultramodern-workspace.mts`、
104
+ `pnpm check` 和 `pnpm build`。
105
+
106
+ 如果迁移失败,应修复归属的生成契约、topology、package exports 或 API 模块。
107
+ 不要添加 app 级 alias、原始 request handler、手写 `Response`、本地类型断言或包
108
+ shim 来让旧布局通过。
109
+
110
+ Effect RPC、WebSockets 和其他传输方式应在需要时作为显式 transport surface 增加。
111
+ 它们不能作为在生成 HTTP API 模块中重新引入原始 request handler 的理由。
112
+
73
113
  每个仓库只使用一种 package-source 策略。已发布的 BleedingDev create 包默认使用
74
114
  `--ultramodern-package-source=install`,并把精确 cohort 记录到
75
- `.modernjs/ultramodern-package-source.json`。`--workspace` 只用于本地 monorepo
115
+ `.modernjs/ultramodern.json`。`--workspace` 只用于本地 monorepo
76
116
  联调未发布包。发布证明和 CI 如果需要证明某个已发布框架版本,应使用
77
117
  `--ultramodern-package-version` 固定精确 cohort。
78
118
 
@@ -82,8 +122,8 @@ Federation shim 或自定义 server wrapper。框架 BFF compiler 会把服务
82
122
  CommonJS,同时生成的 app package 继续为 Module Federation DTS 保留稳定的
83
123
  `typescript`,并使用固定的 `@typescript/native-preview` 工具链执行 TS-Go 检查。
84
124
 
85
- 安装新 cohort 后,先运行生成的
86
- `scripts/validate-ultramodern-workspace.mjs` 契约校验,再接受人工改动。topology、
125
+ 安装新 cohort 后,先运行生成的 `pnpm api:check` 与
126
+ `scripts/validate-ultramodern-workspace.mts` 契约校验,再接受人工改动。topology、
87
127
  ownership、package-source、本地 overlay、生成契约、Tailwind prefix 或 Module
88
128
  Federation 冲突,都应在对应归属文件中修复,不要手写补丁覆盖生成结果。
89
129
 
@@ -91,7 +131,7 @@ Federation 冲突,都应在对应归属文件中修复,不要手写补丁覆
91
131
 
92
132
  公开的 BleedingDev create 包只有一个受支持的生成产品。默认命令会创建一个
93
133
  可上线的 UltraModern SuperApp workspace,包含 `presetUltramodern(...)`、
94
- SSR、TanStack Router、Tailwind CSS v4、i18n、Effect BFF、Module Federation
134
+ SSR、TanStack Router、Tailwind CSS v4、i18n、Effect HttpApi BFF、Module Federation
95
135
  topology、生成质量 gate,以及 Cloudflare 部署基础:
96
136
 
97
137
  ```bash
@@ -115,7 +155,7 @@ mise exec -- pnpm check
115
155
 
116
156
  `--vertical` 会修改当前 workspace:创建 vertical 包,并更新 topology 元数据、
117
157
  ownership 记录、shell Module Federation、开发 overlays、包依赖、生成契约、
118
- 端口、路由归属 i18n、CSS 隔离,以及 vertical 自己拥有的 Effect BFF/client surface。
158
+ 端口、路由归属 i18n、CSS 隔离,以及 vertical 自己拥有的 Effect HttpApi/client surface。
119
159
 
120
160
  ### 生成器自动化
121
161
 
@@ -166,9 +206,9 @@ addUltramodernVertical({
166
206
  ```
167
207
 
168
208
  公开结果包含 workspace root、包源、创建的 apps、创建路径、重写路径、分配端口、
169
- Module Federation 名称、Effect API 前缀、生成契约路径与 warnings。
209
+ Module Federation 名称、API 前缀、生成契约路径与 warnings。
170
210
  MicroVertical dry-run 返回相同结构,并额外包含 `dryRun`、`selectedPort`、
171
- `moduleFederationRemote`、`effectApiPrefix`、`jsonMutations`、
211
+ `moduleFederationRemote`、`apiPrefix`、`jsonMutations`、
172
212
  `shellDependencyChanges` 与 `generatedContractChanges`;CLI 会输出 JSON,且不写文件。
173
213
 
174
214
  CodeSmith 消费方可以使用 adapter subpath:
@@ -215,7 +255,7 @@ JSON-LD 是可选的路由 metadata,不会自动推断。私有路由和不可
215
255
  JSON-LD。公开路由 owner 可以在本地化路径旁显式添加 `jsonLd`,并使用生成的
216
256
  `src/routes/ultramodern-jsonld.ts` helper 编写常见 schema.org 结构。
217
257
 
218
- 生成契约会在 `.modernjs/ultramodern-generated-contract.json` 中写入
258
+ 生成契约会在 `.modernjs/ultramodern.json` 中写入
219
259
  `cssFederation`:
220
260
 
221
261
  - `packages/shared-design-tokens` 拥有共享 token layer,并导出 `./tokens.css`。
@@ -224,7 +264,7 @@ JSON-LD。公开路由 owner 可以在本地化路径旁显式添加 `jsonLd`,
224
264
  - Tailwind CSS v4 通过 `@tailwindcss/postcss` 保持在每个生成应用内部;共享 base style 不应由 vertical 重复定义。
225
265
  - SSR 首屏依赖 Modern/Rspack 产出共享 token CSS 和应用自己的 CSS。Vertical CSS 通过 manifest 归属加载,不复制到 shell 源码中。
226
266
 
227
- 版本切换必须从同一个 vertical build marker 选择 UI、Effect API、CSS、i18n JSON 与 MF manifest 证据。只切换 shell 渲染里的 UI marker 不足以证明完整版本切换。
267
+ 版本切换必须从同一个 vertical build marker 选择 UI、API、CSS、i18n JSON 与 MF manifest 证据。只切换 shell 渲染里的 UI marker 不足以证明完整版本切换。
228
268
 
229
269
  ### 校验与部署
230
270
 
@@ -314,7 +314,7 @@ export default {
314
314
 
315
315
  ### tools.pug
316
316
 
317
- **变更内容**:该配置已废弃,使用 Rsbuild 的 [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug) 来启用支持。
317
+ **变更内容**:该配置已废弃,使用 Rsbuild 的 [Pug 插件](https://github.com/rstackjs/rsbuild-plugin-pug) 来启用支持。
318
318
 
319
319
  **迁移示例**:
320
320
 
@@ -131,21 +131,21 @@ Rsbuild 是 Modern.js 底层的构建工具,通过添加 Rsbuild 插件可修
131
131
  | [React 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-react) | 提供对 React 的支持 | - |
132
132
  | [SVGR 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-svgr) | 支持将 SVG 图片转换为一个 React 组件 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
133
133
  | [Assets Retry 插件](https://github.com/rstackjs/rsbuild-plugin-assets-retry) | 用于在静态资源加载失败时自动发起重试请求 | [output.assetsRetry](/configure/app/output/assets-retry.html) |
134
- | [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check) | 用于在单独的进程中运行 TypeScript 类型检查 | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
135
- | [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build) | 用于 monorepo 场景,支持引用其他子目录的源代码,并完成构建和热更新 | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
136
- | [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | 用于分析产物的语法兼容性,判断是否存在导致兼容性问题的高级语法 | [security.checkSyntax](/configure/app/security/check-syntax.html) |
137
- | [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具,切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html) |
138
- | [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem) | 用于实现移动端页面的 rem 自适应布局 | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
134
+ | [Type Check 插件](https://github.com/rstackjs/rsbuild-plugin-type-check) | 用于在单独的进程中运行 TypeScript 类型检查 | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
135
+ | [Source Build 插件](https://github.com/rstackjs/rsbuild-plugin-source-build) | 用于 monorepo 场景,支持引用其他子目录的源代码,并完成构建和热更新 | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
136
+ | [Check Syntax 插件](https://github.com/rstackjs/rsbuild-plugin-check-syntax) | 用于分析产物的语法兼容性,判断是否存在导致兼容性问题的高级语法 | [security.checkSyntax](/configure/app/security/check-syntax.html) |
137
+ | [CSS Minimizer 插件](https://github.com/rstackjs/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具,切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html) |
138
+ | [Rem 插件](https://github.com/rstackjs/rsbuild-plugin-rem) | 用于实现移动端页面的 rem 自适应布局 | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
139
139
 
140
140
  #### 未内置的插件
141
141
 
142
142
  以下是未在 Modern.js 中内置的 Rsbuild 官方插件:
143
143
 
144
- - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress):将项目中用到的图片资源进行压缩处理。
144
+ - [Image Compress 插件](https://github.com/rstackjs/rsbuild-plugin-image-compress):将项目中用到的图片资源进行压缩处理。
145
145
  - [Stylus 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-stylus):使用 Stylus 作为 CSS 预处理器。
146
- - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd):用于构建 UMD 格式的产物。
147
- - [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml):用于引用 YAML 文件,并将其转换为 JavaScript 对象。
148
- - [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml):用于引用 TOML 文件,并将其转换为 JavaScript 对象。
146
+ - [UMD 插件](https://github.com/rstackjs/rsbuild-plugin-umd):用于构建 UMD 格式的产物。
147
+ - [YAML 插件](https://github.com/rstackjs/rsbuild-plugin-yaml):用于引用 YAML 文件,并将其转换为 JavaScript 对象。
148
+ - [TOML 插件](https://github.com/rstackjs/rsbuild-plugin-toml):用于引用 TOML 文件,并将其转换为 JavaScript 对象。
149
149
 
150
150
  import OtherPlugins from '@site-docs/components/other-plugins.mdx';
151
151
 
package/package.json CHANGED
@@ -19,14 +19,14 @@
19
19
  "modern.js",
20
20
  "ultramodern.js"
21
21
  ],
22
- "version": "3.4.0-ultramodern.9",
22
+ "version": "3.5.0-ultramodern.0",
23
23
  "publishConfig": {
24
24
  "registry": "https://registry.npmjs.org/",
25
25
  "access": "public"
26
26
  },
27
27
  "dependencies": {
28
28
  "mermaid": "^11.15.0",
29
- "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.4.0-ultramodern.9"
29
+ "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.5.0-ultramodern.0"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@rsbuild/plugin-sass": "2.0.0",