@modern-js/main-doc 2.67.4 → 2.67.6

package/docs/en/configure/app/output/legal-comments.mdx

@@ -1,6 +1,5 @@
 ---
 title: legalComments
-configName: output.legalComments
 ---
 
 # output.legalComments
@@ -18,6 +17,6 @@ This behavior can be configured by using one of the following options:
 - `inline`: Preserve all legal comments in original position.
 - `none`: Remove all legal comments.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.legalComments" />

package/docs/en/configure/app/output/minify.mdx

@@ -1,6 +1,5 @@
 ---
 title: minify
-configName: output.minify
 ---
 
 # output.minify
@@ -22,6 +21,6 @@ type Minify =
 
 Configure whether to enable code minification in production mode, or to configure minimizer options.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.minify" />

package/docs/en/configure/app/output/override-browserslist.mdx

@@ -1,6 +1,5 @@
 ---
 title: overrideBrowserslist
-configName: output.overrideBrowserslist
 ---
 
 # output.overrideBrowserslist
@@ -20,6 +19,6 @@ Modern.js will give priority to using the configuration in the `.browserslistrc`
 
 Specifies the range of target browsers that the project is compatible with. This value will be used by [SWC](https://github.com/swc-project/swc) and [autoprefixer](https://github.com/postcss/autoprefixer) to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.overrideBrowserslist" />

package/docs/en/configure/app/output/polyfill.mdx

@@ -1,6 +1,5 @@
 ---
 title: polyfill
-configName: output.polyfill
 ---
 
 # output.polyfill
@@ -14,6 +13,6 @@ import OutputPolyfillExtend from '@site-docs-en/components/output-polyfill-exten
 
 <OutputPolyfillExtend />
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.polyfill" />

package/docs/en/configure/app/output/source-map.mdx

@@ -1,6 +1,5 @@
 ---
 title: sourceMap
-configName: output.sourceMap
 ---
 
 # output.sourceMap
@@ -27,6 +26,6 @@ const defaultSourceMap = {
 
 Used to set whether to generate source map files, and which format of source map to generate.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.sourceMap" />

package/docs/en/configure/app/performance/build-cache.mdx

@@ -1,6 +1,5 @@
 ---
 title: buildCache
-configName: performance.buildCache
 ---
 
 # performance.buildCache
@@ -41,6 +40,6 @@ export default {
 
 It should be noted that, Rspack's persistent cache is [experimental](https://rspack.dev/config/experiments#experimentscache), which may change in future versions, and this feature needs to be turned on manually.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.buildCache" />

package/docs/en/configure/app/performance/bundle-analyze.mdx

@@ -1,6 +1,5 @@
 ---
 title: bundleAnalyze
-configName: performance.bundleAnalyze
 ---
 
 # performance.bundleAnalyze
@@ -20,6 +19,6 @@ const defaultConfig = {
 };
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.bundleAnalyze" />

package/docs/en/configure/app/performance/chunk-split.mdx

@@ -1,6 +1,5 @@
 ---
 title: chunkSplit
-configName: performance.chunkSplit
 ---
 
 # performance.chunkSplit
@@ -40,6 +39,6 @@ interface SplitCustom {
 export type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.chunkSplit" />

package/docs/en/configure/app/performance/dns-prefetch.mdx

@@ -1,6 +1,5 @@
 ---
 title: dnsPrefetch
-configName: performance.dnsPrefetch
 ---
 
 # performance.dnsPrefetch
@@ -15,6 +14,6 @@ After this property is set, the domain name can be resolved before the resource
 
 See [Using dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch) for more details.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.dnsPrefetch" />

package/docs/en/configure/app/performance/preconnect.mdx

@@ -1,6 +1,5 @@
 ---
 title: preconnect
-configName: performance.preconnect
 ---
 
 # performance.preconnect
@@ -16,6 +15,6 @@ interface PreconnectOption {
 
 - **Default:** `undefined`
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.preconnect" />

package/docs/en/configure/app/performance/prefetch.mdx

@@ -1,6 +1,5 @@
 ---
 title: prefetch
-configName: performance.prefetch
 ---
 
 # performance.prefetch
@@ -21,6 +20,6 @@ interface PrefetchOption {
 
 - **Default:** `undefined`
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.prefetch" />

package/docs/en/configure/app/performance/preload.mdx

@@ -1,6 +1,5 @@
 ---
 title: preload
-configName: performance.preload
 ---
 
 # performance.preload
@@ -23,6 +22,6 @@ interface PreloadOption {
 
 Inject the [`<link rel="preload">`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload) tags for the static assets generated by Rsbuild.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.preload" />

package/docs/en/configure/app/performance/print-file-size.mdx

@@ -1,6 +1,5 @@
 ---
 title: printFileSize
-configName: performance.printFileSize
 ---
 
 # performance.printFileSize
@@ -40,6 +39,6 @@ info    Production file sizes:
   dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.printFileSize" />

package/docs/en/configure/app/performance/profile.mdx

@@ -1,6 +1,5 @@
 ---
 title: profile
-configName: performance.profile
 ---
 
 # performance.profile
@@ -10,6 +9,6 @@ configName: performance.profile
 
 Whether capture timing information for each module, same as the [profile](https://webpack.js.org/configuration/other-options/#profile) config of Rspack.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.profile" />

package/docs/en/configure/app/performance/remove-console.mdx

@@ -1,6 +1,5 @@
 ---
 title: removeConsole
-configName: performance.removeConsole
 ---
 
 # performance.removeConsole
@@ -10,6 +9,6 @@ configName: performance.removeConsole
 
 Whether to remove `console.[methodName]` in production build.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeConsole" />

package/docs/en/configure/app/performance/remove-moment-locale.mdx

@@ -1,6 +1,5 @@
 ---
 title: removeMomentLocale
-configName: performance.removeMomentLocale
 ---
 
 # performance.removeMomentLocale
@@ -10,6 +9,6 @@ configName: performance.removeMomentLocale
 
 Whether to remove the locales of [moment.js](https://momentjs.com/).
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeMomentLocale" />

package/docs/en/configure/app/plugins.mdx

@@ -1,47 +1,27 @@
----
-sidebar_position: 9
----
-
 # plugins
 
 - **Type:** `CliPlugin[]`
 - **Default:** `[]`
 
-Used to configure custom Modern.js framework plugins.
-
-Refer to [How to Develop Plugins](/plugin/plugin-system) for how to write custom plugins.
+Used to configure custom Modern.js framework CLI plugins. For information on how to create custom CLI plugins, please refer to [How to Write CLI Plugins](/plugin/introduction.html#cli-plugins).
 
 ## Note
 
-This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
-
-- Use [builderPlugins](/configure/app/builder-plugins) to configure Rsbuild plugins.
-- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
-- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
-
-## Plugin types
-
-Modern.js has three types of plugins:
-
-- `CLI plugins`, applicable to local development, compilation and construction stages, can extend various capabilities in the command line and compilation stages.
-- `Server plugins`, applicable to the server.
-- `Runtime plugins`, applicable to the front-end runtime.
-
-Currently, Modern.js has opened up the ability to customize CLI plugins, and Server plugins and Runtime plugins will be opened up later.
-
-## Plugin execution order
+This option is **specifically for configuring framework CLI plugins**. If you need to configure other types of plugins, use the appropriate configuration method:
 
-By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
+- Use [builderPlugins](/configure/app/builder-plugins) for Rsbuild plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) for Rspack or webpack plugins.
+- Use [tools.babel](/configure/app/tools/babel) for Babel plugins.
+- Use the [plugins field in runtime config](/configure/app/runtime/plugins) for framework Runtime plugins.
 
-When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Plugins Structure](/plugin/plugin-system) for more information.
 
-## Example
+## Examples
 
-The following is an example of using CLI plugins.
+Below are examples of using CLI plugins:
 
-### Use plugins on npm
+### Using plugins from npm
 
-To use plugins from npm registry, you need to first install the plugins , and import them in `modern.config.ts`.
+To use plugins from the npm registry, first install the plugins and then import them in your configuration:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from 'my-plugin';
@@ -51,9 +31,9 @@ export default defineConfig({
 });
 ```
 
-### Use local plugins
+### Using local plugins
 
-To use local plugins, import them directly using a relative path.
+To use plugins from your local repository, import them directly using a relative path:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from './config/plugin/myPlugin';
@@ -65,7 +45,7 @@ export default defineConfig({
 
 ### Plugin configuration
 
-If the plugin provides some custom configuration options, they can be passed in as parameters to the plugin function.
+If a plugin provides custom configuration options, pass them as parameters to the plugin function:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from 'my-plugin';

package/docs/en/configure/app/runtime/master-app.mdx

@@ -1,8 +1,4 @@
----
-title: masterApp
----
-
-# runtime.masterApp
+# masterApp
 
 - **Type:** `Object`
 

package/docs/en/configure/app/runtime/plugins.mdx

@@ -0,0 +1,58 @@
+# plugins
+
+- **Type:** `RuntimePlugin[]`
+- **Default:** `[]`
+
+Used to configure custom Modern.js Runtime plugins. For details on how to create custom Runtime plugins, please refer to [How to Write Runtime Plugins](/plugin/introduction#runtime-plugins).
+
+:::info
+
+Runtime plugins must be configured in the `plugins` array within the `src/modern.runtime.ts` file.
+
+:::
+
+## Examples
+
+Here are examples demonstrating how to use Runtime plugins:
+
+### Using plugins from npm packages
+
+To use plugins published on npm, first install them via your package manager, then import them into your configuration.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from 'my-plugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### Using local plugins
+
+To use plugins from your local codebase, import them directly using relative paths.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### Plugin configuration
+
+If a plugin supports custom configuration options, you can provide them as arguments to the plugin function.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin({
+    foo: 1,
+    bar: 2,
+  })],
+});
+```

package/docs/en/configure/app/security/nonce.mdx

@@ -1,6 +1,5 @@
 ---
 title: nonce
-configName: security.nonce
 ---
 
 # security.nonce
@@ -15,6 +14,6 @@ type Nonce = string;
 
 Adding a `nonce` attribute to the scripts resources introduced for HTML. This allows the browser to determine whether the script can be executed when it parses inline scripts with matching nonce values.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="security.nonce" />

package/docs/en/configure/app/security/sri.mdx

@@ -1,6 +1,5 @@
 ---
 title: sri
-configName: security.sri
 ---
 
 # security.sri

package/docs/en/configure/app/server/port.mdx

@@ -1,6 +1,5 @@
 ---
 title: port
-configName: server.port
 ---
 
 # server.port
@@ -38,6 +37,6 @@ export default defineConfig({
 });
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="server.port" />

package/docs/en/configure/app/source/alias-strategy.mdx

@@ -1,6 +1,5 @@
 ---
 title: aliasStrategy
-configName: source.aliasStrategy
 ---
 
 # source.aliasStrategy
@@ -10,6 +9,6 @@ configName: source.aliasStrategy
 
 `source.aliasStrategy` is used to control the priority between the `paths` option in `tsconfig.json` and the `alias` option in the bundler.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.aliasStrategy" />

package/docs/en/configure/app/source/alias.mdx

@@ -1,6 +1,5 @@
 ---
 title: alias
-configName: source.alias
 ---
 
 # source.alias
@@ -19,6 +18,6 @@ Create aliases to import or require certain modules, same as the [resolve.alias]
 For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in the `tsconfig.json` file. The Rsbuild will automatically recognize it, so there is no need to configure the `source.alias` option separately. For more details, please refer to [Path Aliases](https://modernjs.dev/en/guides/basic-features/alias.html).
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.alias" />

package/docs/en/configure/app/source/decorators.mdx

@@ -1,6 +1,5 @@
 ---
 title: decorators
-configName: source.decorators
 ---
 
 # source.decorators
@@ -23,6 +22,6 @@ const defaultDecorators = {
 
 Used to configure the decorators syntax.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.decorators" />

package/docs/en/configure/app/source/define.mdx

@@ -1,6 +1,5 @@
 ---
 title: define
-configName: source.define
 ---
 
 # source.define
@@ -16,6 +15,6 @@ const defaultDefine = {
 
 Replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.define" />

package/docs/en/configure/app/source/exclude.mdx

@@ -1,6 +1,5 @@
 ---
 title: exclude
-configName: source.exclude
 ---
 
 # source.exclude
@@ -10,6 +9,6 @@ configName: source.exclude
 
 Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.dev/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.exclude" />

package/docs/en/configure/app/source/include.mdx

@@ -1,6 +1,5 @@
 ---
 title: include
-configName: source.include
 ---
 
 # source.include
@@ -21,6 +20,6 @@ const defaultInclude = [
 
 The `source.include` is used to specify additional JavaScript files that need to be compiled.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.include" />

package/docs/en/configure/app/source/pre-entry.mdx

@@ -1,6 +1,5 @@
 ---
 title: preEntry
-configName: source.preEntry
 ---
 
 # source.preEntry
@@ -10,6 +9,6 @@ configName: source.preEntry
 
 Add a script before the entry file of each page. This script will be executed before the page code. It can be used to execute global logics, such as injecting polyfills, setting global styles, etc.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.preEntry" />

package/docs/en/configure/app/source/transform-import.mdx

@@ -1,6 +1,5 @@
 ---
 title: transformImport
-configName: source.transformImport
 ---
 
 # source.transformImport
@@ -59,9 +58,9 @@ const defaultArcoConfig = [
 When you add configurations for `antd` or `@arco-design/web-react`, the priority will be higher than the default configurations mentioned above.
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.transformImport" />
 
 ### Disable Default Config
 

package/docs/en/configure/app/tools/css-extract.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssExtract
-configName: tools.cssExtract
 ---
 
 # tools.cssExtract
@@ -33,6 +32,6 @@ const defaultOptions = {
 
 The config of [CssExtractRspackPlugin](https://www.rspack.dev/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssExtract" />

package/docs/en/configure/app/tools/css-loader.mdx

@@ -16,6 +16,6 @@ const defaultOptions = {
 
 The config of [css-loader](https://github.com/webpack-contrib/css-loader) can be modified through `tools.cssLoader`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssLoader" />

package/docs/en/configure/app/tools/html-plugin.mdx

@@ -1,6 +1,5 @@
 ---
 title: htmlPlugin
-configName: tools.htmlPlugin
 ---
 
 # tools.htmlPlugin
@@ -34,8 +33,13 @@ const defaultOptions = {
 };
 ```
 
+:::warning
+SSR Application does not enable the `minify.removeComments` configuration, otherwise the SSR rendering will fail.
+:::
+
+
 The configs of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) or [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) can be modified through `tools.htmlPlugin`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.htmlPlugin" />