docs(json): add documents for YAML and TOML file support (#873)

Co-authored-by: Timeless0911 <[email protected]>

Author: oljc

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

@@ -1,6 +1,6 @@
 # Import JSON files
 
-Rslib supports import JSON files in code.
+Rslib supports importing JSON files in code, and also supports importing [YAML](https://yaml.org/) and [TOML](https://toml.io/en/) files and converting them to JSON format.
 
 ## JSON file
 
@@ -104,3 +104,118 @@ export { __webpack_exports__items as items, __webpack_exports__name as name };
 </Tab>
 
 </Tabs>
+
+## YAML file
+
+[YAML](https://yaml.org/) is a data serialization language commonly used for writing configuration files.
+
+By adding the [@rsbuild/plugin-yaml](https://github.com/rspack-contrib/rsbuild-plugin-yaml) plugin, you can import `.yaml` or `.yml` files in JavaScript and they will be automatically converted to JavaScript objects.
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-yaml -D" />
+
+### Register plugin
+
+You can register the plugin in the `rslib.config.ts` file:
+
+```ts title="rslib.config.ts"
+import { pluginYaml } from '@rsbuild/plugin-yaml';
+
+export default {
+  plugins: [pluginYaml()],
+};
+```
+
+### Example
+
+<Tabs>
+  <Tab label="src/index.ts">
+
+```js
+import { name } from './example.yaml';
+
+console.log(name); // 'foo';
+```
+
+  </Tab>
+  <Tab label="src/example.yaml">
+
+```yaml
+name: foo
+items:
+  - 1
+  - 2
+```
+
+  </Tab>
+</Tabs>
+
+## TOML file
+
+[TOML](https://toml.io/) is a semantically explicit, easy-to-read configuration file format.
+
+By adding the [@rsbuild/plugin-toml](https://github.com/rspack-contrib/rsbuild-plugin-toml) plugin, you can import `.toml` files in JavaScript and it will be automatically converted to JavaScript objects.
+
+<PackageManagerTabs command="add @rsbuild/plugin-toml -D" />
+
+### Register plugin
+
+You can register the plugin in the `rslib.config.ts` file:
+
+```ts title="rslib.config.ts"
+import { pluginToml } from '@rsbuild/plugin-toml';
+
+export default {
+  plugins: [pluginToml()],
+};
+```
+
+### Example
+
+<Tabs>
+  <Tab label="src/index.ts">
+
+```js
+import { name } from './example.toml';
+
+console.log(name); // 'foo';
+```
+
+  </Tab>
+  <Tab label="src/example.toml">
+
+```toml
+name = "foo"
+items = [1, 2]
+```
+
+  </Tab>
+</Tabs>
+
+## Type declaration
+
+When you import YAML or Toml files in TypeScript code, please create a `src/env.d.ts` file in your project and add the corresponding type declarations.
+
+- Method 1: If the `@rslib/core` package is installed, you can reference the **preset types** provided by `@rslib/core`:
+
+```ts title="src/env.d.ts"
+/// <reference types="@rslib/core/types" />
+```
+
+- Method 2: Manually add the required type declarations:
+
+```ts title="src/env.d.ts"
+declare module '*.yaml' {
+  const content: Record<string, any>;
+  export default content;
+}
+declare module '*.yml' {
+  const content: Record<string, any>;
+  export default content;
+}
+declare module '*.toml' {
+  const content: Record<string, any>;
+  export default content;
+}
+```

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

@@ -1,6 +1,6 @@
 # 引用 JSON 文件
 
-Rslib 支持在代码中引用 JSON 文件。
+Rslib 支持在代码中引用 JSON 文件，同时也支持引用 [YAML](https://yaml.org/) 和 [TOML](https://toml.io/cn/) 文件并将其转换为 JSON 格式。
 
 ## JSON 文件
 
@@ -101,3 +101,118 @@ export { __webpack_exports__items as items, __webpack_exports__name as name };
 </Tab>
 
 </Tabs>
+
+## YAML 文件
+
+[YAML](https://yaml.org/) 是一种数据序列化语言，通常用于编写配置文件。
+
+通过添加 [@rsbuild/plugin-yaml](https://github.com/rspack-contrib/rsbuild-plugin-yaml) 插件，你可以在 JavaScript 中引用 `.yaml` 或 `.yml` 文件，它们会被自动转换为 JavaScript 对象。
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-yaml -D" />
+
+### 注册插件
+
+你可以在 `rslib.config.ts` 文件中注册插件：
+
+```ts title="rslib.config.ts"
+import { pluginYaml } from '@rsbuild/plugin-yaml';
+
+export default {
+  plugins: [pluginYaml()],
+};
+```
+
+### 示例
+
+<Tabs>
+  <Tab label="src/index.ts">
+
+```js
+import { name } from './example.yaml';
+
+console.log(name); // 'foo';
+```
+
+</Tab>
+<Tab label="src/example.yaml">
+
+```yaml
+name: foo
+items:
+  - 1
+  - 2
+```
+
+  </Tab>
+</Tabs>
+
+## TOML 文件
+
+[TOML](https://toml.io/cn/) 是一种数据序列化语言，通常用于编写配置文件。
+
+通过添加 [@rsbuild/plugin-toml](https://github.com/rspack-contrib/rsbuild-plugin-toml) 插件，你可以在 JavaScript 中引用 `.toml` 文件，它们会被自动转换为 JavaScript 对象。
+
+<PackageManagerTabs command="add @rsbuild/plugin-toml -D" />
+
+### 注册插件
+
+你可以在 `rslib.config.ts` 文件中注册插件：
+
+```ts title="rslib.config.ts"
+import { pluginToml } from '@rsbuild/plugin-toml';
+
+export default {
+  plugins: [pluginToml()],
+};
+```
+
+### 示例
+
+<Tabs>
+  <Tab label="src/index.ts">
+
+```js
+import { name } from './example.toml';
+
+console.log(name); // 'foo';
+```
+
+  </Tab>
+  <Tab label="src/example.toml">
+
+```toml
+name = "foo"
+items = [1, 2]
+```
+
+  </Tab>
+</Tabs>
+
+## 类型声明
+
+当你在 TypeScript 代码中引用 YAML 或 TOML 文件时，请在项目中创建 src/env.d.ts 文件，并添加相应的类型声明。
+
+- 方法一：如果项目里安装了 `@rslib/core` 包，你可以直接引用 `@rslib/core` 提供的**预设类型**：
+
+```ts title="src/env.d.ts"
+/// <reference types="@rslib/core/types" />
+```
+
+- 方法二：手动添加需要的类型声明：
+
+```ts title="src/env.d.ts"
+declare module '*.yaml' {
+  const content: Record<string, any>;
+  export default content;
+}
+declare module '*.yml' {
+  const content: Record<string, any>;
+  export default content;
+}
+declare module '*.toml' {
+  const content: Record<string, any>;
+  export default content;
+}
+```