Fixtures where unmemoized value invalidates later scopes
These fixtures demonstrate how currently, even if the dependency of a scope doesn't get memoized (ie the scope gets pruned), we don't remove later scopes that depend on that value. Those later scopes will always invalidate, so we might as well remove them.
Joe Savona committed
Mar 6, 2024 at 09:28 UTC
48e08c42be4ce37269b1ddc49ab349c1b74807cf
8 files changed
+333
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md
new
+63
@@ -0,0 +1,63 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useHook } from "shared-runtime";
6
+
7
+function Component(props) {
8
+ const x = [];
9
+ useHook(); // intersperse a hook call to prevent memoization of x
10
+ x.push(props.value);
11
+
12
+ const y = [x];
13
+
14
+ return [y];
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Component,
19
+ params: [{ value: "sathya" }],
20
+};
21
+
22
+```
23
+
24
+## Code
25
+
26
+```javascript
27
+import { unstable_useMemoCache as useMemoCache } from "react";
28
+import { useHook } from "shared-runtime";
29
+
30
+function Component(props) {
31
+ const $ = useMemoCache(4);
32
+ const x = [];
33
+ useHook();
34
+ x.push(props.value);
35
+ let t0;
36
+ if ($[0] !== x) {
37
+ t0 = [x];
38
+ $[0] = x;
39
+ $[1] = t0;
40
+ } else {
41
+ t0 = $[1];
42
+ }
43
+ const y = t0;
44
+ let t1;
45
+ if ($[2] !== y) {
46
+ t1 = [y];
47
+ $[2] = y;
48
+ $[3] = t1;
49
+ } else {
50
+ t1 = $[3];
51
+ }
52
+ return t1;
53
+}
54
+
55
+export const FIXTURE_ENTRYPOINT = {
56
+ fn: Component,
57
+ params: [{ value: "sathya" }],
58
+};
59
+
60
+```
61
+
62
+### Eval output
63
+(kind: ok) [[["sathya"]]]
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.js
new
+16
@@ -0,0 +1,16 @@
1
+import { useHook } from "shared-runtime";
2
+
3
+function Component(props) {
4
+ const x = [];
5
+ useHook(); // intersperse a hook call to prevent memoization of x
6
+ x.push(props.value);
7
+
8
+ const y = [x];
9
+
10
+ return [y];
11
+}
12
+
13
+export const FIXTURE_ENTRYPOINT = {
14
+ fn: Component,
15
+ params: [{ value: "sathya" }],
16
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md
new
+73
@@ -0,0 +1,73 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useHook } from "shared-runtime";
6
+
7
+function Component(props) {
8
+ const o = {};
9
+ const x = <div>{props.value}</div>; // create within the range of x to group with x
10
+ useHook(); // intersperse a hook call to prevent memoization of x
11
+ o.value = props.value;
12
+
13
+ const y = <div>{x}</div>;
14
+
15
+ return <div>{y}</div>;
16
+}
17
+
18
+export const FIXTURE_ENTRYPOINT = {
19
+ fn: Component,
20
+ params: [{ value: "sathya" }],
21
+};
22
+
23
+```
24
+
25
+## Code
26
+
27
+```javascript
28
+import { unstable_useMemoCache as useMemoCache } from "react";
29
+import { useHook } from "shared-runtime";
30
+
31
+function Component(props) {
32
+ const $ = useMemoCache(6);
33
+ const o = {};
34
+ let t0;
35
+ if ($[0] !== props.value) {
36
+ t0 = <div>{props.value}</div>;
37
+ $[0] = props.value;
38
+ $[1] = t0;
39
+ } else {
40
+ t0 = $[1];
41
+ }
42
+ const x = t0;
43
+ useHook();
44
+ o.value = props.value;
45
+ let t1;
46
+ if ($[2] !== x) {
47
+ t1 = <div>{x}</div>;
48
+ $[2] = x;
49
+ $[3] = t1;
50
+ } else {
51
+ t1 = $[3];
52
+ }
53
+ const y = t1;
54
+ let t2;
55
+ if ($[4] !== y) {
56
+ t2 = <div>{y}</div>;
57
+ $[4] = y;
58
+ $[5] = t2;
59
+ } else {
60
+ t2 = $[5];
61
+ }
62
+ return t2;
63
+}
64
+
65
+export const FIXTURE_ENTRYPOINT = {
66
+ fn: Component,
67
+ params: [{ value: "sathya" }],
68
+};
69
+
70
+```
71
+
72
+### Eval output
73
+(kind: ok) <div><div><div>sathya</div></div></div>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.js
new
+17
@@ -0,0 +1,17 @@
1
+import { useHook } from "shared-runtime";
2
+
3
+function Component(props) {
4
+ const o = {};
5
+ const x = <div>{props.value}</div>; // create within the range of x to group with x
6
+ useHook(); // intersperse a hook call to prevent memoization of x
7
+ o.value = props.value;
8
+
9
+ const y = <div>{x}</div>;
10
+
11
+ return <div>{y}</div>;
12
+}
13
+
14
+export const FIXTURE_ENTRYPOINT = {
15
+ fn: Component,
16
+ params: [{ value: "sathya" }],
17
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md
new
+67
@@ -0,0 +1,67 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useHook } from "shared-runtime";
6
+
7
+function Component(props) {
8
+ const x = new Foo();
9
+ useHook(); // intersperse a hook call to prevent memoization of x
10
+ x.value = props.value;
11
+
12
+ const y = { x };
13
+
14
+ return { y };
15
+}
16
+
17
+class Foo {}
18
+
19
+export const FIXTURE_ENTRYPOINT = {
20
+ fn: Component,
21
+ params: [{ value: "sathya" }],
22
+};
23
+
24
+```
25
+
26
+## Code
27
+
28
+```javascript
29
+import { unstable_useMemoCache as useMemoCache } from "react";
30
+import { useHook } from "shared-runtime";
31
+
32
+function Component(props) {
33
+ const $ = useMemoCache(4);
34
+ const x = new Foo();
35
+ useHook();
36
+ x.value = props.value;
37
+ let t0;
38
+ if ($[0] !== x) {
39
+ t0 = { x };
40
+ $[0] = x;
41
+ $[1] = t0;
42
+ } else {
43
+ t0 = $[1];
44
+ }
45
+ const y = t0;
46
+ let t1;
47
+ if ($[2] !== y) {
48
+ t1 = { y };
49
+ $[2] = y;
50
+ $[3] = t1;
51
+ } else {
52
+ t1 = $[3];
53
+ }
54
+ return t1;
55
+}
56
+
57
+class Foo {}
58
+
59
+export const FIXTURE_ENTRYPOINT = {
60
+ fn: Component,
61
+ params: [{ value: "sathya" }],
62
+};
63
+
64
+```
65
+
66
+### Eval output
67
+(kind: ok) {"y":{"x":{"value":"sathya"}}}
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.js
new
+18
@@ -0,0 +1,18 @@
1
+import { useHook } from "shared-runtime";
2
+
3
+function Component(props) {
4
+ const x = new Foo();
5
+ useHook(); // intersperse a hook call to prevent memoization of x
6
+ x.value = props.value;
7
+
8
+ const y = { x };
9
+
10
+ return { y };
11
+}
12
+
13
+class Foo {}
14
+
15
+export const FIXTURE_ENTRYPOINT = {
16
+ fn: Component,
17
+ params: [{ value: "sathya" }],
18
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md
new
+63
@@ -0,0 +1,63 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useHook } from "shared-runtime";
6
+
7
+function Component(props) {
8
+ const x = {};
9
+ useHook(); // intersperse a hook call to prevent memoization of x
10
+ x.value = props.value;
11
+
12
+ const y = { x };
13
+
14
+ return { y };
15
+}
16
+
17
+export const FIXTURE_ENTRYPOINT = {
18
+ fn: Component,
19
+ params: [{ value: "sathya" }],
20
+};
21
+
22
+```
23
+
24
+## Code
25
+
26
+```javascript
27
+import { unstable_useMemoCache as useMemoCache } from "react";
28
+import { useHook } from "shared-runtime";
29
+
30
+function Component(props) {
31
+ const $ = useMemoCache(4);
32
+ const x = {};
33
+ useHook();
34
+ x.value = props.value;
35
+ let t0;
36
+ if ($[0] !== x) {
37
+ t0 = { x };
38
+ $[0] = x;
39
+ $[1] = t0;
40
+ } else {
41
+ t0 = $[1];
42
+ }
43
+ const y = t0;
44
+ let t1;
45
+ if ($[2] !== y) {
46
+ t1 = { y };
47
+ $[2] = y;
48
+ $[3] = t1;
49
+ } else {
50
+ t1 = $[3];
51
+ }
52
+ return t1;
53
+}
54
+
55
+export const FIXTURE_ENTRYPOINT = {
56
+ fn: Component,
57
+ params: [{ value: "sathya" }],
58
+};
59
+
60
+```
61
+
62
+### Eval output
63
+(kind: ok) {"y":{"x":{"value":"sathya"}}}
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.js
new
+16
@@ -0,0 +1,16 @@
1
+import { useHook } from "shared-runtime";
2
+
3
+function Component(props) {
4
+ const x = {};
5
+ useHook(); // intersperse a hook call to prevent memoization of x
6
+ x.value = props.value;
7
+
8
+ const y = { x };
9
+
10
+ return { y };
11
+}
12
+
13
+export const FIXTURE_ENTRYPOINT = {
14
+ fn: Component,
15
+ params: [{ value: "sathya" }],
16
+};