[compiler] Fix Symbol shadowing by prefixing with globalThis

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/02-default-output.txt

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 export default function MyApp() {
   const $ = _c(1);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = <div>Hello World</div>;
     $[0] = t0;
   } else {

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime"; // @compilationMode:"
 function nonReactFn() {
   const $ = _c(1);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = {};
     $[0] = t0;
   } else {

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/parse-typescript-output.txt

@@ -2,15 +2,15 @@ import { c as _c } from "react/compiler-runtime";
 function Foo() {
   const $ = _c(2);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = foo();
     $[0] = t0;
   } else {
     t0 = $[0];
   }
   const x = t0 as number;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = <div>{x}</div>;
     $[1] = t1;
   } else {

compiler/packages/babel-plugin-react-compiler/scripts/babel-plugin-annotate-react-code.ts

@@ -53,15 +53,18 @@ function shouldVisit(fn: BabelFn): boolean {
 }
 
 function buildTypeOfReactForget(): t.Statement {
-  // typeof globalThis[Symbol.for("react_forget")]
+  // typeof globalThis[globalThis.Symbol.for("react_forget")]
   return t.expressionStatement(
     t.unaryExpression(
       'typeof',
       t.memberExpression(
         t.identifier('globalThis'),
         t.callExpression(
           t.memberExpression(
-            t.identifier('Symbol'),
+            t.memberExpression(
+              t.identifier('globalThis'),
+              t.identifier('Symbol'),
+            ),
             t.identifier('for'),
             false,
             false,

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

@@ -434,13 +434,28 @@ function createSymbolProperty(
   propertyName: string,
   symbolName: string,
 ): ObjectProperty {
+  const globalThisPlace = createTemporaryPlace(fn.env, instr.value.loc);
+  const globalThisInstruction: Instruction = {
+    id: makeInstructionId(0),
+    lvalue: {...globalThisPlace, effect: Effect.Read},
+    value: {
+      kind: 'LoadGlobal',
+      binding: {kind: 'Global', name: 'globalThis'},
+      loc: instr.value.loc,
+    },
+    effects: null,
+    loc: instr.loc,
+  };
+  nextInstructions.push(globalThisInstruction);
+
   const symbolPlace = createTemporaryPlace(fn.env, instr.value.loc);
   const symbolInstruction: Instruction = {
     id: makeInstructionId(0),
-    lvalue: {...symbolPlace, effect: Effect.Mutate},
+    lvalue: {...symbolPlace, effect: Effect.Read},
     value: {
-      kind: 'LoadGlobal',
-      binding: {kind: 'Global', name: 'Symbol'},
+      kind: 'PropertyLoad',
+      object: {...globalThisInstruction.lvalue},
+      property: makePropertyLiteral('Symbol'),
       loc: instr.value.loc,
     },
     effects: null,

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

@@ -228,7 +228,10 @@ export function codegenFunction(
                     ),
                     t.callExpression(
                       t.memberExpression(
-                        t.identifier('Symbol'),
+                        t.memberExpression(
+                          t.identifier('globalThis'),
+                          t.identifier('Symbol'),
+                        ),
                         t.identifier('for'),
                       ),
                       [t.stringLiteral(MEMO_CACHE_SENTINEL)],
@@ -748,7 +751,13 @@ function codegenReactiveScope(
         true,
       ),
       t.callExpression(
-        t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+        t.memberExpression(
+          t.memberExpression(
+            t.identifier('globalThis'),
+            t.identifier('Symbol'),
+          ),
+          t.identifier('for'),
+        ),
         [t.stringLiteral(MEMO_CACHE_SENTINEL)],
       ),
     );
@@ -968,7 +977,13 @@ function codegenReactiveScope(
           '!==',
           t.identifier(name),
           t.callExpression(
-            t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+            t.memberExpression(
+              t.memberExpression(
+                t.identifier('globalThis'),
+                t.identifier('Symbol'),
+              ),
+              t.identifier('for'),
+            ),
             [t.stringLiteral(EARLY_RETURN_SENTINEL)],
           ),
         ),

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

@@ -68,7 +68,7 @@ import {ReactiveFunctionTransform, Transformed} from './visitors';
  * ```
  * let t0;
  * if (props.cond !== $[0]) {
- *   t0 = Symbol.for('react.memo_cache_sentinel');
+ *   t0 = globalThis.Symbol.for('react.memo_cache_sentinel');
  *   bb0: {
  *     let x = [];
  *     if (props.cond) {
@@ -77,7 +77,7 @@ import {ReactiveFunctionTransform, Transformed} from './visitors';
  *       break bb0;
  *     } else {
  *       let t1;
- *       if ($[1] === Symbol.for('react.memo_cache_sentinel')) {
+ *       if ($[1] === globalThis.Symbol.for('react.memo_cache_sentinel')) {
  *         t1 = foo();
  *         $[1] = t1;
  *       } else {
@@ -93,7 +93,7 @@ import {ReactiveFunctionTransform, Transformed} from './visitors';
  *   t0 = $[2];
  * }
  * // This part added in CodegenReactiveScope:
- * if (t0 !== Symbol.for('react.memo_cache_sentinel')) {
+ * if (t0 !== globalThis.Symbol.for('react.memo_cache_sentinel')) {
  *   return t0;
  * }
  * ```
@@ -161,6 +161,7 @@ class Transform extends ReactiveFunctionTransform<State> {
         const instructions = scopeBlock.instructions;
         const loc = earlyReturnValue.loc;
         const sentinelTemp = createTemporaryPlace(this.env, loc);
+        const globalThisTemp = createTemporaryPlace(this.env, loc);
         const symbolTemp = createTemporaryPlace(this.env, loc);
         const forTemp = createTemporaryPlace(this.env, loc);
         const argTemp = createTemporaryPlace(this.env, loc);
@@ -170,17 +171,31 @@ class Transform extends ReactiveFunctionTransform<State> {
             instruction: {
               id: makeInstructionId(0),
               loc,
-              lvalue: {...symbolTemp},
+              lvalue: {...globalThisTemp},
               value: {
                 kind: 'LoadGlobal',
                 binding: {
                   kind: 'Global',
-                  name: 'Symbol',
+                  name: 'globalThis',
                 },
                 loc,
               },
             },
           },
+          {
+            kind: 'instruction',
+            instruction: {
+              id: makeInstructionId(0),
+              loc,
+              lvalue: {...symbolTemp},
+              value: {
+                kind: 'PropertyLoad',
+                object: {...globalThisTemp},
+                property: makePropertyLiteral('Symbol'),
+                loc,
+              },
+            },
+          },
           {
             kind: 'instruction',
             instruction: {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md

@@ -33,7 +33,7 @@ import { makeObject_Primitives, mutate } from "shared-runtime";
 function Component() {
   const $ = _c(1);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const a = makeObject_Primitives();
     const x = [];
     x.push(a);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md

@@ -22,15 +22,15 @@ import { c as _c } from "react/compiler-runtime";
 function Component() {
   const $ = _c(2);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = someObj();
     $[0] = t0;
   } else {
     t0 = $[0];
   }
   const a = t0;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const x = [];
     x.push(a);
     t1 = [x, a];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md

@@ -21,7 +21,7 @@ import { c as _c } from "react/compiler-runtime";
 function component() {
   const $ = _c(1);
   let x;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const z = [];
     const y = {};
     y.z = z;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md

@@ -26,7 +26,7 @@ import { c as _c } from "react/compiler-runtime";
 function component() {
   const $ = _c(1);
   let x;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const z = [];
     const y = {};
     y.z = z;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md

@@ -41,7 +41,7 @@ function useFoo(cond) {
   let s;
   let t0;
   if ($[0] !== cond) {
-    t0 = Symbol.for("react.early_return_sentinel");
+    t0 = globalThis.Symbol.for("react.early_return_sentinel");
     bb0: {
       if (cond) {
         s = {};
@@ -59,7 +59,7 @@ function useFoo(cond) {
     t0 = $[1];
     s = $[2];
   }
-  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+  if (t0 !== globalThis.Symbol.for("react.early_return_sentinel")) {
     return t0;
   }
   return s;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-nested-block-structure.expect.md

@@ -121,7 +121,7 @@ function useFoo(t0) {
   let s;
   let t1;
   if ($[0] !== cond1 || $[1] !== cond2) {
-    t1 = Symbol.for("react.early_return_sentinel");
+    t1 = globalThis.Symbol.for("react.early_return_sentinel");
     bb0: {
       if (cond1) {
         s = {};
@@ -142,7 +142,7 @@ function useFoo(t0) {
     t1 = $[2];
     s = $[3];
   }
-  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+  if (t1 !== globalThis.Symbol.for("react.early_return_sentinel")) {
     return t1;
   }
   return s;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-if.expect.md

@@ -39,7 +39,7 @@ function useFoo(t0) {
   const $ = _c(3);
   const { cond } = t0;
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = {};
     $[0] = t1;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-trycatch-nested-overlapping-range.expect.md

@@ -34,7 +34,7 @@ function Foo() {
   const $ = _c(1);
   try {
     let thing;
-    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
       thing = null;
       if (cond) {
         thing = makeObject_Primitives();

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md

@@ -30,7 +30,7 @@ function Component(props) {
   const $ = _c(1);
   const ref = useRef(props.value);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const object = {};
     object.foo = () => ref.current;
     t0 = <Stringify object={object} shouldInvokeFns={true} />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-to-global-in-function-spread-as-jsx.expect.md

@@ -21,7 +21,7 @@ function Component() {
   const $ = _c(1);
   const foo = _temp;
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = <div {...foo} />;
     $[0] = t0;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md

@@ -46,7 +46,7 @@ function Component() {
   const setGlobal = _temp;
   let t0;
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       setGlobal();
     };
@@ -60,7 +60,7 @@ function Component() {
   useEffect(t0, t1);
   let t2;
   let t3;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[2] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t2 = () => {
       setState(someGlobal.value);
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md

@@ -45,7 +45,7 @@ function Component() {
   const setGlobal = _temp;
   let t0;
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       setGlobal();
     };
@@ -59,7 +59,7 @@ function Component() {
   useEffect(t0, t1);
   let t2;
   let t3;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[2] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t2 = () => {
       setState(someGlobal.value);
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-unused-usecallback.expect.md

@@ -28,7 +28,7 @@ import { useCallback, useEffect, useState } from "react";
 function Component() {
   const $ = _c(1);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = <div>Ok</div>;
     $[0] = t0;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md

@@ -45,7 +45,7 @@ function Component() {
   const setGlobal = _temp;
   let t0;
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       setGlobal();
     };
@@ -59,7 +59,7 @@ function Component() {
   useEffect(t0, t1);
   let t2;
   let t3;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[2] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t2 = () => {
       setState(someGlobal);
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md

@@ -39,7 +39,7 @@ function Component() {
   const $ = _c(5);
   const [state, setState] = useState(someGlobal);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = [];
     $[0] = t0;
   } else {
@@ -48,7 +48,7 @@ function Component() {
   useEffect(_temp, t0);
   let t1;
   let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = () => {
       setState(someGlobal);
     };