Produce a bundle that includes all dependencies

[infojunkie]

Right now, a couple of dependencies are causing issues in the verovio-unroll branch:

• webaudiofont whose npm package seems incompatible with webpack and rollup
• SaxonJS whose browser version is not on npm, and whose code is not compatible with modules

They need to be included separately in the hosting HTML to be usable. That's not suitable for a reusable module.

The aim is to produce a bundle that can be included on a web page using a single <script> invocation without additional inclusions. The demo should be fully functional. It does not matter whether the final bundle is commonjs or esm.

I can demonstrate these issues in more detail if anyone is willing to take on this issue.

[infojunkie]

/bounty 100

[algora-pbc[bot]]

💎 $100 bounty created by infojunkie 🙋 If you start working on this, comment /attempt #17 to notify everyone 👉 To claim this bounty, submit a pull request that includes the text /claim #17 somewhere in its body 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to infojunkie/musicxml-player!

Attempt	Started	Solution
🟢 @deevus	May 17, 2023	#21

[deevus]

/attempt #17

[deevus]

Fixed webaudiofont here: https://github.com/deevus/musicxml-player/commit/67f9c1601a29754a0f3ca5381c32da6ea94439be

[infojunkie]

Thanks @deevus for attempting this. I downloaded your branch and ran into the following problems:

$ npm run build

> musicxml-player@0.5.4 build
> rollup --config ./rollup.config.mjs

(node:86232) ExperimentalWarning: Importing JSON modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

./src/index.ts → ./dist/musicxml-player.esm.js...
[!] RollupError: "WebAudioFontPlayer" is not exported by "node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js", imported by "src/WebAudioFontOutput.ts".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
src/WebAudioFontOutput.ts (2:9)
1: import { AudioContext } from 'standardized-audio-context';
2: import { WebAudioFontPlayer } from 'webaudiofont';
            ^

Looks like patching is not automated - needs some additional script in package.json. So I ran:

$ patch -p1 < patches/webaudiofont+3.0.4.patch 
patching file node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js
Hunk #1 FAILED at 1220 (different line endings).
1 out of 1 hunk FAILED -- saving rejects to file node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js.rej

I tried dos2unix:

$ dos2unix node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js
dos2unix: converting file node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js to Unix format...
$ patch -p1 < patches/webaudiofont+3.0.4.patch 
patching file node_modules/webaudiofont/npm/dist/WebAudioFontPlayer.js
$ npm run build

> musicxml-player@0.5.4 build
> rollup --config ./rollup.config.mjs

(node:87693) ExperimentalWarning: Importing JSON modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

./src/index.ts → ./dist/musicxml-player.esm.js...
created ./dist/musicxml-player.esm.js in 6s

Then the demo ran!! Great job. I would just ask you to make the process smoother, such that the first npm run build does the job without further intervention.

[deevus]

@infojunkie Yep I need to automate the patching. My apologies for not being clear on that.

[algora-pbc[bot]]

💡 @deevus submitted a pull request that claims the bounty. You can visit your org dashboard to reward.

[algora-pbc[bot]]

🎉🎈 @deevus has been awarded $100! 🎈🎊