alphaTab icon indicating copy to clipboard operation
alphaTab copied to clipboard

☂️ Improve WebPack Support

Open Danielku15 opened this issue 2 years ago • 0 comments

Background Supporting alphaTab in environments where it is bundled together with other libraries always has been a bit of a pain as alphaTab spawns WebWorkers and AudioWorklets using the script file it is contained in.

But bundlers like WebPack reorganize the code quite significantly and also often come with an own dependency management system which replaces the default import/script include system from browsers.

Related issues to bundling

  • https://github.com/CoderLine/alphaTab/issues/662
  • https://github.com/CoderLine/alphaTab/issues/699
  • https://github.com/CoderLine/alphaTab/discussions/541
  • https://github.com/CoderLine/alphaTab/issues/116

Goal of this issue The goal of this issue to add official support for WebPack 5 (WebPack 4 is considered out of scope). There have been already discussions ongoing how this can be solved and improved with WebPack.

  • [x] Improve WebWorker handling so that it works together with WebPack 5 when served locally together with the application itself. State: Solution identified and improvements in progress Related discussion: https://github.com/webpack/webpack/discussions/15382
  • [ ] Improve WebWorker handling so that it works together with WebPack 5 when served through a CDN where origins can differ. State: Discussing built-in inline worker support in WebPack, evaluating custom plugin as intermediate solution. Related discussion: https://github.com/webpack/webpack/discussions/14066
  • [ ] Add support for AudioWorklets with WebPack 5 State: Discussing built-in AudioWorklet support in WebPack, evaluating custom plugin as intermediate solution. Related discussion: https://github.com/webpack/webpack/issues/11543
  • [ ] Prepare example at https://github.com/CoderLine/alphaTabSamplesWeb for plain webpack usage.
  • [ ] Prepare example at https://github.com/CoderLine/alphaTabSamplesWeb for usage in Vue.js.
  • [ ] Prepare example at https://github.com/CoderLine/alphaTabSamplesWeb for usage in Angular.
  • [ ] Prepare example at https://github.com/CoderLine/alphaTabSamplesWeb for usage in React.

Danielku15 avatar Feb 20 '22 16:02 Danielku15