You are browsing as a guest. Sign up (or log in) to start making projects!

Open comments for this post

1h 31m 15s logged

devlog: the three commits i forgot to write about

got in a flow state and forgot to devlog. here’s the catch-up.

multi-branch support + notification ui

the whole system was hardcoded to a branch called cdn. now you can pass a branch parameter everywhere. the worker accepts it as a query param (defaults to cdn), the client sends it with check requests, and download urls use the right branch. manifest cache keys in kv include the branch name so different environments don’t collide.

the idea is you could have cdn-staging and cdn-production in the same repo and point different app builds at different ones. added branch validation in the worker too since someone’s going to try passing something weird eventually.

also built an UpdateNotification class in update-ui.ts. it’s a drop-in banner component that handles the whole flow. you pick top or bottom, set it dismissable or not, and call notification.show(result) when there’s an update. clicking the button downloads and applies. if the download fails it resets. styling is all inline so there’s no css file to import.

updated both examples to use it. the example-app.html went from a hand-rolled banner with window.__pendingUpdate to just notification.show(result). much cleaner.

module scripts + download metrics

the action now scans html files for <script type="module"> tags and includes a modules array in the manifest. the client passes this through to hot-swap so module scripts get replaced with type="module" set on the new element. the regex for finding them is a little fragile but it works for standard vite/webpack output.

also switched the action bundler from @vercel/ncc to esbuild. ncc was fine but esbuild is faster and i was already using it elsewhere.

added an opt-in DownloadMetrics class that records timing data per file download (start, end, duration, size, url) in localStorage. pass it into the config and it starts tracking. you can export as json or clear it. useful for debugging slow updates but not the kind of thing you want on by default.

tests + ci

wrote jest tests for all three packages.

action tests mock @actions/core, @actions/github, and @actions/exec. covers input parsing, repo context, package.json version reading, recursive file listing, module script detection, and clone url construction. had to export a bunch of internal functions to make them testable.

client tests use jsdom with mocked fetch. covers hot-swap (regular scripts, module scripts, stylesheets, images, unknown types), the metrics class, and the main updato class (version tracking, cache management, update checking, downloads, event callbacks).

worker tests cover validation helpers, the full fetch handler (missing params, invalid params, successful checks, unknown endpoints, OPTIONS, method rejection), manifest validation with every field failure case, and the rate limiter with fake timers.

ci workflow at .github/workflows/ci.yml. runs on push and pr to main, matrix across node 20 and 22. lints, runs all tests, builds all three packages.

todo status

checked off: multi-branch, notification ui, module types, metrics, tests, ci. what’s left is docs, a demo, and release automation. the core functionality is done.

0
2

Comments 0

No comments yet. Be the first!