Polyfill to support "import" in worklet scripts in Firefox

polyfill_worklet_import.js

const wrappedFunc = Worklet.prototype.addModule;

Worklet.prototype.addModule = async function(url) {
    try {
        return await wrappedFunc.call(this, url);
    } catch (e) {
        if (e.name != 'AbortError') {
            throw e;
        }
        // assume error is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1572644
        console.warn('direct addModule call failed, resorting to bundling');
        const {rollup} = await import('https://unpkg.com/rollup@2.78.0/dist/es/rollup.browser.js');
        const generated = await (await rollup({
            input: url,
            onwarn: console.warn,
            plugins: [
                {
                    resolveId(importee, importer) {
                        return new URL(importee, new URL(importer || window.location.href)).toString();
                    },
                    load(id) {
                        return fetch(id).then(response => response.text());
                    },
                }
            ],
        })).generate({});
        const blob = new Blob([generated.output[0].code], {type: 'text/javascript'});
        const objectUrl = URL.createObjectURL(blob);
        try {
            return await wrappedFunc.call(this, objectUrl);
        } finally {
            URL.revokeObjectURL(objectUrl);
        }
    }
};

One issue with using a Blob URL or Data URL is ServiceWorkers do not intercept requests from those URL's.

One issue with using a Blob URL or Data URL is ServiceWorkers do not intercept requests from those URL's.

However, the fetches of individual modules are intercepted by ServiceWorkers. Can you explain the case where you need the ServiceWorker to intercept the combined source?

Consider communicating with and supplying raw audio data to AudioWorkletGlobalScope before AudioWorkletProcessor construction, see WebAudio/web-audio-api#2456. One way to do that is intercepting import and sending data with respondWith(). That doesn't work when Blob URL or Data URL are used as Worklet URL w3c/ServiceWorker#712 (comment).

import json from './exports.json' assert {type: "json"};
let data = new Float32Array(json);

self.addEventListener('fetch', async (event) => {
  if (
    event.request.destination === 'audioworklet' &&
    event.request.url.includes('exports.js')
  ) {
    event.respondWith(
      new Response(JSON.stringify([...data]), {
        headers: { 'content-type': 'application/json' },
      })
    );
  }
});