Support <fbs> in addition to <fbt>

ghstack-source-id: 1ab99ebb5cef3f42399682a338feb12c4cf55f4c
Pull Request resolved: https://github.com/facebook/react-forget/pull/2933

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

@@ -2075,14 +2075,18 @@ function lowerExpression(
         }
         props.push({ kind: "JsxAttribute", name: propName, place: value });
       }
-      if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
+      if (
+        tag.kind === "BuiltinTag" &&
+        (tag.name === "fbt" || tag.name === "fbs")
+      ) {
+        const tagName = tag.name;
         const openingIdentifier = opening.get("name");
         const tagIdentifier = openingIdentifier.isJSXIdentifier()
           ? builder.resolveIdentifier(openingIdentifier)
           : null;
         if (tagIdentifier != null) {
           CompilerError.throwTodo({
-            reason: `Support <fbt> tags where 'fbt' is a local variable instead of a global`,
+            reason: `Support <${tagName}> tags where '${tagName}' is a local variable instead of a global`,
             loc: openingIdentifier.node.loc ?? GeneratedSource,
             description: null,
             suggestions: null,
@@ -2092,7 +2096,7 @@ function lowerExpression(
         expr.traverse({
           JSXNamespacedName(path) {
             if (
-              path.node.namespace.name === "fbt" &&
+              path.node.namespace.name === tagName &&
               path.node.name.name === "enum"
             ) {
               fbtEnumLocations.push(path.node.loc ?? GeneratedSource);
@@ -2101,7 +2105,7 @@ function lowerExpression(
         });
         if (fbtEnumLocations.length > 1) {
           CompilerError.throwTodo({
-            reason: `Support <fbt> tags with multiple <fbt:enum> values`,
+            reason: `Support <${tagName}> tags with multiple <${tagName}:enum> values`,
             loc: fbtEnumLocations.at(-1) ?? GeneratedSource,
             description: null,
             suggestions: null,
@@ -2110,7 +2114,10 @@ function lowerExpression(
       }
 
       let children: Array<Place>;
-      if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
+      if (
+        tag.kind === "BuiltinTag" &&
+        (tag.name === "fbt" || tag.name === "fbs")
+      ) {
         children = expr
           .get("children")
           .map((child) => {

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtOperandsInSameScope.ts

@@ -39,8 +39,16 @@ export function memoizeFbtOperandsInSameScope(fn: HIRFunction): void {
   }
 }
 
-export const FBT_TAGS: Set<string> = new Set(["fbt", "fbt:param"]);
-export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set(["fbt:param"]);
+export const FBT_TAGS: Set<string> = new Set([
+  "fbt",
+  "fbt:param",
+  "fbs",
+  "fbs:param",
+]);
+export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([
+  "fbt:param",
+  "fbs:param",
+]);
 
 function visit(fn: HIRFunction, fbtValues: Set<IdentifierId>): void {
   for (const [, block] of fn.body.blocks) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.expect.md

@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+import { fbs } from "fbt";
+
+function Component(props) {
+  return (
+    <div
+      title={
+        <fbs desc={"Dialog to show to user"}>
+          Hello <fbs:param name="user name">{props.name}</fbs:param>
+        </fbs>
+      }
+    >
+      Hover me
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as useMemoCache } from "react";
+import { fbs } from "fbt";
+
+function Component(props) {
+  const $ = useMemoCache(2);
+  let t0;
+  if ($[0] !== props.name) {
+    t0 = (
+      <div
+        title={fbs._(
+          "Hello {user name}",
+          [fbs._param("user name", props.name)],
+          { hk: "2zEDKF" }
+        )}
+      >
+        Hover me
+      </div>
+    );
+    $[0] = props.name;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div title="Hello Sathya">Hover me</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbs-params.js

@@ -0,0 +1,20 @@
+import { fbs } from "fbt";
+
+function Component(props) {
+  return (
+    <div
+      title={
+        <fbs desc={"Dialog to show to user"}>
+          Hello <fbs:param name="user name">{props.name}</fbs:param>
+        </fbs>
+      }
+    >
+      Hover me
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ name: "Sathya" }],
+};