[compiler] Fix FBT whitespace handling again (again (again))

ghstack-source-id: ca54bce
Pull Request resolved: #30451

Author: mofeiZ

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

@@ -2113,10 +2113,10 @@ function lowerExpression(
         }
         props.push({kind: 'JsxAttribute', name: propName, place: value});
       }
-      if (
-        tag.kind === 'BuiltinTag' &&
-        (tag.name === 'fbt' || tag.name === 'fbs')
-      ) {
+
+      const isFbt =
+        tag.kind === 'BuiltinTag' && (tag.name === 'fbt' || tag.name === 'fbs');
+      if (isFbt) {
         const tagName = tag.name;
         const openingIdentifier = opening.get('name');
         const tagIdentifier = openingIdentifier.isJSXIdentifier()
@@ -2168,35 +2168,17 @@ function lowerExpression(
         }
       }
 
-      let children: Array<Place>;
-      if (
-        tag.kind === 'BuiltinTag' &&
-        (tag.name === 'fbt' || tag.name === 'fbs')
-      ) {
-        children = expr
-          .get('children')
-          .map(child => {
-            if (child.isJSXText()) {
-              /*
-               * FBT whitespace normalization differs from standard JSX:
-               * https://github.com/facebook/fbt/blob/0b4e0d13c30bffd0daa2a75715d606e3587b4e40/packages/babel-plugin-fbt/src/FbtUtil.js#L76-L87
-               */
-              const text = child.node.value.replace(/[^\S\u00A0]+/g, ' ');
-              return lowerValueToTemporary(builder, {
-                kind: 'JSXText',
-                value: text,
-                loc: child.node.loc ?? GeneratedSource,
-              });
-            }
-            return lowerJsxElement(builder, child);
-          })
-          .filter(notNull);
-      } else {
-        children = expr
-          .get('children')
-          .map(child => lowerJsxElement(builder, child))
-          .filter(notNull);
-      }
+      /**
+       * Increment fbt counter before traversing into children, as whitespace
+       * in jsx text is handled differently for fbt subtrees.
+       */
+      isFbt && builder.fbtDepth++;
+      const children: Array<Place> = expr
+        .get('children')
+        .map(child => lowerJsxElement(builder, child))
+        .filter(notNull);
+      isFbt && builder.fbtDepth--;
+
       return {
         kind: 'JsxExpression',
         tag,
@@ -3158,7 +3140,17 @@ function lowerJsxElement(
       return lowerExpressionToTemporary(builder, expression);
     }
   } else if (exprPath.isJSXText()) {
-    const text = trimJsxText(exprPath.node.value);
+    let text: string | null;
+    if (builder.fbtDepth > 0) {
+      /*
+       * FBT whitespace normalization differs from standard JSX:
+       * https://github.com/facebook/fbt/blob/0b4e0d13c30bffd0daa2a75715d606e3587b4e40/packages/babel-plugin-fbt/src/FbtUtil.js#L76-L87
+       */
+      text = exprPath.node.value.replace(/[^\S\u00A0]+/g, ' ');
+    } else {
+      text = trimJsxText(exprPath.node.value);
+    }
+
     if (text === null) {
       return null;
     }

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

@@ -110,6 +110,11 @@ export default class HIRBuilder {
   #exceptionHandlerStack: Array<BlockId> = [];
   parentFunction: NodePath<t.Function>;
   errors: CompilerError = new CompilerError();
+  /**
+   * Traversal context: counts the number of `fbt` tag parents
+   * of the current babel node.
+   */
+  fbtDepth: number = 0;
 
   get nextIdentifierId(): IdentifierId {
     return this.#env.nextIdentifierId;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-preserve-whitespace-param.tsx

@@ -5,25 +5,21 @@
 import fbt from 'fbt';
 
 /**
- * Currently fails with the following:
- * Found differences in evaluator results
- *   Non-forget (expected):
- *   (kind: ok) <div><span>Jason !</span></div>
- *   Forget:
- *   (kind: ok) <div><span>Jason!</span></div>
-
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
  */
 
 function Foo(props) {
   return (
-    // prettier-ignore
     <div>
-      <fbt desc={"Dialog to show to user"}>
+      <fbt desc={'Dialog to show to user'}>
         <span>
-          <fbt:param name="user name">
+          <fbt:param name="user name really long description for prettier">
             {props.name}
           </fbt:param>
-        !
+          !
         </span>
       </fbt>
     </div>
@@ -44,13 +40,10 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 /**
- * Currently fails with the following:
- * Found differences in evaluator results
- *   Non-forget (expected):
- *   (kind: ok) <div><span>Jason !</span></div>
- *   Forget:
- *   (kind: ok) <div><span>Jason!</span></div>
-
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
  */
 
 function Foo(props) {
@@ -66,20 +59,20 @@ function Foo(props) {
               "=m0",
               <span>
                 {fbt._(
-                  "{user name}!",
+                  "{user name really long description for prettier} !",
                   [
                     fbt._param(
-                      "user name",
+                      "user name really long description for prettier",
 
                       props.name,
                     ),
                   ],
-                  { hk: "mBBZ9" },
+                  { hk: "rdgIJ" },
                 )}
               </span>,
             ),
           ],
-          { hk: "3RVfuk" },
+          { hk: "32Ufy5" },
         )}
       </div>
     );
@@ -97,4 +90,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-      
+      
+### Eval output
+(kind: ok) <div><span>Jason !</span></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/bug-fbt-preserve-whitespace-param.expect.md renamed to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.expect.md

@@ -0,0 +1,28 @@
+import fbt from 'fbt';
+
+/**
+ * Note that fbt whitespace rules apply to the entire fbt subtree,
+ * not just direct children of fbt elements.
+ * (e.g. here, the JSXText children of the span element also use
+ * fbt whitespace rules)
+ */
+
+function Foo(props) {
+  return (
+    <div>
+      <fbt desc={'Dialog to show to user'}>
+        <span>
+          <fbt:param name="user name really long description for prettier">
+            {props.name}
+          </fbt:param>
+          !
+        </span>
+      </fbt>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{name: 'Jason'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-subtree.tsx

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