Add worker-loader

README.md

@@ -192,6 +192,26 @@ By default Microbundle outputs multiple bundles, one bundle per format. A single
 microbundle -i lib/main.js -o dist/bundle.js --no-pkg-main -f umd
 ```
 
+### Building Module Workers
+
+Microbundle is able to detect and bundle Module Workers when generating bundles in the
+`es`, `umd` and `modern` formats. To use this feature, instantiate your Web Worker as follows:
+
+```js
+worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
+// or simply:
+worker = new Worker('./worker.js', { type: 'module' });
+```
+
+... then add the `--workers` flag to your build command:
+
+```bash
+microbundle --workers
+```
+
+For more information see
+[@surma/rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread#config).
+
 ### Mangling Properties
 
 To achieve the smallest possible bundle size, libraries often wish to rename internal object properties or class members to smaller names - transforming `this._internalIdValue` to `this._i`. Microbundle doesn't do this by default, however it can be enabled by creating a `mangle.json` file (or a `"mangle"` property in your package.json). Within that file, you can specify a regular expression pattern to control which properties should be mangled. For example: to mangle all property names beginning an underscore:
@@ -243,6 +263,7 @@ Options
 	--jsxImportSource  Specify the automatic import source for JSX like preact
 	--tsconfig         Specify the path to a custom tsconfig.json
 	--css-modules      Configures .css to be treated as modules (default: null)
+	--workers          Bundle module workers - see https://git.io/J3oSF  (default false)
 	-h, --help         Displays this message
 
 Examples

package.json

@@ -87,6 +87,7 @@
 		"@rollup/plugin-commonjs": "^13.0.0",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^6.1.0",
+		"@surma/rollup-plugin-off-main-thread": "2.1.0",
 		"asyncro": "^3.0.0",
 		"autoprefixer": "^9.8.0",
 		"babel-plugin-macros": "^2.8.0",

src/index.js

@@ -18,6 +18,7 @@ import alias from '@rollup/plugin-alias';
 import postcss from 'rollup-plugin-postcss';
 import typescript from 'rollup-plugin-typescript2';
 import json from '@rollup/plugin-json';
+import OMT from '@surma/rollup-plugin-off-main-thread';
 import logError from './log-error';
 import { isDir, isFile, stdout, isTruthy, removeScope } from './utils';
 import { getSizeInfo } from './lib/compressed-size';
@@ -366,6 +367,7 @@ function createConfig(options, entry, format, writeMeta) {
 			: () => resolve(options.cwd, 'mangle.json');
 
 	const useTypescript = extname(entry) === '.ts' || extname(entry) === '.tsx';
+	const useWorkerLoader = options.workers !== false;
 
 	const escapeStringExternals = ext =>
 		ext instanceof RegExp ? ext.source : escapeStringRegexp(ext);
@@ -405,7 +407,7 @@ function createConfig(options, entry, format, writeMeta) {
 	let config = {
 		/** @type {import('rollup').InputOptions} */
 		inputOptions: {
-			// disable Rollup's cache for the modern build to prevent re-use of legacy transpiled modules:
+			// disable Rollup's cache for modern builds to prevent re-use of legacy transpiled modules:
 			cache,
 
 			input: entry,
@@ -583,6 +585,9 @@ function createConfig(options, entry, format, writeMeta) {
 							},
 						},
 					],
+					// NOTE: OMT only works with amd and esm
+					// Source: https://github.com/surma/rollup-plugin-off-main-thread#config
+					useWorkerLoader && (format === 'es' || modern) && OMT(),
 					{
 						writeBundle(bundle) {
 							config._sizeInfo = Promise.all(

src/prog.js

@@ -56,6 +56,11 @@ export default handler => {
 		.option('--name', 'Specify name exposed in UMD builds')
 		.option('--cwd', 'Use an alternative working directory', '.')
 		.option('--sourcemap', 'Generate source map', true)
+		.option(
+			'--workers',
+			'Bundle module workers - see https://git.io/J3oSF',
+			false,
+		)
 		.option(
 			'--css-modules',
 			'Turns on css-modules for all .css imports. Passing a string will override the scopeName. eg --css-modules="_[hash]"',

test/__snapshots__/index.test.js.snap

@@ -2745,3 +2745,63 @@ exports[`fixtures build ts-module with microbundle 7`] = `
 //# sourceMappingURL=ts-module.umd.js.map
 "
 `;
+
+exports[`fixtures build worker-loader with microbundle 1`] = `
+"Used script: microbundle -f modern,es --workers
+
+Directory tree:
+
+worker-loader
+  dist
+    worker-35b22e56.js
+    worker-35b22e56.js.map
+    worker-7e1b9921.js
+    worker-7e1b9921.js.map
+    worker-loader.esm.js
+    worker-loader.esm.js.map
+    worker-loader.modern.js
+    worker-loader.modern.js.map
+  package-lock.json
+  package.json
+  src
+    bar.js
+    index.js
+    worker.js
+
+
+Build \\"workerLoader\\" to dist:
+140 B: worker-loader.modern.js.gz
+112 B: worker-loader.modern.js.br
+63 B: worker-7e1b9921.js.gz
+54 B: worker-7e1b9921.js.br
+150 B: worker-loader.esm.js.gz
+123 B: worker-loader.esm.js.br
+81 B: worker-35b22e56.js.gz
+66 B: worker-35b22e56.js.br"
+`;
+
+exports[`fixtures build worker-loader with microbundle 2`] = `8`;
+
+exports[`fixtures build worker-loader with microbundle 3`] = `
+"self.onmessage=function(e){return self.postMessage(e.data+\\"bar\\")};
+//# sourceMappingURL=worker-35b22e56.js.map
+"
+`;
+
+exports[`fixtures build worker-loader with microbundle 4`] = `
+"self.onmessage=s=>self.postMessage(s.data+\\"bar\\");
+//# sourceMappingURL=worker-7e1b9921.js.map
+"
+`;
+
+exports[`fixtures build worker-loader with microbundle 5`] = `
+"var e=new Worker(new URL(\\"worker-35b22e56.js\\",import.meta.url),{type:\\"module\\"});e.onmessage=function(e){return\\"foobar\\"===e.data},e.postMessage(\\"foo\\");
+//# sourceMappingURL=worker-loader.esm.js.map
+"
+`;
+
+exports[`fixtures build worker-loader with microbundle 6`] = `
+"const e=new Worker(new URL(\\"worker-7e1b9921.js\\",import.meta.url),{type:\\"module\\"});e.onmessage=e=>\\"foobar\\"===e.data,e.postMessage(\\"foo\\");
+//# sourceMappingURL=worker-loader.modern.js.map
+"
+`;

test/fixtures/worker-loader/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "worker-loader",
+  "scripts": {
+    "build": "microbundle -f modern,es --workers"
+  }
+}

test/fixtures/worker-loader/src/bar.js

@@ -0,0 +1,3 @@
+export function bar() {
+	return 'bar';
+}

test/fixtures/worker-loader/src/index.js

@@ -0,0 +1,4 @@
+const webWorker = new Worker('./worker.js', { type: 'module' });
+
+webWorker.onmessage = message => message.data === 'foobar';
+webWorker.postMessage('foo');

test/fixtures/worker-loader/src/worker.js

@@ -0,0 +1,3 @@
+import { bar } from './bar';
+
+self.onmessage = message => self.postMessage(message.data + bar());