Add custom loader for recorder worklet

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);
+    });
+};

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.