compiler: Add todo for getter/setter syntax
We were missing a check that ObjectMethods are not getters or setters. In our experience this is pretty rare within React components and hooks themselves, so let's start with a todo. Closes #29586 ghstack-source-id: 03c6cce9a9368a4a4f4ba98bcdff3fa4729ceaf9 Pull Request resolved: https://github.com/facebook/react/pull/29592
Joe Savona committed
May 25, 2024 at 22:24 UTC
c272789ce54ab2db3fb1af53c54631a7246b31bc
5 files changed
+119
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+9
@@ -1520,6 +1520,15 @@ function lowerExpression(
1520
place,
1521
});
1522
} else if (propertyPath.isObjectMethod()) {
1523
+ if (propertyPath.node.kind !== "method") {
1524
+ builder.errors.push({
1525
+ reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.node.kind} functions in ObjectExpression`,
1526
+ severity: ErrorSeverity.Todo,
1527
+ loc: propertyPath.node.loc ?? null,
1528
+ suggestions: null,
1529
+ });
1530
+ continue;
1531
+ }
1532
const method = lowerObjectMethod(builder, propertyPath);
1533
const place = lowerValueToTemporary(builder, method);
1534
const loweredKey = lowerObjectPropertyKey(builder, propertyPath);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.expect.md
new
+39
@@ -0,0 +1,39 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component({ value }) {
6
+ const object = {
7
+ get value() {
8
+ return value;
9
+ },
10
+ };
11
+ return <div>{object.value}</div>;
12
+}
13
+
14
+export const FIXTURE_ENTRYPOINT = {
15
+ fn: foo,
16
+ params: [{ value: 0 }],
17
+ sequentialRenders: [{ value: 1 }, { value: 2 }],
18
+};
19
+
20
+```
21
+
22
+
23
+## Error
24
+
25
+```
26
+ 1 | function Component({ value }) {
27
+ 2 | const object = {
28
+> 3 | get value() {
29
+ | ^^^^^^^^^^^^^
30
+> 4 | return value;
31
+ | ^^^^^^^^^^^^^^^^^^^
32
+> 5 | },
33
+ | ^^^^^^ Todo: (BuildHIR::lowerExpression) Handle get functions in ObjectExpression (3:5)
34
+ 6 | };
35
+ 7 | return <div>{object.value}</div>;
36
+ 8 | }
37
+```
38
+
39
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-get-syntax.js
new
+14
@@ -0,0 +1,14 @@
1
+function Component({ value }) {
2
+ const object = {
3
+ get value() {
4
+ return value;
5
+ },
6
+ };
7
+ return <div>{object.value}</div>;
8
+}
9
+
10
+export const FIXTURE_ENTRYPOINT = {
11
+ fn: foo,
12
+ params: [{ value: 0 }],
13
+ sequentialRenders: [{ value: 1 }, { value: 2 }],
14
+};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.expect.md
new
+41
@@ -0,0 +1,41 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component(props) {
6
+ let value;
7
+ const object = {
8
+ set value(v) {
9
+ value = v;
10
+ },
11
+ };
12
+ object.value = props.value;
13
+ return <div>{value}</div>;
14
+}
15
+
16
+export const FIXTURE_ENTRYPOINT = {
17
+ fn: foo,
18
+ params: [{ value: 0 }],
19
+ sequentialRenders: [{ value: 1 }, { value: 2 }],
20
+};
21
+
22
+```
23
+
24
+
25
+## Error
26
+
27
+```
28
+ 2 | let value;
29
+ 3 | const object = {
30
+> 4 | set value(v) {
31
+ | ^^^^^^^^^^^^^^
32
+> 5 | value = v;
33
+ | ^^^^^^^^^^^^^^^^
34
+> 6 | },
35
+ | ^^^^^^ Todo: (BuildHIR::lowerExpression) Handle set functions in ObjectExpression (4:6)
36
+ 7 | };
37
+ 8 | object.value = props.value;
38
+ 9 | return <div>{value}</div>;
39
+```
40
+
41
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-set-syntax.js
new
+16
@@ -0,0 +1,16 @@
1
+function Component(props) {
2
+ let value;
3
+ const object = {
4
+ set value(v) {
5
+ value = v;
6
+ },
7
+ };
8
+ object.value = props.value;
9
+ return <div>{value}</div>;
10
+}
11
+
12
+export const FIXTURE_ENTRYPOINT = {
13
+ fn: foo,
14
+ params: [{ value: 0 }],
15
+ sequentialRenders: [{ value: 1 }, { value: 2 }],
16
+};