The library for web and native user interfaces.
Repro for bug with memo vars at wrong block scope
Minimal(ish) repro of a bug we saw internally, where an output of a nested reactive scope is defined at the wrong block scope, and so later references to that value are invalid. The simplified structure is: ``` scope0 inputs=[] outputs=[] { scope1 inputs=[] outputs=[t0] { t0 = ... } } t0 ``` Note that `t0` correctly appears as an output of the inner scope1, but not as an output of the outer scope0. We need to propagate outputs upward as necessary to ensure they are available at the right block scope: in this case, that would add `t0` as an output of scope0. An earlier version of PropagateScopeDependencies did this but it looks like it got lost along the way (not a big deal)
Joe Savona committed
Apr 18, 2023 at 16:10 UTC
fdbfac8f8216839520d093513908918de591468f
4 files changed
+254
compiler/forget/src/__tests__/fixtures/compiler/_bug.inner-memo-value-not-promoted-to-outer-scope-dynamic.expect.md
new
+127
@@ -0,0 +1,127 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component(props) {
6
+ const item = useFragment(FRAGMENT, props.item);
7
+ useFreeze(item);
8
+
9
+ const count = new MaybeMutable(item);
10
+ return (
11
+ <View>
12
+ <View>
13
+ {<span>Text</span>}
14
+ {<span>{maybeMutate(count)}</span>}
15
+ </View>
16
+ </View>
17
+ );
18
+}
19
+
20
+```
21
+
22
+## Code
23
+
24
+```javascript
25
+import * as React from "react";
26
+function Component(props) {
27
+ const $ = React.unstable_useMemoCache(21);
28
+ const item = useFragment(FRAGMENT, props.item);
29
+ useFreeze(item);
30
+ const c_0 = $[0] !== item;
31
+ let t1;
32
+ let t2;
33
+ let t3;
34
+ let t4;
35
+ let t5;
36
+ let t6;
37
+ let t7;
38
+ if (c_0) {
39
+ const count = new MaybeMutable(item);
40
+
41
+ t6 = View;
42
+ t7 = "\n ";
43
+ t3 = View;
44
+ t4 = "\n ";
45
+ let t0;
46
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
47
+ t0 = <span>Text</span>;
48
+ $[8] = t0;
49
+ } else {
50
+ t0 = $[8];
51
+ }
52
+ t5 = "\n ";
53
+ t1 = "span";
54
+ t2 = maybeMutate(count);
55
+ $[0] = item;
56
+ $[1] = t1;
57
+ $[2] = t2;
58
+ $[3] = t3;
59
+ $[4] = t4;
60
+ $[5] = t5;
61
+ $[6] = t6;
62
+ $[7] = t7;
63
+ } else {
64
+ t1 = $[1];
65
+ t2 = $[2];
66
+ t3 = $[3];
67
+ t4 = $[4];
68
+ t5 = $[5];
69
+ t6 = $[6];
70
+ t7 = $[7];
71
+ }
72
+ const c_9 = $[9] !== t1;
73
+ const c_10 = $[10] !== t2;
74
+ let t8;
75
+ if (c_9 || c_10) {
76
+ t8 = <t1>{t2}</t1>;
77
+ $[9] = t1;
78
+ $[10] = t2;
79
+ $[11] = t8;
80
+ } else {
81
+ t8 = $[11];
82
+ }
83
+ const c_12 = $[12] !== t3;
84
+ const c_13 = $[13] !== t4;
85
+ const c_14 = $[14] !== t5;
86
+ const c_15 = $[15] !== t8;
87
+ let t9;
88
+ if (c_12 || c_13 || c_14 || c_15) {
89
+ t9 = (
90
+ <t3>
91
+ {t4}
92
+ {t0}
93
+ {t5}
94
+ {t8}
95
+ </t3>
96
+ );
97
+ $[12] = t3;
98
+ $[13] = t4;
99
+ $[14] = t5;
100
+ $[15] = t8;
101
+ $[16] = t9;
102
+ } else {
103
+ t9 = $[16];
104
+ }
105
+ const c_17 = $[17] !== t6;
106
+ const c_18 = $[18] !== t7;
107
+ const c_19 = $[19] !== t9;
108
+ let t10;
109
+ if (c_17 || c_18 || c_19) {
110
+ t10 = (
111
+ <t6>
112
+ {t7}
113
+ {t9}
114
+ </t6>
115
+ );
116
+ $[17] = t6;
117
+ $[18] = t7;
118
+ $[19] = t9;
119
+ $[20] = t10;
120
+ } else {
121
+ t10 = $[20];
122
+ }
123
+ return t10;
124
+}
125
+
126
+```
127
+
\ No newline at end of file
compiler/forget/src/__tests__/fixtures/compiler/_bug.inner-memo-value-not-promoted-to-outer-scope-dynamic.js
new
+14
@@ -0,0 +1,14 @@
1
+function Component(props) {
2
+ const item = useFragment(FRAGMENT, props.item);
3
+ useFreeze(item);
4
+
5
+ const count = new MaybeMutable(item);
6
+ return (
7
+ <View>
8
+ <View>
9
+ {<span>Text</span>}
10
+ {<span>{maybeMutate(count)}</span>}
11
+ </View>
12
+ </View>
13
+ );
14
+}
compiler/forget/src/__tests__/fixtures/compiler/_bug.inner-memo-value-not-promoted-to-outer-scope-static.expect.md
new
+102
@@ -0,0 +1,102 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component(props) {
6
+ const count = new MaybeMutable();
7
+ return (
8
+ <View>
9
+ <View>
10
+ {<span>Text</span>}
11
+ {<span>{maybeMutate(count)}</span>}
12
+ </View>
13
+ </View>
14
+ );
15
+}
16
+
17
+```
18
+
19
+## Code
20
+
21
+```javascript
22
+import * as React from "react";
23
+function Component(props) {
24
+ const $ = React.unstable_useMemoCache(11);
25
+ let t1;
26
+ let t2;
27
+ let t3;
28
+ let t4;
29
+ let t5;
30
+ let t6;
31
+ let t7;
32
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
33
+ const count = new MaybeMutable();
34
+
35
+ t6 = View;
36
+ t7 = "\n ";
37
+ t3 = View;
38
+ t4 = "\n ";
39
+ let t0;
40
+ if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
41
+ t0 = <span>Text</span>;
42
+ $[7] = t0;
43
+ } else {
44
+ t0 = $[7];
45
+ }
46
+ t5 = "\n ";
47
+ t1 = "span";
48
+ t2 = maybeMutate(count);
49
+ $[0] = t1;
50
+ $[1] = t2;
51
+ $[2] = t3;
52
+ $[3] = t4;
53
+ $[4] = t5;
54
+ $[5] = t6;
55
+ $[6] = t7;
56
+ } else {
57
+ t1 = $[0];
58
+ t2 = $[1];
59
+ t3 = $[2];
60
+ t4 = $[3];
61
+ t5 = $[4];
62
+ t6 = $[5];
63
+ t7 = $[6];
64
+ }
65
+ let t8;
66
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
67
+ t8 = <t1>{t2}</t1>;
68
+ $[8] = t8;
69
+ } else {
70
+ t8 = $[8];
71
+ }
72
+ let t9;
73
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
74
+ t9 = (
75
+ <t3>
76
+ {t4}
77
+ {t0}
78
+ {t5}
79
+ {t8}
80
+ </t3>
81
+ );
82
+ $[9] = t9;
83
+ } else {
84
+ t9 = $[9];
85
+ }
86
+ let t10;
87
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
88
+ t10 = (
89
+ <t6>
90
+ {t7}
91
+ {t9}
92
+ </t6>
93
+ );
94
+ $[10] = t10;
95
+ } else {
96
+ t10 = $[10];
97
+ }
98
+ return t10;
99
+}
100
+
101
+```
102
+
\ No newline at end of file
compiler/forget/src/__tests__/fixtures/compiler/_bug.inner-memo-value-not-promoted-to-outer-scope-static.js
new
+11
@@ -0,0 +1,11 @@
1
+function Component(props) {
2
+ const count = new MaybeMutable();
3
+ return (
4
+ <View>
5
+ <View>
6
+ {<span>Text</span>}
7
+ {<span>{maybeMutate(count)}</span>}
8
+ </View>
9
+ </View>
10
+ );
11
+}