fix(transformer): validate JSX pragma values and reject invalid identifiers

[Copilot]

Invalid JSX pragma values in comments (e.g., backticks) were being used as-is, generating broken JavaScript code. The transformer now validates pragma values and emits warnings when they're invalid.

Changes

• Validation: Added is_valid_pragma_value() to validate @jsx and @jsxFrag pragma values against JavaScript identifier rules

  • Accepts single identifiers: h, Fragment
  • Accepts dotted identifiers: React.Fragment, Preact.h
  • Accepts special forms: this.foo, import.meta.bar
  • Rejects invalid syntax: backticks, numbers, empty strings

• Diagnostics: Added invalid_pragma_value() warning diagnostic that guides users to fix malformed pragmas

• Fallback behavior: Invalid pragmas are ignored and defaults (React.createElement, React.Fragment) are used

Example

Before:

// @jsxRuntime classic
console.log(<></>) // @jsxFrag `

// Transforms to invalid code:
console.log(React.createElement(`, null));

After:

// Emits warning: Invalid @jsxFrag value "`". It will be ignored.
// Transforms to valid code:
console.log(React.createElement(React.Fragment, null));

This aligns with esbuild's behavior of warning users about invalid pragmas while continuing transformation with defaults.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>transformer: // @jsxFrag ` generates invalid code</issue_title>
<issue_description>```js
// @jsxRuntime classic
console.log(<></>) // @jsxFrag `

is transformed to
```js
// @jsxRuntime classic
console.log(/* @__PURE__ */ React.createElement(`, null));

. But this should be

// @jsxRuntime classic
console.log(/* @__PURE__ */ React.createElement(React.Fragment, null));

(the pragma comment should be ignored).
playground

Probably a warning should be output like esbuild does (esbuild try).

related: evanw/esbuild@2102e06</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes transformer: `// @jsxFrag `` generates invalid code #16653

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[codspeed-hq]

CodSpeed Performance Report

Merging #16675 will not alter performance

_{Comparing copilot/fix-jsxfrag-transformation (403d91f) with main (3909460)}

Summary

✅ 38 untouched
⏩ 7 skipped¹

Footnotes

1. 7 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[Copilot]

Pull request overview

This PR fixes a bug where invalid JSX pragma values (like backticks, numbers, or bare reserved keywords) were being used as-is in the transformer, generating broken JavaScript code. The fix adds validation for @jsx and @jsxFrag pragma values and emits warnings when they're invalid, falling back to default values (React.createElement and React.Fragment).

Key Changes:

• Added is_valid_pragma_value() validation function that checks pragma values against JavaScript identifier rules
• Added invalid_pragma_value() diagnostic to warn users about malformed pragmas
• Integration tests verify that invalid pragmas (numbers, reserved keywords) are properly rejected

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
crates/oxc_transformer/src/jsx/diagnostics.rs	Adds new warning diagnostic for invalid pragma values with helpful message
crates/oxc_transformer/src/jsx/comments.rs	Implements validation logic for pragma values, rejecting invalid identifiers while allowing special forms like this, null, true, false, and import.meta
tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/invalid-jsx/input.jsx	Test fixture for invalid @jsx pragma (numeric value)
tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/invalid-jsx/options.json	Test configuration expecting warning for invalid @jsx value
tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/invalid-jsx-frag/input.jsx	Test fixture for invalid @jsxFrag pragma (reserved keyword)
tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/invalid-jsx-frag/options.json	Test configuration expecting warning for invalid @jsxFrag value
tasks/transform_conformance/snapshots/oxc.snap.md	Updated snapshot showing 2 new passing tests (203/334 vs 201/332)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sapphi-red]

@Dunqing Does this allow // @jsxFrag '[' & // @jsxFrag "[", which seems to be the reason why esbuild had a test?

evanw/esbuild@2102e06#diff-77afe5d24e480c64dcd9bc0ae8b6d8849788be2ab5c28442929ce002be9420e2R1186-R1208

[Dunqing]

@Dunqing Does this allow // @jsxFrag '[' & // @jsxFrag "[", which seems to be the reason why esbuild had a test?

evanw/esbuild@2102e06#diff-77afe5d24e480c64dcd9bc0ae8b6d8849788be2ab5c28442929ce002be9420e2R1186-R1208

Oops, never thought it could use a string literal. It doesn't allow it currently. I will follow up.