From d4fc3ed354937358b2002b16b7c392b90b074179 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 4 Aug 2021 15:08:52 -0600 Subject: [PATCH 1/2] Properly handle react-sdk's recorder worklet Fixes https://github.com/vector-im/element-web/issues/18393 --- package.json | 3 ++- src/vector/index.html | 5 +---- webpack.config.js | 21 ++++++++++++++++++++- yarn.lock | 14 ++++++++++++++ 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 48838379fa..ac155d09e0 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,8 @@ "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2", - "worker-loader": "^2.0.0" + "worker-loader": "^2.0.0", + "worklet-loader": "^2.0.0" }, "jest": { "testEnvironment": "jest-environment-jsdom-sixteen", diff --git a/src/vector/index.html b/src/vector/index.html index 29b1f13221..b0a2425338 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -58,10 +58,7 @@ } %> - " - > +
diff --git a/webpack.config.js b/webpack.config.js index b2cb981ef6..18d389d854 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -89,7 +89,6 @@ module.exports = (env, argv) => { "mobileguide": "./src/vector/mobile_guide/index.ts", "jitsi": "./src/vector/jitsi/index.ts", "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js", - "recorder-worklet": "./node_modules/matrix-react-sdk/src/audio/RecorderWorklet.ts", ...(useCssHotReload ? {} : cssThemes), }, @@ -351,6 +350,26 @@ module.exports = (env, argv) => { outputPath: '.', }, }, + { + // Special case the recorder worklet as it can't end up HMR'd, but the worker-loader + // isn't good enough for us. Note that the worklet-loader is listed as "do not use", + // however it seems to work fine for our purposes. + test: /RecorderWorklet\.ts$/, + type: "javascript/auto", + use: [ // executed last -> first, for some reason. + { + loader: "worklet-loader", + options: { + // Override name so we know what it is in the output. + name: 'recorder-worklet.[hash:7].js', + }, + }, + { + // TS -> JS because the worklet-loader won't do this for us. + loader: "babel-loader", + }, + ], + }, { // This is from the same place as the encoderWorker above, but only needed // for Safari support. diff --git a/yarn.lock b/yarn.lock index 087e6e64f8..601a1363bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5651,6 +5651,11 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoek@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" + integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== + hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -12284,6 +12289,15 @@ worker-loader@^2.0.0: loader-utils "^1.0.0" schema-utils "^0.4.0" +worklet-loader@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/worklet-loader/-/worklet-loader-2.0.0.tgz#c6c8f7dbed38f3d32dfc61c399f13a85f7eebe9d" + integrity sha512-zvCCyhgrn85C5g1+EQWDz4KHxkEMq/fZQXVftjFOcxTy6f+grBSRTJLoit3u8xyKIBTGEgQzYiousSm3YWt8oA== + dependencies: + hoek "^4.2.1" + loader-utils "^1.0.0" + schema-utils "^0.4.0" + wrap-ansi@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09" From e123b8bcc0a3c13cb79b39922f1d5f286fad433c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 4 Aug 2021 15:24:02 -0600 Subject: [PATCH 2/2] Appease Jest --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ac155d09e0..f9127a1bf3 100644 --- a/package.json +++ b/package.json @@ -178,7 +178,8 @@ "waveWorker\\.min\\.js": "/node_modules/matrix-react-sdk/__mocks__/empty.js", "context-filter-polyfill": "/node_modules/matrix-react-sdk/__mocks__/empty.js", "FontManager.ts": "/node_modules/matrix-react-sdk/__mocks__/FontManager.js", - "workers/(.+)\\.worker\\.ts": "/node_modules/matrix-react-sdk/__mocks__/workerMock.js" + "workers/(.+)\\.worker\\.ts": "/node_modules/matrix-react-sdk/__mocks__/workerMock.js", + "RecorderWorklet": "/node_modules/matrix-react-sdk/__mocks__/empty.js" }, "transformIgnorePatterns": [ "/node_modules/(?!matrix-js-sdk).+$",