Improve JSX tag handling in constant propagation and update related tests

Author: Kostya92

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -23,6 +23,7 @@ import {
   markInstructionIds,
   markPredecessors,
   mergeConsecutiveBlocks,
+  promoteTemporaryJsxTag,
   reversePostorderBlocks,
 } from '../HIR';
 import {
@@ -598,14 +599,16 @@ function evaluateInstruction(
       return result;
     }
     case 'LoadLocal': {
-      if (
-        instr.lvalue != null &&
-        jsxTagIdentifiers.has(instr.lvalue.identifier.id)
-      ) {
-        return null;
-      }
       const placeValue = read(constants, value.place);
       if (placeValue !== null) {
+        if (
+          instr.lvalue != null &&
+          jsxTagIdentifiers.has(instr.lvalue.identifier.id) &&
+          placeValue.kind === 'LoadGlobal' &&
+          instr.lvalue.identifier.name == null
+        ) {
+          promoteTemporaryJsxTag(instr.lvalue.identifier);
+        }
         instr.value = placeValue;
       }
       return placeValue;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-local-tag-in-lambda.expect.md

@@ -25,18 +25,21 @@ import { c as _c } from "react/compiler-runtime";
 import { Stringify } from "shared-runtime";
 function useFoo() {
   const $ = _c(1);
-  const MyLocal = Stringify;
+
+  const callback = _temp;
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const callback = () => <MyLocal value={4} />;
-
     t0 = callback();
     $[0] = t0;
   } else {
     t0 = $[0];
   }
   return t0;
 }
+function _temp() {
+  const T0 = Stringify;
+  return <T0 value={4} />;
+}
 
 export const FIXTURE_ENTRYPOINT = {
   fn: useFoo,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-tag-evaluation-order.expect.md

@@ -30,13 +30,13 @@ import { StaticText1, StaticText2 } from "shared-runtime";
 
 function Component(props) {
   const $ = _c(3);
-  let Tag = StaticText1;
 
-  const T0 = Tag;
-  const t0 = ((Tag = StaticText2), props.value);
+  const T0 = StaticText1;
+  const t0 = props.value;
+  const T1 = StaticText2;
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <Tag />;
+    t1 = <T1 />;
     $[0] = t1;
   } else {
     t1 = $[0];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-jsx-dynamic-tag-alias.expect.md

@@ -27,10 +27,11 @@ const base = "div";
 
 const TestComponent: React.FC = () => {
   const $ = _c(1);
-  const Comp = base;
+
+  const T0 = base;
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <Comp />;
+    t0 = <T0 />;
     $[0] = t0;
   } else {
     t0 = $[0];