@modern-js/main-doc 0.0.0-nightly-20250515160310 → 0.0.0-nightly-20250518160324

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -10,11 +10,11 @@ Conventional routing uses `routes/` as the convention for the entry point and an
 
 Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as the application's routes:
 
-```bash {3,4}
+```bash
 .
 └── routes
-    ├── layout.tsx
-    ├── page.tsx
+    ├── layout.tsx  # [!code highlight]
+    ├── page.tsx # [!code highlight]
     └── user
         ├── layout.tsx
         └── page.tsx

package/docs/en/components/rsbuild-config-tooltip.mdx

@@ -1,5 +1,5 @@
-import RsbuildLInk from '@site/src/components/RsbuildLink';
+import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info
-The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to <RsbuildLInk configName={frontmatter.configName}/>.
+The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to <RsbuildLink configName={props.configName}/>.
 :::

package/docs/en/configure/app/dev/asset-prefix.mdx

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: dev.assetPrefix
 ---
 
 # dev.assetPrefix
@@ -10,9 +9,9 @@ configName: dev.assetPrefix
 
 This configuration item is used to set the URL prefix of static resources in **development mode**.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.assetPrefix" />
 
 :::warning
 Please note that this configuration item is only applicable in development mode. In production mode, please use the [output.assetPrefix](/configure/app/output/asset-prefix) configuration item for setting.

package/docs/en/configure/app/dev/client.mdx

@@ -1,6 +1,5 @@
 ---
 title: client
-configName: dev.client
 ---
 
 # dev.client
@@ -41,6 +40,6 @@ const defaultConfig = {
 
 Configure the client code injected by Modern.js during the development process. This can be used to set the WebSocket URL for HMR.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.client" />

package/docs/en/configure/app/dev/hmr.mdx

@@ -1,6 +1,5 @@
 ---
 title: hmr
-configName: dev.hmr
 ---
 
 # dev.hmr
@@ -10,6 +9,6 @@ configName: dev.hmr
 
 Whether to enable Hot Module Replacement.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.hmr" />

package/docs/en/configure/app/dev/live-reload.mdx

@@ -1,6 +1,5 @@
 ---
 title: liveReload
-configName: dev.liveReload
 ---
 
 # dev.liveReload
@@ -10,6 +9,6 @@ configName: dev.liveReload
 
 Whether to reload the page when source files are changed.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.liveReload" />

package/docs/en/configure/app/dev/progress-bar.mdx

@@ -1,6 +1,5 @@
 ---
 title: progressBar
-configName: dev.progressBar
 ---
 
 # dev.progressBar
@@ -19,6 +18,6 @@ type ProgressBar =
 
 Whether to display progress bar during compilation.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.progressBar" />

package/docs/en/configure/app/dev/setup-middlewares.mdx

@@ -1,6 +1,5 @@
 ---
 title: setupMiddlewares
-configName: dev.setupMiddlewares
 ---
 
 # dev.setupMiddlewares
@@ -50,6 +49,6 @@ type SetupMiddlewares = Array<
 
 Provides the ability to execute a custom function and apply custom middlewares.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.setupMiddlewares" />

package/docs/en/configure/app/dev/watch-files.mdx

@@ -1,6 +1,5 @@
 ---
 title: watchFiles
-configName: dev.watchFiles
 ---
 
 # dev.watchFiles
@@ -27,6 +26,6 @@ type WatchFilesConfig = WatchFiles | WatchFiles[];
 
 Watch specified files and directories for changes. When a file change is detected, it can trigger a page reload or restart the dev server.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.watchFiles" />

package/docs/en/configure/app/dev/write-to-disk.mdx

@@ -1,6 +1,5 @@
 ---
 title: writeToDisk
-configName: dev.writeToDisk
 ---
 
 # dev.writeToDisk
@@ -10,6 +9,6 @@ configName: dev.writeToDisk
 
 Controls whether the build output from development mode is written to disk.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.writeToDisk" />

package/docs/en/configure/app/html/app-icon.mdx

@@ -1,6 +1,5 @@
 ---
 title: appIcon
-configName: html.appIcon
 ---
 
 # html.appIcon
@@ -50,6 +49,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.appIcon" />

package/docs/en/configure/app/html/crossorigin.mdx

@@ -1,6 +1,5 @@
 ---
 title: crossorigin
-configName: html.crossorigin
 ---
 
 # html.crossorigin
@@ -10,6 +9,6 @@ configName: html.crossorigin
 
 Set the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) attribute of the `<script>` and `<style>` tags.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.crossorigin" />

package/docs/en/configure/app/html/favicon.mdx

@@ -1,6 +1,5 @@
 ---
 title: favicon
-configName: html.favicon
 ---
 
 # html.favicon
@@ -16,6 +15,6 @@ Set the favicon icon path for all pages, can be set as:
 
 After config this option, the favicon will be automatically copied to the dist directory during the compilation, and the corresponding `link` tag will be added to the HTML.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.favicon" />

package/docs/en/configure/app/html/inject.mdx

@@ -1,6 +1,5 @@
 ---
 title: inject
-configName: html.inject
 ---
 
 # html.inject
@@ -10,6 +9,6 @@ configName: html.inject
 
 Set the inject position of the `<script>` tag.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.inject" />

package/docs/en/configure/app/html/meta.mdx

@@ -1,6 +1,5 @@
 ---
 title: meta
-configName: html.meta
 ---
 
 # html.meta
@@ -24,6 +23,6 @@ const defaultMeta = {
 
 Configure the `<meta>` tag of the HTML.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.meta" />

package/docs/en/configure/app/html/mount-id.mdx

@@ -1,6 +1,5 @@
 ---
 title: mountId
-configName: html.mountId
 ---
 
 # html.mountId
@@ -10,6 +9,6 @@ configName: html.mountId
 
 By default, the `root` element is included in the HTML template for component mounting, and the element id can be modified through `mountId`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.mountId" />

package/docs/en/configure/app/html/output-structure.mdx

@@ -1,6 +1,5 @@
 ---
 title: outputStructure
-configName: html.outputStructure
 ---
 
 # html.outputStructure
@@ -10,6 +9,6 @@ configName: html.outputStructure
 
 Define the directory structure of the HTML output files.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.outputStructure" />

package/docs/en/configure/app/html/script-loading.mdx

@@ -1,6 +1,5 @@
 ---
 title: scriptLoading
-configName: html.scriptLoading
 ---
 
 # html.scriptLoading
@@ -10,6 +9,6 @@ configName: html.scriptLoading
 
 Used to set how `<script>` tags are loaded.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.scriptLoading" />

package/docs/en/configure/app/html/tags.mdx

@@ -1,6 +1,5 @@
 ---
 title: tags
-configName: html.tags
 ---
 
 # html.tags
@@ -15,6 +14,6 @@ type TagsConfig = HtmlTag | HtmlTagHandler | Array<HtmlTag | HtmlTagHandler>;
 
 Modifies the tags that are injected into the HTML page.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.tags" />

package/docs/en/configure/app/html/template-parameters.mdx

@@ -1,6 +1,5 @@
 ---
 title: templateParameters
-configName: html.templateParameters
 ---
 
 # html.templateParameters
@@ -33,6 +32,6 @@ type DefaultParameters = {
 
 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.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.templateParameters" />

package/docs/en/configure/app/html/template.mdx

@@ -1,6 +1,5 @@
 ---
 title: template
-configName: html.template
 ---
 
 # html.template
@@ -10,6 +9,6 @@ configName: html.template
 
 Specifies the file path for the HTML template, which can be a relative or absolute path.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.template" />

package/docs/en/configure/app/html/title.mdx

@@ -1,6 +1,5 @@
 ---
 title: title
-configName: html.title
 ---
 
 # html.title
@@ -18,6 +17,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.title" />

package/docs/en/configure/app/output/asset-prefix.mdx

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

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

@@ -1,6 +1,5 @@
 ---
 title: charset
-configName: output.charset
 ---
 
 # output.charset
@@ -10,6 +9,6 @@ configName: output.charset
 
 The `charset` config allows you to specify the [character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) for output files to ensure they are displayed correctly in different environments.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.charset" />

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

@@ -1,6 +1,5 @@
 ---
 title: copy
-configName: output.copy
 ---
 
 # output.copy
@@ -10,6 +9,6 @@ configName: output.copy
 
 Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin).
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.copy" />

package/docs/en/configure/app/output/css-modules.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssModules
-configName: output.cssModules
 ---
 
 # output.cssModules
@@ -48,6 +47,6 @@ const defaultCssModules = {
 
 For custom CSS Modules configuration.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.cssModules" />

package/docs/en/configure/app/output/data-uri-limit.mdx

@@ -1,6 +1,5 @@
 ---
 title: dataUriLimit
-configName: output.dataUriLimit
 ---
 
 # output.dataUriLimit
@@ -26,6 +25,6 @@ const defaultDatUriLimit = 10000;
 
 Set the size threshold to inline static assets such as images and fonts.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.dataUriLimit" />

package/docs/en/configure/app/output/dist-path.mdx

@@ -1,6 +1,5 @@
 ---
 title: distPath
-configName: output.distPath
 ---
 
 # output.distPath
@@ -43,6 +42,6 @@ const defaultDistPath = {
 
 Set the directory of the dist files. Modern.js will output files to the corresponding subdirectory according to the file type.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.distPath" />

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

@@ -1,6 +1,5 @@
 ---
 title: externals
-configName: output.externals
 ---
 
 # output.externals
@@ -20,6 +19,6 @@ type Externals =
 
 At build time, prevent some `import` dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.externals" />

package/docs/en/configure/app/output/filename-hash.mdx

@@ -1,6 +1,5 @@
 ---
 title: filenameHash
-configName: output.filenameHash
 ---
 
 # output.filenameHash
@@ -10,6 +9,6 @@ configName: output.filenameHash
 
 Whether to add a hash value to the filename after the 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="output.filenameHash" />

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

@@ -1,6 +1,5 @@
 ---
 title: filename
-configName: output.filename
 ---
 
 :::warning
@@ -57,6 +56,6 @@ const prodDefaultFilename = {
 
 Sets the filename of dist files.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.filename" />

package/docs/en/configure/app/output/inject-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: injectStyles
-configName: output.injectStyles
 ---
 
 # output.injectStyles
@@ -10,6 +9,6 @@ configName: output.injectStyles
 
 Whether to inject styles into DOM.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.injectStyles" />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineScripts
-configName: output.inlineScripts
 ---
 
 # output.inlineScripts
@@ -29,6 +28,6 @@ Whether to inline output scripts files (.js files) into HTML with `<script>` tag
 When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineScripts" />

package/docs/en/configure/app/output/inline-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineStyles
-configName: output.inlineStyles
 ---
 
 # output.inlineStyles
@@ -29,6 +28,6 @@ Whether to inline output style files (.css files) into HTML with `<style>` tags.
 When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineStyles" />

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" />