From e2fdddaa1fe2a3115c1f3fd20d50595c3b8946b4 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
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.