fix: web worker now behaves as expected and is documented

README.md

@@ -42,6 +42,21 @@ let v = new Vibrant("path/to/image", opts);
 v.getPalette().then((palette) => console.log(palette));
 ```
 
+### Worker Usage
+
+Quantization is the most time-consuming stage in `node-vibrant`. Luckily, the quantization can be run in the WebWorker to avoid freezing the UI thread.
+
+Here's how to use this feature:
+
+```typescript
+import { Vibrant, WorkerPipeline } from "node-vibrant/worker";
+import PipelineWorker from "node-vibrant/worker.worker?worker";
+
+Vibrant.use(new WorkerPipeline(PipelineWorker as never));
+```
+
+This requires your bundler to handle `?worker` transforms [similar to how Vite does](https://vite.dev/guide/features.html#import-with-query-suffixes)
+
 ## Documentation
 
 Documentation is currently in the works. Apologies for the inconvenience.

packages/node-vibrant/package.json

@@ -79,6 +79,16 @@
 				"default": "./dist/cjs/worker.cjs"
 			}
 		},
+		"./worker.worker": {
+			"import": {
+				"types": "./dist/esm/worker.worker.d.ts",
+				"default": "./dist/esm/worker.worker.js"
+			},
+			"require": {
+				"types": "./dist/cjs/worker.worker.d.cts",
+				"default": "./dist/cjs/worker.worker.cjs"
+			}
+		},
 		"./browser": {
 			"import": {
 				"types": "./dist/esm/browser.d.ts",

packages/node-vibrant/src/worker.ts

@@ -1,8 +1,2 @@
-import { WorkerPipeline } from "@vibrant/core";
-import { Vibrant } from "./configs/browser";
-
-import PipelineWorker from "./pipeline/index.worker?worker";
-
-Vibrant.use(new WorkerPipeline(PipelineWorker as never));
-
-export { Vibrant };
+export { Vibrant } from "./configs/browser";
+export { WorkerPipeline } from "@vibrant/core";

packages/node-vibrant/src/pipeline/index.worker.ts → packages/node-vibrant/src/worker.worker.ts

@@ -1,4 +1,4 @@
 import { runPipelineInWorker } from "@vibrant/core";
-import { pipeline } from "./";
+import { pipeline } from "./pipeline";
 
 runPipelineInWorker(self, pipeline);

packages/node-vibrant/vite.config.ts

@@ -13,6 +13,7 @@ export default mergeConfig(
 			"./src/node.ts",
 			"./src/browser.ts",
 			"./src/worker.ts",
+			"./src/worker.worker.ts",
 			"./src/throw.ts",
 		],
 		srcDir: "./src",

packages/vibrant-core/src/index.ts

@@ -58,16 +58,6 @@ export class Vibrant {
 		return Vibrant._pipeline.process(image.getImageData(), processOpts);
 	}
 
-	palette(): Palette {
-		return this.swatches();
-	}
-
-	swatches(): Palette {
-		throw new Error(
-			"Method deprecated. Use `Vibrant.result.palettes[name]` instead",
-		);
-	}
-
 	async getPalette(): Promise<Palette> {
 		const image = new this.opts.ImageClass();
 		try {

packages/vibrant-core/src/pipeline/worker/client.ts

@@ -11,9 +11,11 @@ import type { Pipeline, ProcessOptions, ProcessResult } from "../index";
  */
 export class WorkerPipeline implements Pipeline {
 	private _manager = new WorkerManager();
+
 	constructor(protected PipelineWorker: TaskWorkerClass) {
 		this._manager.register("pipeline", PipelineWorker);
 	}
+
 	private _rehydrate(result: ProcessResult) {
 		const { colors, palettes } = result;
 		result.colors = colors.map((s) => Swatch.clone(s));
@@ -24,9 +26,16 @@ export class WorkerPipeline implements Pipeline {
 		);
 		return result;
 	}
-	process(imageData: ImageData, opts: ProcessOptions): Promise<ProcessResult> {
-		return this._manager
-			.invokeWorker("pipeline", [imageData, opts], [imageData.data.buffer])
-			.then((result) => this._rehydrate(result as ProcessResult));
+
+	async process(
+		imageData: ImageData,
+		opts: ProcessOptions,
+	): Promise<ProcessResult> {
+		const result = await this._manager.invokeWorker(
+			"pipeline",
+			[imageData, opts],
+			[imageData.data.buffer],
+		);
+		return this._rehydrate(result as ProcessResult);
 	}
 }