Rebase: Add worker-loader (#867)

* Add worker-loader Targets enhancement: #170 Enable usage of `microbundle --worker-loader` to apply rollup-plugin-web-worker-loader. Allow bundling web workers automatically - Add flag `--worker-loader` - For format `es` and `modern`, a Worker `type: module` is automatically bundled * Update README.md Co-authored-by: Jason Miller <[email protected]> * Update src/index.js Co-authored-by: Jason Miller <[email protected]> * Update src/prog.js Co-authored-by: Jason Miller <[email protected]> * Update test/__snapshots__/index.test.js.snap Co-authored-by: Jason Miller <[email protected]> * Update test/fixtures/worker-loader/package.json Co-authored-by: Jason Miller <[email protected]> * Update README.md Co-authored-by: Jason Miller <[email protected]> * Remove node_modules from snapshot * Upgrade rollup-plugin-off-main-thread * Add changeset Co-authored-by: Tim Daubenschütz <[email protected]> Co-authored-by: Jason Miller <[email protected]>
developit · Oct 6, 2021 · 1b61029 · 1b61029
1 parent b1a6374
commit 1b61029
Show file tree

Hide file tree

Showing 12 changed files with 338 additions and 9 deletions.
diff --git a/.changeset/curly-eels-watch.md b/.changeset/curly-eels-watch.md
@@ -0,0 +1,5 @@
+---
+'microbundle': minor
+---
+
+- Add support for Module Workers with a new `--workers` flag
diff --git a/README.md b/README.md
@@ -253,6 +253,26 @@ This can be customized by passing the command line argument `--css-modules "[nam
 | true  | import './my-file.css';        | :white_check_mark: |
 | true  | import './my-file.module.css'; | :white_check_mark: |
 
+### 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:
@@ -316,6 +336,7 @@ Options
 	--generateTypes    Whether or not to generate types, if `types` or `typings` is set in `package.json` then it will default to be `true`
 	--css              Where to output CSS: "inline" or "external" (default: "external")
 	--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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
 		"@rollup/plugin-commonjs": "^17.0.0",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^11.0.1",
+		"@surma/rollup-plugin-off-main-thread": "^2.2.2",
 		"asyncro": "^3.0.0",
 		"autoprefixer": "^10.1.0",
 		"babel-plugin-macros": "^3.0.1",

diff --git a/src/index.js b/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';
@@ -389,6 +390,8 @@ function createConfig(options, entry, format, writeMeta) {
 		options.generateTypes == null
 			? !!(pkg.types || pkg.typings)
 			: options.generateTypes;
+	const useWorkerLoader = options.workers !== false;
+
 	const escapeStringExternals = ext =>
 		ext instanceof RegExp ? ext.source : escapeStringRegexp(ext);
 	const externalPredicate = new RegExp(
@@ -427,7 +430,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,
 			external: id => {
@@ -616,6 +619,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(),
 					/** @type {import('rollup').Plugin} */
 					({
 						name: 'postprocessing',

diff --git a/src/prog.js b/src/prog.js
@@ -57,6 +57,11 @@ export default handler => {
 		.option('--cwd', 'Use an alternative working directory', '.')
 		.option('--sourcemap', 'Generate source map')
 		.option('--css', 'Where to output CSS: "inline" or "external"', 'external')
+		.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]"',

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -3016,3 +3016,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
+"
+`;