Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Interactive static assets imported as SVG, MP3 or MP4 never load because the service worker rejects their data URLs

Aperta
  • Qualcosa non va?
#1,796 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
84/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nodejs, typescript
Ambito
backend, testing

Direzione di ricerca

Start with packages/runtime-internal/src/interactive/worker.js:22-51 and the existing cases in packages/runtime-internal/src/interactive/__tests__/worker.test.ts; compare the accepted URL forms with the examples from packages/instrument-bundler/src/utils.ts:24. Add coverage for the SVG, MP3, and MP4 forms, checking each response’s Content-Type and decoded body. Done when those tests pass and the service worker serves all three asset types.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Area: Instruments Bug Difficulty: Low Good First Issue Priority: Medium

The interactive iframe's service worker cannot serve SVG, MP3 or MP4 static assets, though the bundler supports importing all three. instrument-bundler loads .svg, .mp3 and .mp4 with esbuild's dataurl loader, which (esbuild 0.28) produces data:image/svg+xml,<svg …> (percent-encoded text, not base64), data:audio/mpeg;base64,… and data:video/mp4;base64,…. worker.js only accepts data:image/*;base64,… and data:text/*,…, so it throws for all three. The throw happens before respondWith is called, so the request falls through to the network, which has no such file. An author who writes import tone from './tone.mp3' and staticAssets: { '/tone.mp3': tone }, as the instrument guidelines describe, gets audio that never plays and SVG stimuli that never appear, with nothing reported to the host.

Where

packages/runtime-internal/src/interactive/worker.js:22-51:

function dataUrlToResponse(dataUrl) {
  // Try base64 image format first
  const base64Match = /^data:(image\/[a-zA-Z+]+);base64,([A-Za-z0-9+/=]+)$/.exec(dataUrl);
  // ...
  // Try plain text format
  const textMatch = /^data:(text\/[a-zA-Z+]+),(.*)$/.exec(dataUrl);
  // ...
  throw new Error('Invalid or unsupported data URL: must be a base64-encoded image or plain text');
}

and the loader that produces those URLs, packages/instrument-bundler/src/utils.ts:24:

    .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp', '.mp3', '.mp4'), () => 'dataurl' as const)

Reproduce

  1. In the playground, copy the "Interactive Instrument with Static Assets" example and add a tone.mp3 and an icon.svg.
  2. Import both (import tone from './tone.mp3', import icon from './icon.svg'), add them to staticAssets as '/tone.mp3' and '/icon.svg', and reference them from fragment.html (<audio src="tone.mp3" controls>, <img src="icon.svg">).
  3. Open the instrument in apps/web.

Actual: the service worker logs Invalid or unsupported data URL: must be a base64-encoded image or plain text for each request, both requests go to the server and fail, the audio element cannot play and the SVG image is broken. The PNG in the same instrument loads.
Expected: every data URL the bundler can produce for an import is served with its own MIME type.

Tests

packages/runtime-internal/src/interactive/__tests__/worker.test.ts: it('should serve every data URL the bundler emits, so svg, mp3 and mp4 static assets load'). Use the exact forms esbuild produces: data:image/svg+xml,<svg …>, data:audio/mpeg;base64,… and data:video/mp4;base64,…. Assert the Content-Type and the decoded body of each.

e2e, in testing/src/specs/instrument-completion.spec.ts (or a playground spec): render an interactive instrument whose staticAssets include an SVG and assert the image's naturalWidth is greater than 0.

Suggested fix

Parse any data:<mime>[;base64],<payload> generically. Take the MIME type from the URL, base64-decode when ;base64 is present, and otherwise decodeURIComponent the payload (esbuild's text form is percent-escaped). Then respond with those bytes. Keep throwing only for strings that are not data URLs at all.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
1g 4h
PR unite (30g)
44

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.