lawrence-witt / worklet-loader

Webpack loader for worklets

NOTE: This is a simple fork which adds an application/javascript mimetype to the Blob constructor in ./src/worklets/InlineWorklet.js, so that inline Blobs can be loaded and used as secure AudioWorklets in Chromium browsers.

Worklet Loader

This loader loads imported scripts as a URL pointing to (or containing) a compiled module. That URL can be used to add worklet modules.

NOTE! At the moment, this is basically just a fork of worker-loader and probably shouldn't be used. It's possible that, at some point, worker-loader will support worklets and this loader will be obsolete. It's also possible that there are worker-specific things that this package does that breaks worklets for one reason or another. So be careful!

Install

npm i -D worklet-loader

Usage

Inlined

App.js

import workletUrl from 'worklet-loader!./Worklet.js';

Config

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.worklet\.js$/,
        use: { loader: 'worklet-loader' }
      }
    ]
  }
}

App.js

import workletUrl from './file.worklet.js';

const audioCtx = new AudioContext();

audioCtx.audioWorklet.addModule(workletUrl).then(() => {
  // Do stuff with the now-registered processor
});

Options

Name	Type	Default	Description
name	{String}	[hash].worklet.js	Set a custom name for the output script
inline	{Boolean}	false	Inline the worklet as a Blob
publicPath	{String}	null	Override the path from which worklet scripts are downloaded

name

To set a custom name for the output script, use the name parameter. The name may contain the string [hash], which will be replaced with a content dependent hash for caching purposes. When using name alone [hash] is omitted.

webpack.config.js*

{
  loader: 'worklet-loader',
  options: { name: 'WorkerName.[hash].js' }
}

inline

Inline the worklet as a Blob with the inline parameter

webpack.config.js

{
  loader: 'worklet-loader',
  options: { inline: true }
}

publicPath

Overrides the path from which worklet scripts are downloaded. If not specified, the same public path used for other webpack assets is used

webpack.config.js

{
  loader: 'worklet-loader'
  options: { publicPath: '/scripts/worklets/' }
}

Examples

Integrating with TypeScript

You will need to define a custom module for the exports of your worklet files

typings/custom.d.ts

declare module "*.worklet.ts" {
  const exportString: string;
  export default exportString;
}

App.ts

import fooBarWorkletUrl from 'worlet-loader!./fooBar.worklet.ts'

const audioCtx = new AudioContext();

// @ts-ignore: AudioContext.audioWorklet is not available as a type yet
audioCtx.audioWorklet.addModule(fooBarWorkletUrl).then(() => {
  // Do stuff with the now-registered processor
});