diff --git a/README.md b/README.md index eb24e4d..d64b0e6 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,72 @@ -# worker-friend -Easily execute functions in web workers +

Worker Mate

+ +### install + + yarn add worker-mate + +or + + pnpm add worker-mate + + + +or + + npm install worker-mate + + + +### import + + import { doHardwork } from "worker-mate" + + +## doHardwork +Perform a long runnning or expensive task in a worker with a simple promise interface. + +### examples + + const contrivedFn = (arrayOfNumbers) => arrayOfNumbers.map(n => n ** n).filter(n < 999999).sort()[0] + const contrivedArray = [420, 10, 225, 50,100,1000] + let largestSquare = doHardwork(contrivedFn, contrivedArray).then(n => n) + +> **Tip:** Each **doHardwork()** opens in a new web worker + + + + export const convertToMoney = (num: number): string => { + let round = Math.round(num * 100) / 100 + let minus = num < 0 + let moneyArray = round.toString().split('.') + let d = minus ? moneyArray[0].slice(1) : moneyArray[0] + let dollars = d + .split('') + .reverse() + .map((str, i) => (i !== 0 && i % 3 === 0 ? str + ',' : str)) + .reverse() + .join('') + return `${minus ? '-' : ''}$${dollars}.${ + moneyArray[1] + ? moneyArray[1].length === 2 + ? moneyArray[1] + : String(moneyArray[1]) + '0' + : '00' + }` + } + let moneyString = doHardwork(convertToMoney, 231.2).then(s => s) + +### doHardwork function arguments +doHardwork requires two arguments. The first should be a pure function, that takes the second, your unprocessed data does some expensive computation and returns the result. Both arguments are required. Side effects are not recommended. + - fn - required + - rawData- required + + +## Why Worker Mate? + +Worker mate is just Typescript with no dependencies. It makes offloading expensive computations to web workers simple . This allows you to keep the main thread clear and your site responsive. It's a super simple, easy to use function that returns a promise. Each instantiation creates a new web worker thread, which terminates itself once the request is complete. + + +### Advice + +Web workers have overhead in postMessage. This means web workers are not ideal for time critical operations like animations unless the data is kept below 10KB per request/ response. +To keep within a 100ms response time budget it's advised to keep data below 100KB. Surma covered this in this excellent blog post [Is postMessage slow?](https://surma.dev/things/is-postmessage-slow/index.html) diff --git a/package.json b/package.json index 3557cd3..88a212c 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "worker-friend", + "name": "@worker-mate/hardwork", "author": "Rod Lewis", "description": "Easily execute functions in web workers", "version": "0.0.1", "license": "BSD-2-Clause", "repository": { "type": "git", - "url": "https://github.com/StudentOfJS/worker-friend.git" + "url": "https://github.com/StudentOfJS/worker-mate.git" }, "keywords": [ "typescript", diff --git a/src/lib/useWorker.ts b/src/lib/index.ts similarity index 85% rename from src/lib/useWorker.ts rename to src/lib/index.ts index f458e3d..430ded8 100644 --- a/src/lib/useWorker.ts +++ b/src/lib/index.ts @@ -8,7 +8,7 @@ export interface WorkerResponseType { }; } -export async function useWorker(fn: Function, rawData: any) { +export async function doHardwork(fn: Function, rawData: any) { return new Promise((resolve, reject) => { let worker = workerFactory.next().value; worker?.addEventListener( @@ -27,3 +27,5 @@ export async function useWorker(fn: Function, rawData: any) { worker?.postMessage({ fn: serializeFunction(fn), rawData }); }); } + +export default doHardwork; \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 38bb99c..b7548d7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,10 +10,10 @@ export default defineConfig({ ], build: { lib: { - entry: path.resolve(__dirname, 'src/lib/useWorker.ts'), - name: 'workerFriend', + entry: path.resolve(__dirname, 'src/lib/index.ts'), + name: 'doHardwork', formats: ['es', 'umd'], - fileName: (format) => `workerFriend.${format}.js`, + fileName: (format) => `workerMateDoHardwork.${format}.js`, }, }, }); \ No newline at end of file