Document webpack change: feat: introduce a new syntax for worklets - *context.audioWorklet.addModule()

[webpack-bot]

A pull request by @alexander-akait was merged and maintainers requested a documentation change.

See pull request: webpack/webpack#17212

---

Part of webpack/webpack#11543, currently you can't use

myAudioContext.audioWorklet.addModule('./audio-worklet.js')

But now you can use:

module.exports = {
	output: {
		filename: "[name].js"
	},
	target: "web",
	module: {
		rules: [
			{
				test: /\.[cm]?js$/,
				parser: {
					worker: [
						"*context.audioWorklet.addModule()",
						"*audioWorklet.addModule()",
						// *addModule() is not valid syntax
						"..."
					]
				}
			}
		]
	}
};

Using * allow to build worklet from a variable (i.e. *context means take context variable and check members after it, it works only on start of line, i.e. context.foo*.addModule() doesn't supported), i.e.

const context = new AudioContext();
context.audioWorklet.addModule(new URL("./worklet.js", import.meta.url));

let audioWorklet = (new AudioContext()).audioWorklet;
audioWorklet.addModule(new URL("./worklet.js", import.meta.url));

Note - you can use it not only for worklets, for any custom syntax with call and member expressions

Summary

🤖 Generated by Copilot at 20c6900

This pull request adds a new feature to the WorkerPlugin that allows using a special syntax for worker specifiers that match a worklet API. It also adds several test files and helpers to verify the functionality and compatibility of the feature.

Details

🤖 Generated by Copilot at 20c6900

• Introduce WorkerSpecifierTag symbol to mark variables as worker specifiers (link)
• Handle new syntax for worker specifiers with pattern and member chain (link)
• Add test cases for new worklet syntax using pseudo-worklet API (link, link, link, link)
• Add module file for dynamic import inside worklet (link)
• Add test configuration file with custom module scope and fake worklet implementations (link)
• Add test filter file to check worker support (link)
• Add webpack configuration file with output and parser options (link)
• Add url property to Worker class in createFakeWorker helper (link)

[steverep]

@alexander-akait I'm having to dig into the code to understand what exactly the new syntax will match. Could you add some documentation for this with some match / won't match examples?

For example, would the syntax as written be expected to match:

    await this._context.audioWorklet.addModule(
      new URL("./recorder.worklet.js", import.meta.url)
    );