@bleedingdev/modern-js-main-doc 3.4.0-ultramodern.2 → 3.4.0-ultramodern.20

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 +11 -3
  3. package/docs/en/configure/app/bff/runtime-framework.mdx +2 -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 +16 -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 +49 -14
  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 +11 -3
  23. package/docs/zh/configure/app/bff/runtime-framework.mdx +2 -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 +16 -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 +37 -6
  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 @@ As Node.js continues to evolve, Node.js 18 has reached EOL. In Modern.js 3.0, we
591
591
 
592
592
  #### Storybook Rsbuild
593
593
 
594
- In Modern.js 3.0, we implemented Storybook for Modern.js applications based on [Storybook Rsbuild](https://github.com/rspack-contrib/storybook-rsbuild).
594
+ In Modern.js 3.0, we implemented Storybook for Modern.js applications based on [Storybook Rsbuild](https://github.com/rstackjs/storybook-rsbuild).
595
595
 
596
596
  Through a Storybook Addon, we convert and merge Modern.js configuration into Rsbuild configuration, and use Storybook Rsbuild to drive the build, keeping Storybook debugging aligned with development command configurations.
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 @@ For Effect v4, TypeScript should use export-map aware module resolution.
58
59
  ## bff.effect.entry
59
60
 
60
61
  - **Type:** `string`
61
- - **Default:** `<apiDirectory>/effect/index`
62
+ - **Default:** `<apiDirectory>/index`
62
63
 
63
64
  Specifies the entry module for Effect HttpApi runtime.
64
65
 
@@ -67,12 +68,19 @@ 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
+ - **Type:** `true`
80
+ - **Default:** `true`
81
+
82
+ Effect BFF modules must expose the strict Effect API surface (`defineEffectBff(...)` or `{ api, layer }`) and raw request handlers are rejected. Generated UltraModern apps write this marker explicitly.
83
+
76
84
  ## bff.effect.openapi
77
85
 
78
86
  - **Type:** `boolean | { path?: string }`
@@ -173,4 +181,4 @@ export default defineConfig({
173
181
 
174
182
  `batch.flushIntervalMs` controls the client-side micro-batch window in the generated Effect client. `maxConcurrency` and `requestTimeoutMs` are applied by the server batch gateway when dispatching items.
175
183
 
176
- The generated `effectBff.client.*` API only exists for loader-materialized `@api/effect/*` imports. Directly importing the server entry (`api/effect/index`) exposes the Effect BFF definition; its `client` property is a placeholder that fails on operation access.
184
+ The generated `api.client.*` API only exists for loader-materialized `@api/index` imports. Directly importing the server entry (`api/index`) exposes the Effect BFF definition; its `client` property is a placeholder that fails on operation access.
@@ -21,8 +21,8 @@ export default defineConfig({
21
21
  });
22
22
  ```
23
23
 
24
- - Set to `'effect'` to run BFF only from `api/effect/index` (Effect HttpApi runtime).
24
+ - Set to `'effect'` to run BFF only from `api/index` (Effect HttpApi runtime).
25
25
  - Set to `'hono'` to run BFF only from file-convention handlers under `api/lambda/**`.
26
26
 
27
27
  There is no implicit fallback between runtimes. Choose one runtime mode per app.
28
- Generated UltraModern apps use the Effect lane by default; set `runtimeFramework: 'hono'` only for the compatibility runtime.
28
+ Generated UltraModern apps use strict Effect APIs by default and set `bff.effect.strictEffectApproach: true`.
@@ -19,7 +19,7 @@ More detail can see ["Source Code Build Mode"](https://modernjs.dev/en/guides/ad
19
19
 
20
20
  ### Options
21
21
 
22
- `experiments.sourceBuild` is implemented based on [@rsbuild/plugin-source-build](https://github.com/rspack-contrib/rsbuild-plugin-source-build?tab=readme-ov-file#options). You can pass plugin options like this:
22
+ `experiments.sourceBuild` is implemented based on [@rsbuild/plugin-source-build](https://github.com/rstackjs/rsbuild-plugin-source-build?tab=readme-ov-file#options). You can pass plugin options like this:
23
23
 
24
24
  ```ts
25
25
  export default {
@@ -30,7 +30,7 @@ type DefaultParameters = {
30
30
  };
31
31
  ```
32
32
 
33
- Define the parameters in the HTML template, corresponding to the `templateParameters` config of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin). You can use the config as an object or a function.
33
+ Define the parameters in the HTML template, corresponding to the `templateParameters` config of [html-rspack-plugin](https://github.com/rstackjs/html-rspack-plugin). You can use the config as an object or a function.
34
34
 
35
35
  import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
36
36
 
@@ -80,4 +80,4 @@ export default {
80
80
  };
81
81
  ```
82
82
 
83
- For detailed usage, please refer to [rsbuild-plugin-rem](https://github.com/rspack-contrib/rsbuild-plugin-rem).
83
+ For detailed usage, please refer to [rsbuild-plugin-rem](https://github.com/rstackjs/rsbuild-plugin-rem).
@@ -70,4 +70,4 @@ If a syntax error is detected, you can handle it in the following ways:
70
70
 
71
71
  ### Options
72
72
 
73
- `security.checkSyntax` is implemented based on `@rsbuild/plugin-check-syntax`. For specific options, please refer to [@rsbuild/plugin-check-syntax](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax).
73
+ `security.checkSyntax` is implemented based on `@rsbuild/plugin-check-syntax`. For specific options, please refer to [@rsbuild/plugin-check-syntax](https://github.com/rstackjs/rsbuild-plugin-check-syntax).
@@ -38,7 +38,7 @@ const defaultOptions = {
38
38
  SSR Application does not enable the `minify.removeComments` configuration, otherwise the SSR rendering will fail.
39
39
  :::
40
40
 
41
- The configs of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) can be modified through `tools.htmlPlugin`.
41
+ The configs of [html-rspack-plugin](https://github.com/rstackjs/html-rspack-plugin) can be modified through `tools.htmlPlugin`.
42
42
 
43
43
  import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
44
44
 
@@ -43,7 +43,9 @@ By default, the [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild
43
43
 
44
44
  ## Example
45
45
 
46
- When the value of `tsChecker` is of type Object, it will be deeply merged with the default configuration.
46
+ ### Object Type
47
+
48
+ When the value of `tsChecker` is an object, it will be deeply merged with the default configuration.
47
49
 
48
50
  ```ts
49
51
  export default {
@@ -57,6 +59,23 @@ export default {
57
59
  };
58
60
  ```
59
61
 
62
+ ### Function Type
63
+
64
+ When the value of `tsChecker` is a function, the default configuration will be passed as the first argument. You can directly modify the configuration object or return an object as the final configuration.
65
+
66
+ ```ts
67
+ export default {
68
+ tools: {
69
+ tsChecker(options) {
70
+ options.async = false;
71
+ return options;
72
+ },
73
+ },
74
+ };
75
+ ```
76
+
77
+ > Please refer to [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) for more details.
78
+
60
79
  ## TypeScript Go by Default
61
80
 
62
81
  Type checking runs on [TypeScript Go](https://github.com/microsoft/typescript-go) (`tsgo`) by default in this fork. The 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 reduces type-checking time by about 5-10x.
@@ -4,7 +4,7 @@ title: Data Platform
4
4
 
5
5
  # Data Platform
6
6
 
7
- Modern.js Effect BFF now supports a request-envelope based data platform contract for safer and more predictable data orchestration in complex applications such as Module Federation and micro frontends.
7
+ Modern.js Effect API runtime now supports a request-envelope based data platform contract for safer and more predictable data orchestration in complex applications such as Module Federation and micro frontends.
8
8
 
9
9
  ## What it solves
10
10
 
@@ -57,11 +57,11 @@ export default defineConfig({
57
57
 
58
58
  Envelope validation is enabled by default but does not require an envelope unless `requireEnvelope` is set. Origin validation is enabled by default; set `validateOrigin: false` to skip comparing the envelope origin against the incoming `Origin` header, or the request URL origin when the header is absent.
59
59
 
60
- ## Generated Effect client behavior
60
+ ## Generated API client behavior
61
61
 
62
- When using the generated Effect client (`@api/effect/index`), Modern.js automatically attaches a serialized data envelope header (`x-modernjs-data-envelope`) for same-origin requests.
62
+ When using the generated API client (`@api/index`), Modern.js automatically attaches a serialized data envelope header (`x-modernjs-data-envelope`) for same-origin requests.
63
63
 
64
- The generated client is loader-materialized. Import it from `@api/effect/*` in browser or client-bundled code; direct imports of the server entry (`api/effect/index`) expose the Effect BFF definition and only provide a placeholder `client`.
64
+ The generated client is loader-materialized. Import it from `@api/index` in browser or client-bundled code; direct imports of the server entry (`api/index`) expose the Effect API definition and only provide a placeholder `client`.
65
65
 
66
66
  The envelope includes:
67
67
 
@@ -7,7 +7,7 @@ title: Runtime Framework
7
7
 
8
8
  Modern.js supports two BFF runtime frameworks:
9
9
 
10
- - `effect` (default): use [Effect HttpApi](https://effect.website/) runtime from `api/effect/index`.
10
+ - `effect` (default): use [Effect HttpApi](https://effect.website/) runtime from `api/index`.
11
11
  - `hono`: use file-convention BFF handlers from `api/lambda/**`.
12
12
 
13
13
  `effect` and `hono` are strict runtime modes. There is no automatic fallback between them.
@@ -23,6 +23,8 @@ export default defineConfig({
23
23
  bff: {
24
24
  runtimeFramework: 'effect',
25
25
  effect: {
26
+ entry: './api/index',
27
+ strictEffectApproach: true,
26
28
  openapi: {
27
29
  path: '/openapi.json',
28
30
  },
@@ -33,7 +35,7 @@ export default defineConfig({
33
35
 
34
36
  Define a shared Effect HttpApi contract (for type-safe client + server):
35
37
 
36
- ```ts title="shared/effect/api.ts"
38
+ ```ts title="shared/api.ts"
37
39
  import {
38
40
  HttpApi,
39
41
  HttpApiEndpoint,
@@ -41,18 +43,18 @@ import {
41
43
  Schema,
42
44
  } from '@modern-js/plugin-bff/effect-client';
43
45
 
44
- export const bffEffectApi = HttpApi.make('MyApi').add(
46
+ export const bffApi = HttpApi.make('MyApi').add(
45
47
  HttpApiGroup.make('hello').add(
46
- HttpApiEndpoint.get('ping', '/effect/ping', {
48
+ HttpApiEndpoint.get('ping', '/ping', {
47
49
  success: Schema.String,
48
50
  }),
49
51
  ),
50
52
  );
51
53
  ```
52
54
 
53
- Implement your Effect BFF entry at `api/effect/index.ts`:
55
+ Implement your Effect API entry at `api/index.ts`:
54
56
 
55
- ```ts title="api/effect/index.ts"
57
+ ```ts title="api/index.ts"
56
58
  import {
57
59
  Schema,
58
60
  Effect,
@@ -61,7 +63,7 @@ import {
61
63
  Layer,
62
64
  ServiceMap,
63
65
  } from '@modern-js/plugin-bff/effect-server';
64
- import { bffEffectApi } from '../../shared/effect/api';
66
+ import { bffApi } from '../shared/api';
65
67
 
66
68
  class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
67
69
  'GreetingUnavailableError',
@@ -87,7 +89,7 @@ class GreetingService extends ServiceMap.Service<GreetingService>()('GreetingSer
87
89
  static readonly layer = Layer.effect(this, this.make);
88
90
  }
89
91
 
90
- const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
92
+ const group = HttpApiBuilder.group(bffApi, 'hello', handlers =>
91
93
  handlers.handle('ping', () =>
92
94
  GreetingService.use(service => service.hello()).pipe(
93
95
  Effect.catchTag('GreetingUnavailableError', error =>
@@ -97,23 +99,23 @@ const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
97
99
  ),
98
100
  );
99
101
 
100
- const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
102
+ const layer = HttpApiBuilder.layer(bffApi).pipe(
101
103
  Layer.provide(group),
102
104
  Layer.provide(GreetingService.layer),
103
105
  );
104
106
 
105
- export default defineEffectBff({ api: bffEffectApi, layer });
107
+ export default defineEffectBff({ api: bffApi, layer });
106
108
  ```
107
109
 
108
- Call Effect endpoints from browser code via `@api/effect/index`:
110
+ Call Effect endpoints from browser code via `@api/index`:
109
111
 
110
112
  ```ts title="src/routes/page.tsx"
111
- import effectBff from '@api/effect/index';
113
+ import api from '@api/index';
112
114
 
113
- const response = await effectBff.client.hello.ping({});
115
+ const response = await api.client.hello.ping({});
114
116
  ```
115
117
 
116
- The `effectBff.client.*` surface is materialized by the BFF loader for `@api/effect/*` imports. Do not import `api/effect/index` directly and expect `client` to run in server code, scripts, or tests; direct entry imports expose the server runtime definition, and `client` is only a typed placeholder there.
118
+ The `api.client.*` surface is materialized by the BFF loader for `@api/index` imports. Do not import `api/index` directly and expect `client` to run in server code, scripts, or tests; direct entry imports expose the server runtime definition, and `client` is only a typed placeholder there.
117
119
 
118
120
  import Hono from '@site-docs-en/components/hono';
119
121
 
@@ -2,6 +2,10 @@
2
2
 
3
3
  In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions from these files. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
4
4
 
5
+ :::warning
6
+ `api/lambda/**` is the Hono/file-function compatibility runtime. New UltraModern generated API work should use the strict Effect runtime with `api/index.ts`, `shared/api.ts`, `defineEffectBff(...)`, and Effect `HttpApi` schemas instead.
7
+ :::
8
+
5
9
  This invocation method is called **unified invocation**, where developers do not need to write glue code for the frontend and backend separately, thereby ensuring type safety across both.
6
10
 
7
11
  ## Enable BFF
@@ -92,7 +92,7 @@ export default {
92
92
  };
93
93
  ```
94
94
 
95
- See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress).
95
+ See details in [plugin-image-compress](https://github.com/rstackjs/rsbuild-plugin-image-compress).
96
96
 
97
97
  ## Split Chunk
98
98
 
@@ -97,4 +97,4 @@ Now you can request the path configured in `bff.prefix`; if not configured, use
97
97
 
98
98
  ## Example
99
99
 
100
- You can check out the [example](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/modernjs-react) to learn how to use Storybook in Modern.js.
100
+ You can check out the [example](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react) to learn how to use Storybook in Modern.js.
@@ -38,7 +38,7 @@ import { name } from './example.json';
38
38
 
39
39
  YAML is a data serialization language commonly used for writing configuration files.
40
40
 
41
- You can configure the [YAML plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml) in `modern.config.ts` to support importing `.yaml` or `.yml` files, they will be automatically converted to JSON format.
41
+ You can configure the [YAML plugin](https://github.com/rstackjs/rsbuild-plugin-yaml) in `modern.config.ts` to support importing `.yaml` or `.yml` files, they will be automatically converted to JSON format.
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 is a semantically explicit, easy-to-read configuration file format.
87
87
 
88
- You can configure the [TOML plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml) in `modern.config.ts` to support importing `.toml` files, it will be automatically converted to JSON format.
88
+ You can configure the [TOML plugin](https://github.com/rstackjs/rsbuild-plugin-toml) in `modern.config.ts` to support importing `.toml` files, it will be automatically converted to JSON format.
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 Tools
3
+ sidebar_position: 6
4
+ ---
5
+
6
+ # Modern.js For AI
7
+
8
+ Modern.js provides a toolkit for AI agents that helps developers use AI to efficiently complete feature development, dependency upgrades, and version migration for Modern.js applications.
9
+
10
+ ## llms.txt
11
+
12
+ Modern.js docs follow the [llms.txt specification](https://llmstxt.org/), auto-generated by [`@rspress/plugin-llms`](https://rspress.rs/plugin/official-plugins/llms), accessible via `/llms.txt` or `/llms-full.txt`:
13
+
14
+ - Index: [`https://modernjs.dev/llms.txt`](https://modernjs.dev/llms.txt)
15
+ - Full text: `https://modernjs.dev/llms-full.txt` (large — fetch on demand)
16
+
17
+ Most "what is this API / config" questions can be answered from llms.txt. Just let your agent retrieve it on demand; no need to copy docs into your project.
18
+
19
+ ## Skills
20
+
21
+ Skills are on-demand AI capabilities following the [Agent Skills open standard](https://github.com/vercel-labs/skills). User-facing Skills:
22
+
23
+ | Skill | Identifier | Description |
24
+ |---|---|---|
25
+ | Upgrade to v3 | `modernjs-migrate-to-v3` | Migrate a v2 app to v3: safe rewrites + manual checklist + migration report |
26
+ | Enable features | `modernjs-feature-enable` | Enable BFF / SSG / styled-components for v3 apps, and scaffold Tailwind CSS / custom Web Server |
27
+
28
+ > Skills are not force-installed or implicitly installed — you install them explicitly. RSC and micro-frontend setups are configuration or architecture decisions, not one-click `modernjs-feature-enable` actions.
29
+
30
+ ## Installing Skills
31
+
32
+ Modern.js user-facing Skills live in the repo's root `skills/` directory and follow the [Agent Skills open standard](https://github.com/vercel-labs/skills). The recommended way is the standard `skills` CLI, installing straight from GitHub:
33
+
34
+ ```bash
35
+ # List installable Skills
36
+ npx skills add web-infra-dev/modern.js --list
37
+
38
+ # Install a single Skill into your agent directory (--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
+ It installs the entire Skill directory (`SKILL.md` + `scripts/` + `references/`) into the corresponding agent directory, ready to trigger there.
43
+
44
+ > To pin a specific version, append `#<ref>` (a tag, branch, or commit) to the repo — it installs the Skill as of that ref (replace `<tag>` with a release tag that contains this Skill):
45
+ >
46
+ > ```bash
47
+ > npx skills add web-infra-dev/modern.js#<tag> --skill modernjs-migrate-to-v3 --agent codex -y
48
+ > ```
@@ -33,7 +33,7 @@ UltraModern.js additions are designed as the default product surface for new Sup
33
33
  | Build diagnostics | RsDoctor is generally opt-in | Adds a first-class `performance.rsdoctor` config surface (opt-in; the earlier default-on behavior and diagnostics contract artifact were reverted) |
34
34
  | Output and static serving | Precompression behavior is app-defined | Enables `output.precompress` by default and serves `.br` / `.gz` variants via `Accept-Encoding` negotiation |
35
35
  | BFF runtime and contracts | Standard BFF runtime/client generation | Adds `requestId`-aware producer isolation, fail-fast initialization checks, and operation/trace correlation headers |
36
- | BFF runtime choices | Hono runtime path only in Modern.js 3.0 baseline (no built-in Effect runtime path) | Sets Effect as default runtime, enforces strict runtime split (`effect` -> `api/effect`, `hono` -> `api/lambda`), and adds Effect-Schema-first contracts plus MF failure-injection reliability coverage |
36
+ | BFF runtime choices | Hono runtime path only in Modern.js 3.0 baseline (no built-in Effect runtime path) | Sets Effect as the strict default API runtime (`api/index.ts`, `shared/api.ts`, `src/api/*`) and keeps raw Hono handlers as an explicit compatibility lane |
37
37
  | Telemetry standardization | Observability wiring is often app-specific | Adds framework-level telemetry pipeline with OTLP/VictoriaMetrics exporters, redaction, batching, and backpressure controls |
38
38
  | App-level MF SSR handshake | No dedicated super-app app-level stability contract focus | Adds `server.ssr.moduleFederationAppSSR` plus integration-tested env/config handshake |
39
39
  | MF vertical loading reliability | Retry/fallback patterns are often implemented per app | Adds deterministic timeout/network/contract-error reliability matrix and distributed OTEL continuity tests |
@@ -46,16 +46,16 @@ UltraModern.js additions are designed as the default product surface for new Sup
46
46
 
47
47
  - We do not hide the fork behind legacy Modern.js branding.
48
48
  - We do not optimize for generic Modern.js defaults when they conflict with SuperApp reliability.
49
- - We keep both runtime modes (`effect`, `hono`) as explicit choices and avoid implicit fallback between them.
50
- - We avoid incompatible API changes unless there is a hard reliability requirement.
49
+ - Generated UltraModern API work uses the Effect runtime only; raw Hono/function handlers are not part of the generated API architecture.
50
+ - We make incompatible scaffold changes when they remove architecture drift.
51
51
 
52
52
  ## Migration Guide
53
53
 
54
- For teams already on Modern.js 3.0 or an older BleedingDev UltraModern scaffold, the adoption path remains compatibility-aware: keep the pieces that reduce risk, move toward MV-first / TanStack-first / Effect-first defaults, and keep fallback lanes explicit while you adopt UltraModern.js 3.0 as a separate framework.
54
+ For teams already on Modern.js 3.0 or an older BleedingDev UltraModern scaffold, the adoption path is to move API work onto the strict Effect API surface instead of preserving older raw handler layouts.
55
55
 
56
56
  1. Keep existing React Router apps running as-is. TanStack Router is the preferred path for new scaffolds and incremental route adoption, but the React Router lane remains supported while teams move on their own schedule.
57
- 2. Prefer `bff.runtimeFramework: 'effect'` for new BFF work, with the entry implemented at `api/effect/index.ts`. If your app already uses Hono handlers under `api/lambda/**`, keep `bff.runtimeFramework: 'hono'` until you are ready to move them; Hono remains a supported compatibility lane.
58
- 3. Treat the baseline contracts as progressive defaults, not a forced cutover. `MODERN_BASELINE_ENABLE_MF_SSR`, `MODERN_BASELINE_ENABLE_BFF_REQUEST_ID`, and `MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS` already let each app opt out while it converges on the preferred stack.
57
+ 2. Use `bff.runtimeFramework: 'effect'` with `bff.effect.strictEffectApproach: true` for API work. Entries live at `api/index.ts`, contracts live at `shared/api.ts`, clients live under `src/api/*`, and request/response/error shapes come from Effect `Schema` plus `HttpApi`.
58
+ 3. Treat raw handlers, `api/lambda/**`, manual `Response` construction, and manual request parsing as migration defects in generated UltraModern workspaces.
59
59
  4. The public preset now ships with explicit release and certification gates. Generated workspaces include `.github/workflows/ultramodern-workspace-gates.yml`, so `pnpm check` and `pnpm build` stay part of the local adoption contract from day one while CI runs the primitive gates as parallel matrix jobs.
60
60
 
61
61
  For an older generated workspace, migrate by treating the published cohort as
@@ -71,14 +71,49 @@ mise exec -- pnpm check
71
71
  mise exec -- pnpm build
72
72
  ```
73
73
 
74
+ Strict Effect API migration is not compatible with
75
+ `3.4.0-ultramodern.19` or older package cohorts. Those packages do not include
76
+ the `strictEffectApproach` config type or the direct `api/index.ts`
77
+ generator/checks. Until a newer BleedingDev cohort is published, use the local
78
+ Modern.js workspace for migration validation; after publication, pin that exact
79
+ new cohort with `--ultramodern-package-version`.
80
+
81
+ When migrating a generated workspace that already has Effect API files, make the
82
+ move explicit and do not keep compatibility aliases:
83
+
84
+ 1. Move each vertical server entry from `verticals/<id>/api/effect/index.ts` to
85
+ `verticals/<id>/api/index.ts`.
86
+ 2. Move each shared API contract from `verticals/<id>/shared/effect/api.ts` to
87
+ `verticals/<id>/shared/api.ts`.
88
+ 3. Move generated clients from `verticals/<id>/src/effect/*-client.ts` to
89
+ `verticals/<id>/src/api/*-client.ts`.
90
+ 4. Move shell API aggregates from `apps/shell-super-app/src/effect/*` to
91
+ `apps/shell-super-app/src/api/*`.
92
+ 5. Update imports and package exports to use `./api`, `./api/client`, and
93
+ `@<workspace>/<vertical>/api/client`; remove `./effect/client`,
94
+ `./shared/effect/api`, and shared Effect API packages.
95
+ 6. Update every vertical `modern.config.ts` to use
96
+ `bff.effect.entry: './api/index'` and
97
+ `bff.effect.strictEffectApproach: true`.
98
+ 7. Update topology so API metadata lives directly under `api` with
99
+ `api.bff.strictEffectApproach: true`; do not keep `api.effect`.
100
+ 8. Run `pnpm api:check`,
101
+ `scripts/validate-ultramodern-workspace.mjs`, `pnpm check`, and
102
+ `pnpm build`.
103
+
104
+ If a migration fails, fix the owning generated contract, topology, package
105
+ exports, or API module. Do not add app-level aliases, raw request handlers,
106
+ manual `Response` construction, local type casts, or package shims to make the
107
+ old layout pass.
108
+
74
109
  Use one package-source strategy per repo. The published BleedingDev create
75
110
  package defaults to `--ultramodern-package-source=install` and records the
76
- exact cohort in `.modernjs/ultramodern-package-source.json`. Keep `--workspace`
77
- only for local monorepo testing against unreleased packages. Release proof and
78
- CI should pin the exact cohort with `--ultramodern-package-version` when a
79
- repo must prove a specific published framework version.
111
+ exact cohort in `.modernjs/ultramodern.json`. Keep `--workspace` only for local
112
+ monorepo testing against unreleased packages. Release proof and CI should pin
113
+ the exact cohort with `--ultramodern-package-version` when a repo must prove a
114
+ specific published framework version.
80
115
 
81
- Older repos with Effect BFF entries and `verbatimModuleSyntax` should update to
116
+ Older repos with nested Effect entries and `verbatimModuleSyntax` should update to
82
117
  the latest BleedingDev cohort instead of adding app-level `"type": "module"`
83
118
  metadata, Module Federation shims, or custom server wrappers. The framework BFF
84
119
  compiler normalizes CommonJS server output while generated app packages keep
@@ -239,8 +274,8 @@ non-indexable routes emit no JSON-LD by default. Public route owners can add
239
274
  `jsonLd` beside localized paths and use the generated
240
275
  `src/routes/ultramodern-jsonld.ts` helpers for common schema.org shapes.
241
276
 
242
- The generated contract writes `.modernjs/ultramodern-generated-contract.json`
243
- with a `cssFederation` section:
277
+ The generated contract writes `.modernjs/ultramodern.json` with a
278
+ `cssFederation` section:
244
279
 
245
280
  - `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
246
281
  - Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
@@ -248,7 +283,7 @@ with a `cssFederation` section:
248
283
  - Tailwind CSS v4 is local to each generated app through `@tailwindcss/postcss`; shared base styles must not be duplicated by verticals.
249
284
  - SSR first paint requires shared token CSS and app-owned CSS to be emitted by Modern/Rspack assets. Vertical CSS is loaded through manifest ownership, not copied into shell source.
250
285
 
251
- Version switching must select UI, Effect API, CSS, i18n JSON, and MF manifest evidence from the same vertical build marker. A shell render that only changes the UI marker is not enough.
286
+ Version switching must select UI, API, CSS, i18n JSON, and MF manifest evidence from the same vertical build marker. A shell render that only changes the UI marker is not enough.
252
287
 
253
288
  ### Validation And Deploy
254
289
 
@@ -314,7 +314,7 @@ export default {
314
314
 
315
315
  ### tools.pug
316
316
 
317
- **Change**: This configuration has been deprecated, use Rsbuild's [Pug plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug) to enable support.
317
+ **Change**: This configuration has been deprecated, use Rsbuild's [Pug plugin](https://github.com/rstackjs/rsbuild-plugin-pug) to enable support.
318
318
 
319
319
  **Migration Example**:
320
320
 
@@ -131,21 +131,21 @@ The following are official Rsbuild plugins that are already built into Modern.js
131
131
  | [React Plugin](https://v2.rsbuild.rs/plugins/list/plugin-react) | Provides support for React | - |
132
132
  | [SVGR Plugin](https://v2.rsbuild.rs/plugins/list/plugin-svgr) | Supports converting SVG images into React components | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
133
133
  | [Assets Retry Plugin](https://github.com/rstackjs/rsbuild-plugin-assets-retry) | Automatically retries requests when static asset loading fails | [output.assetsRetry](/configure/app/output/assets-retry.html) |
134
- | [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check) | Runs TypeScript type checking in a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
135
- | [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build) | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
136
- | [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues | [security.checkSyntax](/configure/app/security/check-syntax.html) |
137
- | [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html) |
138
- | [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem) | Implements rem adaptive layout for mobile pages | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
134
+ | [Type Check Plugin](https://github.com/rstackjs/rsbuild-plugin-type-check) | Runs TypeScript type checking in a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
135
+ | [Source Build Plugin](https://github.com/rstackjs/rsbuild-plugin-source-build) | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
136
+ | [Check Syntax Plugin](https://github.com/rstackjs/rsbuild-plugin-check-syntax) | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues | [security.checkSyntax](/configure/app/security/check-syntax.html) |
137
+ | [CSS Minimizer Plugin](https://github.com/rstackjs/rsbuild-plugin-css-minimizer) | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html) |
138
+ | [Rem Plugin](https://github.com/rstackjs/rsbuild-plugin-rem) | Implements rem adaptive layout for mobile pages | [output.convertToRem](/configure/app/output/convert-to-rem.html) |
139
139
 
140
140
  #### Plugins Not Built-in
141
141
 
142
142
  The following are official Rsbuild plugins that are not built into Modern.js:
143
143
 
144
- - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compresses image resources used in the project.
144
+ - [Image Compress Plugin](https://github.com/rstackjs/rsbuild-plugin-image-compress): Compresses image resources used in the project.
145
145
  - [Stylus Plugin](https://v2.rsbuild.rs/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
146
- - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build UMD format artifacts.
147
- - [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Used to reference YAML files and convert them to JavaScript objects.
148
- - [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Used to reference TOML files and convert them to JavaScript objects.
146
+ - [UMD Plugin](https://github.com/rstackjs/rsbuild-plugin-umd): Used to build UMD format artifacts.
147
+ - [YAML Plugin](https://github.com/rstackjs/rsbuild-plugin-yaml): Used to reference YAML files and convert them to JavaScript objects.
148
+ - [TOML Plugin](https://github.com/rstackjs/rsbuild-plugin-toml): Used to reference TOML files and convert them to JavaScript objects.
149
149
 
150
150
  import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
151
151
 
@@ -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,19 @@ 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(...)` 或 `{ api, layer }`),原始 request handler 会被拒绝。生成的 UltraModern 应用会显式写入这个标记。
83
+
76
84
  ## bff.effect.openapi
77
85
 
78
86
  - **类型:** `boolean | { path?: string }`
@@ -173,4 +181,4 @@ export default defineConfig({
173
181
 
174
182
  `batch.flushIntervalMs` 用于控制生成的 Effect 客户端微批处理窗口;`maxConcurrency` 与 `requestTimeoutMs` 由服务端批处理网关用于内部请求分发。
175
183
 
176
- 生成的 `effectBff.client.*` API 只存在于 loader 物化后的 `@api/effect/*` 导入中。直接导入服务端入口(`api/effect/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
184
+ 生成的 `api.client.*` API 只存在于 loader 物化后的 `@api/index` 导入中。直接导入服务端入口(`api/index`)时拿到的是 Effect BFF 定义;其中的 `client` 属性只是占位,并会在访问具体操作时报错。
@@ -21,8 +21,8 @@ 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,并设置 `bff.effect.strictEffectApproach: true`。
@@ -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,7 +7,7 @@ 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` 为严格模式,两者之间不会自动回退。
@@ -23,6 +23,8 @@ export default defineConfig({
23
23
  bff: {
24
24
  runtimeFramework: 'effect',
25
25
  effect: {
26
+ entry: './api/index',
27
+ strictEffectApproach: true,
26
28
  openapi: {
27
29
  path: '/openapi.json',
28
30
  },
@@ -33,7 +35,7 @@ export default defineConfig({
33
35
 
34
36
  先在共享目录中定义 Effect HttpApi 契约(前后端共享类型):
35
37
 
36
- ```ts title="shared/effect/api.ts"
38
+ ```ts title="shared/api.ts"
37
39
  import {
38
40
  HttpApi,
39
41
  HttpApiEndpoint,
@@ -41,18 +43,18 @@ import {
41
43
  Schema,
42
44
  } from '@modern-js/plugin-bff/effect-client';
43
45
 
44
- export const bffEffectApi = HttpApi.make('MyApi').add(
46
+ export const bffApi = HttpApi.make('MyApi').add(
45
47
  HttpApiGroup.make('hello').add(
46
- HttpApiEndpoint.get('ping', '/effect/ping', {
48
+ HttpApiEndpoint.get('ping', '/ping', {
47
49
  success: Schema.String,
48
50
  }),
49
51
  ),
50
52
  );
51
53
  ```
52
54
 
53
- 然后在 `api/effect/index.ts` 中实现 Effect BFF 入口:
55
+ 然后在 `api/index.ts` 中实现 Effect BFF 入口:
54
56
 
55
- ```ts title="api/effect/index.ts"
57
+ ```ts title="api/index.ts"
56
58
  import {
57
59
  Schema,
58
60
  Effect,
@@ -61,7 +63,7 @@ import {
61
63
  Layer,
62
64
  ServiceMap,
63
65
  } from '@modern-js/plugin-bff/effect-server';
64
- import { bffEffectApi } from '../../shared/effect/api';
66
+ import { bffApi } from '../shared/api';
65
67
 
66
68
  class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
67
69
  'GreetingUnavailableError',
@@ -87,7 +89,7 @@ class GreetingService extends ServiceMap.Service<GreetingService>()('GreetingSer
87
89
  static readonly layer = Layer.effect(this, this.make);
88
90
  }
89
91
 
90
- const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
92
+ const group = HttpApiBuilder.group(bffApi, 'hello', handlers =>
91
93
  handlers.handle('ping', () =>
92
94
  GreetingService.use(service => service.hello()).pipe(
93
95
  Effect.catchTag('GreetingUnavailableError', error =>
@@ -97,23 +99,23 @@ const group = HttpApiBuilder.group(bffEffectApi, 'hello', handlers =>
97
99
  ),
98
100
  );
99
101
 
100
- const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
102
+ const layer = HttpApiBuilder.layer(bffApi).pipe(
101
103
  Layer.provide(group),
102
104
  Layer.provide(GreetingService.layer),
103
105
  );
104
106
 
105
- export default defineEffectBff({ api: bffEffectApi, layer });
107
+ export default defineEffectBff({ api: bffApi, layer });
106
108
  ```
107
109
 
108
- 在浏览器代码中通过 `@api/effect/index` 调用接口:
110
+ 在浏览器代码中通过 `@api/index` 调用接口:
109
111
 
110
112
  ```ts title="src/routes/page.tsx"
111
- import effectBff from '@api/effect/index';
113
+ import api from '@api/index';
112
114
 
113
- const response = await effectBff.client.hello.ping({});
115
+ const response = await api.client.hello.ping({});
114
116
  ```
115
117
 
116
- `effectBff.client.*` 由 BFF loader 针对 `@api/effect/*` 导入物化生成。不要直接导入 `api/effect/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
118
+ `api.client.*` 由 BFF loader 针对 `@api/index` 导入物化生成。不要直接导入 `api/index` 并期望在服务端代码、脚本或测试中运行 `client`;直接导入入口时拿到的是服务端运行时定义,其中的 `client` 只是类型占位。
117
119
 
118
120
  import Hono from '@site-docs/components/hono';
119
121
 
@@ -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
+ > ```
@@ -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 运行时选型 | Modern.js 3.0 基线仅提供 Hono 运行时路径(无内建 Effect 运行时) | 将 Effect HttpApi 设为默认 API surface,入口固定为 `api/index.ts`,共享契约固定为 `shared/api.ts`,并通过 `strictEffectApproach` 拒绝原始 request handler |
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,7 +46,7 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。兼容分支
46
46
 
47
47
  - 不再把这个 fork 隐藏在旧 Modern.js 品牌后面。
48
48
  - 当通用 Modern.js 默认值与 SuperApp 可靠性冲突时,不优先优化通用默认值。
49
- - 运行时保持 `effect` `hono` 双模式并存,但不提供隐式回退。
49
+ - 生成的 UltraModern API 只走严格 Effect surface;原始 request handler 和 Hono/file-function API 是显式非默认路径。
50
50
  - 除非稳定性硬需求,否则避免引入破坏性 API 变更。
51
51
 
52
52
  ## 迁移指南
@@ -54,7 +54,7 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。兼容分支
54
54
  对于已经在使用 Modern.js 3.0 或旧版 BleedingDev UltraModern scaffold 的团队,迁移路径是“兼容感知”:保留能降低风险的部分,逐步向 MV-first / TanStack-first / Effect-first 默认方向收敛,并把 UltraModern.js 3.0 作为独立框架采用。
55
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 仍是受支持的兼容分支。
57
+ 2. 新建或迁移中的 BFF 能力使用 `bff.runtimeFramework: 'effect'`、`bff.effect.entry: './api/index'` 和 `bff.effect.strictEffectApproach: true`。接口先改 `shared/api.ts` `HttpApi` 契约,再在 `api/index.ts` `defineEffectBff(...)` / `HttpApiBuilder` 实现。
58
58
  3. 将基线契约视为渐进式默认值,而不是一次性强制切换。`MODERN_BASELINE_ENABLE_MF_SSR`、`MODERN_BASELINE_ENABLE_BFF_REQUEST_ID` 和 `MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS` 已经提供了按应用、按环境关闭的能力,方便在收敛到目标栈之前逐步过渡。
59
59
  4. 这套公开预设现在已经附带显式的发布 / 认证 gate。生成 workspace 会自带 `.github/workflows/ultramodern-workspace-gates.yml`,因此 `pnpm check` 与 `pnpm build` 从第一天开始就是本地接入契约的一部分;CI 会以并行矩阵运行这些基础 gate。
60
60
 
@@ -70,9 +70,40 @@ mise exec -- pnpm check
70
70
  mise exec -- pnpm build
71
71
  ```
72
72
 
73
+ 严格 Effect API 迁移不兼容 `3.4.0-ultramodern.19` 或更早的包 cohort。
74
+ 这些包还没有 `strictEffectApproach` 配置类型,也没有直接 `api/index.ts`
75
+ 的生成器和检查。新的 BleedingDev cohort 发布前,迁移校验应使用本地
76
+ Modern.js workspace;发布后,用 `--ultramodern-package-version` 固定该新
77
+ cohort。
78
+
79
+ 迁移已经带有 Effect API 文件的生成 workspace 时,明确移动文件,不保留兼容别名:
80
+
81
+ 1. 将每个 vertical 服务端入口从 `verticals/<id>/api/effect/index.ts` 移到
82
+ `verticals/<id>/api/index.ts`。
83
+ 2. 将每个共享 API 契约从 `verticals/<id>/shared/effect/api.ts` 移到
84
+ `verticals/<id>/shared/api.ts`。
85
+ 3. 将生成客户端从 `verticals/<id>/src/effect/*-client.ts` 移到
86
+ `verticals/<id>/src/api/*-client.ts`。
87
+ 4. 将 shell API 聚合从 `apps/shell-super-app/src/effect/*` 移到
88
+ `apps/shell-super-app/src/api/*`。
89
+ 5. 更新 imports 和 package exports,使用 `./api`、`./api/client` 与
90
+ `@<workspace>/<vertical>/api/client`;删除 `./effect/client`、
91
+ `./shared/effect/api` 和 shared Effect API 包。
92
+ 6. 更新每个 vertical 的 `modern.config.ts`,设置
93
+ `bff.effect.entry: './api/index'` 和
94
+ `bff.effect.strictEffectApproach: true`。
95
+ 7. 更新 topology,让 API metadata 直接位于 `api` 下,并设置
96
+ `api.bff.strictEffectApproach: true`;不要保留 `api.effect`。
97
+ 8. 运行 `pnpm api:check`、`scripts/validate-ultramodern-workspace.mjs`、
98
+ `pnpm check` 和 `pnpm build`。
99
+
100
+ 如果迁移失败,应修复归属的生成契约、topology、package exports 或 API 模块。
101
+ 不要添加 app 级 alias、原始 request handler、手写 `Response`、本地类型断言或包
102
+ shim 来让旧布局通过。
103
+
73
104
  每个仓库只使用一种 package-source 策略。已发布的 BleedingDev create 包默认使用
74
105
  `--ultramodern-package-source=install`,并把精确 cohort 记录到
75
- `.modernjs/ultramodern-package-source.json`。`--workspace` 只用于本地 monorepo
106
+ `.modernjs/ultramodern.json`。`--workspace` 只用于本地 monorepo
76
107
  联调未发布包。发布证明和 CI 如果需要证明某个已发布框架版本,应使用
77
108
  `--ultramodern-package-version` 固定精确 cohort。
78
109
 
@@ -82,7 +113,7 @@ Federation shim 或自定义 server wrapper。框架 BFF compiler 会把服务
82
113
  CommonJS,同时生成的 app package 继续为 Module Federation DTS 保留稳定的
83
114
  `typescript`,并使用固定的 `@typescript/native-preview` 工具链执行 TS-Go 检查。
84
115
 
85
- 安装新 cohort 后,先运行生成的
116
+ 安装新 cohort 后,先运行生成的 `pnpm api:check` 与
86
117
  `scripts/validate-ultramodern-workspace.mjs` 契约校验,再接受人工改动。topology、
87
118
  ownership、package-source、本地 overlay、生成契约、Tailwind prefix 或 Module
88
119
  Federation 冲突,都应在对应归属文件中修复,不要手写补丁覆盖生成结果。
@@ -215,7 +246,7 @@ JSON-LD 是可选的路由 metadata,不会自动推断。私有路由和不可
215
246
  JSON-LD。公开路由 owner 可以在本地化路径旁显式添加 `jsonLd`,并使用生成的
216
247
  `src/routes/ultramodern-jsonld.ts` helper 编写常见 schema.org 结构。
217
248
 
218
- 生成契约会在 `.modernjs/ultramodern-generated-contract.json` 中写入
249
+ 生成契约会在 `.modernjs/ultramodern.json` 中写入
219
250
  `cssFederation`:
220
251
 
221
252
  - `packages/shared-design-tokens` 拥有共享 token layer,并导出 `./tokens.css`。
@@ -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.2",
22
+ "version": "3.4.0-ultramodern.20",
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.2"
29
+ "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.4.0-ultramodern.20"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@rsbuild/plugin-sass": "2.0.0",