Skip to content

Allow colons in jsx template tag/prop names (attr:, prop:, XML namespaces) - #377

Merged
brainkim merged 1 commit into
mainfrom
fix/jsx-tag-namespaced-props
Aug 12, 2026
Merged

Allow colons in jsx template tag/prop names (attr:, prop:, XML namespaces)#377
brainkim merged 1 commit into
mainfrom
fix/jsx-tag-namespaced-props

Conversation

@brainkim

Copy link
Copy Markdown
Member

Summary

  • The jsx tagged template's parser (src/jsx-tag.ts) excluded : from its tag-name and prop-name character classes, so attr:/prop: prefixes and other XML namespace prefixes threw Unexpected text \:` even though the DOM and HTML renderers already handle them (src/dom.ts, src/html.ts`).
  • Widened PROPS_RE and CHILDREN_RE to accept : in names, and added a validateName check so a leading, trailing, or repeated colon (:foo, foo:, a:b:c) is still a parse error — this is a deliberate choice, since none of those forms are meaningful namespaced names, and a loud parse error is more useful than silently accepting garbage.
  • Parser-only change: renderer semantics are untouched.

All six previously-failing forms now parse to the same element shape as compiled JSX:

jsx`<div attr:foo="bar" />`
jsx`<input prop:value="x" />`
jsx`<use xlink:href="#icon" />`
jsx`<svg xmlns:xlink="http://www.w3.org/1999/xlink" />`
jsx`<svg:circle r="5" />`
jsx`<div attr:foo=${"bar"} />`

Verified colons elsewhere are unaffected: text children (<p>ratio 3:1</p>), quoted attribute values (style="color: red", href="https://x"), the <//>/<//Component> closing forms, and comments.

Test plan

  • npx playwright-test test/jsx-tag.ts --runner uvu — 29/29 passed (25 baseline + 4 new tests; confirmed the count moved, since this file is excluded from npm run test:core)
  • npm run test:core — 577/577 passed (unchanged from main, no regressions)
  • npx tsc --noEmit — clean
  • npx eslint --resolve-plugins-relative-to . src/jsx-tag.ts test/jsx-tag.ts --ext .ts,.tsx — clean
  • Added a CHANGELOG entry under ## [Unreleased] (public-facing capability)
  • Updated docs/guides/11-jsx-template-tag.md and docs/SKILL.md (+ regenerated skills/ via npm run skill)

🤖 Generated with Claude Code

The jsx tagged template's parser regexes excluded `:` from tag-name and
prop-name character classes, so attr:/prop: prefixes and other XML
namespace prefixes (xlink:href, xmlns:xlink, namespaced tags like
svg:circle) threw a parse error even though the DOM and HTML renderers
already understood them. Widen PROPS_RE and CHILDREN_RE to accept `:`,
and validate that it isn't leading, trailing, or repeated so `:foo`,
`foo:`, and `a:b:c` remain parse errors instead of being silently
accepted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brainkim
brainkim merged commit da66a0f into main Aug 12, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant