Change worker stuff to use worker-loader

Previously we used webworkify-webpack to make web-workers work. We now
use the worker-loader webpack plugin which is available since webpack 4
to handle workers.

It still doesn't want to connect to the server, but all JS errors in the
dev console are gone. Progress.

app/worker-client.js

@@ -4,8 +4,9 @@ import EventEmitter from 'events'
 import { Writable, PassThrough } from 'stream'
 import toArrayBuffer from 'to-arraybuffer'
 import ByteBuffer from 'bytebuffer'
-import webworkify from 'webworkify'
-import worker from './worker'
+//import work from 'webworkify-webpack'
+//import worker from './worker'
+import Worker from './worker'
 
 /**
  * Creates proxy MumbleClients to a real ones running on a web worker.
@@ -13,7 +14,7 @@ import worker from './worker'
  */
 class WorkerBasedMumbleConnector {
   constructor () {
-    this._worker = webworkify(worker)
+    this._worker = new Worker() //work(require.resolve('./worker'))
     this._worker.addEventListener('message', this._onMessage.bind(this))
     this._reqId = 1
     this._requests = {}

app/worker.js

@@ -3,16 +3,18 @@ import mumbleConnect from 'mumble-client-websocket'
 import toArrayBuffer from 'to-arraybuffer'
 import chunker from 'stream-chunker'
 import Resampler from 'libsamplerate.js'
+import CodecsBrowser from 'mumble-client-codecs-browser'
 
 // Polyfill nested webworkers for https://bugs.chromium.org/p/chromium/issues/detail?id=31666
 import 'subworkers'
 
 // Monkey-patch to allow webworkify-webpack and codecs to work inside of web worker
 /* global URL */
-window.URL = URL
+//if (typeof window === 'undefined')  global.window = {}
+//window.URL = URL
 
 // Using require to ensure ordering relative to monkey-patch above
-let CodecsBrowser = require('mumble-client-codecs-browser')
+//let CodecsBrowser = require('mumble-client-codecs-browser')
 
 export default function (self) {
   let sampleRate

package.json

@@ -16,27 +16,32 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
     "@babel/runtime": "^7.9.2",
     "audio-buffer-utils": "^5.1.2",
     "audio-context": "^1.0.3",
     "babel-loader": "^8.1.0",
     "brfs": "^2.0.2",
     "bytebuffer": "^5.0.1",
-    "css-loader": "^3.4.0",
+    "css-loader": "^3.4.2",
     "dompurify": "^0.8.9",
     "drop-stream": "^1.0.0",
     "duplex-maker": "^1.0.0",
     "extract-loader": "^5.0.1",
     "file-loader": "^4.3.0",
+    "fs": "0.0.1-security",
     "getusermedia": "^2.0.0",
     "html-loader": "^0.5.5",
     "json-loader": "^0.5.4",
     "keyboardjs": "^2.3.4",
     "knockout": "^3.4.0",
+    "libsamplerate.js": "^1.0.0",
     "lodash.assign": "^4.2.0",
     "microphone-stream": "^3.0.5",
+    "mumble-client": "^1.3.0",
+    "mumble-client-codecs-browser": "^1.2.0",
+    "mumble-client-websocket": "^1.0.0",
     "node-sass": "^4.9.3",
     "raw-loader": "^4.0.0",
     "regexp-replace-loader": "1.0.1",
@@ -46,15 +51,11 @@
     "to-arraybuffer": "^1.0.1",
     "transform-loader": "^0.2.3",
     "voice-activity-detection": "johni0702/voice-activity-detection#9f8bd90",
+    "web-audio-buffer-queue": "^1.1.0",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.10",
     "webworkify-webpack": "^2.1.5",
-    "libsamplerate.js": "^1.0.0",
-    "mumble-client-codecs-browser": "^1.2.0",
-    "mumble-client-websocket": "^1.0.0",
-    "mumble-client": "^1.3.0",
-    "web-audio-buffer-queue": "^1.1.0",
-    "fs": "0.0.1-security"
+    "worker-loader": "^2.0.0"
   },
   "optionalDependencies": {}
 }

patches/mumble-client-codecs-browser+1.2.0.patch

@@ -0,0 +1,89 @@
+diff --git a/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js b/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js
+index 6cfda8b..eed6fa3 100644
+--- a/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js
++++ b/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js
+@@ -1,9 +1,5 @@
+ 'use strict';
+ 
+-Object.defineProperty(exports, "__esModule", {
+-  value: true
+-});
+-
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+ 
+ var _stream = require('stream');
+@@ -20,9 +16,9 @@ var _toArraybuffer = require('to-arraybuffer');
+ 
+ var _toArraybuffer2 = _interopRequireDefault(_toArraybuffer);
+ 
+-var _decodeWorker = require('./decode-worker');
++//var _decodeWorker = require('./decode-worker');
+ 
+-var _decodeWorker2 = _interopRequireDefault(_decodeWorker);
++import _decodeWorker2 from './decode-worker';
+ 
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ 
+@@ -33,7 +29,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+ 
+ var pool = (0, _reusePool2.default)(function () {
+-  return (0, _webworkify2.default)(_decodeWorker2.default);
++  return new _decodeWorker2();
+ });
+ // Prepare first worker
+ pool.recycle(pool.get());
+@@ -112,4 +108,5 @@ var DecoderStream = function (_Transform) {
+   return DecoderStream;
+ }(_stream.Transform);
+ 
+-exports.default = DecoderStream;
+\ No newline at end of file
++//exports.default = DecoderStream;
++export default DecoderStream
+\ No newline at end of file
+diff --git a/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js b/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js
+index 021f131..853a99e 100644
+--- a/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js
++++ b/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js
+@@ -1,9 +1,5 @@
+ 'use strict';
+ 
+-Object.defineProperty(exports, "__esModule", {
+-  value: true
+-});
+-
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+ 
+ var _stream = require('stream');
+@@ -16,9 +12,10 @@ var _webworkify = require('webworkify');
+ 
+ var _webworkify2 = _interopRequireDefault(_webworkify);
+ 
+-var _encodeWorker = require('./encode-worker');
++//var _encodeWorker = require('./encode-worker');
+ 
+-var _encodeWorker2 = _interopRequireDefault(_encodeWorker);
++//var _encodeWorker2 = _interopRequireDefault(_encodeWorker);
++import _encodeWorker2 from './encode-worker'
+ 
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ 
+@@ -29,7 +26,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+ 
+ var pool = (0, _reusePool2.default)(function () {
+-  return (0, _webworkify2.default)(_encodeWorker2.default);
++  return new _encodeWorker2();
+ });
+ // Prepare first worker
+ pool.recycle(pool.get());
+@@ -96,4 +93,5 @@ var EncoderStream = function (_Transform) {
+   return EncoderStream;
+ }(_stream.Transform);
+ 
+-exports.default = EncoderStream;
+\ No newline at end of file
++//exports.default = EncoderStream;
++export default EncoderStream
+\ No newline at end of file

webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
     theme: './app/theme.js',
     matrix: './app/matrix.js'
   },
+  devtool: "cheap-source-map",
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'
@@ -91,6 +92,10 @@ module.exports = {
           'file-loader'
         ]
       },
+      {
+        test: /worker\.js$/,
+        use: { loader: 'worker-loader' }
+      },
       {
         enforce: 'post',
         test: /mumble-streams\/lib\/data.js/,
@@ -100,10 +105,5 @@ module.exports = {
       }
     ]
   },
-  resolve: {
-    alias: {
-      webworkify: 'webworkify-webpack'
-    }
-  },
   target: 'web'
 }