Skip to content
On this page

useWebWorkerFn

Category
Last Changed
3 months ago

Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of alewin/useWorker.

Demo

Current Time: 2022-03-05 07:29:42 352

This is a demo showing sort for large array (5 milion numbers) with or w/o WebWorker.
Clock stops when UI blocking happends.

Usage

Basic example

import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // some heavy works to do in web worker
})
import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // some heavy works to do in web worker
})

With dependencies







 
 
 














import { useWebWorkerFn } from '@vueuse/core'

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  dates => dates.sort(dateFns.compareAsc), 
  {
    timeout: 50000,
    dependencies: [
      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js' // dateFns
    ],
  }
)
import { useWebWorkerFn } from '@vueuse/core'

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  dates => dates.sort(dateFns.compareAsc), 
  {
    timeout: 50000,
    dependencies: [
      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js' // dateFns
    ],
  }
)

Web Worker

Before you start using this function, we suggest you read the Web Worker documentation.

Credit

This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of @Donskelle to migration.

Type Declarations

export declare type WebWorkerStatus =
  | "PENDING"
  | "SUCCESS"
  | "RUNNING"
  | "ERROR"
  | "TIMEOUT_EXPIRED"
export interface WebWorkerOptions extends ConfigurableWindow {
  /**
   * Number of milliseconds before killing the worker
   *
   * @default undefined
   */
  timeout?: number
  /**
   * An array that contains the external dependencies needed to run the worker
   */
  dependencies?: string[]
}
/**
 * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
 *
 * @see https://vueuse.org/useWebWorkerFn
 * @param fn
 * @param options
 */
export declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(
  fn: T,
  options?: WebWorkerOptions
) => {
  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
  workerStatus: Ref<WebWorkerStatus>
  workerTerminate: (status?: WebWorkerStatus) => void
}
export declare type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>
export declare type WebWorkerStatus =
  | "PENDING"
  | "SUCCESS"
  | "RUNNING"
  | "ERROR"
  | "TIMEOUT_EXPIRED"
export interface WebWorkerOptions extends ConfigurableWindow {
  /**
   * Number of milliseconds before killing the worker
   *
   * @default undefined
   */
  timeout?: number
  /**
   * An array that contains the external dependencies needed to run the worker
   */
  dependencies?: string[]
}
/**
 * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
 *
 * @see https://vueuse.org/useWebWorkerFn
 * @param fn
 * @param options
 */
export declare const useWebWorkerFn: <T extends (...fnArgs: any[]) => any>(
  fn: T,
  options?: WebWorkerOptions
) => {
  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
  workerStatus: Ref<WebWorkerStatus>
  workerTerminate: (status?: WebWorkerStatus) => void
}
export declare type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>

Source

SourceDemoDocs

Contributors

Anthony Fu
Fabian
sibbng
Antério Vieira
不见月
Shinigami
Alex Kozack
Richard Musiol

Changelog

v6.0.0-beta.2 on 8/9/2021
ff21b - feat: use tryOnScopeDispose instead of tryOnUnmounted
v4.11.2 on 5/30/2021
68c7d - feat(typedef): add return typedefs (#543) (#544)
useWebWorkerFn has loaded