useWebWorkerFn

Category

Browser

Export Size

968 B

Last Changed

5 days ago

Related

useWebWorker

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

Demo

Usage

Basic example

import { useWebWorkerFn } from '@reause/core'

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

With dependencies

import { useWebWorkerFn } from '@reause/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
    ],
  },
)

With local dependencies

import { useWebWorkerFn } from '@reause/core'

const pow = (a: number) => a * a

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
  numbers => pow(numbers),
  {
    timeout: 50000,
    localDependencies: [pow],
  },
)

Web Worker

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

Credit

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

Type Declarations

export type WebWorkerStatus = 'PENDING' | 'SUCCESS' | 'RUNNING' | 'ERROR' | 'TIMEOUT_EXPIRED'

export interface UseWebWorkerOptions {
    timeout?: number;
    dependencies?: string[];
    localDependencies?: ((...args: any[]) => any)[];
    window?: Window;
}

export interface UseWebWorkerFnReturn<T extends (...fnArgs: any[]) => any> {
    workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>;
    workerStatus: WebWorkerStatus;
    workerTerminate: (status?: WebWorkerStatus) => void;
}

export function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(fn: T, options?: UseWebWorkerOptions): UseWebWorkerFnReturn<T>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

e410c - fix(core): resolve useWebWorkerFn audit findings (#694)

30916 - fix(test): stabilize flaky timing-sensitive browser tests