From 0c0ee3fb2dcc3ce2c0571c8938fefaa6edccf1ae Mon Sep 17 00:00:00 2001
From: "gaoyuan.1226" <gaoyuan.1226@bytedance.com>
Date: Sun, 29 Sep 2024 12:56:55 +0800
Subject: [PATCH] docs: support function handler in progress plugin

---
 .../en/plugins/webpack/progress-plugin.mdx    | 29 +++++++++++++++----
 .../zh/plugins/webpack/progress-plugin.mdx    | 29 +++++++++++++++----
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/website/docs/en/plugins/webpack/progress-plugin.mdx b/website/docs/en/plugins/webpack/progress-plugin.mdx
index 6ef659f9365..732ff6cca1a 100644
--- a/website/docs/en/plugins/webpack/progress-plugin.mdx
+++ b/website/docs/en/plugins/webpack/progress-plugin.mdx
@@ -12,21 +12,40 @@ new rspack.ProgressPlugin(options);
 
 ## Options
 
-### prefix
+### Function
+
+Provide a handler function which will be called when hooks report progress. `handler` function arguments:
+
+- `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation
+- `message`: a short description of the currently-executing hook
+- `...args`: zero or more additional strings describing the current progress
+
+```js
+const handler = (percentage, message, ...args) => {
+  // e.g. Output each progress message directly to the console:
+  console.info(percentage, message, ...args);
+};
+
+new rspack.ProgressPlugin(handler);
+```
+
+### Object
+
+#### prefix
 
 - **Type:** `string`
 - **Default:** `'Rspack'`
 
 The text will be displayed before the progress bar.
 
-### profile
+#### profile
 
 - **Type:** `boolean`
 - **Default:** `false`
 
 Tells `ProgressPlugin` to collect profile data for progress steps.
 
-### template
+#### template
 
 - **Type:** `string`
 - **Default:** `● {prefix:.bold} {bar:25.green/white.dim} ({percent}%) {wide_msg:.dim}`
@@ -35,7 +54,7 @@ The template of progress bar.
 
 Also see [indicatif::ProgressBar::with_template](https://docs.rs/indicatif/latest/indicatif/style/struct.ProgressStyle.html#method.with_template).
 
-### tick
+#### tick
 
 - **Type:** `string | string[] | undefined`
 - **Default:** `undefined`
@@ -44,7 +63,7 @@ The tick string sequence for spinners, if it's string then it will be split into
 
 Also see [indicatif::ProgressBar::tick_strings](https://docs.rs/indicatif/latest/indicatif/style/struct.ProgressStyle.html#method.tick_strings).
 
-### progressChars
+#### progressChars
 
 - **Type:** `string`
 - **Default:** `━━`
diff --git a/website/docs/zh/plugins/webpack/progress-plugin.mdx b/website/docs/zh/plugins/webpack/progress-plugin.mdx
index 9fbf1c2f4a3..914994fadf7 100644
--- a/website/docs/zh/plugins/webpack/progress-plugin.mdx
+++ b/website/docs/zh/plugins/webpack/progress-plugin.mdx
@@ -12,21 +12,40 @@ new rspack.ProgressPlugin(options);
 
 ## 选项
 
-### prefix
+### Function
+
+提供一个处理函数，当 hooks 进度更新时将调用该函数。`handler` 函数参数为：
+
+- `percentage`：0 到 1 之间的数字，表示编译的完成百分比
+- `message`：关于当前执行 hook 的简短描述
+- `...args`：零个或多个描述当前进度的附加字符串
+
+```js
+const handler = (percentage, message, ...args) => {
+  // e.g. Output each progress message directly to the console:
+  console.info(percentage, message, ...args);
+};
+
+new rspack.ProgressPlugin(handler);
+```
+
+### Object
+
+#### prefix
 
 - **Type:** `string`
 - **Default:** `'Rspack'`
 
 进度条前显示文案。
 
-### profile
+#### profile
 
 - **Type:** `boolean`
 - **Default:** `false`
 
 是否收集进度步骤的性能数据。
 
-### template
+#### template
 
 - **Type:** `string`
 - **Default:** `● {prefix:.bold} {bar:25.green/white.dim} ({percent}%) {wide_msg:.dim}`
@@ -35,7 +54,7 @@ new rspack.ProgressPlugin(options);
 
 详情查阅 [indicatif::ProgressBar::with_template](https://docs.rs/indicatif/latest/indicatif/style/struct.ProgressStyle.html#method.with_template).
 
-### tick
+#### tick
 
 - **Type:** `string | string[] | undefined`
 - **Default:** `undefined`
@@ -44,7 +63,7 @@ Spinner 变化的字符串序列，如果是字符串，则会被拆分为字符
 
 详情查阅 [indicatif::ProgressBar::tick_strings](https://docs.rs/indicatif/latest/indicatif/style/struct.ProgressStyle.html#method.tick_strings).
 
-### progressChars
+#### progressChars
 
 - **Type:** `string`
 - **Default:** `━━`