wraker

Wraker

workflow - wraker

Wraker is a wrapper for web workers. It makes it easier to manage the communication between the main thread and the worker thread through a simple express like API.

Documentation

Getting started

Using a CDN or a static server

Create a new file worker.js:

import { WrakerApp } from "https://cdn.jsdelivr.net/npm/wraker/+esm";

const app = new WrakerApp();

app.get("/ping", (req, res) => {
  res.send("pong");
});

app.listen();

Then, create a new file main.js:

import { Wraker } from "https://cdn.jsdelivr.net/npm/wraker/+esm";

const worker = new Wraker("worker.js", {
  type: "module",
  name: "my-first-worker",
});

worker.fetch("/ping").then((response) => {
  console.log(response.body); // "pong"
});

Finally, create a web page index.html and serve it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wraker</title>
  </head>

  <body>
    <script type="module" src="main.js"></script>
  </body>
</html>

ℹ️ You must serve your files using a server because of the CORS policy. If you open the index.html file directly in your browser, you will get an error as the worker will not be able to fetch the index.js and worker.js files.

You can use any server to serve your files. You can use express. Other good options are http-server, python's http.server, or Live Server for VSCode.

Using a Node.js bundler

npm install wraker

Vite (Nuxt, Vue, Svelte, etc.)

Vite automatically resolves "./worker.js?worker" to a worker class and "./worker.js?url" to a worker url. Please refer to the Vite documentation for more information.

You can take advantage of this feature to create a worker with Wraker:

// worker.js
import { WrakerApp } from "wraker";

// main.js using ?worker shorthand
import { Wraker } from "wraker";
import myWorker from "./worker.js?worker";

const worker = new myWorker();
const wraker = new Wraker.fromWorker(worker);

// main.js using ?url shorthand
import { Wraker } from "wraker";
import myWorkerUrl from "./worker.js?url";

const worker = new Wraker(myWorkerUrl, {
  type: "module",
});

// main.js using the full path
import { Wraker } from "wraker";

const myWorkerUrl = new URL("./worker.js", import.meta.url);

const worker = new Wraker(myWorkerUrl, {
  type: "module",
});

Webpack (React, Angular, etc.)

The correct way to use Wraker with Webpack is to use the full path to the worker file. Please refer to the Webpack documentation for more information.

// main.js
import { Wraker } from "wraker";

const myWorkerUrl = new URL("./worker.js", import.meta.url);

const worker = new Wraker(myWorkerUrl, {
  type: "module",
});

ℹ️ You may be able to use the ?worker or ?url shorthands, but it is using workarounds and may not work as expected. Refer to this discussion for details.

Contributing

Please read the CONTRIBUTING.md file for more information.

License

Wraker is licensed under the MIT License. See LICENSE for the full license text.