From e2fdddaa1fe2a3115c1f3fd20d50595c3b8946b4 Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Sat, 18 Nov 2023 21:37:30 +0100 Subject: [PATCH] Add custom loader for recorder worklet --- recorder-worklet-loader.js | 45 ++++++++++++++++++++++++++++++++++++++ webpack.config.js | 29 +++++++++++++----------- 2 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 recorder-worklet-loader.js diff --git a/recorder-worklet-loader.js b/recorder-worklet-loader.js new file mode 100644 index 0000000000..9d9958b76a --- /dev/null +++ b/recorder-worklet-loader.js @@ -0,0 +1,45 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// Inspired by https://github.com/reklawnos/worklet-loader which doesn't +// formally support Webpack 5 + +const SingleEntryPlugin = require("webpack/lib/SingleEntryPlugin"); + +module.exports = function () {}; + +module.exports.pitch = function pitch(request) { + const cb = this.async(); + const filename = "recorder.worklet.js"; + + const compiler = this._compilation.createChildCompiler("worker", { + filename, + chunkFilename: `[id].${filename}`, + namedChunkFilename: null, + }); + + new SingleEntryPlugin(this.context, `!!${request}`, "main").apply(compiler); + + compiler.runAsChild((err, entries, compilation) => { + if (err) { + return cb(err); + } + if (entries[0]) { + return cb(null, `module.exports = __webpack_public_path__ + ${JSON.stringify(entries[0].files[0])};`); + } + return cb(null, null); + }); +}; diff --git a/webpack.config.js b/webpack.config.js index c65ebef997..3e3e6e5c54 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -272,19 +272,6 @@ module.exports = (env, argv) => { // optimised, so there is little to gain by us uglifying it. /olm[\\/](javascript[\\/])?olm\.js$/, ], - parser: { - javascript: { - worker: [ - // Special syntax for loading audio worklets as documented in - // https://github.com/webpack/webpack.js.org/issues/6869. Note - // that this only works when using a URL as argument to the - // addModule call. - "*context.audioWorklet.addModule()", - "*audioWorklet.addModule()", - "...", // The defaults - ], - }, - }, rules: [ useHMR && { test: /devcss\.ts$/, @@ -493,6 +480,22 @@ module.exports = (env, argv) => { outputPath: ".", }, }, + { + // Ideally we should use the built-in worklet support in Webpack 5 with the syntax + // described in https://github.com/webpack/webpack.js.org/issues/6869. However, this + // doesn't currently appear to work with our public path setup. So we handle this + // with a custom loader instead. + test: /RecorderWorklet\.ts$/, + type: "javascript/auto", + use: [ + { + loader: path.resolve("./recorder-worklet-loader.js"), + }, + { + loader: "babel-loader", + }, + ], + }, { // This is from the same place as the encoderWorker above, but only needed // for Safari support.