Change Worker mocking setup.

Make it so that gz.ts can just use `new Worker` as if it was running in
the browser. During tests, we mock window.Worker with our NodeWorker
implementation.

Replace the manual name-to-path mapping with the use of Webpack's file-loader.

Using Webpack's file loader is a more natural way to define which files
we depend on. This means that, if our this code is used as part of an
npm library, the Webpack build output will contain the worker files, and
the npm library should find it - as long as it's running in the browser.
(I haven't verified this though; I'm not sure if extra resource files from
npm dependencies are carried through into the final artifact properly.)

As a follow-up, we can add a Node compatibility path to gz.js, for when this
code is used as part of Node library, i.e. actually running within Node.
In our tests we'd probably still want to use our Worker mock so that we test
the code we ship to the browser.

Author: mstange

babel.config.json

@@ -65,7 +65,8 @@
       "module-resolver",
       {
         "alias": {
-          "firefox-profiler": "./src"
+          "firefox-profiler": "./src",
+          "firefox-profiler-res": "./res"
         }
       }
     ]

src/utils/__mocks__/worker-factory.ts src/test/fixtures/node-worker.tssrc/utils/__mocks__/worker-factory.ts renamed to src/test/fixtures/node-worker.ts

@@ -2,20 +2,41 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Worker } from 'worker_threads';
+import { Worker as NodeWorkerClass } from 'worker_threads';
 
-class NodeWorker {
-  _instance: Worker | null;
+function getWorkerScript(file: string): string {
+  return `
+    const { parentPort } = require('worker_threads');
+    const fs = require('fs');
+    const vm = require('vm');
+
+    const scriptContent = fs.readFileSync("${file}", 'utf8');
+
+    const sandbox = {
+      importScripts: function () {
+        throw new Error('The function "importScripts" is not implemented.');
+      },
+      postMessage: parentPort.postMessage.bind(parentPort),
+      onmessage: function () {},
+    };
+
+    vm.runInNewContext(scriptContent, sandbox, { filename: "${file}" });
+
+    parentPort.onmessage = sandbox.onmessage.bind(null);
+  `;
+}
+
+export class NodeWorker {
+  _instance: NodeWorkerClass | null;
   onmessage: ((event: MessageEvent) => unknown) | null;
 
   constructor(file: string) {
-    const worker = new Worker(__dirname + '/node-worker-contents.mjs', {
-      workerData: file,
-    });
+    const worker = new NodeWorkerClass(getWorkerScript(file), { eval: true });
     worker.on('message', this.onMessage);
     worker.on('error', this.onError);
     this._instance = worker;
     this.onmessage = null;
+    workerInstances.push(worker);
   }
 
   postMessage(message: unknown, transfer?: any[]) {
@@ -53,23 +74,13 @@ class NodeWorker {
   }
 }
 
-const workerConfigs: { [key: string]: string } = {
-  'zee-worker': './res/zee-worker.js',
-};
-
-const workerInstances: NodeWorker[] = [];
-
-export default function (file: string): NodeWorker {
-  const path = workerConfigs[file];
-  const worker = new NodeWorker(path);
-  workerInstances.push(worker);
-  return worker;
-}
+const workerInstances: NodeWorkerClass[] = [];
 
-/**
- * This function allows for stopping the workers, and is only part of the mock.
- */
+// Called after running each test (see setup.js), otherwise Jest won't shut down.
 export function __shutdownWorkers() {
-  workerInstances.forEach((worker) => worker.terminate());
+  workerInstances.forEach((worker) => {
+    worker.terminate();
+    worker.unref();
+  });
   workerInstances.length = 0;
 }

src/test/setup.ts

@@ -12,8 +12,7 @@ import 'jest-extended';
 import fetchMock from '@fetch-mock/jest';
 import crypto from 'crypto';
 
-jest.mock('../utils/worker-factory');
-import * as WorkerFactory from '../utils/worker-factory';
+import { NodeWorker, __shutdownWorkers } from './fixtures/node-worker';
 import { autoMockResizeObserver } from './fixtures/mocks/resize-observer';
 
 autoMockResizeObserver();
@@ -25,9 +24,15 @@ if (process.env.TZ !== 'UTC') {
 fetchMock.mockGlobal();
 (global as any).fetchMock = fetchMock;
 
+// Mock the effects of the file-loader which our Webpack config defines
+// for JS files under res: The "default export" is the path to the file.
+jest.mock('firefox-profiler-res/zee-worker.js', () => './res/zee-worker.js');
+// Install a Worker class which is similar to the DOM Worker class.
+(global as any).Worker = NodeWorker;
+
 afterEach(function () {
-  // This `__shutdownWorkers` function only exists in the mocked test environment.
-  const { __shutdownWorkers } = WorkerFactory as any;
+  // All node workers must be shut down at the end of the test run,
+  // otherwise Jest won't exit.
   __shutdownWorkers();
 });
 

src/types/globals/global.d.ts

@@ -5,6 +5,11 @@
 // Added by webpack's DefinePlugin
 declare const AVAILABLE_STAGING_LOCALES: string[] | null;
 
+declare module 'firefox-profiler-res/*.js' {
+  const content: string;
+  export default content;
+}
+
 declare module '*.css' {}
 
 declare module '*.svg' {

src/utils/__mocks__/node-worker-contents.mjs

@@ -2,9 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// This worker is imported as WebWorker since it's conflicting with the Worker
-// global type.
-import WebWorker from './worker-factory';
+import zeeWorkerPath from 'firefox-profiler-res/zee-worker.js';
 
 const zeeCallbacks: Array<{
   success: (data: any) => void;
@@ -29,11 +27,11 @@ function workerOnMessage(zeeWorker: Worker) {
 }
 
 // Neuters data's buffer, if data is a typed array.
-export function compress(
+export async function compress(
   data: string | Uint8Array,
   compressionLevel?: number
 ): Promise<Uint8Array<ArrayBuffer>> {
-  const zeeWorker = new WebWorker('zee-worker') as Worker;
+  const zeeWorker = new Worker(zeeWorkerPath);
   workerOnMessage(zeeWorker);
 
   const arrayData =
@@ -56,9 +54,9 @@ export function compress(
 }
 
 // Neuters data's buffer, if data is a typed array.
-export function decompress(data: Uint8Array): Promise<Uint8Array> {
+export async function decompress(data: Uint8Array): Promise<Uint8Array> {
+  const zeeWorker = new Worker(zeeWorkerPath);
   return new Promise(function (resolve, reject) {
-    const zeeWorker = new WebWorker('zee-worker') as Worker;
     workerOnMessage(zeeWorker);
     zeeWorker.postMessage(
       {

src/utils/gz.ts

@@ -38,13 +38,13 @@ const config = {
     rules: [
       {
         test: /\.js$/,
-        use: ['babel-loader'],
-        include: includes.concat(es6modulePaths),
+        use: ['file-loader'],
+        include: [path.join(__dirname, 'res')],
       },
       {
-        test: /\.(ts|tsx)$/,
+        test: /\.(js|ts|tsx)$/,
         use: ['babel-loader'],
-        include: includes,
+        include: [path.join(__dirname, 'src')],
       },
       {
         test: /\.json$/,