From f2b0b656b255fbf9efaf12c316988ff8a34332a2 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Tue, 19 Mar 2024 16:26:32 -0700
Subject: [PATCH] More accurate source locations for JSX opening/closing tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="553" alt="Screenshot 2024-03-19 at 4 41 15 PM"
src="https://github.com/facebook/react-forget/assets/6425824/e87ee704-6c67-4e10-824b-71e97e7e19f5">

Slightly improves source locations for JSX elements so that the opening and
closing tag have distinct locations that match up with source. The identifier
itself within the closing tag still has the wrong location, but at least this is
an improvement.

Doesn't fix the fbt thing but it was worth a try.
---
 .../babel-plugin-react-forget/src/HIR/BuildHIR.ts      |  5 ++++-
 .../packages/babel-plugin-react-forget/src/HIR/HIR.ts  |  2 ++
 .../src/ReactiveScopes/CodegenReactiveFunction.ts      | 10 ++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-forget/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-forget/src/HIR/BuildHIR.ts
index 468a81b1d8..c68fc05ba0 100644
--- a/compiler/packages/babel-plugin-react-forget/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-forget/src/HIR/BuildHIR.ts
@@ -1967,6 +1967,7 @@ function lowerExpression(
     case "JSXElement": {
       const expr = exprPath as NodePath<t.JSXElement>;
       const opening = expr.get("openingElement");
+      const openingLoc = opening.node.loc ?? GeneratedSource;
       const tag = lowerJsxElementName(builder, opening.get("name"));
       const props: Array<JsxAttribute> = [];
       for (const attribute of opening.get("attributes")) {
@@ -2073,7 +2074,7 @@ function lowerExpression(
               return lowerValueToTemporary(builder, {
                 kind: "JSXText",
                 value: text,
-                loc: exprLoc,
+                loc: child.node.loc ?? GeneratedSource,
               });
             }
             return lowerJsxElement(builder, child);
@@ -2091,6 +2092,8 @@ function lowerExpression(
         props,
         children: children.length === 0 ? null : children,
         loc: exprLoc,
+        openingLoc: openingLoc,
+        closingLoc: expr.get("closingElement").node?.loc ?? GeneratedSource,
       };
     }
     case "JSXFragment": {
diff --git a/compiler/packages/babel-plugin-react-forget/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-forget/src/HIR/HIR.ts
index 4e152e6974..fac8d7b7c3 100644
--- a/compiler/packages/babel-plugin-react-forget/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-forget/src/HIR/HIR.ts
@@ -795,6 +795,8 @@ export type InstructionValue =
       props: Array<JsxAttribute>;
       children: Array<Place> | null; // null === no children
       loc: SourceLocation;
+      openingLoc: SourceLocation;
+      closingLoc: SourceLocation;
     }
   | {
       kind: "ObjectExpression";
diff --git a/compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/CodegenReactiveFunction.ts
index e16c23a940..61651c2f0d 100644
--- a/compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -1089,6 +1089,7 @@ const createJsxIdentifier = withLoc(t.jsxIdentifier);
 const createJsxExpressionContainer = withLoc(t.jsxExpressionContainer);
 const createJsxText = withLoc(t.jsxText);
 const createJsxClosingElement = withLoc(t.jsxClosingElement);
+const createJsxOpeningElement = withLoc(t.jsxOpeningElement);
 const createStringLiteral = withLoc(t.stringLiteral);
 
 function createHookGuard(
@@ -1515,9 +1516,14 @@ function codegenInstructionValue(
       }
       value = createJsxElement(
         instrValue.loc,
-        t.jsxOpeningElement(tag, attributes, instrValue.children === null),
+        createJsxOpeningElement(
+          instrValue.openingLoc,
+          tag,
+          attributes,
+          instrValue.children === null
+        ),
         instrValue.children !== null
-          ? createJsxClosingElement(instrValue.tag.loc, tag)
+          ? createJsxClosingElement(instrValue.closingLoc, tag)
           : null,
         children,
         instrValue.children === null