mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
[compiler] Fix JSX tags prefixed with _ or $ incorrectly treated as host elements (#36688)
## Summary Fixes #36601 ### Problem In `lowerJsxElementName` (BuildHIR.ts), the condition `if (tag.match(/^[A-Z]/))` only treats JSX tags starting with an **uppercase letter** as component references. Tags starting with `_`, `$`, or any other non-letter character fell through to the `else` branch and were incorrectly classified as `BuiltinTag` (host/intrinsic elements). This meant that `<_Bar />` or `<$Foo />` was treated like `<div />`, causing the compiler to skip memoization of the component and potentially producing incorrect output. ### Root Cause JSX semantics (as implemented by Babel's JSX transform) are: - Tag starts with **lowercase** letter → host/intrinsic element (string tag) - **Everything else** → component reference (in-scope identifier) The original code only handled the first half of that rule ("starts with uppercase → component") while ignoring identifiers like `_Bar` and `$Foo`. ### Fix Change: ```ts if (tag.match(/^[A-Z]/)) { ``` To: ```ts if (!tag.match(/^[a-z]/)) { ``` This correctly classifies any JSX identifier that does NOT start with a lowercase letter as a component reference, matching JSX spec semantics. ### Test Added fixture `jsx-underscore-prefix-component` that renders `<_Bar />` and verifies the compiler correctly memoizes it as a component reference. ## How did you test this change? - Added new compiler fixture test: `jsx-underscore-prefix-component` - Ran `yarn workspace babel-plugin-react-compiler lint` ✅ - Ran snap tests with the new fixture to generate expected output ✅
This commit is contained in:
@@ -3409,7 +3409,7 @@ function lowerJsxElementName(
|
||||
const exprLoc = exprNode.loc ?? GeneratedSource;
|
||||
if (exprPath.isJSXIdentifier()) {
|
||||
const tag: string = exprPath.node.name;
|
||||
if (tag.match(/^[A-Z]/)) {
|
||||
if (!tag.match(/^[a-z]/)) {
|
||||
const kind = getLoadKind(builder, exprPath);
|
||||
return lowerValueToTemporary(builder, {
|
||||
kind: kind,
|
||||
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
// Test that JSX tags starting with `_` or `$` are treated as component
|
||||
// references (not host/builtin elements). JSX semantics: any tag NOT starting
|
||||
// with a lowercase letter is a component reference.
|
||||
|
||||
import {Stringify} from 'shared-runtime';
|
||||
|
||||
const _Bar = Stringify;
|
||||
|
||||
function Component(props) {
|
||||
return <_Bar value={props.value} />;
|
||||
}
|
||||
|
||||
export const FIXTURE_ENTRYPOINT = {
|
||||
fn: Component,
|
||||
params: [{value: 42}],
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
## Code
|
||||
|
||||
```javascript
|
||||
import { c as _c } from "react/compiler-runtime"; // Test that JSX tags starting with `_` or `$` are treated as component
|
||||
// references (not host/builtin elements). JSX semantics: any tag NOT starting
|
||||
// with a lowercase letter is a component reference.
|
||||
|
||||
import { Stringify } from "shared-runtime";
|
||||
|
||||
const _Bar = Stringify;
|
||||
|
||||
function Component(props) {
|
||||
const $ = _c(2);
|
||||
let t0;
|
||||
if ($[0] !== props.value) {
|
||||
t0 = <_Bar value={props.value} />;
|
||||
$[0] = props.value;
|
||||
$[1] = t0;
|
||||
} else {
|
||||
t0 = $[1];
|
||||
}
|
||||
return t0;
|
||||
}
|
||||
|
||||
export const FIXTURE_ENTRYPOINT = {
|
||||
fn: Component,
|
||||
params: [{ value: 42 }],
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### Eval output
|
||||
(kind: ok) <div>{"value":42}</div>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
// Test that JSX tags starting with `_` or `$` are treated as component
|
||||
// references (not host/builtin elements). JSX semantics: any tag NOT starting
|
||||
// with a lowercase letter is a component reference.
|
||||
|
||||
import {Stringify} from 'shared-runtime';
|
||||
|
||||
const _Bar = Stringify;
|
||||
|
||||
function Component(props) {
|
||||
return <_Bar value={props.value} />;
|
||||
}
|
||||
|
||||
export const FIXTURE_ENTRYPOINT = {
|
||||
fn: Component,
|
||||
params: [{value: 42}],
|
||||
};
|
||||
Reference in New Issue
Block a user