[compiler] Fixture for function outlining
Fixture demonstrating a case where we can "outline" a function expression. ghstack-source-id: 836471518f0ff14d16f7b7bbf2e8900660896e97 Pull Request resolved: https://github.com/facebook/react/pull/30329
Joe Savona committed
Jul 15, 2024 at 12:28 UTC
ad08698d7ffb967217c252718719a383082d4e4d
2 files changed
+82
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.expect.md
new
+66
@@ -0,0 +1,66 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { Stringify } from "shared-runtime";
6
+
7
+function Component(props) {
8
+ return (
9
+ <div>
10
+ {props.items.map((item) => (
11
+ <Stringify key={item.id} item={item.name} />
12
+ ))}
13
+ </div>
14
+ );
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Component,
19
+ params: [{ items: [{ id: 1, name: "one" }] }],
20
+};
21
+
22
+```
23
+
24
+## Code
25
+
26
+```javascript
27
+import { c as _c } from "react/compiler-runtime";
28
+import { Stringify } from "shared-runtime";
29
+
30
+function Component(props) {
31
+ const $ = _c(5);
32
+ let t0;
33
+ if ($[0] !== props.items) {
34
+ let t1;
35
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
36
+ t1 = (item) => <Stringify key={item.id} item={item.name} />;
37
+ $[2] = t1;
38
+ } else {
39
+ t1 = $[2];
40
+ }
41
+ t0 = props.items.map(t1);
42
+ $[0] = props.items;
43
+ $[1] = t0;
44
+ } else {
45
+ t0 = $[1];
46
+ }
47
+ let t1;
48
+ if ($[3] !== t0) {
49
+ t1 = <div>{t0}</div>;
50
+ $[3] = t0;
51
+ $[4] = t1;
52
+ } else {
53
+ t1 = $[4];
54
+ }
55
+ return t1;
56
+}
57
+
58
+export const FIXTURE_ENTRYPOINT = {
59
+ fn: Component,
60
+ params: [{ items: [{ id: 1, name: "one" }] }],
61
+};
62
+
63
+```
64
+
65
+### Eval output
66
+(kind: ok) <div><div>{"item":"one"}</div></div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-helper.js
new
+16
@@ -0,0 +1,16 @@
1
+import { Stringify } from "shared-runtime";
2
+
3
+function Component(props) {
4
+ return (
5
+ <div>
6
+ {props.items.map((item) => (
7
+ <Stringify key={item.id} item={item.name} />
8
+ ))}
9
+ </div>
10
+ );
11
+}
12
+
13
+export const FIXTURE_ENTRYPOINT = {
14
+ fn: Component,
15
+ params: [{ items: [{ id: 1, name: "one" }] }],
16
+};