diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts index 7da564205475..2d1d05bfb29d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts @@ -356,8 +356,41 @@ function validateNoRefAccessInRenderImpl( switch (instr.value.kind) { case 'JsxExpression': case 'JsxFragment': { - for (const operand of eachInstructionValueOperand(instr.value)) { - validateNoDirectRefValueAccess(errors, operand, env); + if (instr.value.kind === 'JsxExpression') { + if (instr.value.tag.kind === 'Identifier') { + validateNoDirectRefValueAccess(errors, instr.value.tag, env); + } + for (const attribute of instr.value.props) { + switch (attribute.kind) { + case 'JsxAttribute': { + if (attribute.name !== 'ref') { + validateNoDirectRefValueAccess( + errors, + attribute.place, + env, + ); + } + break; + } + case 'JsxSpreadAttribute': { + validateNoDirectRefValueAccess( + errors, + attribute.argument, + env, + ); + break; + } + } + } + if (instr.value.children != null) { + for (const child of instr.value.children) { + validateNoDirectRefValueAccess(errors, child, env); + } + } + } else { + for (const operand of eachInstructionValueOperand(instr.value)) { + validateNoDirectRefValueAccess(errors, operand, env); + } } break; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.expect.md new file mode 100644 index 000000000000..d9e350933e4c --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.expect.md @@ -0,0 +1,32 @@ + +## Input + +```javascript +// @validateRefAccessDuringRender @compilationMode:"infer" +function TextArea(props) { + return ; +} + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender @compilationMode:"infer" +function TextArea(props) { + const $ = _c(2); + let t0; + if ($[0] !== props.ref) { + t0 = ; + $[0] = props.ref; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.js new file mode 100644 index 000000000000..e5a5f580d755 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-ref-prop-to-jsx.js @@ -0,0 +1,4 @@ +// @validateRefAccessDuringRender @compilationMode:"infer" +function TextArea(props) { + return ; +}