web: vendor webmidi locally to fix editor/run page hang (amyboard + tulip web)#1064
Merged
Conversation
The editor loaded webmidi.js as a render-blocking <script src> pointing at cdn.jsdelivr.net/npm/webmidi@latest. When jsdelivr's @latest/ranged version resolution for that package stalls, the synchronous script blocks the browser from rendering the rest of /editor/, so the page hangs (the marketing site is unaffected because it doesn't load webmidi). Self-host webmidi v3.1.16 (the version @latest currently resolves to) under static/vendor/, matching the existing vendor/qwerty-hancock.min.js pattern, and reference the local copy. This removes the third-party render-blocking dependency and pins the version so a future @latest change can't stall or break the editor. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Tulip Web's /run/ page had the same render-blocking cdn.jsdelivr.net/npm/webmidi@latest <script> that hangs the page when jsdelivr's @latest resolution stalls. Self-host webmidi v3.1.16 alongside the other flat static JS (tree.js, spss.js, mini-coi.js) — build.sh's `cp static/*` is non-recursive, so it goes in static/ root rather than a vendor/ subdir — and reference it via the same-origin <base href="/run/">. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
bwhitman
changed the title
🔌 AMYboard PR previewEditor + flasher: https://amyboard-pr-1064.vercel.app/editor/ This preview bundles this PR's firmware — its flasher only flashes this build (not the release). Rebuilt on every push; removed when the PR closes. The hardware CI has been kicked off and should return within a few minutes, stand by! |
🌷 Tulip Web PR previewTulip Web: https://tulip-pr-1064.vercel.app/run/ Flash a Tulip to this build: on-device run Rebuilt on every push; removed when the PR closes. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Both web editors hang on load while their marketing/home pages are fine.
Root cause: each loads webmidi.js as a render-blocking
<script src>pointing atcdn.jsdelivr.net/npm/webmidi@latest. When jsdelivr's@latest/ranged version resolution for that package stalls (observed: 8s+ timeouts, 0 bytes, every retry, for both@latestand@3— whilebootstrap@5.1.3from the same CDN loads in ~0.4s), the synchronous script blocks the browser from rendering the rest of the page, so it appears to hang.Affected:
/editor/(tulip/amyboardweb/static/editor/index.html)/run/(tulip/web/static/index.html)Fix
Self-host webmidi v3.1.16 (the version
@latestcurrently resolves to) and reference the local same-origin copy:static/vendor/webmidi.iife.js, matching the existingvendor/qwerty-hancock.min.jspattern (<base href="/">).static/webmidi.iife.js, flat alongsidetree.js/spss.js/mini-coi.jsbecausebuild.sh'scp static/*is non-recursive (<base href="/run/">).This removes the third-party render-blocking dependency and pins the version so a future
@latestchange can't stall or break either editor. TheWebMidiglobal is consumed byspss.jsexactly as before.🤖 Generated with Claude Code