{"id":29354402,"url":"https://github.com/googlechromelabs/comlink-loader","last_synced_at":"2025-07-09T03:14:39.160Z","repository":{"id":39605150,"uuid":"137113928","full_name":"GoogleChromeLabs/comlink-loader","owner":"GoogleChromeLabs","description":"Webpack loader to offload modules to Worker threads seamlessly using Comlink.","archived":false,"fork":false,"pushed_at":"2020-09-14T18:38:42.000Z","size":32,"stargazers_count":625,"open_issues_count":27,"forks_count":30,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-07-07T04:13:55.440Z","etag":null,"topics":["comlink","threading","webpack","webpack-loader","webworker","worker"],"latest_commit_sha":null,"homepage":"https://npm.im/comlink-loader","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-12T18:45:26.000Z","updated_at":"2025-04-27T05:31:34.000Z","dependencies_parsed_at":"2022-07-20T03:32:42.315Z","dependency_job_id":null,"html_url":"https://github.com/GoogleChromeLabs/comlink-loader","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/GoogleChromeLabs/comlink-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcomlink-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcomlink-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcomlink-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcomlink-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/comlink-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcomlink-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264384459,"owners_count":23599619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comlink","threading","webpack","webpack-loader","webworker","worker"],"created_at":"2025-07-09T03:14:38.461Z","updated_at":"2025-07-09T03:14:39.153Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/cLb2dLG.jpg\" width=\"600\" alt=\"comlink-loader\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e🛰 comlink-loader 📡\u003c/h1\u003e\n\u003cp align=\"center\"\u003eOffload modules to Worker threads seamlessly using \u003ca href=\"https://github.com/GoogleChromeLabs/comlink\"\u003eComlink\u003c/a\u003e.\u003c/p\u003e\n\n\n### Features\n\n- Offload almost any module into a Worker with little or no usage change\n- Supports arbitrary classes, objects \u0026 functions (`await new Foo()`)\n- Works beautifully with async/await\n- Built-in code-splitting: workers are lazy-loaded\n\n\n## Installation\n\n```sh\nnpm install -D comlink-loader\n```\n\n\n## Usage\n\nThe goal of `comlink-loader` is to make the fact that a module is running inside a Worker nearly transparent to the developer.\n\n### Factory Mode (default)\n\nIn the example below, there are two changes we must make in order to import `MyClass` within a Worker via `comlink-loader`.\n\n1. instantiation and method calls must be prefixed with `await`, since everything is inherently asynchronous.\n2. the value we import from `comlink-loader!./my-class` is now a function that returns our module exports.\n    \u003e Calling this function creates a new instance of the Worker.\n\n**my-class.js**: _(gets moved into a worker)_\n\n```js\n// Dependencies get bundled into the worker:\nimport rnd from 'random-int';\n\n// Export as you would in a normal module:\nexport function meaningOfLife() {\n  return 42;\n}\n\nexport class MyClass {\n  constructor(value = rnd()) {\n    this.value = value;\n  }\n  increment() {\n    this.value++;\n  }\n  // Tip: async functions make the interface identical\n  async getValue() {\n    return this.value;\n  }\n}\n```\n\n**main.js**: _(our demo, on the main thread)_\n\n```js\nimport MyWorker from 'comlink-loader!./my-class';\n\n// instantiate a new Worker with our code in it:\nconst inst = new MyWorker();\n\n// our module exports are exposed on the instance:\nawait inst.meaningOfLife(); // 42\n\n// instantiate a class in the worker (does not create a new worker).\n// notice the `await` here:\nconst obj = await new inst.MyClass(42);\n\nawait obj.increment();\n\nawait obj.getValue();  // 43\n```\n\n### Singleton Mode\n\nComlink-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.\n\nThe 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`.\n\nFirst, 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:\n\n**webpack.config.js**:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.worker\\.(js|ts)$/i,\n        use: [{\n          loader: 'comlink-loader',\n          options: {\n            singleton: true\n          }\n        }]\n      }\n    ]\n  }\n}\n```\n\nNow, let's write a simple module that we're going to load in a Worker:\n\n**greetings.worker.ts**:\n\n```ts\nexport async function greet(subject: string): string {\n  return `Hello, ${subject}!`;\n}\n```\n\nWe can import our the above module, and since the filename includes `.worker.ts`, it will be transparently loaded in a Web Worker!\n\n**index.ts**:\n\n```ts\nimport { greet } from './greetings.worker.ts';\n\nasync function demo() {\n  console.log(await greet('dog'));\n}\n\ndemo();\n```\n\n\n## License\n\nApache-2.0\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fcomlink-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fcomlink-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fcomlink-loader/lists"}