Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
webpack-bot opened this issue May 31, 2023 · 1 comment
Assignees

Comments

@webpack-bot
Copy link

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
Copy link
Contributor

@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)
    );

@snitin315 snitin315 self-assigned this Jun 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants