Add repro for bug with 'use no forget'
For some reason, when there are other hooks/components defined in the file, the 'use no forget' directive stops working
Lauren Tan committed
Nov 17, 2023 at 10:22 UTC
fbcc21c37a50b50cb7ed1aef9329ad598a236110
4 files changed
+102
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bug-use-no-forget-multiple-with-eslint-suppression.expect.md
new
+30
@@ -0,0 +1,30 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+const useControllableState = (options) => {};
6
+function NoopComponent() {}
7
+
8
+function Component() {
9
+ "use no forget";
10
+ const ref = useRef(null);
11
+ // eslint-disable-next-line react-hooks/rules-of-hooks
12
+ ref.current = "bad";
13
+ return <MyButton ref={ref} />;
14
+}
15
+
16
+export const FIXTURE_ENTRYPOINT = {
17
+ fn: Component,
18
+ params: [],
19
+};
20
+
21
+```
22
+
23
+
24
+## Error
25
+
26
+```
27
+[ReactForget] InvalidReact: React Forget has bailed out of optimizing this component as one or more React eslint rules were disabled. React Forget only works when your components follow all the rules of React, disabling them may result in undefined behavior. eslint-disable-next-line react-hooks/rules-of-hooks (7:7)
28
+```
29
+
30
+
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/error.bug-use-no-forget-multiple-with-eslint-suppression.js
new
+15
@@ -0,0 +1,15 @@
1
+const useControllableState = (options) => {};
2
+function NoopComponent() {}
3
+
4
+function Component() {
5
+ "use no forget";
6
+ const ref = useRef(null);
7
+ // eslint-disable-next-line react-hooks/rules-of-hooks
8
+ ref.current = "bad";
9
+ return <MyButton ref={ref} />;
10
+}
11
+
12
+export const FIXTURE_ENTRYPOINT = {
13
+ fn: Component,
14
+ params: [],
15
+};
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.expect.md
new
+43
@@ -0,0 +1,43 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import { useRef } from "react";
6
+
7
+function Component() {
8
+ "use no forget";
9
+ const ref = useRef(null);
10
+ // eslint-disable-next-line react-hooks/rules-of-hooks
11
+ ref.current = "bad";
12
+ return <button ref={ref} />;
13
+}
14
+
15
+export const FIXTURE_ENTRYPOINT = {
16
+ fn: Component,
17
+ params: [],
18
+};
19
+
20
+```
21
+
22
+## Code
23
+
24
+```javascript
25
+import { useRef } from "react";
26
+
27
+function Component() {
28
+ "use no forget";
29
+ const ref = useRef(null);
30
+ // eslint-disable-next-line react-hooks/rules-of-hooks
31
+ ref.current = "bad";
32
+ return <button ref={ref} />;
33
+}
34
+
35
+export const FIXTURE_ENTRYPOINT = {
36
+ fn: Component,
37
+ params: [],
38
+};
39
+
40
+```
41
+
42
+### Eval output
43
+(kind: ok) <button></button>
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/use-no-forget-with-eslint-suppression.js
new
+14
@@ -0,0 +1,14 @@
1
+import { useRef } from "react";
2
+
3
+function Component() {
4
+ "use no forget";
5
+ const ref = useRef(null);
6
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7
+ ref.current = "bad";
8
+ return <button ref={ref} />;
9
+}
10
+
11
+export const FIXTURE_ENTRYPOINT = {
12
+ fn: Component,
13
+ params: [],
14
+};