easy-web-worker 7.0.5 → 7.0.6

package/README.md

@@ -1,539 +1,1155 @@
 # easy-web-worker 🌟
 
-![Image John Avatar](https://raw.githubusercontent.com/johnny-quesada-developer/global-hooks-example/main/public/avatar2.jpeg)
+<div align="center">
 
-Hello and welcome to **easy-web-worker** with [easy-cancelable-promise](https://www.npmjs.com/package/easy-cancelable-promise) – your go-to solution for seamless **Web Workers** integration, now enhanced with cancelable promises! 🚀
+![Johnny Quesada](https://raw.githubusercontent.com/johnny-quesada-developer/global-hooks-example/main/public/avatar2.jpeg)
 
-[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) are a native tool provided by **JavaScript**, allowing you to use them within your favorite framework like **React**, **Angular**, **Vue**, and others, or with pure **JavaScript** and **TypeScript**.
+</div>
 
-Check out the running example with **React** and **TypeScript** at [CODEPEN](https://codepen.io/johnnynabetes/full/wvOvygW); let's explore the capabilities of JavaScript's concurrent processing with Web Workers!"
+<div align="center">
 
-[Important!] Starting from version 4.0.0, EasyWebWorker supports concurrency mode. This means you can now configure whether a single **EasyWebWorker** should use multiple Web Worker instances. This feature is extremely powerful for code that requires not only heavy computations occasionally but also robust concurrent processing. For more detailed information, please see the section below. [concurrency mode](#concurrency-mode)
+**Real Web Workers. Simple API. Cancelable work.** 🚀
 
-#### IMPORTANT!
+_Heavy computation off the main thread — without fighting the native Worker API._ ✨
 
-If you were previously using **easy-web-worker** with **cancelable-promise-jq**, please note that the **cancelable-promise-jq** package has been renamed/deprecated. To continue using the latest version of **easy-web-worker**, simply uninstall **cancelable-promise-jq** and replace all imports with **easy-cancelable-promise**.
+[![npm version](https://img.shields.io/npm/v/easy-web-worker.svg)](https://www.npmjs.com/package/easy-web-worker)
+[![Downloads](https://img.shields.io/npm/dm/easy-web-worker.svg)](https://www.npmjs.com/package/easy-web-worker)
+[![License](https://img.shields.io/github/license/johnny-quesada-developer/easy-web-worker)](https://github.com/johnny-quesada-developer/easy-web-worker/blob/main/LICENSE)
 
-I sincerely apologize for any inconvenience this may cause.
+[**Live Demo**](https://johnny-quesada-developer.github.io/easy-web-workers-example/) • [**Video Tutorial**](https://www.youtube.com/watch?v=CK-Uri9lDOE) • [**CodePen**](https://codepen.io/johnnynabetes/full/wvOvygW)
 
-### Creating a web worker never was easier!
+</div>
+
+---
+
+## 🎯 The One-Liner
 
 ```ts
-import createEasyWebWorker from 'easy-web-worker/createEasyWebWorker';
+import { createEasyWebWorker } from 'easy-web-worker';
+
+const worker = createEasyWebWorker<number, number>(({ onMessage }) => {
+  onMessage((message) => message.resolve(message.payload * 2));
+});
+```
+
+**That's it.** No separate worker file. No message-ID plumbing. No manual promise bridge. 🧵
+
+```ts
+const result = await worker.send(21);
+
+console.log(result); // 42
+```
+
+Your code runs inside a **real native Web Worker**, while the main thread receives a `CancelablePromise`.
+
+---
+
+## 🚀 Why Developers Love This Library
 
-/**
- * The callback parameter will be the body of the worker
- */
+### 🎓 **Small API Surface**
+
+If you already understand native Web Workers, the mental model stays familiar:
+
+```ts
 const worker = createEasyWebWorker(({ onMessage }) => {
-  const fibonacci = (n) => {
+  onMessage((message) => {
+    // Work inside the Worker
+    message.resolve('done');
+  });
+});
+
+await worker.send();
+```
+
+### ⚡ **Real Background Execution**
+
+Move CPU-heavy work away from the browser's main thread so rendering and user interaction can stay responsive.
+
+```ts
+const worker = createEasyWebWorker<number, number>(({ onMessage }) => {
+  const fibonacci = (n: number): number => {
     if (n <= 1) return n;
     return fibonacci(n - 1) + fibonacci(n - 2);
   };
 
-  /**
-   * Inside the worker we have to define an action when onMessage
-   */
   onMessage((message) => {
-    /**
-     * The payload includes whatever parameters are sent from the main thread
-     */
-    const { payload } = message;
-    const result = fibonacci(payload.base);
-
-    message.resolve(result);
-    //message.reject(); // or reject
+    message.resolve(fibonacci(message.payload));
   });
 });
 ```
 
-Then, for sending a message to the worker:
+### 🛑 **Cancelable Promises**
+
+Every `send()` returns a `CancelablePromise` from [`easy-cancelable-promise`](https://www.npmjs.com/package/easy-cancelable-promise).
 
 ```ts
-/**
- * This returns a CancelablePromise
- */
-await worker.send(40);
+const task = worker.send(45);
+
+task.cancel('No longer needed');
 ```
 
-And that's it! You now have a worker running heavy computation in a real separate thread, with real asynchronous programming in JavaScript.
+Cancellation can travel **from the main thread into the Worker**, allowing the Worker to react and release resources.
 
-You can also create an easy web worker from a static file, or from a native worker instance, here various examples:
+### 📊 **Progress Reporting**
+
+Long-running jobs can report progress without resolving the request.
 
 ```ts
-// on vite and typescript
-import workerUrl from './worker?worker&url';
+worker.send(payload).onProgress((percentage) => {
+  console.log(`${percentage}%`);
+});
+```
 
-const isProduction = import.meta.env.MODE === 'production';
+### 🚦 **Built-In Worker Pool**
 
-const workerSource = isProduction
-  ? workerUrl
-  : new URL('./worker.ts', import.meta.url);
+Scale a single `EasyWebWorker` across multiple native Worker instances.
 
-const worker = new EasyWebWorker(workerSource, {
-  workerOptions: {
-    type: 'module',
-  },
+```ts
+const worker = createEasyWebWorker(workerBody, {
+  maxWorkers: 4,
 });
+```
 
-// or
-const worker = createEasyWebWorker(workerSource, {
-  workerOptions: {
-    type: 'module',
-  },
-});
+The public API remains the same — the library manages worker creation and message distribution.
 
-// if you are using ESM - ECMAScript Modules
-const worker = createEasyWebWorker([
-  new Worker(new URL('./worker.js', import.meta.url)),
-]);
+### 🧩 **Multiple Worker Sources**
+
+Use whichever architecture fits the project:
+
+```ts
+createEasyWebWorker(workerBody);        // Runtime Worker template
+createEasyWebWorker('./worker.js');     // Static Worker file
+createEasyWebWorker(new URL(...));      // URL
+createEasyWebWorker(new Worker(...));   // Existing Worker
+createEasyWebWorker([worker1, worker2]); // Existing Worker pool
+```
+
+---
 
-// other ways with vanilla js
-const worker = createEasyWebWorker('./worker.js');
-const worker = createEasyWebWorker(new Worker('./worker.js')); // ƒ Worker() { [native code] }
+## 📦 Installation
 
-const worker = new EasyWebWorker('./worker.js');
-const worker = new EasyWebWorker(new Worker('./worker.js')); // ƒ Worker() { [native code] }
+```bash
+npm install easy-web-worker
 ```
 
-When working with **static files**, which can offer substantial benefits with web workers, you simply need to create an instance of **StaticEasyWebWorker**.
+`easy-web-worker` uses [`easy-cancelable-promise`](https://www.npmjs.com/package/easy-cancelable-promise) for the promise lifecycle.
 
-The **StaticEasyWebWorker** provides an interface to continue working with [easy-cancelable-promise](https://www.npmjs.com/package/easy-cancelable-promise) and build more complex APIs within your worker.
+> **Upgrading from an old release?**  
+> If your project still imports `cancelable-promise-jq`, replace it with `easy-cancelable-promise`. The old package name is deprecated.
 
-From inside your worker, the message callbacks receive a message that includes multiple methods and functions. You can use these to communicate back with the main thread, or to subscribe to and react to the lifecycle of a worker.
+---
+
+## 🎬 Quick Start
+
+### 30 Seconds to a Web Worker
 
 ```ts
-const { onMessage } = new StaticEasyWebWorker();
+import { createEasyWebWorker } from 'easy-web-worker';
 
-/**
- *  For adding a default onMessage
- */
-onMessage((message) => {
-  /** Your message receives a payload,
-   * which is any information sent from the main thread.*/
-  const { payload } = message;
+const fibonacciWorker = createEasyWebWorker<number, number>(({ onMessage }) => {
+  const fibonacci = (n: number): number => {
+    if (n <= 1) return n;
+    return fibonacci(n - 1) + fibonacci(n - 2);
+  };
 
-  const bigArrayBuffer = new new ArrayBuffer(1000000)();
+  onMessage((message) => {
+    message.resolve(fibonacci(message.payload));
+  });
+});
+
+const result = await fibonacciWorker.send(40);
 
-  /** You can resolve the message and respond to the main thread's promise that is listening.
-   * This promise could also send data back to the main thread and transfer data if needed */
-  message.resolve({ bigArrayBuffer }, [bigArrayBuffer]);
+console.log(result);
+```
 
-  /** You can reject the message and send back a reason,
-   * if no transfer is necessary just avoid the second parameter */
-  message.reject(new Error('something happened'));
+The Fibonacci calculation executes in a separate native Worker thread instead of blocking the page's main thread. ⚡
 
-  const metadata = { message: 'progress from inside the worker' };
+### 60 Seconds to Production-Ready
 
-  /** You can report progress */
-  message.reportProgress(10, metadata, []); // all the methods allows you to send Transferable[]
+Run [`jsdiff`](https://www.npmjs.com/package/diff) inside a Web Worker so text comparison never blocks the main thread.
 
-  /** You can cancel an operation from within the worker */
-  message.cancel('the operating was canceled from the worker');
+#### 🌐 Simple jsdiff implementation.
 
-  /** You can subscribe to the cancellation event of the message,
-   * regardless of whether this cancellation is internal or external to the worker.*/
-  const unsubscribeCancel = message.onCancel((reason) => {});
+No Worker file. No extra bundler configuration. Just give `easy-web-worker` the public script URL:
 
-  // you can unsubscribe from the cancel event as well
-  unsubscribeCancel();
+```ts
+// example.js
+import { createEasyWebWorker } from 'easy-web-worker';
 
-  /**
-   * And there is extra listeners for the other events
-   * This events represent the lifecycle of the message
-   */
-  const unsubscribeResolve = message.onResolve((data) => {});
-  const unsubscribeReject = message.onReject((data) => {});
-  const unsubscribeProgress = message.onProgress((data) => {});
-  const unsubscribeFinalize = message.onFinalize((data) => {});
-
-  /** You can also review the status of the message at any time*/
-  const status = message.getStatus(); // pending | resolved | rejected | canceled
+const worker = createEasyWebWorker(
+  ({ onMessage }) => {
+    onMessage((message, context) => {
+      const { input1, input2 } = message.payload;
+
+      message.resolve(context.Diff.diffWords(input1, input2));
+    });
+  },
+  {
+    scripts: ['https://cdn.jsdelivr.net/npm/diff@9.0.0/dist/diff.min.js'],
+  }
+);
+
+const result = await worker.send({
+  input1: 'Web Workers are powerful.',
+  input2: 'Web Workers are incredibly powerful.',
 });
 
-/**
- * For adding specific actions
- */
-onMessage('readCSV', (message) => {
-  // do something
+console.log(result);
+```
+
+**That's it.** The CDN script is loaded inside the Worker, `jsdiff` exposes its `Diff` API there, and your main thread only sends data and awaits the result. 🚀
+
+- ✅ No separate Worker file
+- ✅ No npm import for jsdiff in your application bundle
+- ✅ No manual `importScripts()`
+- ✅ No `postMessage` / `onmessage` plumbing
+- ✅ Type-safe request and result
+- ✅ Real background execution
+
+#### 📄 Static Worker file and specific actions
+
+If you prefer normal module imports, your own Worker file, or bundler-controlled dependencies, use `StaticEasyWebWorker`.
+
+**`TextDiff.worker.ts`**
+
+```ts
+import { diffWords, type Change } from 'diff';
+import { StaticEasyWebWorker } from 'easy-web-worker';
+import type { ComparePayload, Change } from './TextDiff.types';
+
+const easyWorker = new StaticEasyWebWorker();
+
+// you can define multiple named methods inside the Worker
+easyWorker.onMessage<ComparePayload, Change[]>('compare', (message) => {
+  const { input1, input2 } = message.payload;
+
+  message.resolve(diffWords(input1, input2));
+});
+
+easyWorker.onMessage<string, string>('uppercase', (message) => {
+  message.resolve(message.payload.toUpperCase());
 });
 ```
 
-It's important to mention that the **cancel** method is the only one that provides two-way binding. It can travel all the way from the main thread to the worker, cancel something inside the worker, and notify the main thread upon completion.
+**That's the whole Worker.** Now connect it to your application:
 
-**easy-web-worker** is designed to enhance the capabilities of the **Worker** class by integrating a pattern of cancelable promises from the [easy-cancelable-promise](https://www.npmjs.com/package/easy-cancelable-promise) library. For straightforward tasks, it simplifies the process by eliminating the need to configure webpack or other bundlers. And for more complex requirements, the **StaticEasyWebWorker** class allows the integration of easy worker and cancelable promises capabilities into your static workers.
+```ts
+import { EasyWebWorker } from 'easy-web-worker';
+import workerUrl from './TextDiff.worker?worker&url';
 
-Start enhancing your applications with robust, cancelable promises and easy web worker integration today! 🌐
+// For vite, use the Worker URL in production and the TypeScript file in development.
+const isProduction = import.meta.env.MODE === 'production';
 
-Experience it in action with a [Live Example featuring text-diff](https://johnny-quesada-developer.github.io/easy-web-workers-example/) 📘.
+const worker = new EasyWebWorker(
+  isProduction ? workerUrl : new URL('./TextDiff.worker.ts', import.meta.url),
+  {
+    workerOptions: {
+      type: 'module',
+    },
+  }
+);
 
-For a comprehensive understanding, watch our informative [introduction video](https://www.youtube.com/watch?v=CK-Uri9lDOE) 🎥. You can also dive deeper into the code and explore on [easy-web-workers-examples](https://github.com/johnny-quesada-developer/easy-web-workers-example) 🧩.
+const result = await worker.sendToMethod<ComparePayload, Change[]>('compare', {
+  input1: 'Web Workers are powerful.',
+  input2: 'Web Workers are incredibly powerful.',
+});
+```
 
-## Creating a simple Web Worker
+Both approaches give you the same core result: a normal JavaScript library doing CPU work inside a **Web Worker**, while your application talks to it through a Promise-based API.
 
-Creating a new worker is as simple as
+| Approach                | Best for                                                                     |
+| ----------------------- | ---------------------------------------------------------------------------- |
+| 🌐 CDN + runtime Worker | Fastest setup, demos, small integrations, no Worker file                     |
+| 📄 Static Worker        | Module imports, larger Worker code, bundler control, production architecture |
 
-```TS
-const backgroundWorker = createEasyWebWorker<string, string>(({ onMessage }) => {
-  onMessage((message) => {
-    const { payload } = message;
+And in both cases you still get the `easy-web-worker` features around the Worker:
+
+- ✅ Promise-based communication
+- ✅ Cancellation
+- ✅ Progress reporting
+- ✅ Named Worker methods
+- ✅ Worker pooling when needed
+
+---
+
+## 🌟 Core Features Deep Dive
+
+### 1️⃣ Runtime Workers with `createEasyWebWorker`
+
+Create a Worker directly from a function template.
+
+#### 🎨 The Basics
+
+```ts
+import { createEasyWebWorker } from 'easy-web-worker';
+
+const backgroundWorker = createEasyWebWorker<string, string>(
+  ({ onMessage }) => {
+    onMessage((message) => {
+      message.resolve(`Message from Worker: ${message.payload}`);
+    });
+  }
+);
+
+const result = await backgroundWorker.send('hello!');
 
-    message.resolve(`this is  a message from the worker: ${payload}`);
+console.log(result);
+```
+
+The first generic controls the `send()` payload. The second controls the value returned when the Worker calls `message.resolve()`.
+
+```ts
+const worker = createEasyWebWorker<Payload, Result>(workerBody);
+```
+
+#### 🎯 Named Worker Methods
+
+A Worker can expose multiple message handlers instead of routing everything through one callback.
+
+```ts
+const worker = createEasyWebWorker<string, string>(({ onMessage }) => {
+  onMessage((message) => {
+    message.resolve(`default: ${message.payload}`);
   });
 
-  // you could also define and send specific methods which allow you to create a better structured API
-  onMessage<number, number>('doSomething', (message) => {
-    const { payload } = message;
+  onMessage<number, number>('double', (message) => {
+    message.resolve(message.payload * 2);
+  });
 
-    message.resolve(payload + 2);
+  onMessage<{ first: number; second: number }, number>('sum', (message) => {
+    const { first, second } = message.payload;
+    message.resolve(first + second);
   });
 });
 
-// outside your worker
-const messageResult = await backgroundWorker.send('hello!');
-
-// for specific methods us the sendToMethod function
-const messageResult2 = await backgroundWorker.sendToMethod('doSomething', 2);
+const defaultResult = await worker.send('hello');
+const doubled = await worker.sendToMethod<number, number>('double', 21);
+const total = await worker.sendToMethod<
+  number,
+  { first: number; second: number }
+>('sum', { first: 20, second: 22 });
 ```
 
-### Important notes:
+This makes it possible to build a small, typed API inside one Worker. 🧩
 
-EasyWebWorker<IPayload, IResult> has two generic parameters... They will affect the typing of the send() and response() methods.
+#### 🧠 Worker Scope — Important!
 
-- If IResult is null, the _resolve_ method will not require parameters
-- If IPayload is null, the _send_ method will not require parameters
+A runtime Worker body becomes the Worker source. It **cannot close over arbitrary variables from the main thread**.
 
-Take into consideration that the _workerBody_ is a template to create a worker in run time, so you'll not be able to use anything outside of the Worker-Scope.
-
-```TS
-const message = 'Hello';
+```ts
+const greeting = 'Hello';
 
-await createEasyWebWorker<null, string>(({ onMessage }) => {
+createEasyWebWorker(({ onMessage }) => {
   onMessage((message) => {
-
-    message.resolve(message); // THIS WILL PRODUCE AND ERROR!! the variable *message* will not exist in Worker-Scope.
+    // ❌ `greeting` does not exist inside the Worker scope.
+    message.resolve(greeting);
   });
-}).send('hello!');
+});
 ```
 
-If you need to pass a primitive parameter to the body of the worker, you can use the **primitiveParameters** configuration. This is an array of values that will be serialized and embedded into the worker's body.
+Everything needed by the Worker must be:
+
+- Defined inside the Worker body
+- Included through reusable Worker templates
+- Imported as a script
+- Sent in a message
+- Passed as a primitive parameter
+
+#### 📦 Primitive Parameters
+
+For small static values that should exist when the runtime Worker is created, use `primitiveParameters`.
 
 ```ts
-const message = 'Hello';
+const prefix = 'Result:';
 
-await createEasyWebWorker<null, string>(
+const worker = createEasyWebWorker<null, string>(
   ({ onMessage }, context) => {
-    const [message] = context.primitiveParameters;
+    const [prefix] = context.primitiveParameters;
 
-    console.log(message); // "hello!" // 👍 it works!
+    onMessage((message) => {
+      message.resolve(`${prefix} complete`);
+    });
   },
   {
-    primitiveParameters: [message],
+    primitiveParameters: [prefix],
   }
-).send('hello!');
+);
+
+console.log(await worker.send()); // Result: complete
 ```
 
-Take a look at Workers API if you don't know yet how they work: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API,
-If you need t to send data to the worker, please define IPayload while creating a worker. _new EasyWebWorker<IPayload>(_
-You are just allowed to send information to Workers by messages, and vice versa
+Use regular Worker messages for dynamic application data. `primitiveParameters` are best for small initialization values.
 
-## IEasyWebWorkerMessage<IPayload = null, IResult = void>
+#### 📊 Progress Without Resolving
 
-When you defined an onMessage callback in your **Worker**, this will receive all messages from the **send** method:
+The Worker can report progress as many times as necessary before the message finishes.
 
-```TS
-easyWorker.onMessage((message) => {
-  // the *message* will be strongly typed with TS
+```ts
+const worker = createEasyWebWorker<number[], number>(({ onMessage }) => {
+  onMessage((message) => {
+    let total = 0;
 
- // the message could resolve the *send* promise.
-  message.resolve();
+    message.payload.forEach((value, index, values) => {
+      total += value;
+      message.reportProgress(((index + 1) / values.length) * 100);
+    });
 
- // the message could be rejected from the worker
-  message.reject(new Error());
+    message.resolve(total);
+  });
+});
+
+const result = await worker.send([10, 20, 30, 40]).onProgress((percentage) => {
+  console.log(percentage);
+});
+```
+
+Output:
+
+```text
+25
+50
+75
+100
+```
+
+#### 🛑 Two-Way Cancellation
+
+Cancellation is more than rejecting a promise on the main thread. The Worker receives the cancellation event too.
+
+```ts
+const worker = createEasyWebWorker<number, number>(({ onMessage }) => {
+  onMessage((message) => {
+    const interval = setInterval(() => {
+      // long-running work...
+    }, 100);
 
-  // this message could be cancelled from inside the worker
-  message.cancel();
+    message.onCancel((data) => {
+      clearInterval(interval);
 
-  // the message is also able to listen to cancelation evens
-  message.onCancel(() => {
-    // release resources
-  })
+      const reason = data.worker_cancelation?.reason ?? data.canceled?.reason;
 
-  // you could also report progress to the principal thread if you configured a onProgress callback
-  message.reportProgress(25);
+      console.log('Canceled:', reason);
+    });
+  });
 });
+
+const task = worker.send(100);
+
+task.cancel('User navigated away');
 ```
 
-## onProgress
+Inside a Worker, a message can also cancel itself:
 
-Let say you are performing some heavy process in your worker, but you still wanted to implement some kind of progress bar in the main thread... you could add an onProgress callback.
+```ts
+onMessage((message) => {
+  if (!isValid(message.payload)) {
+    message.cancel('Invalid payload');
+    return;
+  }
 
-```TS
-await worker.send().onProgress((progress: number) => {
-  // change some progress bar percentage
-}).then(doSomething);
+  // continue...
+});
 ```
 
-onProgress Is gonna be executed every time you call _message.reportProgress_ inside the worker... the cool part here is that the _reportProgress_ is not gonna finish the main promise returned by the _send_ method.
+#### 🔄 Message Lifecycle
+
+Each `IEasyWebWorkerMessage` provides lifecycle hooks:
+
+```ts
+onMessage((message) => {
+  const unsubscribeResolve = message.onResolve(() => {});
+  const unsubscribeReject = message.onReject(() => {});
+  const unsubscribeCancel = message.onCancel(() => {});
+  const unsubscribeProgress = message.onProgress(() => {});
+  const unsubscribeFinalize = message.onFinalize(() => {});
+
+  const status = message.getStatus();
+  const pending = message.isPending();
+
+  // Unsubscribe whenever you no longer need a listener.
+  unsubscribeResolve();
+  unsubscribeReject();
+  unsubscribeCancel();
+  unsubscribeProgress();
+  unsubscribeFinalize();
+
+  message.resolve();
+});
+```
 
-## Having multiple Worker-Templates
+#### 🚚 Transferable Objects
 
-As _WorkerBody_ are just templates, you could reuse them on other _Workers_, or use them as plugins for your _Workers_. Let's see:
+Both directions can use native `Transferable[]` values to move ownership instead of cloning large buffers.
 
-```TS
-const reusableWorkerSegment: EasyWebWorkerBody = ({ onMessage, close, importScripts }, context) => {
-  context.doSomething = () => Promise.resolve('This is a plugin example');
+```ts
+type Payload = {
+  buffer: ArrayBuffer;
 };
 
-const reusableWorkerSegment = await createEasyWebWorker([
-  reusableWorkerSegment,
-  ({ onMessage }, context) => onMessage(async (message) => {
-  // context will have all stuff we added on other plugins
-  const result = await context.doSomething();
+const worker = createEasyWebWorker<Payload, ArrayBuffer>(({ onMessage }) => {
+  onMessage((message) => {
+    const { buffer } = message.payload;
 
-  message.resolve(result);
-})]).send();
+    // Process the buffer...
 
+    message.resolve(buffer, [buffer]);
+  });
+});
+
+const buffer = new ArrayBuffer(1_000_000);
+
+const processedBuffer = await worker.send({ buffer }, [buffer]);
 ```
 
-In this way, you could avoid having to create more than once the same template for your worker.
+This is especially useful for `ArrayBuffer`, media processing, binary parsing, and other data-heavy workloads.
 
-## Importing scripts into your _Workers_
+---
 
-Web Workers has this amazing method called importScripts, are you passed an array of strings in the EasyWorker extra configuration, all those files are gonna be imported into your worker.
+### 2️⃣ Static Workers with `StaticEasyWebWorker`
 
-// test.js
+Sometimes a dedicated Worker file is the better architecture — especially when the Worker has its own modules, build pipeline, or large implementation.
 
-```TS
-self.message = 'Hello coders!';
-self.doSomething = () => console.log(self.message);
+#### 🎪 The Basics
+
+**`worker.ts`**
+
+```ts
+import { createStaticEasyWebWorker } from 'easy-web-worker/createStaticEasyWebWorker';
+
+const { onMessage } = createStaticEasyWebWorker<number, number>();
+
+onMessage((message) => {
+  message.resolve(message.payload * 2);
+});
+
+onMessage<string, string>('uppercase', (message) => {
+  message.resolve(message.payload.toUpperCase());
+});
 ```
 
-```TS
-await createEasyWebWorker(({ onMessage }, context) => {
-  onMessage((message) => context.doSomething());
-}, {
-  scripts: ['http://localhost:3000/test.js'],
-}).send();
+**Main thread**
+
+```ts
+import { createEasyWebWorker } from 'easy-web-worker';
+
+const worker = createEasyWebWorker<number, number>('./worker.js');
 
+const result = await worker.send(21);
 ```
 
-This is a very simple example, but you could import a whole library into your worker, as _JQUERY_, _Bluebird_ for example
+You keep the `send()`, cancellation, progress, and message lifecycle API while controlling the Worker file yourself.
 
-## StaticEasyWebWorker
+#### 🎁 Vite + TypeScript
 
-If you want to create a _Worker_ with a static .js file and don't want to lose the structure of messages and promises and the onProgress callback from the library... you could use StaticEasyWebWorker<IPayload = null, IResult = void>\_ directly in your Worker.
+```ts
+import workerUrl from './worker?worker&url';
+import { createEasyWebWorker } from 'easy-web-worker';
 
-let's see how to use it:
+const workerSource =
+  import.meta.env.MODE === 'production'
+    ? workerUrl
+    : new URL('./worker.ts', import.meta.url);
 
-// worker.js
-// This is gonna be the content of your worker
-// onMessage Callback is gonna receive all _send_ method calls.
+const worker = createEasyWebWorker(workerSource, {
+  workerOptions: {
+    type: 'module',
+  },
+});
+```
 
-```TS
-// imports only the static web worker
-import createStaticEasyWebWorker from 'easy-web-worker/createStaticEasyWebWorker';
+#### 🔌 Existing Native Worker
 
-//  this is gonna create the same message structure the runtime Workers
-const { onMessage } = createStaticEasyWebWorker();
+Already have a `Worker` instance? Wrap it directly.
 
-onMessage((message) => {
-  setTimeout(() => {
-    message.resolve(200);
-  }, 5000);
+```ts
+const nativeWorker = new Worker(new URL('./worker.js', import.meta.url), {
+  type: 'module',
 });
 
-onMessage('action', (message) => {
-  setTimeout(() => {
-    message.resolve(200);
-  }, 5000);
+const worker = createEasyWebWorker(nativeWorker);
+```
+
+Or provide an existing pool:
+
+```ts
+const worker = createEasyWebWorker([
+  new Worker('./worker-a.js'),
+  new Worker('./worker-b.js'),
+]);
+```
+
+When an existing `Worker[]` is supplied, those Worker instances become the pool managed by `EasyWebWorker`.
+
+---
+
+### 3️⃣ Concurrency & Worker Pool
+
+A single `EasyWebWorker` can distribute simultaneous messages across multiple native Workers.
+
+#### 🚦 Scale on Demand
+
+```ts
+const worker = createEasyWebWorker<number, number>(
+  ({ onMessage }) => {
+    const fibonacci = (n: number): number => {
+      if (n <= 1) return n;
+      return fibonacci(n - 1) + fibonacci(n - 2);
+    };
+
+    onMessage((message) => {
+      message.resolve(fibonacci(message.payload));
+    });
+  },
+  {
+    maxWorkers: 4,
+  }
+);
+
+const results = await Promise.all([
+  worker.send(40),
+  worker.send(41),
+  worker.send(42),
+]);
+```
+
+With `maxWorkers: 4`, the library can create additional Workers as concurrent requests arrive, up to the configured limit.
+
+#### 🔥 Warm Up the Pool
+
+Create the full pool immediately:
+
+```ts
+const worker = createEasyWebWorker(workerBody, {
+  maxWorkers: 4,
+  warmUpWorkers: true,
 });
 ```
 
-By the way, if you're in need of a super simple static worker, just know that the first parameter of createStaticEasyWebWorker is a function which will be used as the default onmessage callback.
+Useful when startup latency matters more than keeping the initial resource footprint small.
+
+#### 💤 Dispose Idle Workers Automatically
 
 ```ts
-createStaticEasyWebWorker((message) => {
-  // this is the default onMessage
+const worker = createEasyWebWorker(workerBody, {
+  maxWorkers: 4,
+  keepAlive: false,
+  terminationDelay: 5_000,
 });
 ```
 
-and in your main thread:
+When there are no queued messages, idle Workers are terminated after the configured delay.
+
+#### ⚙️ Concurrency Defaults
+
+| Option                     | Current behavior                                                            |
+| -------------------------- | --------------------------------------------------------------------------- |
+| `maxWorkers`               | Defaults to `1`                                                             |
+| `warmUpWorkers`            | Defaults to `true` for a single-worker configuration; otherwise `false`     |
+| `keepAlive`                | Defaults to the resolved `warmUpWorkers` value unless explicitly configured |
+| `terminationDelay`         | Defaults to `1000` ms                                                       |
+| Existing `Worker[]` source | Pool size comes from the supplied array and the workers are kept alive      |
 
-```TS
-const worker = createEasyWebWorker<null,number>('./worker.js');
+This lets the default experience behave like a persistent single Worker while making larger pools opt-in and demand-driven.
+
+---
+
+### 4️⃣ Reusable Worker Templates
+
+Runtime Worker bodies are templates, so common Worker functionality can be composed.
+
+```ts
+import { createEasyWebWorker, type EasyWebWorkerBody } from 'easy-web-worker';
+
+const commonTools: EasyWebWorkerBody = ({ onMessage }, context) => {
+  context.doSomething = () => Promise.resolve('Reusable Worker code');
+};
+
+const worker = createEasyWebWorker([
+  commonTools,
+  ({ onMessage }, context) => {
+    onMessage(async (message) => {
+      const result = await context.doSomething();
+
+      message.resolve(result);
+    });
+  },
+]);
 
 await worker.send();
 ```
 
-Super easy right?
+This is useful when multiple runtime Workers share utilities, message handlers, or initialization logic.
+
+---
 
-## Concurrency mode
+### 5️⃣ Import Scripts into Runtime Workers
 
-With EasyWebWorker, you can create operations that require heavy concurrency and delegate them to a web workers queue, or create workers on demand depending on the traffic and specific tasks. Let's take a look:
+External scripts can be included through the Worker configuration.
+
+```ts
+const worker = createEasyWebWorker(
+  ({ onMessage }, context) => {
+    onMessage((message) => {
+      context.doSomething();
+      message.resolve();
+    });
+  },
+  {
+    scripts: ['https://example.com/worker-library.js'],
+  }
+);
+```
+
+For example, if the imported script adds something to the Worker global scope:
+
+```js
+// worker-library.js
+self.message = 'Hello from imported script!';
+self.doSomething = () => console.log(self.message);
+```
+
+For modern module-heavy Workers, a static Worker file with normal ESM imports is often easier to organize.
+
+---
+
+## 🔥 Advanced Patterns
+
+### 🏗️ Build a Worker API with Named Methods
+
+```ts
+type User = {
+  id: string;
+  name: string;
+};
 
-```TS
-/**
- * Notice that the structure of the worker remains the same;
- * the only changes are in the configuration parameters of the worker.
- * Take a look below.*/
 const worker = createEasyWebWorker(({ onMessage }) => {
-  onMessage((message) => {
-    const { payload } = message;
+  const users = new Map<string, User>();
+
+  onMessage<User, void>('saveUser', (message) => {
+    users.set(message.payload.id, message.payload);
+    message.resolve();
+  });
+
+  onMessage<string, User | null>('getUser', (message) => {
+    message.resolve(users.get(message.payload) ?? null);
+  });
+
+  onMessage<string, boolean>('deleteUser', (message) => {
+    message.resolve(users.delete(message.payload));
+  });
+});
+
+await worker.sendToMethod<void, User>('saveUser', {
+  id: '42',
+  name: 'Johnny',
+});
+
+const user = await worker.sendToMethod<User | null, string>('getUser', '42');
+```
+
+One Worker, multiple typed operations, one shared Worker-local state.
+
+### 🔎 Filter Large Collections with Progress
+
+The Worker can retrieve, store, and filter a large collection without blocking the main thread.
+
+```ts
+type Item = Record<string, unknown>;
 
-    // heavy computation like fibonacci
+const worker = createEasyWebWorker<string, Item[]>(({ onMessage }) => {
+  const collection = fetch('https://api.example.com/items').then(
+    (response) => response.json() as Promise<Item[]>
+  );
+
+  const containsValue = (item: unknown, filter: string): boolean => {
+    if (item === null || item === undefined) return false;
+
+    if (typeof item !== 'object') {
+      return String(item).toLowerCase().includes(filter);
+    }
+
+    return Object.values(item).some((value) => containsValue(value, filter));
+  };
+
+  onMessage(async (message) => {
+    const items = await collection;
+    const filter = message.payload.trim().toLowerCase();
+
+    const result = items.filter((item, index) => {
+      message.reportProgress(((index + 1) / items.length) * 100);
+
+      return containsValue(item, filter);
+    });
 
     message.resolve(result);
   });
-}, {
-  // We will now scale up to four workers if necessary.
-  maxWorkers: 4
 });
 ```
 
-By default, creating an **EasyWebWorker** also creates a single native JavaScript worker. Without any added configuration, this Worker instance will remain active unless it is programmatically disposed. However, by modifying the **maxWorkers** parameter, you can control the number of native workers used, allowing the **EasyWebWorker** to execute multiple messages across multiple threads.
+Usage:
+
+```ts
+const filtered = await worker
+  .send('johnny')
+  .onProgress((percentage) => console.log(percentage));
+
+console.log(filtered);
+```
 
-You can also control whether these additional workers should be created on demand when messages are sent to the **EasyWebWorker**. This can be done along with setting the **terminationDelay**, which indicates how long to wait before disposing of a **Worker** to avoid unnecessary resource consumption. Alternatively, you can choose to **warmUp** and keep the Workers alive from the moment the **EasyWebWorker** is created.
+### 🥇 Latest Request Wins with `override()`
 
-From the main thread, the consumption of the worker remains the same. Depending on the configuration, the workers will be created either statically or on-demand as needed. The EasyWebWorker will be responsible for selecting them from a pool. Additionally, the EasyWebWorker will manage the distribution of messages among the available workers.
+Useful for search, preview generation, parsing, or any workflow where an older queued result becomes irrelevant.
 
 ```ts
-// Since maxWorkers is configured to 4, a total of 3 native workers, will be created.
-const results = await Promise.all([
-  worker.send(payload),
-  worker.send(payload1),
-  worker.send(payload2),
-]);
+const result = await worker.override(
+  latestPayload,
+  'Superseded by a newer request'
+);
 ```
 
-In the previous example, since the **warmUp** parameter wasn’t included, only 3 Native workers will be created to handle the 3 messages, even though the maximum available is 4. Additionally, since the **keepAlive** parameter was not included, if a total of 1 second passes without new messages, the Native workers will be disposed of to save resources.
+`override()` cancels the current queued work and sends the new message after cancellation completes.
 
-## Want to see more?
+For immediate cancellation/reboot behavior:
 
-Here is an example of how you could easily create data filter into a Worker, to avoid performing loops process into the main thread that could end affecting user experience.
+```ts
+await worker.override(latestPayload, 'Superseded', { force: true });
+```
 
-```TS
-interface FilterSource {
-  filter: string,
-  collection: any[],
-  reportProgress: boolean,
-}
+> `force: true` reboots the Worker. A Worker created directly from an existing native `Worker` instance cannot be rebooted by the library.
 
-const worker = createEasyWebWorker<FilterSource, any[]>(({ onMessage }) => {
-  const containsValue = (item: any, filter: string): boolean => {
-    const itemKeys = Object.keys(item);
+### 🥈 Keep the Current Task, Replace the Rest
 
-    return itemKeys.some((key) => {
-      const prop = item[key] || null;
+`overrideAfterCurrent()` allows the currently executing message to finish, cancels the other queued messages, then sends the replacement.
 
-      if (typeof prop !== 'string' && Object.keys(prop).length) return containsValue(prop, filter);
-      if (prop.toString().replace(/(\r\n|\n|\r)/gm, '').trim().toLowerCase()
-        .indexOf(filter) !== -1) return true;
+```ts
+const result = await worker.overrideAfterCurrent(
+  latestPayload,
+  'Queue replaced'
+);
+```
 
-      return false;
-    });
-  };
+This is useful when interrupting the current operation would be expensive or unsafe, but stale queued work should still be discarded.
 
-  onMessage((message: IEasyWebWorkerMessage<FilterSource, any[]>) => {
-    const { payload } = message;
-    const { collection, filter = '', reportProgress: countProgress } = payload;
-    const { length: collectionLength } = collection;
-    const result = filter === '' ? collection : [];
-    const progressPerItem = collectionLength ? 100 / collectionLength : 0;
+### 🧹 Explicit Cleanup
 
-    let currentProgress = 0;
+Dispose the worker when the owning feature or application no longer needs it.
 
-    if (filter) {
-      for (let index = 0; index < collectionLength; index += 1) {
-        if (countProgress) {
-          currentProgress += progressPerItem;
-          message.reportProgress(currentProgress);
-        }
+```ts
+await worker.dispose();
+```
 
-        const item = collection[index];
+`dispose()` cancels outstanding work, revokes the generated Worker URL when applicable, terminates Worker instances, and clears the pool.
 
-        if (containsValue(item, filter)) result.push(item);
-      }
-    }
+---
 
-    message.resolve(result);
-  });
+## 🧰 API Reference
+
+### `createEasyWebWorker(source, config?)`
+
+Convenience factory that creates an `EasyWebWorker`.
+
+Supported sources:
+
+```ts
+EasyWebWorkerBody
+EasyWebWorkerBody[]
+string
+URL
+Worker
+Worker[]
+```
+
+Example:
+
+```ts
+const worker = createEasyWebWorker<Payload, Result>(workerBody, config);
+```
+
+### `EasyWebWorker<TPayload, TResult>`
+
+You can also instantiate the class directly:
+
+```ts
+import { EasyWebWorker } from 'easy-web-worker';
+
+const worker = new EasyWebWorker<Payload, Result>(workerBody, config);
+```
+
+### ⚙️ Worker Configuration
+
+| Option                | Purpose                                                                                                                  |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `scripts`             | Scripts to include in a runtime Worker                                                                                   |
+| `workerOptions`       | Native [`WorkerOptions`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) passed when a Worker is created |
+| `onWorkerError`       | Handles native Worker errors                                                                                             |
+| `maxWorkers`          | Maximum number of native Workers in the pool                                                                             |
+| `keepAlive`           | Keep created Workers alive after work completes                                                                          |
+| `terminationDelay`    | Delay before idle Workers are terminated when `keepAlive` is `false`                                                     |
+| `warmUpWorkers`       | Create the configured Worker pool during initialization                                                                  |
+| `primitiveParameters` | Static primitive initialization values exposed through `context.primitiveParameters`                                     |
+
+### 📤 `send(payload?, transfer?)`
+
+Send a message to the default Worker handler.
+
+```ts
+const result = await worker.send(payload);
+```
+
+With transferables:
+
+```ts
+const result = await worker.send(payload, [buffer]);
+```
+
+Returns a `CancelablePromise<TResult>`.
+
+### 🎯 `sendToMethod(method, payload?, transfer?)`
+
+Send a message to a named `onMessage(method, callback)` handler.
+
+```ts
+const result = await worker.sendToMethod<Result, Payload>('calculate', payload);
+```
+
+### 🛑 `cancelAll(reason?, config?)`
+
+Cancel all currently tracked messages.
+
+```ts
+await worker.cancelAll('Canceled by user');
+```
+
+Force an immediate Worker reboot:
+
+```ts
+await worker.cancelAll('Reset', {
+  force: true,
 });
 ```
 
-And how to use this?
+### 🥇 `override(payload?, reason?, config?)`
+
+Cancel current queued work and send a replacement message.
 
-```TS
-worker.send({
-  collection: [{ name: 'julio perez' }, { name: 'carol starling' }, { name: 'goku' }, { name: { firstname: 'johnny' } }],
-  filter: 'johnny',
-  reportProgress: true,
-}).onProgress((progressPercentage) => console.log(progressPercentage))
-  .then((filtered: any[]) => console.log(filtered));
+```ts
+const result = await worker.override(payload, 'Superseded');
 ```
 
-the output should be:
-=> 25
-=> 50
-=> 75
-=> 100
-=> [{ name: { firstname: 'johnny' } }]
+### 🥈 `overrideAfterCurrent(payload?, reason?, config?)`
 
-Of course this is a very tiny array, but is just to give you and idea, actually you also could make fetch requests into workers... give it a try.
+Allow the current message to complete, cancel the remaining queue, then send a replacement.
 
-# Methods
+```ts
+const result = await worker.overrideAfterCurrent(payload, 'Queue replaced');
+```
 
-### `EasyWebWorker.reboot(reason?: unknown): CancelableCancelablePromise<void>[]`
+### 🔄 `reboot(reason?)`
 
-This method will reboot the worker and cancel all the messages in the queue.
+Terminate the current Worker pool, cancel tracked messages, and initialize the Worker again.
 
-- `reason` - (optional) reason why the worker will be restarted.
+```ts
+worker.reboot('Worker configuration reset');
+```
 
-Returns an array of promises that are resolved with the rejection reason provided when the messages are canceled.
+A Worker created from an existing native `Worker` instance cannot be rebooted by the library.
 
-Example usage:
+### 🧹 `dispose()`
 
-```typescript
-const worker = createEasyWebWorker<string, string>(({ onMessage }) => {
-  onMessage((message) => {
-    message.resolve(`Received message: ${message.payload}`);
-  });
+Cancel outstanding messages and release the Worker resources.
+
+```ts
+await worker.dispose();
+```
+
+---
+
+## 💬 `IEasyWebWorkerMessage<TPayload, TResult>`
+
+Every `onMessage()` handler receives an `IEasyWebWorkerMessage`.
+
+### 📥 `payload`
+
+The payload sent from the main thread.
+
+```ts
+onMessage((message) => {
+  console.log(message.payload);
+});
+```
+
+### ✅ `resolve(result?, transfer?)`
+
+Resolve the main-thread promise.
+
+```ts
+message.resolve(result);
+```
+
+### ❌ `reject(reason?, transfer?)`
+
+Reject the main-thread promise.
+
+```ts
+message.reject(new Error('Something failed'));
+```
+
+### 🛑 `cancel(reason?, transfer?)`
+
+Cancel the request from inside the Worker.
+
+```ts
+message.cancel('No longer needed');
+```
+
+### 📊 `reportProgress(percentage, payload?, transfer?)`
+
+Report progress while keeping the request pending.
+
+```ts
+message.reportProgress(50, {
+  processed: 500,
+  total: 1000,
 });
+```
 
-const messagePromise = worker.send('Hello!');
+### 🎬 Lifecycle Subscriptions
 
-worker.reboot('Worker was restarted');
+```ts
+message.onResolve(callback);
+message.onReject(callback);
+message.onCancel(callback);
+message.onProgress(callback);
+message.onFinalize(callback);
+```
+
+Each subscription returns an unsubscribe function.
 
-// The message promise will be rejected with the reason 'Worker was restarted'
+### 🔍 Status
+
+```ts
+message.getStatus();
+message.isPending();
 ```
 
-### override(payload?, reason?, config?): CancelablePromise
+---
+
+## 🎨 Worker Source Options
 
-Cancel all current messages and send a new one.
+| Source              | Best for                                     | Worker managed by `easy-web-worker`? |
+| ------------------- | -------------------------------------------- | ------------------------------------ |
+| Function template   | Small/medium Worker logic with minimal setup | ✅                                   |
+| Template array      | Composable runtime Worker logic              | ✅                                   |
+| `string` / `URL`    | Dedicated static Worker file                 | ✅                                   |
+| Existing `Worker`   | Integrating an existing native Worker        | ✅ Wrapped                           |
+| Existing `Worker[]` | Supplying your own pre-created pool          | ✅ Wrapped                           |
 
-### cancelAll(reason?: unknown): CancelablePromise<void>[]
+All approaches use the same message-oriented API on the main thread.
 
-Cancels all messages that are currently waiting to be processed by the worker.
+---
 
-- `reason` - (optional) The reason for the cancellation.
+## 🎓 Learning Resources
 
-Returns an array of promises that are resolved with the rejection reason provided when the messages are canceled.
+- 🌐 [Live example — text diff](https://johnny-quesada-developer.github.io/easy-web-workers-example/)
+- 🎥 [Introduction video](https://www.youtube.com/watch?v=CK-Uri9lDOE)
+- 🧩 [Example repository](https://github.com/johnny-quesada-developer/easy-web-workers-example)
+- 🧪 [CodePen example](https://codepen.io/johnnynabetes/full/wvOvygW)
+- 📘 [MDN — Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+- 📦 [npm — easy-web-worker](https://www.npmjs.com/package/easy-web-worker)
 
-### overrideAfterCurrent(payload?, reason?, config?): CancelablePromise
+---
 
-Cancel all the messages but the current execution and add a new message
+## 🌐 Framework Compatibility
 
-### send(payload?, reason?, config?): CancelablePromise
+`easy-web-worker` is built around the browser's native Worker API, so it is not tied to a UI framework.
+
+| Environment        | Usage                 |
+| ------------------ | --------------------- |
+| React              | ✅                    |
+| Angular            | ✅                    |
+| Vue                | ✅                    |
+| Svelte             | ✅                    |
+| Vanilla JavaScript | ✅                    |
+| TypeScript         | ✅ Strongly typed API |
+
+The important requirement is a runtime with browser Web Worker support.
+
+---
+
+## 🎉 Why Developers Choose This
+
+### The Bottom Line
+
+| What You Get                  | What You Avoid                         |
+| ----------------------------- | -------------------------------------- |
+| ✅ Real native Worker threads | ❌ Main-thread CPU bottlenecks         |
+| ✅ Promise-based messaging    | ❌ Manual message-ID plumbing          |
+| ✅ Cancellation               | ❌ Abandoned long-running work         |
+| ✅ Progress events            | ❌ Custom progress protocols           |
+| ✅ Named Worker methods       | ❌ Giant message-routing switches      |
+| ✅ Transferable support       | ❌ Unnecessary large-data cloning      |
+| ✅ Worker pools               | ❌ Hand-written concurrency management |
+| ✅ Runtime + static Workers   | ❌ One forced architecture             |
+| ✅ TypeScript generics        | ❌ Untyped request/response contracts  |
+
+---
+
+## 🤝 Collaborators
+
+<div align="center">
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/johnny-quesada-developer">
+        <img src="https://avatars.githubusercontent.com/u/62082152?v=4&s=150" width="100" alt="Johnny Quesada" />
+        <br />
+        <sub><b>Johnny Quesada</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/gabrielecirulli">
+        <img src="https://avatars.githubusercontent.com/u/886011?v=4&s=150" width="100" alt="Gabriele Cirulli" />
+        <br />
+        <sub><b>Gabriele Cirulli</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>
+
+</div>
+
+---
+
+## 🚀 Get Started Now
+
+```bash
+npm install easy-web-worker
+```
+
+Then:
+
+```ts
+import { createEasyWebWorker } from 'easy-web-worker';
+
+const worker = createEasyWebWorker<string, string>(({ onMessage }) => {
+  onMessage((message) => {
+    message.resolve(message.payload.toUpperCase());
+  });
+});
+
+console.log(await worker.send('hello worker'));
+// HELLO WORKER
+```
 
-Sends a message to the worker
+**That's it. You're running work in a real Web Worker.** 🎉
 
-- `payload` - (optional) The message payload.
-- `options` - (optional) Additional send options.
+---
 
-**_Thanks for reading, hope this help someone_**
+<div align="center">
 
-## Collaborators
+### Built with ❤️ for developers who want the main thread to stay responsive
 
-[![Image Johnny Quesada](https://avatars.githubusercontent.com/u/62082152?v=4&s=150)](https://github.com/johnny-quesada-developer)
-&nbsp;&nbsp;&nbsp;&nbsp;[![Image Gabriele Cirulli](https://avatars.githubusercontent.com/u/886011?v=4&s=150)](https://github.com/gabrielecirulli)
+**[⭐ Star on GitHub](https://github.com/johnny-quesada-developer/easy-web-worker)** • **[📝 Report Issues](https://github.com/johnny-quesada-developer/easy-web-worker/issues)** • **[🧩 Examples](https://github.com/johnny-quesada-developer/easy-web-workers-example)**
 
-[Johnny Quesada](https://github.com/johnny-quesada-developer) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Gabriele Cirulli](https://github.com/gabrielecirulli)
+</div>