docs: add environment API type

website/docs/en/api/javascript-api/environment-context.mdx

@@ -1,4 +1,8 @@
-# Environment Context
+# Environment Types
+
+This section describes some type definitions related to Rsbuild environment.
+
+## Environment Context
 
 Environment context is a read-only object that provides some context information about the current environment.
 
@@ -16,19 +20,19 @@ type EnvironmentContext = {
 };
 ```
 
-## name
+### name
 
 The unique name of the current environment is used to distinguish and locate the environment, corresponds to the key in the [environments](/config/environments) configuration.
 
 - **Type:** `string`
 
-## browserslist
+### browserslist
 
 The range of target browsers that the project is compatible with. See details in [Browserslist](/guide/advanced/browserslist).
 
 - **Type:** `string[]`
 
-## config
+### config
 
 The Rsbuild environment configuration after normalization.
 
@@ -49,13 +53,13 @@ type NormalizedEnvironmentConfig = DeepReadonly<{
 }>;
 ```
 
-## distPath
+### distPath
 
 The absolute path of the output directory, corresponding to the [output.distPath.root](/config/output/dist-path) config in `RsbuildConfig`.
 
 - **Type:** `string`
 
-## entry
+### entry
 
 The entry object from the [source.entry](/config/source/entry) option.
 
@@ -65,7 +69,7 @@ The entry object from the [source.entry](/config/source/entry) option.
 type RsbuildEntry = Record<string, string | string[] | EntryDescription>;
 ```
 
-## htmlPaths
+### htmlPaths
 
 The path information for all HTML assets.
 
@@ -77,7 +81,7 @@ This API will return an object, the key is the entry name and the value is the r
 type htmlPaths = Record<string, string>;
 ```
 
-## tsconfigPath
+### tsconfigPath
 
 The absolute path of the tsconfig.json file, or `undefined` if the tsconfig.json file does not exist in current project.
 
@@ -86,3 +90,77 @@ The absolute path of the tsconfig.json file, or `undefined` if the tsconfig.json
 ```ts
 type TsconfigPath = string | undefined;
 ```
+
+## Environment API
+
+Environment API provides a series of APIs related to the build environment.
+
+You can use environment API in [Rsbuild DevMiddleware](/config/dev/setup-middlewares) or [Custom Server](/api/javascript-api/instance#rsbuildcreatedevserver) to operate the build artifacts in a specific environment.
+
+```ts
+type EnvironmentAPI = {
+  [name: string]: {
+    getStats: () => Promise<Stats>;
+    loadBundle: <T = unknown>(entryName: string) => Promise<T>;
+    getTransformedHtml: (entryName: string) => Promise<string>;
+  };
+};
+```
+
+### getStats
+
+Get the build stats of current environment.
+
+- **Type:**
+
+```ts
+type GetStats = () => Promise<Stats>;
+```
+
+- **Example:**
+
+```ts
+const webStats = await environments.web.getStats();
+
+console.log(webStats.toJson({ all: false }));
+```
+
+### loadBundle
+
+Load and execute the build artifacts on the server side. This method returns the exports of the entry module.
+
+- **Type:**
+
+```ts
+/**
+ * @param entryName - Entry name, corresponding to a key in Rsbuild `source.entry`
+ * @returns The return value of the entry module
+ */
+type LoadBundle = <T = unknown>(entryName: string) => Promise<T>;
+```
+
+- **Example:**
+
+```ts
+// Load the build artifacts of main entry
+const result = await environments.node.loadBundle('main');
+```
+
+### getTransformedHtml
+
+Get the HTML template content after compilation and transformation.
+
+- **Type:**
+
+```ts
+type GetTransformedHtml = (entryName: string) => Promise<string>;
+```
+
+- **Example:**
+
+```ts
+// Get the HTML content of main entry
+const html = await environments.web.getTransformedHtml('main');
+```
+
+This method returns the complete HTML string, including all resources and content injected through HTML plugins.

website/docs/en/config/dev/setup-middlewares.mdx

@@ -8,26 +8,7 @@ type SetupMiddlewaresServer = {
     type: string,
     data?: string | boolean | Record<string, any>,
   ) => void;
-  environments: {
-    [name: string]: {
-      /**
-       * Get stats info about current environment.
-       */
-      getStats: () => Promise<Stats>;
-      /**
-       * Load and execute stats bundle in server.
-       *
-       * @param entryName - relate to Rsbuild's `source.entry`
-       * @returns the return value of entry module.
-       */
-      loadBundle: <T = unknown>(entryName: string) => Promise<T>;
-
-      /**
-       * Get the compiled HTML template.
-       */
-      getTransformedHtml: (entryName: string) => Promise<string>;
-    };
-  };
+  environments: EnvironmentAPI;
 };
 
 type SetupMiddlewares = Array<
@@ -84,7 +65,7 @@ export default {
 };
 ```
 
-- environments. Allow operations in the specified environment.
+- environments. Allow operations in the specified environment through the [environment API](/api/javascript-api/environment-context#environment-api).
 
 ```ts
 export default {

website/docs/en/guide/advanced/environments.mdx

@@ -242,7 +242,7 @@ const myPlugin = () => ({
 
 ## Environment API
 
-Rsbuild server provides a series of APIs related to the build environment. Users can operate the build artifacts in a specific environment on the server side through the Rsbuild environment API.
+Rsbuild server provides a series of APIs related to the build environment. Users can operate the build artifacts in a specific environment on the server side through the Rsbuild [environment API](/api/javascript-api/environment-context#environment-api).
 
 You can use the environment API in [Rsbuild DevMiddleware](/config/dev/setup-middlewares) or [Custom Server](/api/javascript-api/instance#rsbuildcreatedevserver).
 

website/docs/zh/api/javascript-api/environment-context.mdx

@@ -1,4 +1,8 @@
-# Environment Context
+# Environment Types
+
+本章节描述了 Rsbuild environment 相关的一些类型定义。
+
+## Environment Context
 
 Environment context 是一个只读对象，提供一些和当前环境有关的上下文信息。
 
@@ -16,19 +20,19 @@ type EnvironmentContext = {
 };
 ```
 
-## name
+### name
 
 当前环境的唯一名称，用于区分和定位环境，对应于 [environments](/config/environments) 配置中的 key。
 
 - **类型：** `string`
 
-## browserslist
+### browserslist
 
 项目兼容的目标浏览器范围。详情可参考 [设置浏览器范围](/guide/advanced/browserslist).
 
 - **类型：** `string[]`
 
-## config
+### config
 
 归一化后当前环境的 Rsbuild 配置
 
@@ -49,13 +53,13 @@ type NormalizedEnvironmentConfig = DeepReadonly<{
 }>;
 ```
 
-## distPath
+### distPath
 
 构建产物输出目录的绝对路径，对应 RsbuildConfig 中的 [output.distPath.root](/config/output/dist-path) 配置项。
 
 - **类型：** `string`
 
-## entry
+### entry
 
 构建入口对象，对应 [source.entry](/config/source/entry) 选项。
 
@@ -65,7 +69,7 @@ type NormalizedEnvironmentConfig = DeepReadonly<{
 type RsbuildEntry = Record<string, string | string[] | EntryDescription>;
 ```
 
-## htmlPaths
+### htmlPaths
 
 HTML 产物的路径信息。该 API 会返回一个对象，对象的 key 为 entry 名称，value 为 HTML 文件在产物目录下的相对路径。
 
@@ -75,7 +79,7 @@ HTML 产物的路径信息。该 API 会返回一个对象，对象的 key 为 e
 type htmlPaths = Record<string, string>;
 ```
 
-## tsconfigPath
+### tsconfigPath
 
 tsconfig.json 文件的绝对路径，若项目中不存在 tsconfig.json 文件，则为 undefined。
 
@@ -84,3 +88,77 @@ tsconfig.json 文件的绝对路径，若项目中不存在 tsconfig.json 文件
 ```ts
 type TsconfigPath = string | undefined;
 ```
+
+## Environment API
+
+Environment API 提供了一系列和构建环境相关的 API。
+
+你可以在 [Rsbuild DevMiddleware](/config/dev/setup-middlewares) 或[自定义 Server](/api/javascript-api/instance#rsbuildcreatedevserver) 中使用 environment API 对特定环境下的构建产物进行操作。
+
+```ts
+type EnvironmentAPI = {
+  [name: string]: {
+    getStats: () => Promise<Stats>;
+    loadBundle: <T = unknown>(entryName: string) => Promise<T>;
+    getTransformedHtml: (entryName: string) => Promise<string>;
+  };
+};
+```
+
+### getStats
+
+获取当前环境的产物信息。
+
+- **类型：**
+
+```ts
+type GetStats = () => Promise<Stats>;
+```
+
+- **示例：**
+
+```ts
+const webStats = await environments.web.getStats();
+
+console.log(webStats.toJson({ all: false }));
+```
+
+### loadBundle
+
+在服务端加载并执行构建产物。该方法会返回入口模块导出的内容。
+
+- **类型：**
+
+```ts
+/**
+ * @param entryName - 入口名称，和 Rsbuild `source.entry` 的某一个 key 值对应
+ * @returns 入口模块的返回值
+ */
+type LoadBundle = <T = unknown>(entryName: string) => Promise<T>;
+```
+
+- **示例：**
+
+```ts
+// 加载 main 入口的构建产物
+const result = await environments.node.loadBundle('main');
+```
+
+### getTransformedHtml
+
+获取经过编译和转换后的 HTML 模版内容。
+
+- **类型：**
+
+```ts
+type GetTransformedHtml = (entryName: string) => Promise<string>;
+```
+
+- **示例：**
+
+```ts
+// 获取 main 入口的 HTML 内容
+const html = await environments.web.getTransformedHtml('main');
+```
+
+该方法会返回完整的 HTML 字符串，包含了所有通过 HTML 插件注入的资源和内容。

website/docs/zh/config/dev/setup-middlewares.mdx

@@ -8,27 +8,7 @@ type SetupMiddlewaresServer = {
     type: string,
     data?: string | boolean | Record<string, any>,
   ) => void;
-  environments: {
-    [name: string]: {
-      /**
-       * 获取当前环境的构建信息
-       */
-      getStats: () => Promise<Stats>;
-
-      /**
-       * 在服务端加载并执行构建产物
-       *
-       * @param entryName - 入口名称，和 Rsbuild source.entry 的某一个 key 值对应
-       * @returns 入口模块的返回值
-       */
-      loadBundle: <T = unknown>(entryName: string) => Promise<T>;
-
-      /**
-       * 获取编译后的 HTML 模版内容
-       */
-      getTransformedHtml: (entryName: string) => Promise<string>;
-    };
-  };
+  environments: EnvironmentAPI;
 };
 
 type SetupMiddlewares = Array<
@@ -85,7 +65,7 @@ export default {
 };
 ```
 
-- environments。允许对指定的 environment 产物进行操作。
+- environments。允许通过 [environment API](/api/javascript-api/environment-context#environment-api) 对指定的 environment 产物进行操作。
 
 ```ts
 export default {

website/docs/zh/guide/advanced/environments.mdx

@@ -242,7 +242,7 @@ const myPlugin = () => ({
 
 ## Environment API
 
-Rsbuild Server 提供了一系列和构建环境相关的 API，用户可通过 Rsbuild environment API 在服务器端操作特定环境下的构建产物。
+Rsbuild Server 提供了一系列和构建环境相关的 API，用户可通过 Rsbuild [environment API](/api/javascript-api/environment-context#environment-api) 在服务器端操作特定环境下的构建产物。
 
 你可以在 [Rsbuild DevMiddleware](/config/dev/setup-middlewares) 或[自定义 Server](/api/javascript-api/instance#rsbuildcreatedevserver) 中使用 environment API。