@modern-js/main-doc 3.4.0 → 3.6.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 (42) hide show
  1. package/docs/en/community/blog/v3-release-note.mdx +1 -1
  2. package/docs/en/configure/app/experiments/source-build.mdx +1 -1
  3. package/docs/en/configure/app/html/template-parameters.mdx +1 -1
  4. package/docs/en/configure/app/output/convert-to-rem.mdx +1 -1
  5. package/docs/en/configure/app/security/check-syntax.mdx +1 -1
  6. package/docs/en/configure/app/server/rsc.mdx +1 -1
  7. package/docs/en/configure/app/tools/html-plugin.mdx +1 -1
  8. package/docs/en/configure/app/tools/ts-checker.mdx +40 -14
  9. package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  10. package/docs/en/guides/advanced-features/page-performance/react-compiler.mdx +1 -1
  11. package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
  12. package/docs/en/guides/basic-features/deploy.mdx +6 -6
  13. package/docs/en/guides/basic-features/render/rsc.mdx +2 -2
  14. package/docs/en/guides/basic-features/static-assets/json-files.mdx +2 -2
  15. package/docs/en/guides/get-started/_meta.json +8 -1
  16. package/docs/en/guides/get-started/ai-coding-agents.mdx +48 -0
  17. package/docs/en/guides/get-started/tech-stack.mdx +1 -1
  18. package/docs/en/guides/topic-detail/module-federation/application.mdx +4 -4
  19. package/docs/en/guides/topic-detail/module-federation/usage.mdx +1 -1
  20. package/docs/en/guides/upgrade/config.mdx +1 -1
  21. package/docs/en/plugin/introduction.mdx +9 -9
  22. package/docs/zh/community/blog/v3-release-note.mdx +1 -1
  23. package/docs/zh/configure/app/experiments/source-build.mdx +1 -1
  24. package/docs/zh/configure/app/html/template-parameters.mdx +1 -1
  25. package/docs/zh/configure/app/output/convert-to-rem.mdx +1 -1
  26. package/docs/zh/configure/app/security/check-syntax.mdx +1 -1
  27. package/docs/zh/configure/app/server/rsc.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 +39 -13
  30. package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  31. package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx +1 -1
  32. package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
  33. package/docs/zh/guides/basic-features/deploy.mdx +6 -6
  34. package/docs/zh/guides/basic-features/render/rsc.mdx +2 -2
  35. package/docs/zh/guides/basic-features/static-assets/json-files.mdx +2 -2
  36. package/docs/zh/guides/get-started/_meta.json +8 -1
  37. package/docs/zh/guides/get-started/ai-coding-agents.mdx +48 -0
  38. package/docs/zh/guides/topic-detail/module-federation/application.mdx +4 -4
  39. package/docs/zh/guides/topic-detail/module-federation/usage.mdx +1 -1
  40. package/docs/zh/guides/upgrade/config.mdx +1 -1
  41. package/docs/zh/plugin/introduction.mdx +9 -9
  42. 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
 
@@ -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).
@@ -22,7 +22,7 @@ export default defineConfig({
22
22
  :::tip Prerequisites
23
23
  Before enabling RSC, ensure:
24
24
  1. React and React DOM are upgraded to version 19 (recommended 19.2.4 or above)
25
- 2. Install the `react-server-dom-rspack@0.0.1-beta.1` dependency
25
+ 2. Install the `react-server-dom-rspack@0.0.2` dependency
26
26
 
27
27
  :::
28
28
 
@@ -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
 
@@ -12,20 +12,21 @@ import { PackageManagerTabs } from '@theme';
12
12
  ```js
13
13
  const defaultOptions = {
14
14
  typescript: {
15
+ // set 'readonly' to avoid emitting tsbuildinfo,
16
+ // as the generated tsbuildinfo will break ts-checker-rspack-plugin
17
+ mode: 'readonly',
18
+ // enable build when using project reference
19
+ build: useReference,
15
20
  // avoid OOM issue
16
21
  memoryLimit: 8192,
17
22
  // use tsconfig of user project
18
23
  configFile: tsconfigPath,
19
- // use TypeScript checker by default
20
- tsgo: false,
21
- // use typescript of user project
22
- typescriptPath: require.resolve('typescript'),
24
+ // resolve the default TypeScript package from user project
25
+ resolveRoot: rootPath,
23
26
  },
24
27
  issue: {
25
- exclude: [
26
- { file: '**/*.(spec|test).ts' },
27
- { file: '**/node_modules/**/*' },
28
- ],
28
+ // ignore type errors from node_modules
29
+ exclude: [({ file = '' }) => /[\\/]node_modules[\\/]/.test(file)],
29
30
  },
30
31
  logger: {
31
32
  log() {
@@ -33,7 +34,11 @@ const defaultOptions = {
33
34
  // we only want to display error messages
34
35
  },
35
36
  error(message: string) {
36
- console.error(message.replace(/ERROR/g, 'Type Error'));
37
+ console.error(
38
+ message
39
+ .replace(/ERROR/g, 'Type Error')
40
+ .replace(/WARNING/g, 'Type Warning'),
41
+ );
37
42
  },
38
43
  },
39
44
  },
@@ -43,7 +48,9 @@ By default, the [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild
43
48
 
44
49
  ## Example
45
50
 
46
- When the value of `tsChecker` is of type Object, it will be deeply merged with the default configuration.
51
+ ### Object Type
52
+
53
+ When the value of `tsChecker` is an object, it will be deeply merged with the default configuration.
47
54
 
48
55
  ```ts
49
56
  export default {
@@ -57,17 +64,34 @@ export default {
57
64
  };
58
65
  ```
59
66
 
67
+ ### Function Type
68
+
69
+ 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.
70
+
71
+ ```ts
72
+ export default {
73
+ tools: {
74
+ tsChecker(options) {
75
+ options.async = false;
76
+ return options;
77
+ },
78
+ },
79
+ };
80
+ ```
81
+
60
82
  > Please refer to [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) for more details.
61
83
 
62
84
  ## TypeScript Go Support
63
85
 
64
86
  `tools.tsChecker` supports enabling [TypeScript Go](https://github.com/microsoft/typescript-go) for type checking. This experimental capability is provided by [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin), which is integrated by [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check), and can reduce type-checking time by about 5-10x.
65
87
 
66
- Before using it, install `@typescript/native-preview`:
88
+ Install TypeScript 7.0 RC to enable TypeScript Go automatically:
67
89
 
68
- <PackageManagerTabs command="install @typescript/native-preview -D" />
90
+ <PackageManagerTabs command="install typescript@rc -D" />
69
91
 
70
- Then set `typescript.tsgo` to `true`:
92
+ You can also install `@typescript/native-preview` and set `typescript.tsgo` to `true`:
93
+
94
+ <PackageManagerTabs command="install @typescript/native-preview -D" />
71
95
 
72
96
  ```ts
73
97
  export default {
@@ -81,6 +105,8 @@ export default {
81
105
  };
82
106
  ```
83
107
 
84
- When `tsgo` is enabled, the default `typescript.typescriptPath` resolves to `@typescript/native-preview/package.json`. If you manually set `typescript.typescriptPath`, it must be an absolute path to `@typescript/native-preview/package.json`.
108
+ When `tsgo` is enabled and `typescript.typescriptPath` is set manually, it must point to an absolute `typescript/package.json` path from TypeScript 7+ or `@typescript/native-preview/package.json`.
109
+
110
+ > The `@typescript/native-preview` usage is deprecated and kept only for compatibility. We recommend installing `typescript@rc` to use `tsgo`.
85
111
 
86
112
  For supported options and limitations, please refer to [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support).
@@ -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
 
@@ -51,4 +51,4 @@ export default defineConfig({
51
51
  });
52
52
  ```
53
53
 
54
- > For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)
54
+ > For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern.js/tree/main/examples/react-compiler)
@@ -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.
@@ -112,7 +112,7 @@ Add the following content to `netlify.toml`:
112
112
  ```
113
113
 
114
114
  :::info
115
- You can refer to the [deployment project example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
115
+ You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
116
116
 
117
117
  :::
118
118
 
@@ -137,7 +137,7 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
137
137
  :::info
138
138
 
139
139
  1. Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
140
- 2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr).
140
+ 2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
141
141
 
142
142
  :::
143
143
 
@@ -223,7 +223,7 @@ Commit your project to git, select Framework Preset as `Other` on the Vercel pla
223
223
  <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
224
224
 
225
225
  :::info
226
- You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
226
+ You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
227
227
 
228
228
  :::
229
229
 
@@ -237,7 +237,7 @@ In addition to configuring `vercel.json` in the same way as a [pure front-end pr
237
237
  2. The Node.js version for function execution is determined by the project configuration on the Vercel platform.
238
238
 
239
239
  :::info
240
- You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr).
240
+ You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr).
241
241
 
242
242
  :::
243
243
 
@@ -335,10 +335,10 @@ For branch deployment, follow these steps:
335
335
  :::info
336
336
 
337
337
  1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
338
- 2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
338
+ 2. You can refer to the [project](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)
339
339
  :::
340
340
 
341
- For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
341
+ For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
342
342
 
343
343
  ## Using Self-Built Node.js Server
344
344
 
@@ -23,10 +23,10 @@ Before starting, we recommend reading React's official [Server Components docume
23
23
 
24
24
  1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.4 or above)
25
25
 
26
- 2. **Install the `react-server-dom-rspack@0.0.1-beta.1` dependency**
26
+ 2. **Install the `react-server-dom-rspack@0.0.2` dependency**
27
27
 
28
28
  ```bash
29
- npm install react-server-dom-rspack@0.0.1-beta.1
29
+ npm install react-server-dom-rspack@0.0.2
30
30
  ```
31
31
 
32
32
  :::warning Notes
@@ -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';
@@ -1 +1,8 @@
1
- ["introduction", "quick-start", "upgrade", "glossary", "tech-stack"]
1
+ [
2
+ "introduction",
3
+ "quick-start",
4
+ "upgrade",
5
+ "glossary",
6
+ "tech-stack",
7
+ "ai-coding-agents"
8
+ ]
@@ -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
+ > ```
@@ -10,7 +10,7 @@ In this document, you can learn about the main technology stack involved in the
10
10
 
11
11
  ## UI Library
12
12
 
13
- Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
13
+ Modern.js uses [React 19](https://react.dev/) to build user interfaces and is also compatible with React 18.
14
14
 
15
15
  Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.rs/guide/framework/vue).
16
16
 
@@ -62,7 +62,7 @@ export default createModuleFederationConfig({
62
62
  ```
63
63
 
64
64
  :::info
65
- [`createBridgeComponent`](https://module-federation.io/practice/bridge/react-bridge/export-app.html#createbridgecomponent-api-reference) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
65
+ [`createBridgeComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
66
66
  :::
67
67
 
68
68
  ## Using Modules in Consumer
@@ -98,7 +98,7 @@ export default RemoteApp;
98
98
  ```
99
99
 
100
100
  :::info
101
- [`createRemoteAppComponent`](https://module-federation.io/zh/practice/bridge/react-bridge/load-app.html#%E4%BB%80%E4%B9%88%E6%98%AF-createremoteappcomponent) is used to load application-level modules.
101
+ [`createRemoteAppComponent`](https://module-federation.io/guide/bridge/overview#core-apis) is used to load application-level modules.
102
102
  :::
103
103
 
104
104
  ## Start the Application
@@ -109,8 +109,8 @@ After startup, when the consumer application accesses the `/remote` route, it wi
109
109
 
110
110
  You can create new route files in the producer application and add route navigation in the code. These functionalities will also work as expected.
111
111
 
112
- You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export).
112
+ You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/app-export).
113
113
 
114
114
  ## Related Documentation
115
115
 
116
- - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
116
+ - [Module Federation Bridge](https://module-federation.io/guide/bridge/overview)
@@ -195,7 +195,7 @@ Now, in the producer, run `modern build && MODERN_MF_AUTO_CORS=true modern serv
195
195
  When using the `modern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
196
196
  :::
197
197
 
198
- You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
198
+ You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/base).
199
199
 
200
200
  ## Related Documentation
201
201
 
@@ -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
 
@@ -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)。
@@ -22,7 +22,7 @@ export default defineConfig({
22
22
  :::tip 前置条件
23
23
  在启用 RSC 之前,请确保:
24
24
  1. React 和 React DOM 已升级到 19 版本(建议 19.2.4 以上版本)
25
- 2. 已安装 `react-server-dom-rspack@0.0.1-beta.1` 依赖
25
+ 2. 已安装 `react-server-dom-rspack@0.0.2` 依赖
26
26
 
27
27
  :::
28
28
 
@@ -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
 
@@ -12,20 +12,21 @@ import { PackageManagerTabs } from '@theme';
12
12
  ```js
13
13
  const defaultOptions = {
14
14
  typescript: {
15
+ // set 'readonly' to avoid emitting tsbuildinfo,
16
+ // as the generated tsbuildinfo will break ts-checker-rspack-plugin
17
+ mode: 'readonly',
18
+ // enable build when using project reference
19
+ build: useReference,
15
20
  // avoid OOM issue
16
21
  memoryLimit: 8192,
17
22
  // use tsconfig of user project
18
23
  configFile: tsconfigPath,
19
- // use TypeScript checker by default
20
- tsgo: false,
21
- // use typescript of user project
22
- typescriptPath: require.resolve('typescript'),
24
+ // resolve the default TypeScript package from user project
25
+ resolveRoot: rootPath,
23
26
  },
24
27
  issue: {
25
- exclude: [
26
- { file: '**/*.(spec|test).ts' },
27
- { file: '**/node_modules/**/*' },
28
- ],
28
+ // ignore type errors from node_modules
29
+ exclude: [({ file = '' }) => /[\\/]node_modules[\\/]/.test(file)],
29
30
  },
30
31
  logger: {
31
32
  log() {
@@ -33,7 +34,11 @@ const defaultOptions = {
33
34
  // we only want to display error messages
34
35
  },
35
36
  error(message: string) {
36
- console.error(message.replace(/ERROR/g, 'Type Error'));
37
+ console.error(
38
+ message
39
+ .replace(/ERROR/g, 'Type Error')
40
+ .replace(/WARNING/g, 'Type Warning'),
41
+ );
37
42
  },
38
43
  },
39
44
  },
@@ -43,6 +48,8 @@ const defaultOptions = {
43
48
 
44
49
  ## 示例
45
50
 
51
+ ### Object 类型
52
+
46
53
  当 `tsChecker` 的值为 Object 类型时,会与默认配置进行深层合并。
47
54
 
48
55
  ```ts
@@ -57,17 +64,34 @@ export default {
57
64
  };
58
65
  ```
59
66
 
67
+ ### Function 类型
68
+
69
+ 当 `tsChecker` 的值为 Function 类型时,默认配置会作为第一个参数传入。你可以直接修改配置对象,也可以返回一个对象作为最终配置。
70
+
71
+ ```ts
72
+ export default {
73
+ tools: {
74
+ tsChecker(options) {
75
+ options.async = false;
76
+ return options;
77
+ },
78
+ },
79
+ };
80
+ ```
81
+
60
82
  > 请参考 [@rsbuild/plugin-type-check](https://github.com/rstackjs/rsbuild-plugin-type-check) 了解更多用法。
61
83
 
62
84
  ## TypeScript Go 支持
63
85
 
64
86
  `tools.tsChecker` 支持开启 [TypeScript Go](https://github.com/microsoft/typescript-go) 进行类型检查。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供,目前仍处于实验阶段,可以将类型检查耗时减少约 5-10 倍。
65
87
 
66
- 在使用前,需要安装 `@typescript/native-preview`:
88
+ 安装 TypeScript 7.0 RC 后,TypeScript Go 会自动开启:
67
89
 
68
- <PackageManagerTabs command="install @typescript/native-preview -D" />
90
+ <PackageManagerTabs command="install typescript@rc -D" />
69
91
 
70
- 然后将 `typescript.tsgo` 设置为 `true`:
92
+ 你也可以安装 `@typescript/native-preview`,并将 `typescript.tsgo` 设置为 `true`:
93
+
94
+ <PackageManagerTabs command="install @typescript/native-preview -D" />
71
95
 
72
96
  ```ts
73
97
  export default {
@@ -81,6 +105,8 @@ export default {
81
105
  };
82
106
  ```
83
107
 
84
- 开启 `tsgo` 后,默认的 `typescript.typescriptPath` 会解析到 `@typescript/native-preview/package.json`。如果你手动设置了 `typescript.typescriptPath`,它必须是指向 `@typescript/native-preview/package.json` 的绝对路径。
108
+ 开启 `tsgo` 后,如果手动设置 `typescript.typescriptPath`,它必须指向 TypeScript 7+ 的 `typescript/package.json` `@typescript/native-preview/package.json` 的绝对路径。
109
+
110
+ > `@typescript/native-preview` 的用法已废弃,仅作为兼容保留。推荐安装 `typescript@rc` 使用 `tsgo`。
85
111
 
86
112
  关于 `tsgo` 模式下生效的配置项和相关限制,请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
@@ -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
 
@@ -51,4 +51,4 @@ export default defineConfig({
51
51
  });
52
52
  ```
53
53
 
54
- > 详细代码可以参考:[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)
54
+ > 详细代码可以参考:[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern.js/tree/main/examples/react-compiler)
@@ -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 的方式。
@@ -109,7 +109,7 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
109
109
  ```
110
110
 
111
111
  :::info
112
- 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
112
+ 你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
113
113
  :::
114
114
 
115
115
  在 Netlify 平台上添加项目,部署即可。
@@ -133,7 +133,7 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
133
133
  :::info
134
134
 
135
135
  1. 目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署,我们将在后续的版本中支持。
136
- 2. 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr)。
136
+ 2. 你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr)。
137
137
 
138
138
  :::
139
139
 
@@ -217,7 +217,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
217
217
  <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
218
218
 
219
219
  :::info
220
- 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
220
+ 你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
221
221
  :::
222
222
 
223
223
  ### 全栈项目
@@ -230,7 +230,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
230
230
  2. 函数运行的 node.js 版本由项目在 Vercel 平台配置决定。
231
231
 
232
232
  :::info
233
- 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr)。
233
+ 你可参考部署[项目示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-ssr)。
234
234
 
235
235
  :::
236
236
 
@@ -317,11 +317,11 @@ Github Pages 支持两种部署方式,通过分支部署或通过 Github Actio
317
317
  :::info
318
318
 
319
319
  1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`,Modern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
320
- 2. 可以参考项目[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
320
+ 2. 可以参考项目[示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
321
321
 
322
322
  :::
323
323
 
324
- 如果通过 Github Actions 部署,可以选择 Settings > Pages > Source > GitHub Actions,并在项目中添加 workflow 文件,可参考[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
324
+ 如果通过 Github Actions 部署,可以选择 Settings > Pages > Source > GitHub Actions,并在项目中添加 workflow 文件,可参考[示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr)。
325
325
 
326
326
  ## 自建 Node.js 服务器
327
327
 
@@ -23,10 +23,10 @@ React Server Components (RSC) 是一种新的组件类型,允许在服务端
23
23
 
24
24
  1. **确保 React 和 React DOM 升级到 19 版本**(建议 19.2.4 以上版本)
25
25
 
26
- 2. **安装 `react-server-dom-rspack@0.0.1-beta.1` 依赖**
26
+ 2. **安装 `react-server-dom-rspack@0.0.2` 依赖**
27
27
 
28
28
  ```bash
29
- npm install react-server-dom-rspack@0.0.1-beta.1
29
+ npm install react-server-dom-rspack@0.0.2
30
30
  ```
31
31
 
32
32
  :::warning 注意事项
@@ -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';
@@ -1 +1,8 @@
1
- ["introduction", "quick-start", "upgrade", "glossary", "tech-stack"]
1
+ [
2
+ "introduction",
3
+ "quick-start",
4
+ "upgrade",
5
+ "glossary",
6
+ "tech-stack",
7
+ "ai-coding-agents"
8
+ ]
@@ -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
+ > ```
@@ -63,7 +63,7 @@ export default createModuleFederationConfig({
63
63
  ```
64
64
 
65
65
  :::info
66
- [`createBridgeComponent`](https://module-federation.io/zh/practice/bridge/react-bridge/export-app.html#createbridgecomponent-api-%E5%8F%82%E8%80%83) 用于导出应用级别模块,Modern.js 相关 API 可以查看 [createRoot](/apis/app/runtime/core/create-root)、[render](/apis/app/runtime/core/render)。
66
+ [`createBridgeComponent`](https://module-federation.io/zh/guide/bridge/overview.html#%E6%A0%B8%E5%BF%83-api) 用于导出应用级别模块,Modern.js 相关 API 可以查看 [createRoot](/apis/app/runtime/core/create-root)、[render](/apis/app/runtime/core/render)。
67
67
  :::
68
68
 
69
69
  ## 消费者使用模块
@@ -99,7 +99,7 @@ export default RemoteApp;
99
99
  ```
100
100
 
101
101
  :::info
102
- [`createRemoteAppComponent`](https://module-federation.io/zh/practice/bridge/react-bridge/load-app.html#%E4%BB%80%E4%B9%88%E6%98%AF-createremoteappcomponent) 用于加载应用级别模块。
102
+ [`createRemoteAppComponent`](https://module-federation.io/zh/guide/bridge/overview.html#%E6%A0%B8%E5%BF%83-api) 用于加载应用级别模块。
103
103
  :::
104
104
 
105
105
  ## 启动应用
@@ -110,8 +110,8 @@ export default RemoteApp;
110
110
 
111
111
  你可以在生产者应用中,创建新的路由文件,并在代码中添加路由导航,可以发现这些功能也能够正常运行。
112
112
 
113
- 上述用例可以参考:[Modern.js & Module Federation 应用级别模块](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export)。
113
+ 上述用例可以参考:[Modern.js & Module Federation 应用级别模块](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/app-export)。
114
114
 
115
115
  ## 相关文档
116
116
 
117
- - [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
117
+ - [Module Federation Bridge](https://module-federation.io/zh/guide/bridge/overview)
@@ -193,7 +193,7 @@ export default defineConfig({
193
193
  在使用 `modern serve` 命令时,需要在启动生产者项目时携带 `MODERN_MF_AUTO_CORS=true` 环境变量,以自动处理跨域问题,确保消费者可以正常访问生产者的远程模块资源。
194
194
  :::
195
195
 
196
- 上述用例可以参考:[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
196
+ 上述用例可以参考:[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern.js/tree/main/examples/module-federation/base)。
197
197
 
198
198
  ## 相关文档
199
199
 
@@ -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
@@ -16,14 +16,14 @@
16
16
  "modern",
17
17
  "modern.js"
18
18
  ],
19
- "version": "3.4.0",
19
+ "version": "3.6.0",
20
20
  "publishConfig": {
21
21
  "registry": "https://registry.npmjs.org/",
22
22
  "access": "public"
23
23
  },
24
24
  "dependencies": {
25
25
  "mermaid": "^11.15.0",
26
- "@modern-js/sandpack-react": "3.4.0"
26
+ "@modern-js/sandpack-react": "3.6.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "rsbuild-plugin-open-graph": "1.1.3",