Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.4 KiB
2.4 KiB
category
| category |
|---|
| Browser |
useWebWorkerFn
Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of alewin/useWorker.
Usage
Basic example
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
],
},
)
With local dependencies
import { useWebWorkerFn } from '@vueuse/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 Vue 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 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[]
/**
* An array that contains the local dependencies needed to run the worker
*/
localDependencies?: Function[]
}
/**
* 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 function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(
fn: T,
options?: UseWebWorkerOptions,
): {
workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
workerStatus: ShallowRef<WebWorkerStatus, WebWorkerStatus>
workerTerminate: (status?: WebWorkerStatus) => void
}
export type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>