From 25b481a61a79ec7de1e0ac080ad2b06f86ab8621 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@meta.com>
Date: Tue, 30 Jul 2024 16:16:57 -0400
Subject: [PATCH] [compiler][repro] JSX tag local variable is named lowercase

[ghstack-poisoned]
---
 .../bug-renaming-jsx-tag-lowercase.expect.md  | 107 ++++++++++++++++++
 .../bug-renaming-jsx-tag-lowercase.tsx        |  30 +++++
 .../packages/snap/src/SproutTodoFilter.ts     |   1 +
 3 files changed, 138 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md
new file mode 100644
index 0000000000000..ed0b39ce9af73
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.expect.md
@@ -0,0 +1,107 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, useIdentity} from 'shared-runtime';
+
+/**
+ * Currently, we're passing a lower-case jsx tag `t0`.
+ * We should either reorder Stringify or rename the local to `T0`.
+ *
+ * See evaluator error:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
+ *   Forget:
+ *   (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
+ *   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']
+ */
+function Foo({}) {
+  const x = {};
+  const y = {};
+  useIdentity(0);
+  return (
+    <>
+      <Stringify value={identity(y)} />
+      <Stringify value={identity(x)} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, identity, useIdentity } from "shared-runtime";
+
+/**
+ * Currently, we're passing a lower-case jsx tag `t0`.
+ * We should either reorder Stringify or rename the local to `T0`.
+ *
+ * See evaluator error:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
+ *   Forget:
+ *   (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
+ *   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']
+ */
+function Foo(t0) {
+  const $ = _c(9);
+  const x = {};
+  const y = {};
+  useIdentity(0);
+
+  const t1 = Stringify;
+  const t2 = identity(y);
+  let t3;
+  if ($[0] !== t1 || $[1] !== t2) {
+    t3 = <t1 value={t2} />;
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const T0 = Stringify;
+  const t4 = identity(x);
+  let t5;
+  if ($[3] !== T0 || $[4] !== t4) {
+    t5 = <T0 value={t4} />;
+    $[3] = T0;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== t3 || $[7] !== t5) {
+    t6 = (
+      <>
+        {t3}
+        {t5}
+      </>
+    );
+    $[6] = t3;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx
new file mode 100644
index 0000000000000..5a77309471517
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-renaming-jsx-tag-lowercase.tsx
@@ -0,0 +1,30 @@
+import {Stringify, identity, useIdentity} from 'shared-runtime';
+
+/**
+ * Currently, we're passing a lower-case jsx tag `t0`.
+ * We should either reorder Stringify or rename the local to `T0`.
+ *
+ * See evaluator error:
+ * Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>{"value":{}}</div><div>{"value":{}}</div>
+ *   Forget:
+ *   (kind: ok) <t1 value="[object Object]"></t1><div>{"value":{}}</div>
+ *   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']
+ */
+function Foo({}) {
+  const x = {};
+  const y = {};
+  useIdentity(0);
+  return (
+    <>
+      <Stringify value={identity(y)} />
+      <Stringify value={identity(x)} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}],
+};
diff --git a/compiler/packages/snap/src/SproutTodoFilter.ts b/compiler/packages/snap/src/SproutTodoFilter.ts
index 256a4bdd7d4e9..943163a420c4b 100644
--- a/compiler/packages/snap/src/SproutTodoFilter.ts
+++ b/compiler/packages/snap/src/SproutTodoFilter.ts
@@ -484,6 +484,7 @@ const skipFilter = new Set([
   'rules-of-hooks/rules-of-hooks-69521d94fa03',
 
   // bugs
+  'bug-renaming-jsx-tag-lowercase',
   'fbt/bug-fbt-plural-multiple-function-calls',
   'fbt/bug-fbt-plural-multiple-mixed-call-tag',
   'bug-invalid-hoisting-functionexpr',