Another Bun Story

You might remember a story I wrote about upgrading from npm to bun for more features and stability. Well, 2 days ago, Bun version 1.4 was released. This was the "Rust rewrite" which got most of the attention in their promotional video, but something caught my ear which made me do a double-take. Don't worry, this story isn't going to be about me rewriting something in Rust.

It was mentioned as an aside in the video that Bun now supports generating standalone HTML files. Which means that everyting is embedded into a single HTML file - including media and other assets that are encoded in base64. I immediately started looking into this, because this is really cool. It can compress your output and also reduce the artifacts needed to be deployed to your website.

This is particularly interesting for me, because my custom tools and games are hosted in another monorepo, much like my NPM projects and I had a complex workflow for building and deploying them.

1. Typecheck with tsc
2. Lint source code with eslint
3. Compile TypeScript into JavaScript with bun (in-place)
4. Delete node_modules, TypeScript source code, and any JSON or documentation files so they don't get deployed
5. Deploy the remaining files (e.g. index.html, dist/main.js, assets/index.css, media/...) from the project folder(s)

For reference, the bun command looked something like:

bun build --outfile=dist/main.js src/index.ts

But now with Bun v1.4, my plan was to simplify this and only deploy a single file per project.

1. Typecheck with tsc
2. Lint source code with eslint
3. Compile standalone HTML with bun (compile to output directory)
4. Deploy the output directory

The bun command might look a bit more complicated now, but it's basically creating a single output in a separate directory, and that entire directory will be deployed online.

bun build --compile --target=browser ./index.html --outfile="${outdir}/index.html"

One part that was a little tricky was audio. I have one game (Orbit Idle) so far that incorporates music in the game. The way I achieved this previously was by directly playing audio from the file path in TypeScript.

canv.playAudio('./Between_The_Sleepless_Stars.mp3', true, 0.25);

I could continue doing this if I wanted to, but then I would have to package this .mp3 file with the output HTML. That seemed a bit like it would defeat the purpose of this update, so after a while I discovered the workaround. In my HTML source file, I added the <audio> tag, referenced in TypeScript.

<audio id="music" src="./Between_The_Sleepless_Stars.mp3"></audio>

canv.playAudio((document.getElementById('music') as HTMLAudioElement).src, true, 0.25);

It's slightly more complicated this way, but when compiled with bun, it automatically embeds the audio file as a base64-encoded string, so I don't need to deploy any assets with that file. Amazing!