fix(useWebWorker): add web worker transferable option (#3123)

vueuse · Jun 6, 2023 · 5988f73 · 5988f73
1 parent 04d32d8
commit 5988f73
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/core/useWebWorker/index.md b/packages/core/useWebWorker/index.md
@@ -20,7 +20,7 @@ const { data, post, terminate, worker } = useWebWorker('/path/to/worker.js')
 | data   | `Ref<any>`                        | Reference to the latest data received via the worker, can be watched to respond to incoming messages |
 | worker | `ShallowRef<Worker \| undefined>` | Reference to the instance of the WebWorker                                                           |
 
-| Method    | Signature             | Description                      |
-| --------- | --------------------- | -------------------------------- |
-| post      | `(data: any) => void` | Sends data to the worker thread. |
-| terminate | `() => void`          | Stops and terminates the worker. |
+| Method    | Signature                                                                                                                       | Description                      |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| post      | `(message: any, transfer: Transferable[]): void`<br>`(message: any, options?: StructuredSerializeOptions | undefined): void` | Sends data to the worker thread. |
+| terminate | `() => void`                                                                                                                    | Stops and terminates the worker. |
diff --git a/packages/core/useWebWorker/index.ts b/packages/core/useWebWorker/index.ts
@@ -6,9 +6,11 @@ import { tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
+type PostMessage = typeof Worker.prototype['postMessage']
+
 export interface UseWebWorkerReturn<Data = any> {
   data: Ref<Data>
-  post: typeof Worker.prototype['postMessage']
+  post: PostMessage
   terminate: () => void
   worker: ShallowRef<Worker | undefined>
 }
@@ -51,11 +53,11 @@ export function useWebWorker<Data = any>(
   const data: Ref<any> = ref(null)
   const worker = shallowRef<Worker>()
 
-  const post: typeof Worker.prototype['postMessage'] = function post(val: any) {
+  const post: PostMessage = (...args) => {
     if (!worker.value)
       return
 
-    worker.value.postMessage(val)
+    worker.value.postMessage(...args as Parameters<PostMessage>)
   }
 
   const terminate: typeof Worker.prototype['terminate'] = function terminate() {