Use dynamic import for default worker

Author: ahocevar

README.md

@@ -296,28 +296,6 @@ const data = await image.readRasters({ pool });
 It is possible to provide a pool size (i.e: number of workers), by default the number
 of available processors is used.
 
-Because of the way WebWorker work (pun intended), there is a considerable overhead
-involved when using the `Pool`, as all the data must be copied and cannot be simply be
-shared. But the benefits are two-fold. First: for larger image reads the overall time
-is still likely to be reduced and second: the main thread is relieved which helps to
-uphold responsiveness.
-
-If you want to use the Worker Pool in a project built with webpack (ex: VueJS or React) you have to install `threads-plugin` and add the plugin to your `webpack.config.js`:
-```
-npm install -D threads-plugin
-```
-
-```javascript
-const ThreadsPlugin = require('threads-plugin')
-
-module.exports = {
-  // ...
-  plugins: [
-    new ThreadsPlugin()
-  ]
-}
-````
-
 ### Dealing with visual data
 
 The TIFF specification provides various ways to encode visual data. In the

package.json

@@ -76,7 +76,7 @@
     "build:clean": "rimraf dist-node/ dist-browser/ dist-module/",
     "build:node": "parcel build dist-module/geotiff.js --target node --out-dir dist-node/",
     "build:browser": "parcel build dist-module/geotiff.js --target browser --out-dir dist-browser/ --global GeoTIFF --public-url .",
-    "build:module": "shx mkdir -p dist-module && shx cp -rf src/* dist-module/ && node scripts/serialize-workers.js",
+    "build:module": "shx mkdir -p dist-module && shx cp -rf src/* dist-module/ && node scripts/serialize-workers.cjs",
     "watch:browser": "run-p watch:module watch:browser:parcel",
     "watch:browser:parcel": "parcel watch dist-module/geotiff.js --target browser --out-dir dist-browser/ --global GeoTIFF --public-url .",
     "watch:module": "chokidar \"src/*.js\" -c \"npm run build:module\"",
@@ -86,7 +86,7 @@
     "dev:clean": "rm -rf dist/ .cache/",
     "docs": "rm -rf docs/; jsdoc -c .jsdoc.json -r src README.md -d docs",
     "prelint": "npm run build:module",
-    "lint": "eslint src test scripts .eslintrc.cjs",
+    "lint": "eslint src test scripts/*.cjs .eslintrc.cjs",
     "lint:fix": "npm run lint -- --fix",
     "prepare": "npm run build",
     "pretest": "npm run lint",

scripts/serialize-workers.js renamed to scripts/serialize-workers.cjs

@@ -1,5 +1,4 @@
-import { getDecoder } from './compression';
-import { create as createWorker } from './worker/decoder';
+import { getDecoder } from './compression/index.js';
 
 const defaultPoolSize = typeof navigator !== 'undefined' ? (navigator.hardwareConcurrency || 2) : 2;
 
@@ -13,19 +12,51 @@ const defaultPoolSize = typeof navigator !== 'undefined' ? (navigator.hardwareCo
 class Pool {
   /**
    * @constructor
-   * @param {Number} size The size of the pool. Defaults to the number of CPUs
+   * @param {Number} [size] The size of the pool. Defaults to the number of CPUs
    *                      available. When this parameter is `null` or 0, then the
    *                      decoding will be done in the main thread.
+   * @param {function(): Worker} [createWorker] A function that creates the decoder worker.
+   * Defaults to a worker with all decoders that ship with geotiff.js. The `createWorker()`
+   * function is expected to return a `Worker` compatible with Web Workers. For code that
+   * runs in Node, [web-worker](https://www.npmjs.com/package/web-worker) is a good choice.
+   *
+   * A worker that uses a custom lzw decoder would look like this `my-custom-worker.js` file:
+   * ```js
+   * import { addDecoder, getDecoder } from 'geotiff';
+   * addDecoder(5, () => import('./my-custom-lzw').then(m => m.default));
+   * self.addEventListener('message', async (e) => {
+   *   const { id, fileDirectory, buffer } = e.data;
+   *   const decoder = await getDecoder(fileDirectory);
+   *   const decoded = await decoder.decode(fileDirectory, buffer);
+   *   self.postMessage({ decoded, id }, [decoded]);
+   * });
+   * ```
+   * The way the above code is built into a worker by the `createWorker()` function
+   * depends on the used bundler. For most bundlers, something like this will work:
+   * ```js
+   * function createWorker() {
+   *   return new Worker(new URL('./my-custom-worker.js', import.meta.url));
+   * }
+   * ```
    */
-  constructor(size = defaultPoolSize) {
+  constructor(size = defaultPoolSize, createWorker) {
     this.workers = null;
+    this._awaitingDecoder = null;
     this.size = size;
     this.messageId = 0;
     if (size) {
-      this.workers = [];
-      for (let i = 0; i < size; i++) {
-        this.workers.push({ worker: createWorker(), idle: true });
-      }
+      this._awaitingDecoder = createWorker ? Promise.resolve(createWorker) : new Promise((resolve) => {
+        import('./worker/decoder.js').then((module) => {
+          resolve(module.create);
+        });
+      });
+      this._awaitingDecoder.then((create) => {
+        this._awaitingDecoder = null;
+        this.workers = [];
+        for (let i = 0; i < size; i++) {
+          this.workers.push({ worker: create(), idle: true });
+        }
+      });
     }
   }
 
@@ -34,7 +65,10 @@ class Pool {
    * @param {ArrayBuffer} buffer the array buffer of bytes to decode.
    * @returns {Promise.<ArrayBuffer>} the decoded result as a `Promise`
    */
-  decode(fileDirectory, buffer) {
+  async decode(fileDirectory, buffer) {
+    if (this._awaitingDecoder) {
+      await this._awaitingDecoder;
+    }
     return this.size === 0
       ? getDecoder(fileDirectory).then((decoder) => decoder.decode(fileDirectory, buffer))
       : new Promise((resolve) => {

src/pool.js

@@ -1,6 +1,6 @@
 /* global globalThis */
 /* eslint-disable import/no-mutable-exports */
-import { getDecoder } from '../compression';
+import { getDecoder } from '../compression/index.js';
 
 const worker = globalThis;
 

src/worker/decoder.js

@@ -1,5 +1,5 @@
 /* global plotty:false */
-import { Pool, fromUrl } from '../dist-module/geotiff';
+import { Pool, fromUrl } from '../dist-module/geotiff.js';
 
 const imageWindow = [0, 0, 500, 500];
 const tiffs = [

test/dev.js

@@ -8,13 +8,13 @@ import 'isomorphic-fetch';
 import AbortController from 'node-abort-controller';
 import { dirname } from 'path';
 
-import { GeoTIFF, fromArrayBuffer, writeArrayBuffer, fromUrls, Pool } from '../dist-module/geotiff';
-import { makeFetchSource } from '../dist-module/source/remote';
-import { makeFileSource } from '../dist-module/source/file';
-import { BlockedSource } from '../dist-module/source/blockedsource';
-import { chunk, toArray, toArrayRecursively, range } from '../dist-module/utils';
-import DataSlice from '../dist-module/dataslice';
-import DataView64 from '../dist-module/dataview64';
+import { GeoTIFF, fromArrayBuffer, writeArrayBuffer, fromUrls, Pool } from '../dist-module/geotiff.js';
+import { makeFetchSource } from '../dist-module/source/remote.js';
+import { makeFileSource } from '../dist-module/source/file.js';
+import { BlockedSource } from '../dist-module/source/blockedsource.js';
+import { chunk, toArray, toArrayRecursively, range } from '../dist-module/utils.js';
+import DataSlice from '../dist-module/dataslice.js';
+import DataView64 from '../dist-module/dataview64.js';
 
 const __dirname = dirname(new URL(import.meta.url).pathname);