feat: add progress reporting and custom message handling to useWebWorker 🐹

CoderSerio · CoderSerio · commit 15e09c7f6078 · 2025-04-08T03:22:27.000+08:00
diff --git a/README.md b/README.md
@@ -15,9 +15,9 @@ A React hook for easy Web Worker integration with TypeScript support.
 - ⚡ Non-blocking UI operations
 - 📦 Zero dependencies
 - ⏱️ Built-in timeout handling
-- 🎯 Function-based worker creation
 - 🔍 Comprehensive error handling
-- 📝 No additional files needed - write your worker logic inline
+- 📊 Progress reporting and custom message passing
+- 🎯 Function-based worker creation - No additional files needed - write your worker logic inline
 
 ### Installation
 
@@ -33,24 +33,46 @@ yarn add @atom-universe/use-web-worker
 
 ```tsx
 import useWebWorker from '@atom-universe/use-web-worker';
+import { useState } from 'react';
 
 function Example() {
+  const [progress, setProgress] = useState(0);
+
   const [workerFn, workerStatus, workerTerminate] = useWebWorker(
-    data => {
-      // Your computation logic here
-      return data.reverse();
+    (data, workerContext) => {
+      const total = data.length;
+      const result = [];
+
+      for (let i = 0; i < total; i++) {
+        result.push(data[i] * 2);
+        // Report progress every 10%
+        if (i % Math.floor(total / 10) === 0) {
+          const percentComplete = Math.floor((i / total) * 100);
+          workerContext.postMessage(['PROGRESS', { percent: percentComplete }]);
+        }
+      }
+
+      return result;
     },
     {
       timeout: 30000, // 30 seconds timeout
       onError: error => {
         console.error('Computation error:', error);
       },
+      onMessage: message => {
+        // Handle progress updates
+        if (message.type === 'PROGRESS') {
+          setProgress(message.data.percent);
+        }
+      },
     }
   );
 
   const handleProcess = async () => {
     try {
-      const result = await workerFn([1, 2, 3]);
+      // Generate array with 1000 items
+      const data = Array.from({ length: 1000 }, (_, i) => i);
+      const result = await workerFn(data);
       console.log('Result:', result);
     } catch (error) {
       console.error('Failed to process:', error);
@@ -66,6 +88,28 @@ function Example() {
       {workerStatus === 'RUNNING' && (
         <button onClick={() => workerTerminate('PENDING')}>Cancel</button>
       )}
+
+      {workerStatus === 'RUNNING' && (
+        <div>
+          <p>Progress: {progress}%</p>
+          <div
+            style={{
+              width: '100%',
+              backgroundColor: '#e9ecef',
+              borderRadius: '4px',
+              height: '20px',
+            }}
+          >
+            <div
+              style={{
+                width: `${progress}%`,
+                backgroundColor: '#007bff',
+                height: '100%',
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -81,6 +125,7 @@ function useWebWorker<T extends (...args: any[]) => any>(
     dependencies?: string[]; // External dependencies
     localDependencies?: Function[]; // Local function dependencies
     onError?: (error: Error) => void; // Error callback
+    onMessage?: (message: { type: string; data: any }) => void; // Custom message handler
   }
 ): [
   (...args: Parameters<T>) => Promise<ReturnType<T>>, // Worker function
diff --git a/README_CN.md b/README_CN.md
@@ -15,9 +15,9 @@
 - ⚡ 不阻塞 UI 操作
 - 📦 零依赖
 - ⏱️ 内置超时处理
-- 🎯 基于函数的 Worker 创建
 - 🔍 全面的错误处理
-- 📝 无需额外文件 - 直接在代码中编写 Worker 逻辑
+- 📊 进度报告和自定义消息传递
+- 🎯 基于函数的 Worker 创建 - 直接在代码中编写 Worker 逻辑
 
 ## 安装
 
@@ -33,24 +33,46 @@ yarn add @atom-universe/use-web-worker
 
 ```tsx
 import useWebWorker from '@atom-universe/use-web-worker';
+import { useState } from 'react';
 
 function Example() {
+  const [progress, setProgress] = useState(0);
+
   const [workerFn, workerStatus, workerTerminate] = useWebWorker(
-    data => {
-      // 你的计算逻辑
-      return data.reverse();
+    (data, workerContext) => {
+      const total = data.length;
+      const result = [];
+
+      for (let i = 0; i < total; i++) {
+        result.push(data[i] * 2);
+        // 每完成10%上报一次进度
+        if (i % Math.floor(total / 10) === 0) {
+          const percentComplete = Math.floor((i / total) * 100);
+          workerContext.postMessage(['PROGRESS', { percent: percentComplete }]);
+        }
+      }
+
+      return result;
     },
     {
       timeout: 30000, // 30 秒超时
       onError: error => {
         console.error('计算错误:', error);
       },
+      onMessage: message => {
+        // 处理进度更新
+        if (message.type === 'PROGRESS') {
+          setProgress(message.data.percent);
+        }
+      },
     }
   );
 
   const handleProcess = async () => {
     try {
-      const result = await workerFn([1, 2, 3]);
+      // 生成包含1000个元素的数组
+      const data = Array.from({ length: 1000 }, (_, i) => i);
+      const result = await workerFn(data);
       console.log('结果:', result);
     } catch (error) {
       console.error('处理失败:', error);
@@ -66,6 +88,28 @@ function Example() {
       {workerStatus === 'RUNNING' && (
         <button onClick={() => workerTerminate('PENDING')}>取消</button>
       )}
+
+      {workerStatus === 'RUNNING' && (
+        <div>
+          <p>进度: {progress}%</p>
+          <div
+            style={{
+              width: '100%',
+              backgroundColor: '#e9ecef',
+              borderRadius: '4px',
+              height: '20px',
+            }}
+          >
+            <div
+              style={{
+                width: `${progress}%`,
+                backgroundColor: '#007bff',
+                height: '100%',
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -81,14 +125,11 @@ function useWebWorker<T extends (...args: any[]) => any>(
     dependencies?: string[]; // 外部依赖
     localDependencies?: Function[]; // 本地函数依赖
     onError?: (error: Error) => void; // 错误回调
+    onMessage?: (message: { type: string; data: any }) => void; // 自定义消息处理器
   }
 ): [
   (...args: Parameters<T>) => Promise<ReturnType<T>>, // Worker 函数
   'PENDING' | 'RUNNING' | 'SUCCESS' | 'ERROR' | 'TIMEOUT_EXPIRED', // 状态
   (status?: WebWorkerStatus) => void, // 终止函数
 ];
 ```
-
-## 开源协议
-
-MIT
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,8 +28,8 @@
     "prepublishOnly": "pnpm run build",
     "clean": "rm -rf dist",
     "release": "release-it",
-    "release:minor": "release-it minor",
     "release:major": "release-it major",
+    "release:minor": "release-it minor",
     "release:patch": "release-it patch"
   },
   "keywords": [
diff --git a/packages/core/src/lib/createWorkerBlobUrl.ts b/packages/core/src/lib/createWorkerBlobUrl.ts
@@ -1,33 +1,38 @@
+export const enum WorkerMessageType {
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+  TIMEOUT_EXPIRED = 'TIMEOUT_EXPIRED',
+  RUNNING = 'RUNNING',
+  PENDING = 'PENDING',
+}
+
 export type WebWorkerStatus =
-  | "PENDING"
-  | "SUCCESS"
-  | "RUNNING"
-  | "ERROR"
-  | "TIMEOUT_EXPIRED";
+  | WorkerMessageType.PENDING
+  | WorkerMessageType.SUCCESS
+  | WorkerMessageType.ERROR
+  | WorkerMessageType.TIMEOUT_EXPIRED
+  | WorkerMessageType.RUNNING;
 
 function createWorkerBlobUrl(
-  fn: Function,
+  fn: (...args: any[]) => any,
   dependencies: string[] = [],
-  localDependencies: Function[] = []
+  localDependencies: ((...args: any[]) => any)[] = []
 ) {
   const blobCode = `
-    ${dependencies.map((d) => `importScripts("${d}");`).join("\n")}
-    ${localDependencies.map((f) => `${f.toString()}`).join("\n")}
-    
-    const fnString = ${fn.toString()};
-    
-    self.onmessage = async function(e) {
-      const [args] = e.data;
-      try {
-        const result = await fnString.apply(null, args);
-        self.postMessage(['SUCCESS', result]);
-      } catch (error) {
-        self.postMessage(['ERROR', error.message]);
-      }
-    }
-  `;
+${dependencies.map(d => `importScripts("${d}");`).join('\n')}
+${localDependencies.map(f => `${f.toString()}`).join('\n')}
+const fnString = ${fn.toString()};
+self.onmessage = async function(e) {
+  const [args] = e.data;
+  try {
+    const result = await fnString.apply(null, [...args, self]);
+    self.postMessage(['${WorkerMessageType.SUCCESS}', result]);
+  } catch (error) {
+    self.postMessage(['${WorkerMessageType.ERROR}', error.message]);
+  }
+}`;
 
-  const blob = new Blob([blobCode], { type: "text/javascript" });
+  const blob = new Blob([blobCode], { type: 'text/javascript' });
   const url = URL.createObjectURL(blob);
 
   return url;
diff --git a/packages/core/src/useWebWorkerFn.ts b/packages/core/src/useWebWorkerFn.ts
@@ -1,5 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
-import createWorkerBlobUrl, { WebWorkerStatus } from './lib/createWorkerBlobUrl.js';
+import createWorkerBlobUrl, {
+  WebWorkerStatus,
+  WorkerMessageType,
+} from './lib/createWorkerBlobUrl.js';
 
 export interface UseWebWorkerFnOptions {
   timeout?: number;
@@ -12,6 +15,7 @@ export interface UseWebWorkerFnOptions {
    */
   localDependencies?: ((...args: unknown[]) => unknown)[];
   onError?: (error: Error) => void;
+  onMessage?: (message: any) => void;
 }
 
 export type UseWebWorkerFnReturn<T extends (...args: any[]) => any> = [
@@ -26,15 +30,15 @@ function useWebWorkerFn<T extends (...args: any[]) => any>(
 ): UseWebWorkerFnReturn<T> {
   const { dependencies = [], localDependencies = [], timeout, onError } = options;
 
-  const [workerStatus, setWorkerStatus] = useState<WebWorkerStatus>('PENDING');
+  const [workerStatus, setWorkerStatus] = useState<WebWorkerStatus>(WorkerMessageType.PENDING);
   const workerRef = useRef<(Worker & { _url?: string }) | null>(null);
   const promiseRef = useRef<{
     resolve?: (result: ReturnType<T>) => void;
     reject?: (error: Error) => void;
   }>({});
   const timeoutRef = useRef<number>();
 
-  const workerTerminate = (status: WebWorkerStatus = 'PENDING') => {
+  const workerTerminate = (status: WebWorkerStatus = WorkerMessageType.PENDING) => {
     if (workerRef.current && workerRef.current._url) {
       workerRef.current.terminate();
       URL.revokeObjectURL(workerRef.current._url);
@@ -52,28 +56,31 @@ function useWebWorkerFn<T extends (...args: any[]) => any>(
 
     newWorker.onmessage = (e: MessageEvent) => {
       const { resolve, reject } = promiseRef.current;
-      const [status, result] = e.data as [WebWorkerStatus, ReturnType<T>];
+      const [status, result] = e.data as [string, any];
 
       switch (status) {
-        case 'SUCCESS': {
+        case WorkerMessageType.SUCCESS: {
           resolve?.(result);
-          workerTerminate(status);
+          workerTerminate(WorkerMessageType.SUCCESS);
           break;
         }
-        case 'TIMEOUT_EXPIRED': {
+        case WorkerMessageType.TIMEOUT_EXPIRED: {
           const timeoutError = new Error('Timeout');
           onError?.(timeoutError);
           reject?.(timeoutError);
-          workerTerminate(status);
+          workerTerminate(WorkerMessageType.TIMEOUT_EXPIRED);
           break;
         }
-        default: {
+        case WorkerMessageType.ERROR: {
           const error = new Error(result as string);
           onError?.(error);
           reject?.(error);
-          workerTerminate('ERROR');
+          workerTerminate(WorkerMessageType.ERROR);
           break;
         }
+        default: {
+          options.onMessage?.({ type: status, data: result });
+        }
       }
     };
 
@@ -83,14 +90,14 @@ function useWebWorkerFn<T extends (...args: any[]) => any>(
       const error = new Error(e.message);
       onError?.(error);
       reject?.(error);
-      workerTerminate('ERROR');
+      workerTerminate(WorkerMessageType.ERROR);
     };
 
     if (timeout) {
       timeoutRef.current = window.setTimeout(() => {
         const { reject } = promiseRef.current;
         reject?.(new Error('Timeout'));
-        workerTerminate('TIMEOUT_EXPIRED');
+        workerTerminate(WorkerMessageType.TIMEOUT_EXPIRED);
       }, timeout);
     }
 
@@ -101,11 +108,11 @@ function useWebWorkerFn<T extends (...args: any[]) => any>(
     new Promise<ReturnType<T>>((resolve, reject) => {
       promiseRef.current = { resolve, reject };
       workerRef.current?.postMessage([fnArgs]);
-      setWorkerStatus('RUNNING');
+      setWorkerStatus(WorkerMessageType.RUNNING);
     });
 
   const workerFn = (...fnArgs: Parameters<T>) => {
-    if (workerStatus === 'RUNNING') {
+    if (workerStatus === WorkerMessageType.RUNNING) {
       console.error('[useWebWorkerFn] You can only run one instance of the worker at a time.');
       return Promise.reject(new Error('Worker is already running'));
     }
diff --git a/packages/core/test/useWebWorkerFn.test.ts b/packages/core/test/useWebWorkerFn.test.ts
diff --git a/packages/examples/src/ComputeExample.tsx b/packages/examples/src/ComputeExample.tsx
