Merge master branch of GoogleChromeLabs/worker-plugin

Fixes #6.

Author: andywer

package.json

@@ -31,7 +31,7 @@
   "jest": {
     "watchPathIgnorePatterns": [
       "<rootDir>/node_modules/",
-      "<rootDir>/test/fixtures/.*?/dist/"
+      "<rootDir>/test/fixtures/"
     ]
   },
   "babel": {
@@ -63,6 +63,9 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
+    "@file-services/memory": "^1.0.3",
+    "@file-services/node": "^1.0.3",
+    "@file-services/overlay": "^1.0.3",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "clean-webpack-plugin": "^1.0.0",
     "eslint": "^5.9.0",

src/index.js

@@ -69,9 +69,9 @@ export default class WorkerPlugin {
               }
             }
 
-            let loaderOptions = opts.name && { name: opts.name };
-            const req = `require(${JSON.stringify(workerLoader + (loaderOptions ? ('?' + JSON.stringify(loaderOptions)) : '') + '!' + dep.string)})`;
-            const id = `__webpack__worker__${++workerId}`;
+            const loaderOptions = { name: opts.name || workerId + '' };
+            const req = `require(${JSON.stringify(workerLoader + '?' + JSON.stringify(loaderOptions) + '!' + dep.string)})`;
+            const id = `__webpack__worker__${workerId++}`;
             ParserHelpers.toConstantDependency(parser, id)(expr.arguments[0]);
 
             ParserHelpers.addParsedVariableToModule(parser, id, req);

src/loader.js

@@ -56,6 +56,7 @@ export function pitch (request) {
   });
 
   const workerCompiler = this._compilation.createChildCompiler(NAME, workerOptions, plugins);
+  workerCompiler.context = this._compiler.context;
   (new WebWorkerTemplatePlugin(workerOptions)).apply(workerCompiler);
   (new FetchCompileWasmTemplatePlugin({
     mangleImports: compilerOptions.optimization.mangleWasmImports

test/_util.js

@@ -19,44 +19,98 @@ import webpack from 'webpack';
 import CleanPlugin from 'clean-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 
+export function sleep (ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 export function runWebpack (fixture, { output, plugins, ...config } = {}) {
+  return run(callback => webpack({
+    mode: 'production',
+    devtool: false,
+    context: path.resolve(__dirname, 'fixtures', fixture),
+    entry: './entry.js',
+    output: {
+      publicPath: 'dist/',
+      path: path.resolve(__dirname, 'fixtures', fixture, 'dist'),
+      ...(output || {})
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            mangle: false,
+            output: {
+              beautify: true
+            }
+          },
+          sourceMap: false
+        })
+      ]
+    },
+    plugins: [
+      new CleanPlugin([
+        path.resolve(__dirname, 'fixtures', fixture, 'dist', '**')
+      ])
+    ].concat(plugins || []),
+    ...config
+  }, callback));
+}
+
+export function watchWebpack (fixture, { output, plugins, context, ...config } = {}) {
+  context = context || path.resolve(__dirname, 'fixtures', fixture);
+  const compiler = webpack({
+    mode: 'production',
+    context,
+    entry: './entry.js',
+    output: {
+      publicPath: 'dist/',
+      path: path.resolve(context, 'dist'),
+      ...(output || {})
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            mangle: false,
+            output: {
+              beautify: true
+            }
+          },
+          sourceMap: false
+        })
+      ]
+    },
+    plugins: plugins || []
+  });
+  // compiler.watch({});
+  compiler.doRun = () => run(compiler.run.bind(compiler));
+  return compiler;
+}
+
+export class CountApplyWebpackPlugin {
+  constructor () {
+    this.count = 0;
+  }
+  apply () {
+    this.count++;
+  }
+}
+
+export function statsWithAssets (stats) {
+  stats.assets = Object.keys(stats.compilation.assets).reduce((acc, name) => {
+    acc[name] = stats.compilation.assets[name].source();
+    return acc;
+  }, {});
+  return stats;
+}
+
+function run (runner) {
   return new Promise((resolve, reject) => {
-    webpack({
-      mode: 'production',
-      devtool: false,
-      context: path.resolve(__dirname, 'fixtures', fixture),
-      entry: './entry.js',
-      output: {
-        publicPath: 'dist/',
-        path: path.resolve(__dirname, 'fixtures', fixture, 'dist'),
-        ...(output || {})
-      },
-      optimization: {
-        minimizer: [
-          new TerserPlugin({
-            terserOptions: {
-              mangle: false,
-              output: {
-                beautify: true
-              }
-            },
-            sourceMap: false
-          })
-        ]
-      },
-      plugins: [
-        new CleanPlugin([
-          path.resolve(__dirname, 'fixtures', fixture, 'dist', '**')
-        ])
-      ].concat(plugins || []),
-      ...config
-    }, (err, stats) => {
+    runner((err, stats) => {
       if (err) return reject(err);
 
-      stats.assets = Object.keys(stats.compilation.assets).reduce((acc, name) => {
-        acc[name] = stats.compilation.assets[name].source();
-        return acc;
-      }, {});
+      statsWithAssets(stats);
 
       stats.info = stats.toJson({ assets: true, chunks: true });
 
@@ -73,12 +127,3 @@ export function runWebpack (fixture, { output, plugins, ...config } = {}) {
     });
   });
 }
-
-export class CountApplyWebpackPlugin {
-  constructor () {
-    this.count = 0;
-  }
-  apply () {
-    this.count++;
-  }
-}

test/index.test.js

@@ -14,8 +14,12 @@
  * the License.
  */
 
+import { resolve } from 'path';
+import { readFileSync, writeFileSync } from 'fs';
 import WorkerPlugin from '../src';
-import { runWebpack, CountApplyWebpackPlugin } from './_util';
+import { runWebpack, CountApplyWebpackPlugin, watchWebpack, statsWithAssets, sleep } from './_util';
+
+jest.setTimeout(30000);
 
 describe('worker-plugin', () => {
   test('exports a class', () => {
@@ -45,6 +49,23 @@ describe('worker-plugin', () => {
     expect(main).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"0\.worker\.js"/g);
   });
 
+  test('it replaces multiple Worker exports with __webpack_require__', async () => {
+    const stats = await runWebpack('multiple', {
+      plugins: [
+        new WorkerPlugin()
+      ]
+    });
+
+    const assetNames = Object.keys(stats.assets);
+    expect(assetNames).toHaveLength(3);
+    expect(assetNames).toContainEqual('0.worker.js');
+    expect(assetNames).toContainEqual('1.worker.js');
+
+    const main = stats.assets['main.js'];
+    expect(main).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"0\.worker\.js"/g);
+    expect(main).toMatch(/module.exports = __webpack_require__\.p\s*\+\s*"1\.worker\.js"/g);
+  });
+
   test('retainModule:true leaves {type:module} in worker init', async () => {
     const { assets } = await runWebpack('basic', {
       plugins: [
@@ -150,4 +171,57 @@ describe('worker-plugin', () => {
 
     expect(stats.assets['main.js']).toMatch(/new\s+Worker\s*\(\s*new\s+Blob\s*\(\s*\[\s*'onmessage=\(\)=>\{postMessage\("right back at ya"\)\}'\s*\]\s*\)\s*\)/g);
   });
+
+  describe('watch mode', () => {
+    const workerFile = resolve(__dirname, 'fixtures', 'watch', 'worker.js');
+    const workerCode = readFileSync(workerFile, 'utf-8');
+    afterAll(() => {
+      writeFileSync(workerFile, workerCode);
+    });
+
+    test('it produces consistent modules in watch mode', async () => {
+      const compiler = watchWebpack('watch', {
+        plugins: [
+          new WorkerPlugin()
+        ]
+      });
+
+      function Deferred () {
+        let controller;
+        const p = new Promise((resolve, reject) => {
+          controller = { resolve, reject };
+        });
+        Object.assign(p, controller);
+        return p;
+      }
+
+      let stats;
+      let ready = new Deferred();
+
+      const watcher = compiler.watch({
+        aggregateTimeout: 1,
+        poll: 50,
+        ignored: /node_modules|dist/
+      }, (err, stats) => {
+        if (err) ready.reject(err);
+        else ready.resolve(statsWithAssets(stats));
+      });
+
+      try {
+        for (let i = 1; i < 5; i++) {
+          ready = new Deferred();
+          writeFileSync(workerFile, workerCode.replace(/console\.log\('hello from worker( \d+)?'\)/, `console.log('hello from worker ${i}')`));
+          await sleep(1000);
+          stats = await ready;
+          await sleep(1000);
+          expect(Object.keys(stats.assets).sort()).toEqual(['0.worker.js', 'main.js']);
+          expect(stats.assets['0.worker.js']).toContain(`hello from worker ${i}`);
+        }
+      } finally {
+        watcher.close();
+      }
+
+      await sleep(1000);
+    });
+  });
 });

test/integration.test.js

@@ -20,6 +20,8 @@ import { createStaticServer } from './_server';
 import { runWebpack } from './_util';
 import { evaluatePage } from './_page';
 
+jest.setTimeout(30000);
+
 describe('Integration', () => {
   test('The resulting Worker is instantiated correctly', async () => {
     const fixture = 'basic';