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

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

@@ -1,6 +1,5 @@
 ---
 title: profile
-configName: performance.profile
 ---
 
 # performance.profile
@@ -10,6 +9,6 @@ configName: performance.profile
 
 是否捕获每个模块的耗时信息，对应 Rspack 的 [profile](https://webpack.js.org/configuration/other-options/#profile) 配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.profile" />

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

@@ -1,6 +1,5 @@
 ---
 title: removeConsole
-configName: performance.removeConsole
 ---
 
 # performance.removeConsole
@@ -10,6 +9,6 @@ configName: performance.removeConsole
 
 在生产环境构建时，是否自动移除代码中的 `console.[methodName]`。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeConsole" />

package/docs/zh/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
 
 是否移除 [moment.js](https://momentjs.com/) 的语言包文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeMomentLocale" />

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

@@ -1,6 +1,5 @@
 ---
 title: nonce
-configName: security.nonce
 ---
 
 # security.nonce
@@ -15,6 +14,6 @@ type Nonce = string;
 
 为 HTML 所引入的脚本资源添加随机属性值 nonce，使浏览器在解析到带有匹配 nonce 值的内联脚本时，能判断该脚本是否能执行。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="security.nonce" />

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

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

package/docs/zh/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/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="server.port" />

package/docs/zh/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` 用于控制 `tsconfig.json` 中的 `paths` 选项与打包工具的 `alias` 选项的优先级。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.aliasStrategy" />

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

@@ -1,6 +1,5 @@
 ---
 title: alias
-configName: source.alias
 ---
 
 # source.alias
@@ -19,6 +18,6 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
 对于 TypeScript 项目，你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) 即可，Rsbuild 会自动识别它，不需要额外配置 `source.alias` 字段，详见 [「路径别名」](https://modernjs.dev/guides/basic-features/alias.html)。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.alias" />

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

@@ -1,6 +1,5 @@
 ---
 title: decorators
-configName: source.decorators
 ---
 
 # source.decorators
@@ -23,6 +22,6 @@ const defaultDecorators = {
 
 用于配置装饰器语法。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.decorators" />

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

@@ -1,6 +1,5 @@
 ---
 title: define
-configName: source.define
 ---
 
 # source.define
@@ -16,6 +15,6 @@ const defaultDefine = {
 
 构建时将代码中的变量替换成其它值或者表达式，可以用于在代码逻辑中区分开发环境与生产环境等场景。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.define" />

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

@@ -1,6 +1,5 @@
 ---
 title: exclude
-configName: source.exclude
 ---
 
 # source.exclude
@@ -10,6 +9,6 @@ configName: source.exclude
 
 指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.exclude" />

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

@@ -1,6 +1,5 @@
 ---
 title: include
-configName: source.include
 ---
 
 # source.include
@@ -21,6 +20,6 @@ const defaultInclude = [
 
 `source.include` 用于指定额外需要编译的 JavaScript 文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.include" />

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

@@ -1,6 +1,5 @@
 ---
 title: preEntry
-configName: source.preEntry
 ---
 
 # source.preEntry
@@ -10,6 +9,6 @@ configName: source.preEntry
 
 在每个页面的入口文件前添加一段代码，这段代码会早于页面的代码执行，因此可以用于执行一些全局的代码逻辑，比如注入 polyfill、设置全局样式等。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.preEntry" />

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

@@ -1,6 +1,5 @@
 ---
 title: transformImport
-configName: source.transformImport
 ---
 
 # source.transformImport
@@ -59,9 +58,9 @@ const defaultArcoConfig = [
 当你添加了 `antd` 或 `@arco-design/web-react` 相关的配置时，优先级会高于上述默认配置。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.transformImport" />
 
 ### 禁用默认配置
 

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

@@ -1,6 +1,5 @@
 ---
 title: cssExtract
-configName: tools.cssExtract
 ---
 
 # tools.cssExtract
@@ -30,6 +29,6 @@ const defaultOptions = {
 
 通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssExtract" />

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

@@ -1,6 +1,5 @@
 ---
 title: cssLoader
-configName: tools.cssLoader
 ---
 
 # tools.cssLoader
@@ -17,6 +16,6 @@ const defaultOptions = {
 
 修改 [css-loader](https://github.com/webpack-contrib/css-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssLoader" />

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

@@ -1,6 +1,5 @@
 ---
 title: htmlPlugin
-configName: tools.htmlPlugin
 ---
 
 # tools.htmlPlugin
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 或 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.htmlPlugin" />

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

@@ -1,6 +1,5 @@
 ---
 title: lightningcssLoader
-configName: tools.lightningcssLoader
 ---
 
 # tools.lightningcssLoader
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.lightningcssLoader" />

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

@@ -1,6 +1,5 @@
 ---
 title: postcss
-configName: tools.postcss
 ---
 
 # tools.postcss
@@ -35,6 +34,6 @@ Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-lo
 
 需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.postcss" />

package/docs/zh/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` 选项用于修改 [Rspack](https://rspack.dev/) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.rspack" />

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

@@ -1,6 +1,5 @@
 ---
 title: styleLoader
-configName: tools.styleLoader
 ---
 
 # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
 
 通过 `tools.styleLoader` 可以设置 [style-loader](https://github.com/webpack-contrib/style-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.styleLoader" />

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

@@ -118,8 +118,9 @@ import { Radio } from 'antd';
 
 然后将 UI 最顶部进行修改，增加一组单选框
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   return (
     <div>
       <div className="h-16 p-2 flex items-center justify-center">
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 最后在 Layout 组件里增加局部状态和相关逻辑：
 
-```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/zh/tutorials/first-app/c05-loader.mdx

@@ -56,11 +56,13 @@ Data Loader 并非只为 SSR 工作。在 CSR 项目中，Data Loader 也可以
 
 Modern.js 也提供了一个叫 `useLoaderData` 的 hooks API，我们修改 `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/package.json

@@ -15,17 +15,19 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20250515160310",
+  "version": "0.0.0-nightly-20250518160324",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "0.0.0-nightly-20250515160310"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20250518160324"
   },
   "devDependencies": {
-    "@rspress/shared": "1.43.11",
+    "@rsbuild/plugin-sass": "1.3.1",
+    "@shikijs/transformers": "^3.4.1",
+    "@rspress/shared": "2.0.0-beta.5",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2.5.1",
@@ -33,7 +35,7 @@
     "fs-extra": "^10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rspress": "1.43.11",
+    "rspress": "2.0.0-beta.5",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },

package/rspress.config.ts

@@ -1,4 +1,6 @@
 import path from 'path';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { transformerNotationHighlight } from '@shikijs/transformers';
 import { defineConfig } from 'rspress/config';
 
 const docPath = path.join(__dirname, 'docs');
@@ -12,7 +14,9 @@ export default defineConfig({
   themeDir: path.join(__dirname, 'src'),
   markdown: {
     checkDeadLinks: true,
-    experimentalMdxRs: true,
+    shiki: {
+      transformers: [transformerNotationHighlight()],
+    },
   },
   search: {
     codeBlocks: true,
@@ -91,5 +95,6 @@ export default defineConfig({
         '@site': require('path').resolve(__dirname),
       },
     },
+    plugins: [pluginSass()],
   },
 });

package/src/components/RsbuildLink/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLang } from 'rspress/runtime';
 
-const RsbuildLInk = ({ configName }: { configName: string }) => {
+const RsbuildLink = ({ configName }: { configName: string }) => {
   const lang = useLang();
   const href = `https://rsbuild.dev/${lang === 'zh' ? 'zh/' : ''}config/${configName
     .split('.')
@@ -16,4 +16,4 @@ const RsbuildLInk = ({ configName }: { configName: string }) => {
   );
 };
 
-export default RsbuildLInk;
+export default RsbuildLink;

package/src/index.ts

@@ -1,9 +1,5 @@
-import Theme from 'rspress/theme';
 import HomeLayout from './pages';
 
-export default {
-  ...Theme,
-  HomeLayout,
-};
+export { HomeLayout };
 
 export * from 'rspress/theme';

package/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Helmet, useLocation } from 'rspress/runtime';
+import { Head, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
@@ -94,7 +94,7 @@ export default function Home() {
 
   return (
     <div>
-      <Helmet>
+      <Head>
         <html className="dark" />
         <script>window.MODERN_THEME = 'dark';</script>
         <style type="text/css">{`
@@ -102,7 +102,7 @@ export default function Home() {
             display: none!important;
           }
         `}</style>
-      </Helmet>
+      </Head>
       <HomepageHeader />
       <main className={styles['homepage-main']}>
         <FeatureLayout>