@samitouri / QOS-React / commits / d529a43212

[compiler] Add repro for outlining in non VarDecls

ghstack-source-id: 7688987b0277113f4006ecaf343863d9fb30f83b Pull Request resolved: https://github.com/facebook/react/pull/30465

Lauren Tan committed Jul 25, 2024 at 15:18 UTC d529a432125d926b6f8cd86ec5431619f25be804
2 files changed +87
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.expect.md new
+62
@@ -0,0 +1,62 @@
1 +
2 +## Input
3 +
4 +```javascript
5 +function Component(props) {
6 + return <View {...props} />;
7 +}
8 +
9 +const View = React.memo(({items}) => {
10 + return (
11 + <ul>
12 + {items.map(item => (
13 + <li key={item.id}>{item.name}</li>
14 + ))}
15 + </ul>
16 + );
17 +});
18 +
19 +export const FIXTURE_ENTRYPOINT = {
20 + fn: Component,
21 + params: [
22 + {
23 + items: [
24 + {id: 2, name: 'foo'},
25 + {id: 3, name: 'bar'},
26 + ],
27 + },
28 + ],
29 +};
30 +
31 +```
32 +
33 +
34 +## Error
35 +
36 +```
37 + 3 | }
38 + 4 |
39 +> 5 | const View = React.memo(({items}) => {
40 + | ^^^^^^^^^^^^^^
41 +> 6 | return (
42 + | ^^^^^^^^^^
43 +> 7 | <ul>
44 + | ^^^^^^^^^^
45 +> 8 | {items.map(item => (
46 + | ^^^^^^^^^^
47 +> 9 | <li key={item.id}>{item.name}</li>
48 + | ^^^^^^^^^^
49 +> 10 | ))}
50 + | ^^^^^^^^^^
51 +> 11 | </ul>
52 + | ^^^^^^^^^^
53 +> 12 | );
54 + | ^^^^^^^^^^
55 +> 13 | });
56 + | ^^ Invariant: Expected a variable declarator parent (5:13)
57 + 14 |
58 + 15 | export const FIXTURE_ENTRYPOINT = {
59 + 16 | fn: Component,
60 +```
61 +
62 +
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.js new
+25
@@ -0,0 +1,25 @@
1 +function Component(props) {
2 + return <View {...props} />;
3 +}
4 +
5 +const View = React.memo(({items}) => {
6 + return (
7 + <ul>
8 + {items.map(item => (
9 + <li key={item.id}>{item.name}</li>
10 + ))}
11 + </ul>
12 + );
13 +});
14 +
15 +export const FIXTURE_ENTRYPOINT = {
16 + fn: Component,
17 + params: [
18 + {
19 + items: [
20 + {id: 2, name: 'foo'},
21 + {id: 3, name: 'bar'},
22 + ],
23 + },
24 + ],
25 +};