Skip to content

Commit 5813211

Browse files
[Compiler Bug] Complier mark ts instantiation expression as reorderable in build hir (#34488)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> The React Compiler rejected a default parameter that contains a TSInstantiationExpression with the todo message that the expression cannot be safely reordered. This change teaches the reorder check in BuildHIR.ts to treat TSInstantiationExpression as reorderable. This is safe because TypeScript instantiation only affects types and is erased at runtime, so it has no side effects and does not change semantics. ## How did you test this change? ``` Set-Content testfilter.txt 'ts-instantiation-default-param' yarn test --filter --update yarn test --filter ``` <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> I added a fixture: > compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-instantiation-default-param.js
1 parent 1bcdd22 commit 5813211

File tree

3 files changed

+81
-0
lines changed

3 files changed

+81
-0
lines changed

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3081,6 +3081,12 @@ function isReorderableExpression(
30813081
return true;
30823082
}
30833083
}
3084+
case 'TSInstantiationExpression': {
3085+
const innerExpr = (expr as NodePath<t.TSInstantiationExpression>).get(
3086+
'expression',
3087+
) as NodePath<t.Expression>;
3088+
return isReorderableExpression(builder, innerExpr, allowLocalIdentifiers);
3089+
}
30843090
case 'RegExpLiteral':
30853091
case 'StringLiteral':
30863092
case 'NumericLiteral':
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
## Input
3+
4+
```javascript
5+
function id<T>(x: T): T {
6+
return x;
7+
}
8+
9+
export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
10+
const value = fn('hi' as T);
11+
return <div>{String(value)}</div>;
12+
}
13+
14+
export const FIXTURE_ENTRYPOINT = {
15+
fn: Component,
16+
params: [{}],
17+
};
18+
19+
```
20+
21+
## Code
22+
23+
```javascript
24+
import { c as _c } from "react/compiler-runtime";
25+
function id(x) {
26+
return x;
27+
}
28+
29+
export function Component(t0) {
30+
const $ = _c(4);
31+
const { fn: t1 } = t0;
32+
const fn = t1 === undefined ? id : t1;
33+
let t2;
34+
if ($[0] !== fn) {
35+
t2 = fn("hi" as T);
36+
$[0] = fn;
37+
$[1] = t2;
38+
} else {
39+
t2 = $[1];
40+
}
41+
const value = t2;
42+
const t3 = String(value);
43+
let t4;
44+
if ($[2] !== t3) {
45+
t4 = <div>{t3}</div>;
46+
$[2] = t3;
47+
$[3] = t4;
48+
} else {
49+
t4 = $[3];
50+
}
51+
return t4;
52+
}
53+
54+
export const FIXTURE_ENTRYPOINT = {
55+
fn: Component,
56+
params: [{}],
57+
};
58+
59+
```
60+
61+
### Eval output
62+
(kind: ok) <div>hi</div>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
function id<T>(x: T): T {
2+
return x;
3+
}
4+
5+
export function Component<T = string>({fn = id<T>}: {fn?: (x: T) => T}) {
6+
const value = fn('hi' as T);
7+
return <div>{String(value)}</div>;
8+
}
9+
10+
export const FIXTURE_ENTRYPOINT = {
11+
fn: Component,
12+
params: [{}],
13+
};

0 commit comments

Comments
 (0)