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

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/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
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 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" />

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

@@ -1,6 +1,5 @@
 ---
 title: lightningcssLoader
-configName: tools.lightningcssLoader
 ---
 
 # tools.lightningcssLoader
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.lightningcssLoader" />

package/docs/en/configure/app/tools/postcss.mdx

@@ -1,6 +1,5 @@
 ---
 title: postcss
-configName: tools.postcss
 ---
 
 # tools.postcss
@@ -34,6 +33,6 @@ Modern.js integrates PostCSS by default, you can configure [postcss-loader](http
 
 It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.postcss" />

package/docs/en/configure/app/tools/rspack.mdx

@@ -1,6 +1,5 @@
 ---
 title: rspack
-configName: tools.rspack
 ---
 
 # tools.rspack
@@ -10,6 +9,6 @@ configName: tools.rspack
 
 `tools.rspack` is used to configure [Rspack](https://rspack.dev/).
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.rspack" />

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

@@ -1,6 +1,5 @@
 ---
 title: styleLoader
-configName: tools.styleLoader
 ---
 
 # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
 
 The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.styleLoader" />

package/docs/en/tutorials/first-app/c04-routes.mdx

@@ -118,10 +118,11 @@ import { Radio } from 'antd';
 
 Then modify the top of the UI to add a set of radio group:
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
   return (
     <div>
+      // [!code highlight:6]
       <div className="h-16 p-2 flex items-center justify-center">
         <Radio.Group onChange={handleSetList} value={currentList}>
           <Radio value="/">All</Radio>
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 Finally, add local state and related logic to the Layout component:
 
-```tsx {2-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   const navigate = useNavigate();
   const location = useLocation();
   const [currentList, setList] = useState(location.pathname || '/');

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -56,11 +56,13 @@ Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avo
 
 Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
-```tsx {1,2,5,13}
+```tsx
+// [!code highlight:2]
 import { useLoaderData } from '@modern-js/runtime/router';
 import type { LoaderData } from './page.data';
 
 function Index() {
+  // [!code highlight:1]
   const { data } = useLoaderData() as LoaderData;
 
   return (
@@ -68,6 +70,7 @@ function Index() {
       <Helmet>
         <title>All</title>
       </Helmet>
+      // [!code highlight:1]
       <List
         dataSource={data}
         renderItem={info => <Item key={info.name} info={info} />}

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

@@ -10,11 +10,11 @@ sidebar_position: 2
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
 
-```bash {3,4}
+```bash
 .
 └── routes
-    ├── layout.tsx
-    ├── page.tsx
+    ├── layout.tsx  # [!code highlight]
+    ├── page.tsx # [!code highlight]
     └── user
         ├── layout.tsx
         └── page.tsx

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

@@ -1,5 +1,5 @@
-import RsbuildLInk from '@site/src/components/RsbuildLink';
+import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info
-该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLInk configName={frontmatter.configName}/>。
+该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLink configName={props.configName}/>。
 :::

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

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: dev.assetPrefix
 ---
 
 # dev.assetPrefix
@@ -10,9 +9,9 @@ configName: dev.assetPrefix
 
 此配置项用于设置 **开发模式** 下的静态资源 URL 前缀。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.assetPrefix" />
 
 :::warning
 请注意，该配置项仅适用于开发模式。在生产模式下，请使用 [output.assetPrefix](/configure/app/output/asset-prefix) 配置项进行设置。

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

@@ -1,6 +1,5 @@
 ---
 title: client
-configName: dev.client
 ---
 
 # dev.client
@@ -41,6 +40,6 @@ const defaultConfig = {
 
 配置 Modern.js 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.client" />

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

@@ -1,6 +1,5 @@
 ---
 title: hmr
-configName: dev.hmr
 ---
 
 # dev.hmr
@@ -10,6 +9,6 @@ configName: dev.hmr
 
 是否开启 Hot Module Replacement 热更新能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.hmr" />

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

@@ -1,6 +1,5 @@
 ---
 title: liveReload
-configName: dev.liveReload
 ---
 
 # dev.liveReload
@@ -10,6 +9,6 @@ configName: dev.liveReload
 
 是否在源文件变更时自动刷新页面。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.liveReload" />

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

@@ -1,6 +1,5 @@
 ---
 title: progressBar
-configName: dev.progressBar
 ---
 
 # dev.progressBar
@@ -19,6 +18,6 @@ type ProgressBar =
 
 是否在编译过程中展示进度条。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.progressBar" />

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

@@ -1,6 +1,5 @@
 ---
 title: setupMiddlewares
-configName: dev.setupMiddlewares
 ---
 
 # dev.setupMiddlewares
@@ -51,6 +50,6 @@ type SetupMiddlewares = Array<
 
 提供执行自定义函数和应用自定义中间件的能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.setupMiddlewares" />