Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#1,768 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
node.js, typescript
Domain
cli, testing

Research direction

Start in packages/playground-url/src/cli.ts and read the text and binary extension filters; the issue identifies the existing CLI test in packages/playground-url/src/__tests__/cli.test.ts. Run the playground-url package tests and verify an SVG is embedded as text rather than skipped; the documented instrument import should then resolve from the generated link. Update the note in packages/playground-url/AGENTS.md as described.

Written by the indexing model from the issue text.

Description

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.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.