Fixture for conditional use()
This is mostly to ensure we don't flag this as a conditional hook, but since i'm here i made it a proper test.
Joe Savona committed
Apr 2, 2024 at 11:36 UTC
a53f208f5e4dfc3cf7c34a4b51e44c07a9a24880
2 files changed
+196
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/use-operator-conditional.expect.md
new
+154
@@ -0,0 +1,154 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { ValidateMemoization } from "shared-runtime";
6
+import { use, useMemo } from "react";
7
+
8
+const FooContext = React.createContext(null);
9
+function Component(props) {
10
+ return (
11
+ <FooContext.Provider value={props.value}>
12
+ <Inner cond={props.cond} />
13
+ </FooContext.Provider>
14
+ );
15
+}
16
+
17
+function Inner(props) {
18
+ let input = null;
19
+ if (props.cond) {
20
+ input = use(FooContext);
21
+ }
22
+ const output = useMemo(() => [input], [input]);
23
+ return <ValidateMemoization inputs={[input]} output={output} />;
24
+}
25
+
26
+export const FIXTURE_ENTRYPOINT = {
27
+ fn: Component,
28
+ params: [{ cond: true, value: 42 }],
29
+ sequentialRenders: [
30
+ // change cond true->false
31
+ { cond: true, value: 42 },
32
+ { cond: false, value: 42 },
33
+
34
+ // change value
35
+ { cond: false, value: null },
36
+ { cond: false, value: 42 },
37
+
38
+ // change cond false->true
39
+ { cond: true, value: 42 },
40
+
41
+ // change cond true->false, change unobserved value, change cond false->true
42
+ { cond: false, value: 42 },
43
+ { cond: false, value: null },
44
+ { cond: true, value: 42 },
45
+ ],
46
+};
47
+
48
+```
49
+
50
+## Code
51
+
52
+```javascript
53
+import { ValidateMemoization } from "shared-runtime";
54
+import { use, useMemo, unstable_useMemoCache as useMemoCache } from "react";
55
+
56
+const FooContext = React.createContext(null);
57
+function Component(props) {
58
+ const $ = useMemoCache(5);
59
+ let t0;
60
+ if ($[0] !== props.cond) {
61
+ t0 = <Inner cond={props.cond} />;
62
+ $[0] = props.cond;
63
+ $[1] = t0;
64
+ } else {
65
+ t0 = $[1];
66
+ }
67
+ let t1;
68
+ if ($[2] !== props.value || $[3] !== t0) {
69
+ t1 = <FooContext.Provider value={props.value}>{t0}</FooContext.Provider>;
70
+ $[2] = props.value;
71
+ $[3] = t0;
72
+ $[4] = t1;
73
+ } else {
74
+ t1 = $[4];
75
+ }
76
+ return t1;
77
+}
78
+
79
+function Inner(props) {
80
+ const $ = useMemoCache(7);
81
+ let input;
82
+ input = null;
83
+ if (props.cond) {
84
+ input = use(FooContext);
85
+ }
86
+
87
+ input;
88
+ input;
89
+ let t0;
90
+ const t1 = input;
91
+ let t2;
92
+ if ($[0] !== t1) {
93
+ t2 = [t1];
94
+ $[0] = t1;
95
+ $[1] = t2;
96
+ } else {
97
+ t2 = $[1];
98
+ }
99
+ t0 = t2;
100
+ const output = t0;
101
+ const t3 = input;
102
+ let t4;
103
+ if ($[2] !== t3) {
104
+ t4 = [t3];
105
+ $[2] = t3;
106
+ $[3] = t4;
107
+ } else {
108
+ t4 = $[3];
109
+ }
110
+ let t5;
111
+ if ($[4] !== t4 || $[5] !== output) {
112
+ t5 = <ValidateMemoization inputs={t4} output={output} />;
113
+ $[4] = t4;
114
+ $[5] = output;
115
+ $[6] = t5;
116
+ } else {
117
+ t5 = $[6];
118
+ }
119
+ return t5;
120
+}
121
+
122
+export const FIXTURE_ENTRYPOINT = {
123
+ fn: Component,
124
+ params: [{ cond: true, value: 42 }],
125
+ sequentialRenders: [
126
+ // change cond true->false
127
+ { cond: true, value: 42 },
128
+ { cond: false, value: 42 },
129
+
130
+ // change value
131
+ { cond: false, value: null },
132
+ { cond: false, value: 42 },
133
+
134
+ // change cond false->true
135
+ { cond: true, value: 42 },
136
+
137
+ // change cond true->false, change unobserved value, change cond false->true
138
+ { cond: false, value: 42 },
139
+ { cond: false, value: null },
140
+ { cond: true, value: 42 },
141
+ ],
142
+};
143
+
144
+```
145
+
146
+### Eval output
147
+(kind: ok) <div>{"inputs":[42],"output":[42]}</div>
148
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
149
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
150
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
151
+<div>{"inputs":[42],"output":[42]}</div>
152
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
153
+<div>{"inputs":[null],"output":["[[ cyclic ref *2 ]]"]}</div>
154
+<div>{"inputs":[42],"output":[42]}</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/use-operator-conditional.js
new
+42
@@ -0,0 +1,42 @@
1
+import { ValidateMemoization } from "shared-runtime";
2
+import { use, useMemo } from "react";
3
+
4
+const FooContext = React.createContext(null);
5
+function Component(props) {
6
+ return (
7
+ <FooContext.Provider value={props.value}>
8
+ <Inner cond={props.cond} />
9
+ </FooContext.Provider>
10
+ );
11
+}
12
+
13
+function Inner(props) {
14
+ let input = null;
15
+ if (props.cond) {
16
+ input = use(FooContext);
17
+ }
18
+ const output = useMemo(() => [input], [input]);
19
+ return <ValidateMemoization inputs={[input]} output={output} />;
20
+}
21
+
22
+export const FIXTURE_ENTRYPOINT = {
23
+ fn: Component,
24
+ params: [{ cond: true, value: 42 }],
25
+ sequentialRenders: [
26
+ // change cond true->false
27
+ { cond: true, value: 42 },
28
+ { cond: false, value: 42 },
29
+
30
+ // change value
31
+ { cond: false, value: null },
32
+ { cond: false, value: 42 },
33
+
34
+ // change cond false->true
35
+ { cond: true, value: 42 },
36
+
37
+ // change cond true->false, change unobserved value, change cond false->true
38
+ { cond: false, value: 42 },
39
+ { cond: false, value: null },
40
+ { cond: true, value: 42 },
41
+ ],
42
+};