[compiler][repro] JSX tag local variable is named lowercase
ghstack-source-id: f9ac4641e171a1ae3450f733fef71be346447866 Pull Request resolved: https://github.com/facebook/react/pull/30536
Mofei Zhang committed
Jul 30, 2024 at 16:24 UTC
edfaa99f01596ea22ed892897f5c002a438c0655
3 files changed
+138
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md
new
+107
@@ -0,0 +1,107 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+import {Stringify, identity, useIdentity} from 'shared-runtime';
6
+
7
+/**
8
+ * Currently, we're passing a lower-case jsx tag `t0`.
9
+ * We should either reorder Stringify or rename the local to `T0`.
10
+ *
11
+ * See evaluator error:
12
+ * Found differences in evaluator results
13
+ * Non-forget (expected):
14
+ * (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
15
+ * Forget:
16
+ * (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
17
+ * logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
18
+ */
19
+function Foo({}) {
20
+ const x = {};
21
+ const y = {};
22
+ useIdentity(0);
23
+ return (
24
+ <>
25
+ <Stringify value={identity(y)} />
26
+ <Stringify value={identity(x)} />
27
+ </>
28
+ );
29
+}
30
+
31
+export const FIXTURE_ENTRYPOINT = {
32
+ fn: Foo,
33
+ params: [{}],
34
+};
35
+
36
+```
37
+
38
+## Code
39
+
40
+```javascript
41
+import { c as _c } from "react/compiler-runtime";
42
+import { Stringify, identity, useIdentity } from "shared-runtime";
43
+
44
+/**
45
+ * Currently, we're passing a lower-case jsx tag `t0`.
46
+ * We should either reorder Stringify or rename the local to `T0`.
47
+ *
48
+ * See evaluator error:
49
+ * Found differences in evaluator results
50
+ * Non-forget (expected):
51
+ * (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
52
+ * Forget:
53
+ * (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
54
+ * logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
55
+ */
56
+function Foo(t0) {
57
+ const $ = _c(9);
58
+ const x = {};
59
+ const y = {};
60
+ useIdentity(0);
61
+
62
+ const t1 = Stringify;
63
+ const t2 = identity(y);
64
+ let t3;
65
+ if ($[0] !== t1 || $[1] !== t2) {
66
+ t3 = <t1 value={t2} />;
67
+ $[0] = t1;
68
+ $[1] = t2;
69
+ $[2] = t3;
70
+ } else {
71
+ t3 = $[2];
72
+ }
73
+ const T0 = Stringify;
74
+ const t4 = identity(x);
75
+ let t5;
76
+ if ($[3] !== T0 || $[4] !== t4) {
77
+ t5 = <T0 value={t4} />;
78
+ $[3] = T0;
79
+ $[4] = t4;
80
+ $[5] = t5;
81
+ } else {
82
+ t5 = $[5];
83
+ }
84
+ let t6;
85
+ if ($[6] !== t3 || $[7] !== t5) {
86
+ t6 = (
87
+ <>
88
+ {t3}
89
+ {t5}
90
+ </>
91
+ );
92
+ $[6] = t3;
93
+ $[7] = t5;
94
+ $[8] = t6;
95
+ } else {
96
+ t6 = $[8];
97
+ }
98
+ return t6;
99
+}
100
+
101
+export const FIXTURE_ENTRYPOINT = {
102
+ fn: Foo,
103
+ params: [{}],
104
+};
105
+
106
+```
107
+
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx
new
+30
@@ -0,0 +1,30 @@
1
+import {Stringify, identity, useIdentity} from 'shared-runtime';
2
+
3
+/**
4
+ * Currently, we're passing a lower-case jsx tag `t0`.
5
+ * We should either reorder Stringify or rename the local to `T0`.
6
+ *
7
+ * See evaluator error:
8
+ * Found differences in evaluator results
9
+ * Non-forget (expected):
10
+ * (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
11
+ * Forget:
12
+ * (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
13
+ * logs: ['Warning: The tag <%s> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.%s','t1']
14
+ */
15
+function Foo({}) {
16
+ const x = {};
17
+ const y = {};
18
+ useIdentity(0);
19
+ return (
20
+ <>
21
+ <Stringify value={identity(y)} />
22
+ <Stringify value={identity(x)} />
23
+ </>
24
+ );
25
+}
26
+
27
+export const FIXTURE_ENTRYPOINT = {
28
+ fn: Foo,
29
+ params: [{}],
30
+};
compiler/packages/snap/src/SproutTodoFilter.ts
+1
@@ -484,6 +484,7 @@ const skipFilter = new Set([
484
'rules-of-hooks/rules-of-hooks-69521d94fa03',
485
486
// bugs
487
+ 'bug-renaming-jsx-tag-lowercase',
488
'fbt/bug-fbt-plural-multiple-function-calls',
489
'fbt/bug-fbt-plural-multiple-mixed-call-tag',
490
'bug-invalid-hoisting-functionexpr',