docs(deps): upgrade rspress 2.0.0-beta.5

.vscode/settings.json

@@ -53,5 +53,11 @@
   "[less]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "json.schemas": [
+    {
+      "fileMatch": ["**/_meta.json"],
+      "url": "./website/node_modules/rspress/meta-json-schema.json"
+    }
+  ]
 }

biome.json

@@ -49,6 +49,7 @@
   "linter": {
     "enabled": true,
     "ignore": [
+      "**/.rslib/*",
       "./tests/integration/**/*/src/*",
       "./tests/e2e/react-component/public/umd/*"
     ],

scripts/dictionary.txt

@@ -110,6 +110,8 @@ rspress
 rstack
 selfsign
 selfsigned
+shiki
+shikijs
 sirv
 sokra
 speedscope

tests/e2e/react-component/index.pw.test.ts

@@ -1,13 +1,7 @@
 import assert from 'node:assert';
-import fs from 'node:fs';
-import path from 'node:path';
 import { type Page, expect, test } from '@playwright/test';
 import { dev } from 'test-helper/rsbuild';
 
-function getCwdByExample(exampleName: string) {
-  return path.join(__dirname, '../../../examples', exampleName);
-}
-
 async function counterCompShouldWork(page: Page) {
   const h2El = page.locator('h2');
   await expect(h2El).toHaveText('Counter: 0');
@@ -101,14 +95,6 @@ test('should render example "react-component-bundle-false" successfully', async
 test('should render example "react-component-umd" successfully', async ({
   page,
 }) => {
-  const umdPath = path.resolve(
-    getCwdByExample('react-component-umd'),
-    './dist/umd/index.js',
-  );
-  fs.mkdirSync(path.resolve(__dirname, './public/umd'), { recursive: true });
-  fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.js'));
-  fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.css'));
-
   const rsbuild = await dev({
     cwd: __dirname,
     page,

website/docs/en/config/lib/dts.mdx

@@ -26,25 +26,25 @@ Configure the generation of the TypeScript declaration files.
 
 Declaration files generation is an optional feature, you can set `dts: true` to enable [bundleless declaration files](/guide/advanced/dts#bundleless-declaration-files) generation.
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'esm',
-      dts: true,
+      dts: true, // [!code highlight]
     },
   ],
 };
 ```
 
 If you want to disable declaration files generation, you can set `dts: false` or do not specify the `dts` option.
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'esm',
-      dts: false,
+      dts: false, // [!code highlight]
     },
   ],
 };
@@ -73,11 +73,12 @@ import { PackageManagerTabs } from '@theme';
 
 2. Set `dts.bundle` to `true`.
 
-```ts title="rslib.config.ts" {5-7}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'esm',
+      // [!code highlight:3]
       dts: {
         bundle: true,
       },
@@ -106,11 +107,12 @@ The default value follows the priority below:
 
 #### Example
 
-```ts title="rslib.config.ts" {5-7}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'esm',
+      // [!code highlight:3]
       dts: {
         distPath: './dist-types',
       },
@@ -143,11 +145,12 @@ By default, type errors will cause the build to fail.
 
 When `abortOnError` is set to `false` like below, the build will still succeed even if there are type issues in the code.
 
-```ts title="rslib.config.ts" {5-7}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'esm',
+      // [!code highlight:3]
       dts: {
         abortOnError: false,
       },

website/docs/en/config/lib/external-helpers.mdx

@@ -29,20 +29,21 @@ export default class FOO {
 
 When `externalHelpers` is disabled, the output JavaScript will inline helper functions.
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       syntax: 'es5',
-      externalHelpers: false,
+      externalHelpers: false, // [!code highlight]
     },
   ],
 };
 ```
 
 Below is the output JavaScript file, the highlighted code is the inlined helper functions:
 
-```js title="index.js" {1-18}
+```js title="index.js"
+// [!code highlight:18]
 function _class_call_check(instance, Constructor) {
   if (!(instance instanceof Constructor))
     throw new TypeError('Cannot call a class as a function');
@@ -79,20 +80,21 @@ export { src_FOO as default };
 
 When `externalHelpers` is enabled, the output JavaScript will import helper functions from the external module `@swc/helpers`.
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       syntax: 'es5',
-      externalHelpers: true,
+      externalHelpers: true, // [!code highlight]
     },
   ],
 };
 ```
 
 Below is the output JavaScript file, the highlighted code is importing helper functions:
 
-```js title="index.js" {1-2}
+```js title="index.js"
+// [!code highlight:2]
 import * as __WEBPACK_EXTERNAL_MODULE__swc_helpers_class_call_check__ from '@swc/helpers/_/_class_call_check';
 import * as __WEBPACK_EXTERNAL_MODULE__swc_helpers_create_class__ from '@swc/helpers/_/_create_class';
 var src_FOO = /*#__PURE__*/ (function () {

website/docs/en/config/lib/umd-name.mdx

@@ -15,12 +15,12 @@ The module name of the UMD bundle must not conflict with the global variable nam
 
 The UMD bundle will be mounted to `global.MyLibrary`.
 
-```ts title="rslib.config.ts" {5}
+```ts title="rslib.config.ts"
 export default {
   lib: [
     {
       format: 'umd',
-      umdName: 'MyLibrary',
+      umdName: 'MyLibrary', // [!code highlight]
     },
   ],
 };

website/docs/en/guide/advanced/json-files.mdx

@@ -243,17 +243,18 @@ If you want JSON / YAML / TOML files to be output to the distribution directory
 
 For example, the following configuration will output all JSON files in the `src` directory as-is:
 
-```ts title="rslib.config.ts" {7,11-12}
+```ts title="rslib.config.ts"
 export default defineConfig({
   lib: [
     {
       bundle: false,
       source: {
         entry: {
-          index: ['./src/**', '!./src/**/*.json'],
+          index: ['./src/**', '!./src/**/*.json'], // [!code highlight]
         },
       },
       output: {
+        // [!code highlight:2]
         copy: [{ from: './**/*.json', context: './src' }],
         externals: [/.*\.json$/],
       },

website/docs/en/guide/advanced/module-federation.mdx

@@ -30,14 +30,15 @@ import { PackageManagerTabs } from '@theme';
 
 Then register the plugin in the `rslib.config.ts` file:
 
-```ts title='rslib.config.ts' {8-43}
+```ts title='rslib.config.ts'
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
   lib: [
     // ... other format
+    // [!code highlight:37]
     {
       format: 'mf',
       output: {
@@ -117,14 +118,15 @@ with Hot Module Replacement (HMR).
 Set up the host app to consume the Rslib Module Federation library. Check out the [@module-federation/rsbuild-plugin
 ](https://www.npmjs.com/package/@module-federation/rsbuild-plugin) for more information.
 
-```ts title="rsbuild.config.ts" {8-24}
+```ts title="rsbuild.config.ts"
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [
     pluginReact(),
+    // [!code highlight:17]
     pluginModuleFederation({
       name: 'rsbuild_host',
       remotes: {
@@ -181,7 +183,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
 
 2. Then set up the Storybook configuration file `.storybook/main.ts`, specify the stories and addons, and set the framework with corresponding framework integration.
 
-   ```ts title=".storybook/main.ts" {18-38}
+   ```ts title=".storybook/main.ts"
    import { dirname, join } from 'node:path';
    import type { StorybookConfig } from 'storybook-react-rsbuild';
 
@@ -199,6 +201,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
        options: {},
      },
      addons: [
+       // [!code highlight:21]
        {
          name: getAbsolutePath('storybook-addon-rslib'),
          options: {
@@ -230,8 +233,9 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
 
 Import components from remote module.
 
-```ts title="stories/index.stories.tsx" {2-3}
+```ts title="stories/index.stories.tsx"
 import React from 'react';
+// [!code highlight:2]
 // Load your remote module here, Storybook will act as the host app.
 import { Counter } from 'rslib-module';
 

website/docs/en/guide/advanced/output-compatibility.mdx

@@ -35,8 +35,8 @@ And install [core-js-pure](https://www.npmjs.com/package/core-js-pure) as the ru
 
 Configure the Babel plugin with polyfill options, set the [targets](https://babeljs.io/docs/options#targets) field to specify the target browser version.
 
-```ts title="rslib.config.ts" {1,11-24}
-import { pluginBabel } from '@rsbuild/plugin-babel';
+```ts title="rslib.config.ts"
+import { pluginBabel } from '@rsbuild/plugin-babel'; // [!code highlight]
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
@@ -46,6 +46,7 @@ export default defineConfig({
     },
   ],
   plugins: [
+    // [!code highlight:14]
     pluginBabel({
       babelLoaderOptions: {
         plugins: [

website/docs/en/guide/basic/output-format.mdx

@@ -97,13 +97,14 @@ The following Rslib config is an example to build a UMD library.
 - `output.externals.react: 'React'`: specify the external dependency `react` could be accessed by `window.React`.
 - `runtime: 'classic'`: use the classic runtime of React to support applications that using React version under 18.
 
-```ts title="rslib.config.ts" {7-12,22}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
 export default defineConfig({
   lib: [
     {
+      // [!code highlight:6]
       format: 'umd',
       umdName: 'RslibUmdExample',
       output: {
@@ -122,7 +123,7 @@ export default defineConfig({
   plugins: [
     pluginReact({
       swcReactOptions: {
-        runtime: 'classic',
+        runtime: 'classic', // [!code highlight]
       },
     }),
   ],

website/docs/en/guide/solution/react.mdx

@@ -27,14 +27,15 @@ To compile React (JSX and TSX), you need to register the Rsbuild [React Plugin](
 
 For example, register in `rslib.config.ts`:
 
-```ts title="rslib.config.ts" {2,8-11}
+```ts title="rslib.config.ts"
 import { defineConfig } from '@rslib/core';
-import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginReact } from '@rsbuild/plugin-react'; // [!code highlight]
 
 export default defineConfig({
   lib: [
     // ...
   ],
+  // [!code highlight:4]
   output: {
     target: 'web',
   },
@@ -53,7 +54,7 @@ By default, Rsbuild uses the new JSX transform, which is `runtime: 'automatic'`.
 
 To change the JSX transform, you can pass the [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) option to the React plugin. For example, to use the classic runtime:
 
-```ts title="rslib.config.ts" {13-15}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
@@ -66,6 +67,7 @@ export default defineConfig({
   },
   plugins: [
     pluginReact({
+      // [!code highlight:3]
       swcReactOptions: {
         runtime: 'classic',
       },
@@ -83,7 +85,7 @@ When `runtime` is set to `'automatic'`, you can specify the import path of the J
 
 For example, when using [Emotion](https://emotion.sh/), you can set `importSource` to `'@emotion/react'`:
 
-```ts title="rslib.config.ts" {13-15}
+```ts title="rslib.config.ts"
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
@@ -96,6 +98,7 @@ export default defineConfig({
   },
   plugins: [
     pluginReact({
+      // [!code highlight:3]
       swcReactOptions: {
         importSource: '@emotion/react',
       },