From 7be94d4b866f30f4169ef777a8e6f6f0c11b4228 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Sun, 14 Sep 2025 20:44:20 -0500 Subject: [PATCH 1/7] TSInstantiationExpression case added --- .../packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 702eaf0f692a2..06717efe6dfe6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -3081,6 +3081,7 @@ function isReorderableExpression( return true; } } + case 'TSInstantiationExpression': case 'RegExpLiteral': case 'StringLiteral': case 'NumericLiteral': From 4e177444eaf3fde0775e0554fb9dc1fbbc7619f3 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Sun, 14 Sep 2025 22:47:41 -0500 Subject: [PATCH 2/7] fixture: TSInstantiationExpression default parameter, snapshot --- .../ts-instantiation-default-param.expect.md | 48 +++++++++++++++++++ .../ts-instantiation-default-param.js | 11 +++++ 2 files changed, 59 insertions(+) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md new file mode 100644 index 0000000000000..217f1103f459a --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md @@ -0,0 +1,48 @@ + +## Input + +```javascript +declare function id(x: T): T; + +export function test(value = id('hi')) { + return value; +} + +export const FIXTURE_ENTRYPOINT = { + fn: test, + params: [], + isComponent: false, +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +declare function id(x: T): T; + +export function test(t0) { + const $ = _c(2); + let t1; + if ($[0] !== t0) { + t1 = t0 === undefined ? id("hi") : t0; + $[0] = t0; + $[1] = t1; + } else { + t1 = $[1]; + } + const value = t1; + return value; +} + +export const FIXTURE_ENTRYPOINT = { + fn: test, + params: [], + isComponent: false, +}; + +``` + +### Eval output +(kind: exception) id is not defined \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js new file mode 100644 index 0000000000000..4cdebfb41788f --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js @@ -0,0 +1,11 @@ +declare function id(x: T): T; + +export function test(value = id('hi')) { + return value; +} + +export const FIXTURE_ENTRYPOINT = { + fn: test, + params: [], + isComponent: false, +}; From 5dc26b36d883cb3812097d77d5a829d22c67c939 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Mon, 15 Sep 2025 16:22:23 -0500 Subject: [PATCH 3/7] define id, repro is component Updated the fixture to be a component and implemented id as a real function. Regenerated the snapshot. Eval output now renders
hi
. --- .../ts-instantiation-default-param.expect.md | 56 +++++++++++-------- .../ts-instantiation-default-param.js | 13 +++-- 2 files changed, 41 insertions(+), 28 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md index 217f1103f459a..04beede4f638d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md @@ -2,16 +2,17 @@ ## Input ```javascript -declare function id(x: T): T; +function id(x: T): T { + return x; +} -export function test(value = id('hi')) { - return value; +export function Component({value = id('hi')}: {value?: T}) { + return
{String(value)}
; } export const FIXTURE_ENTRYPOINT = { - fn: test, - params: [], - isComponent: false, + fn: Component, + params: [{}], }; ``` @@ -20,29 +21,40 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; -declare function id(x: T): T; - -export function test(t0) { - const $ = _c(2); - let t1; - if ($[0] !== t0) { - t1 = t0 === undefined ? id("hi") : t0; - $[0] = t0; - $[1] = t1; +function id(x) { + return x; +} + +export function Component(t0) { + const $ = _c(4); + const { value: t1 } = t0; + let t2; + if ($[0] !== t1) { + t2 = t1 === undefined ? id("hi") : t1; + $[0] = t1; + $[1] = t2; + } else { + t2 = $[1]; + } + const value = t2; + const t3 = String(value); + let t4; + if ($[2] !== t3) { + t4 =
{t3}
; + $[2] = t3; + $[3] = t4; } else { - t1 = $[1]; + t4 = $[3]; } - const value = t1; - return value; + return t4; } export const FIXTURE_ENTRYPOINT = { - fn: test, - params: [], - isComponent: false, + fn: Component, + params: [{}], }; ``` ### Eval output -(kind: exception) id is not defined \ No newline at end of file +(kind: ok)
hi
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js index 4cdebfb41788f..0ac42cac2366c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js @@ -1,11 +1,12 @@ -declare function id(x: T): T; +function id(x: T): T { + return x; +} -export function test(value = id('hi')) { - return value; +export function Component({value = id('hi')}: {value?: T}) { + return
{String(value)}
; } export const FIXTURE_ENTRYPOINT = { - fn: test, - params: [], - isComponent: false, + fn: Component, + params: [{}], }; From 78a3b69ca9876c87e705f1c21b105ae99fbeb3c6 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Mon, 15 Sep 2025 19:24:49 -0500 Subject: [PATCH 4/7] recursive call to check inner expr is reorderable --- .../babel-plugin-react-compiler/src/HIR/BuildHIR.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 06717efe6dfe6..0ae338f5c7863 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -3081,7 +3081,12 @@ function isReorderableExpression( return true; } } - case 'TSInstantiationExpression': + case 'TSInstantiationExpression': { + const innerExpr = (expr as NodePath).get( + 'expression', + ) as NodePath; + return isReorderableExpression(builder, innerExpr, allowLocalIdentifiers); + } case 'RegExpLiteral': case 'StringLiteral': case 'NumericLiteral': From f92e3a15bea8960ec2607dcbd0e80deec67a7c4b Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Mon, 15 Sep 2025 19:54:05 -0500 Subject: [PATCH 5/7] Update fixture use id as default value and call inside the body --- .../ts-instantiation-default-param.expect.md | 12 +++++++----- .../compiler/ts-instantiation-default-param.js | 3 ++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md index 04beede4f638d..601749723a2c3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md @@ -6,7 +6,8 @@ function id(x: T): T { return x; } -export function Component({value = id('hi')}: {value?: T}) { +export function Component({fn = id}: {fn?: (x: T) => T}) { + const value = fn('hi'); return
{String(value)}
; } @@ -27,11 +28,12 @@ function id(x) { export function Component(t0) { const $ = _c(4); - const { value: t1 } = t0; + const { fn: t1 } = t0; + const fn = t1 === undefined ? id : t1; let t2; - if ($[0] !== t1) { - t2 = t1 === undefined ? id("hi") : t1; - $[0] = t1; + if ($[0] !== fn) { + t2 = fn("hi"); + $[0] = fn; $[1] = t2; } else { t2 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js index 0ac42cac2366c..49dac4d75ac8c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js @@ -2,7 +2,8 @@ function id(x: T): T { return x; } -export function Component({value = id('hi')}: {value?: T}) { +export function Component({fn = id}: {fn?: (x: T) => T}) { + const value = fn('hi'); return
{String(value)}
; } From 1db579e9825b877afc156ec180f57147b174ec94 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Tue, 16 Sep 2025 16:21:58 -0500 Subject: [PATCH 6/7] Fix prettier issue by renaming TypeScript test file from .js to .tsx --- ...on-default-param.js => ts-instantiation-default-param.tsx} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{ts-instantiation-default-param.js => ts-instantiation-default-param.tsx} (59%) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx similarity index 59% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx index 49dac4d75ac8c..6382962edda9b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.tsx @@ -2,8 +2,8 @@ function id(x: T): T { return x; } -export function Component({fn = id}: {fn?: (x: T) => T}) { - const value = fn('hi'); +export function Component({fn = id}: {fn?: (x: T) => T}) { + const value = fn('hi' as T); return
{String(value)}
; } From 0c284b71caa55f3c6d0f8bc5be7d8b816b9c9267 Mon Sep 17 00:00:00 2001 From: Zekarias Asaminew Date: Tue, 16 Sep 2025 18:56:39 -0500 Subject: [PATCH 7/7] Update ts-instantiation-default-param.expect.md --- .../compiler/ts-instantiation-default-param.expect.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md index 601749723a2c3..b80c0370f798b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.expect.md @@ -6,8 +6,8 @@ function id(x: T): T { return x; } -export function Component({fn = id}: {fn?: (x: T) => T}) { - const value = fn('hi'); +export function Component({fn = id}: {fn?: (x: T) => T}) { + const value = fn('hi' as T); return
{String(value)}
; } @@ -32,7 +32,7 @@ export function Component(t0) { const fn = t1 === undefined ? id : t1; let t2; if ($[0] !== fn) { - t2 = fn("hi"); + t2 = fn("hi" as T); $[0] = fn; $[1] = t2; } else {