feat(useWebWorker): support overloads (#2259)

vueuse · Oct 25, 2022 · c88491b · c88491b
1 parent ec7e69b
commit c88491b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/core/useWebWorker/index.md b/packages/core/useWebWorker/index.md
@@ -12,12 +12,13 @@ Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Worker
 ```js
 import { useWebWorker } from '@vueuse/core'
 
-const { data, post, terminate } = useWebWorker('/path/to/worker.js')
+const { data, post, terminate, worker } = useWebWorker('/path/to/worker.js')
 ```
 
 | State | Type       | Description                                                                                          |
 | ----- | ---------- | ---------------------------------------------------------------------------------------------------- |
 | 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                      |

diff --git a/packages/core/useWebWorker/index.ts b/packages/core/useWebWorker/index.ts
@@ -1,18 +1,20 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 
-import type { Ref } from 'vue-demi'
+import type { Ref, ShallowRef } from 'vue-demi'
 import { ref, shallowRef } from 'vue-demi'
-import { tryOnScopeDispose } from '@vueuse/shared'
+import { isFunction, isString, tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
 export interface UseWebWorkerReturn<Data = any> {
   data: Ref<Data>
   post: typeof Worker.prototype['postMessage']
   terminate: () => void
-  worker: Ref<Worker | undefined>
+  worker: ShallowRef<Worker | undefined>
 }
 
+type WorkerFn = (...args: unknown[]) => Worker
+
 /**
  * Simple Web Workers registration and communication.
  *
@@ -21,14 +23,30 @@ export interface UseWebWorkerReturn<Data = any> {
  * @param workerOptions
  * @param options
  */
-export function useWebWorker<Data = any>(
+export function useWebWorker<T = any>(
   url: string,
   workerOptions?: WorkerOptions,
-  options: ConfigurableWindow = {},
+  options?: ConfigurableWindow,
+): UseWebWorkerReturn<T>
+
+/**
+ * Simple Web Workers registration and communication.
+ *
+ * @see https://vueuse.org/useWebWorker
+ * @param worker
+ */
+export function useWebWorker<T = any>(
+  worker: Worker | WorkerFn
+): UseWebWorkerReturn<T>
+
+export function useWebWorker<Data = any>(
+  arg0: string | WorkerFn | Worker,
+  workerOptions?: WorkerOptions,
+  options?: ConfigurableWindow,
 ): UseWebWorkerReturn<Data> {
   const {
     window = defaultWindow,
-  } = options
+  } = options ?? {}
 
   const data: Ref<any> = ref(null)
   const worker = shallowRef<Worker>()
@@ -48,7 +66,12 @@ export function useWebWorker<Data = any>(
   }
 
   if (window) {
-    worker.value = new Worker(url, workerOptions)
+    if (isString(arg0))
+      worker.value = new Worker(arg0, workerOptions)
+    else if (isFunction(arg0))
+      worker.value = arg0()
+    else
+      worker.value = arg0
 
     worker.value!.onmessage = (e: MessageEvent) => {
       data.value = e.data