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

The playground-url CLI skips .svg files as binary, so links for instruments that import an SVG fail to compile

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,768 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à
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
node.js, typescript
Ambito
cli, testing

Direzione di ricerca

Inizia da packages/playground-url/src/cli.ts e leggi i filtri per le estensioni di testo e binarie; l’issue indica il test CLI esistente in packages/playground-url/src/__tests__/cli.test.ts. Esegui i test del pacchetto playground-url e verifica che un SVG venga incorporato come testo anziché essere ignorato; a quel punto l’importazione dello strumento documentata dovrebbe essere risolta dal link generato. Aggiorna la nota in packages/playground-url/AGENTS.md come descritto.

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

Descrizione

Area: Playground Bug Difficulty: Low Good First Issue Priority: Low

The playground-url CLI drops .svg files as if they were binary, so a link generated for an instrument that imports an SVG fails to compile in the playground. BINARY_FILE_EXT_REGEX includes svg, and the CLI skips matching files with "binary assets cannot be embedded in a share URL". But an SVG is UTF-8 text, and the playground treats it as text everywhere: src/instruments/index.ts loads .svg with the ?raw text glob, inferFileType maps .svg to html, and isBase64EncodedFileType excludes it. The playground's own Share button therefore carries SVGs in its links. Only the CLI leaves them out, and the instrument's import logo from './logo.svg' then fails to resolve.

Where

packages/playground-url/src/cli.ts:13-16:

/** Text files the playground can load from a share URL. */
const TEXT_FILE_EXT_REGEX = /\.(css|html|js|jsx|json|ts|tsx)$/i;
/** Bundler assets that exist on disk but cannot be embedded in a (string-only) share URL. */
const BINARY_FILE_EXT_REGEX = /\.(jpeg|jpg|mp3|mp4|png|svg|webp)$/i;

Reproduce

  1. Build the CLI (pnpm --filter @opendatacapture/playground-url build).
  2. Run node packages/playground-url/dist/cli.js apps/playground/src/instruments/examples/interactive/Interactive-With-React.
  3. Open the printed link.

Actual: the CLI warns Skipping 'react.svg': binary assets cannot be embedded in a share URL, and the playground shows Failed to Compile because App.tsx's import reactLogo from './react.svg' does not resolve.
Expected: react.svg is embedded as text, and the instrument renders as it does when shared from the playground's Share button.

Tests

packages/playground-url/src/__tests__/cli.test.ts: it('should embed .svg files as text, so an instrument that imports an SVG still compiles from the link'). No end-to-end test: the playground already handles SVGs as text (the existing Interactive With React spec renders one), and the bug is only in the CLI's file filter.

Suggested fix

Move svg from BINARY_FILE_EXT_REGEX to TEXT_FILE_EXT_REGEX, and update the "images, audio and video cannot be represented" note in packages/playground-url/AGENTS.md to exclude SVG. This is a published package, so the change ships with its next version.

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

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.