Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
comlink-loader
Advanced tools
Readme
Offload modules to Worker threads seamlessly using Comlink.
await new Foo()
)npm install -D comlink-loader
The goal of comlink-loader
is to make the fact that a module is running inside a Worker nearly transparent to the developer.
In the example below, there are two changes we must make in order to import MyClass
within a Worker via comlink-loader
.
await
, since everything is inherently asynchronous.comlink-loader!./my-class
is now a function that returns our module exports.
Calling this function creates a new instance of the Worker.
my-class.js: (gets moved into a worker)
// Dependencies get bundled into the worker:
import rnd from 'random-int';
// Export as you would in a normal module:
export function meaningOfLife() {
return 42;
}
export class MyClass {
constructor(value = rnd()) {
this.value = value;
}
increment() {
this.value++;
}
// Tip: async functions make the interface identical
async getValue() {
return this.value;
}
}
main.js: (our demo, on the main thread)
import MyWorker from 'comlink-loader!./my-class';
// instantiate a new Worker with our code in it:
const inst = new MyWorker();
// our module exports are exposed on the instance:
await inst.meaningOfLife(); // 42
// instantiate a class in the worker (does not create a new worker).
// notice the `await` here:
const obj = await new inst.MyClass(42);
await obj.increment();
await obj.getValue(); // 43
Comlink-loader also includes a singleton
mode, which can be opted in on a per-module basis using Webpack's inline loader syntax, or globally in Webpack configuration. Singleton mode is designed to be the easiest possible way to use a Web Worker, but in doing so it only allows using a single Worker instance for each module.
The benefit is that your module's exports can be used just like any other import, without the need for a constructor. It also supports TypeScript automatically, since the module being imported looks just like it would were it running on the main thread. The only change that is required in order to move a module into a Worker using singleton mode is to ensure all of your function calls use await
.
First, configure comlink-loader
globally to apply to all *.worker.js
files (or whichever pattern you choose). Here we're going to use TypeScript, just to show that it works out-of-the-box:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.worker\.(js|ts)$/i,
use: [{
loader: 'comlink-loader',
options: {
singleton: true
}
}]
}
]
}
}
Now, let's write a simple module that we're going to load in a Worker:
greetings.worker.ts:
export async function greet(subject: string): string {
return `Hello, ${subject}!`;
}
We can import our the above module, and since the filename includes .worker.ts
, it will be transparently loaded in a Web Worker!
index.ts:
import { greet } from './greetings.worker.ts';
async function demo() {
console.log(await greet('dog'));
}
demo();
Apache-2.0
FAQs
Webpack loader: offload modules to Worker threads seamlessly using Comlink
The npm package comlink-loader receives a total of 4,815 weekly downloads. As such, comlink-loader popularity was classified as popular.
We found that comlink-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.