[compiler] Bail out on local variables named 'fbt'

[ghstack-poisoned]

Author: mofeiZ

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

@@ -2133,9 +2133,10 @@ function lowerExpression(
         const tagIdentifier = openingIdentifier.isJSXIdentifier()
           ? builder.resolveIdentifier(openingIdentifier)
           : null;
-        if (tagIdentifier != null && tagIdentifier.kind === 'Identifier') {
-          CompilerError.throwTodo({
-            reason: `Support <${tagName}> tags where '${tagName}' is a local variable instead of a global`,
+        if (tagIdentifier != null) {
+          // This is already checked in builder.resolveIdentifier
+          CompilerError.invariant(tagIdentifier.kind !== 'Identifier', {
+            reason: `<${tagName}> tags should be module-level imports`,
             loc: openingIdentifier.node.loc ?? GeneratedSource,
             description: null,
             suggestions: null,

compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts

@@ -311,6 +311,12 @@ export default class HIRBuilder {
   }
 
   resolveBinding(node: t.Identifier): Identifier {
+    if (node.name === 'fbt') {
+      CompilerError.throwTodo({
+        reason: 'Support local variables named "fbt"',
+        loc: node.loc ?? null,
+      });
+    }
     const originalName = node.name;
     let name = originalName;
     let index = 0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md

@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+import fbt from 'fbt';
+import {identity} from 'shared-runtime';
+
+/**
+ * Note that the fbt transform looks for callsites with a `fbt`-named callee.
+ * This is incompatible with react-compiler as we rename local variables in
+ * HIRBuilder + RenameVariables.
+ *
+ * See evaluator error:
+ *   Found differences in evaluator results
+ *   Non-forget (expected):
+ *   (kind: ok) <div>Hello, Sathya!Goodbye, Sathya!</div>
+ *   Forget:
+ *   (kind: exception) fbt$0.param is not a function
+ */
+
+function Foo(props) {
+  const getText1 = fbt =>
+    fbt(
+      `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting'
+    );
+
+  const getText2 = fbt =>
+    fbt(
+      `Goodbye, ${fbt.param('(key) name', identity(props.name))}!`,
+      '(description) Greeting2'
+    );
+
+  return (
+    <div>
+      {getText1(fbt)}
+      {getText2(fbt)}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Sathya'}],
+};
+
+```
+
+
+## Error
+
+```
+  16 |
+  17 | function Foo(props) {
+> 18 |   const getText1 = fbt =>
+     |                    ^^^ Todo: Support local variables named "fbt" (18:18)
+  19 |     fbt(
+  20 |       `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+  21 |       '(description) Greeting'
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/todo-fbt-as-local.js renamed to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.js

@@ -14,12 +14,12 @@ function Component(props) {
 ## Error
 
 ```
-  2 |   const fbt = require('fbt');
+  1 | function Component(props) {
+> 2 |   const fbt = require('fbt');
+    |         ^^^ Todo: Support local variables named "fbt" (2:2)
   3 |
-> 4 |   return <fbt desc="Description">{'Text'}</fbt>;
-    |           ^^^ Todo: Support <fbt> tags where 'fbt' is a local variable instead of a global (4:4)
+  4 |   return <fbt desc="Description">{'Text'}</fbt>;
   5 | }
-  6 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md

@@ -484,7 +484,6 @@ const skipFilter = new Set([
   'rules-of-hooks/rules-of-hooks-69521d94fa03',
 
   // bugs
-  'fbt/todo-fbt-as-local',
   'bug-invalid-hoisting-functionexpr',
   'original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block',
   'original-reactive-scopes-fork/bug-hoisted-declaration-with-scope',