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.
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.htmlfile directly in your browser, you will get an error as the worker will not be able to fetch theindex.jsandworker.jsfiles.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.
npm install wrakerVite 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",
});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
?workeror?urlshorthands, but it is using workarounds and may not work as expected. Refer to this discussion for details.
Please read the CONTRIBUTING.md file for more information.
Wraker is licensed under the MIT License. See LICENSE for the full license text.