Skip to content
It’s like import(), but runs the module in a worker.
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update README Mar 16, 2020
src Add file size to README Mar 17, 2020
tests Adjust README Mar 17, 2020
.gitignore Add build system Mar 13, 2020
.npmignore Add .npmignore Mar 16, 2020
CODEOWNERS Add license-y stuff Mar 13, 2020
CONTRIBUTING Add license-y stuff Mar 13, 2020
CONTRIBUTORS Add license-y stuff Mar 13, 2020
LICENSE Add license-y stuff Mar 13, 2020
README.md Add file size to README Mar 17, 2020
karma.conf.js Limit browsers Mar 16, 2020
package-lock.json 1.0.1 Mar 17, 2020
package.json Move everything to devDependencies Mar 20, 2020
rollup.config.js Add file size to README Mar 17, 2020

README.md

importFromWorker()

It’s like import(), but runs the module in a worker.

This library is a love-child of @_developit and @dassurma.

Total size: 1.7K brotli’d (including Comlink).

Requires modules in workers, which are currently only implemented in Chrome!

Usage

// service.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}
// main.js
import importFromWorker from "import-from-worker";

const { add, multiply } = await importFromWorker("./service.js");
console.log(await add(40, 2));
// ...

You can also use importFromWorker() from a CORS-enabled CDN like JSDelivr or unpkg:

import importFromWorker from "https://cdn.jsdelivr.net/npm/import-from-worker@latest/dist/import-from-worker.js";

You can remix this glitch, if you like.

Q&A

How does it work?

The library injects itself as the worker file and then uses dynamic import() to load the module. The resulting module is then exposed to the worker’s parent using Comlink. All guidance about callbacks and transferables from Comlink applies to this library as well. For adjustments, the library re-exports Comlink:

import importFromWorker, { Comlink } from "import-from-worker";

Can I get a handle to the underlying worker?

Why yes you can! The module exports a workerSymbol that can be used thusly:

import importFromWorker, { workerSymbol } from "import-from-worker";

const module = await importFromWorker("./service.js");
const worker = module[workerSymbol];
// You could also use destructuring:
// const {[workerSymbol]: worker, add, subtract} = await importFromWorker("./service.js");

// Use the worker instance directly
worker.terminate();

What about browsers without module support in workers?

I tried to make the library work in those environments. It’s possible, but it gets messy. I welcome PRs (and preferably a preceding issue to discuss the design) on this problem!

How do I feature-detect module support in workers?

The snippet that’s somewhat endorsed by the WHATWG is the following:

let supportsModuleWorker = false;
const workerURL = URL.createObjectURL(new Blob([""]));
const options = {
  get type() {
    supportsModuleWorker = true;
  }
};
new Worker(workerURL, options).terminate();
URL.revokeObjectURL(workerURL);

License Apache-2.0

You can’t perform that action at this time.