[compiler] Allow hoisting of destructured variable declarations
Summary: It doesn't seem as though this invariant was necessary ghstack-source-id: b27e76525911d5cfc1991b5cfdb7b2074c039e21 Pull Request resolved: https://github.com/facebook/react/pull/30699
Mike Vitousek committed
Aug 15, 2024 at 14:27 UTC
bb6acc20afb4be95e2d22661ae7dc153affd0ae4
3 files changed
+79
-11
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
-11
@@ -428,17 +428,6 @@ function lowerStatement(
428
loc: id.parentPath.node.loc ?? GeneratedSource,
429
});
430
continue;
431
- } else if (!binding.path.get('id').isIdentifier()) {
432
- builder.errors.push({
433
- severity: ErrorSeverity.Todo,
434
- reason: 'Unsupported variable declaration type for hoisting',
435
- description: `variable "${
436
- binding.identifier.name
437
- }" declared with ${binding.path.get('id').type}`,
438
- suggestions: null,
439
- loc: id.parentPath.node.loc ?? GeneratedSource,
440
- });
441
- continue;
431
} else if (
432
binding.kind !== 'const' &&
433
binding.kind !== 'var' &&
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
new
+62
@@ -0,0 +1,62 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+//@flow
6
+component Foo() {
7
+ function foo() {
8
+ return (
9
+ <div>
10
+ {a} {z} {y}
11
+ </div>
12
+ );
13
+ }
14
+ const [a, {x: z, y = 10}] = [1, {x: 2}];
15
+ return foo();
16
+}
17
+
18
+export const FIXTURE_ENTRYPOINT = {
19
+ fn: Foo,
20
+ params: [],
21
+};
22
+
23
+```
24
+
25
+## Code
26
+
27
+```javascript
28
+import { c as _c } from "react/compiler-runtime";
29
+function Foo() {
30
+ const $ = _c(1);
31
+ let t0;
32
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
33
+ const foo = function foo() {
34
+ return (
35
+ <div>
36
+ {a} {z} {y}
37
+ </div>
38
+ );
39
+ };
40
+
41
+ const [t1, t2] = [1, { x: 2 }];
42
+ const a = t1;
43
+ const { x: t3, y: t4 } = t2;
44
+ const z = t3;
45
+ const y = t4 === undefined ? 10 : t4;
46
+ t0 = foo();
47
+ $[0] = t0;
48
+ } else {
49
+ t0 = $[0];
50
+ }
51
+ return t0;
52
+}
53
+
54
+export const FIXTURE_ENTRYPOINT = {
55
+ fn: Foo,
56
+ params: [],
57
+};
58
+
59
+```
60
+
61
+### Eval output
62
+(kind: ok) <div>1 2 10</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js
new
+17
@@ -0,0 +1,17 @@
1
+//@flow
2
+component Foo() {
3
+ function foo() {
4
+ return (
5
+ <div>
6
+ {a} {z} {y}
7
+ </div>
8
+ );
9
+ }
10
+ const [a, {x: z, y = 10}] = [1, {x: 2}];
11
+ return foo();
12
+}
13
+
14
+export const FIXTURE_ENTRYPOINT = {
15
+ fn: Foo,
16
+ params: [],
17
+};