File Manager

Current Path: Root / node_modules_old/ @surma/ rollup-plugin-off-main-thread

Parent Directory

Name	Size	Last Modified
[D]tests/	-	2022-10-02 10:07:59
[F].travis.yml Edit	114 bytes	2022-10-02 10:07:59
[F]CODEOWNERS	9 bytes	2022-10-02 10:07:36
[F]CONTRIBUTING	1.42 KB	2022-10-02 10:07:37
[F]CONTRIBUTORS	465 bytes	2022-10-02 10:07:39
[F]Dockerfile	527 bytes	2022-10-02 10:07:40
[F]LICENSE	11.08 KB	2022-10-02 10:07:42
[F]README.md Edit	2.97 KB	2022-10-02 10:07:59
[F]index.js Edit	11.15 KB	2022-10-02 10:07:58
[F]karma.conf.js Edit	1.28 KB	2022-10-02 10:07:58
[F]loader.ejs	2.39 KB	2022-10-02 10:07:45
[F]package.json Edit	984 bytes	2022-10-02 10:07:59
[F]renovate.json Edit	33 bytes	2022-10-02 10:07:59
[F]run_tests.js Edit	3.34 KB	2022-10-02 10:07:58

Editing: README.md

# rollup-plugin-off-main-thread

Use Rollup with workers and ES6 modules _today_.

```
$ npm install --save @surma/rollup-plugin-off-main-thread
```

Workers are JavaScript’s version of threads. [Workers are important to use][when workers] as the main thread is already overloaded, especially on slower or older devices.

This plugin takes care of shimming module support in workers and allows you to use `new Worker()`.

OMT is the result of merging loadz0r and workz0r.

## Usage

I set up [a gist] to show a full setup with OMT.

### Config

```js
// rollup.config.js
import OMT from "@surma/rollup-plugin-off-main-thread";

export default {
  input: ["src/main.js"],
  output: {
    dir: "dist",
    // You _must_ use either “amd” or “esm” as your format.
    // But note that only very few browsers have native support for
    // modules in workers.
    format: "amd"
  },
  plugins: [OMT()]
};
```

### Auto bundling

In your project's code use a module-relative path via `new URL` to include a Worker:

```js
const worker = new Worker(new URL("worker.js", import.meta.url), {
  type: "module"
});
```

This will just work.

If required, the plugin also supports plain literal paths:

```js
const worker = new Worker("./worker.js", { type: "module" });
```

However, those are less portable: in Rollup they would result in module-relative
path, but if used directly in the browser, they'll be relative to the document
URL instead.

Hence, they're deprecated and `new URL` pattern is encouraged instead for portability.

### Importing workers as URLs

If your worker constructor doesn't match `workerRegexp` (see options below), you might find it easier to import the worker as a URL. In your project's code:

```js
import workerURL from "omt:./worker.js";
import paintWorkletURL from "omt:./paint-worklet.js";

const worker = new Worker(workerURL, { name: "main-worker" });
CSS.paintWorklet.addModule(paintWorkletURL);
```

`./worker.js` and `./paint-worklet.js` will be added to the output as chunks.

## Options

```js
{
  // ...
  plugins: [OMT(options)];
}
```

- `loader`: A string containing the EJS template for the amd loader. If `undefined`, OMT will use `loader.ejs`.
- `useEval`: Use `fetch()` + `eval()` to load dependencies instead of `<script>` tags and `importScripts()`. _This is not CSP compliant, but is required if you want to use dynamic imports in ServiceWorker_.
- `workerRegexp`: A RegExp to find `new Workers()` calls. The second capture group _must_ capture the provided file name without the quotes.
- `amdFunctionName`: Function name to use instead of AMD’s `define`.
- `prependLoader`: A function that determines whether the loader code should be prepended to a certain chunk. Should return true if the load is suppsoed to be prepended.
- `urlLoaderScheme`: Scheme to use when importing workers as URLs. If `undefined`, OMT will use `"omt"`.

[when workers]: https://dassur.ma/things/when-workers
[a gist]: https://gist.github.com/surma/a02db7b53eb3e7870bf539b906ff6ff6

---

License Apache-2.0

Cancel

File Explorer

Navigation

File Manager

Editing: README.md

File Explorer

Navigation

File Manager

Editing: README.md

Confirm Deletion

Rename Item

Change Permissions (Chmod)