fix(compiler): use globalThis.Symbol to prevent shadowing by user components

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

@@ -748,7 +748,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 +974,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/__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);
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-merge-refs-pattern.expect.md

@@ -29,7 +29,7 @@ function Component() {
   const ref2 = useRef(null);
   const mergedRef = mergeRefs([ref], ref2);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = <Stringify ref={mergedRef} />;
     $[0] = t0;
   } else {

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

@@ -61,7 +61,7 @@ function Component() {
 
   const y = x;
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       y.value = "hello";
     };
@@ -72,7 +72,7 @@ function Component() {
   useEffect(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.value);
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md

@@ -43,7 +43,7 @@ function Component() {
   const $ = _c(2);
   const ref = useRef(null);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const setRef = () => {
       if (ref.current !== null) {
         ref.current = "";
@@ -58,7 +58,7 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = (
       <>
         <input ref={ref} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md

@@ -39,7 +39,7 @@ function Component() {
   const $ = _c(2);
   const ref = useRef(null);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       if (ref.current !== null) {
         ref.current = "";
@@ -51,7 +51,7 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = (
       <>
         <input ref={ref} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md

@@ -43,7 +43,7 @@ function Component() {
   const $ = _c(2);
   const ref = useRef(null);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     const setRef = () => {
       if (ref.current !== null) {
         ref.current.value = "";
@@ -58,7 +58,7 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = (
       <>
         <input ref={ref} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md

@@ -39,7 +39,7 @@ function Component() {
   const $ = _c(2);
   const ref = useRef(null);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       if (ref.current !== null) {
         ref.current.value = "";
@@ -51,7 +51,7 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = (
       <>
         <input ref={ref} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md

@@ -17,7 +17,7 @@ function Component(props) {
   const $ = _c(1);
   const ref = useRef(null);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = <Foo ref={ref} />;
     $[0] = t0;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-reassignment-to-global-function-jsx-prop.expect.md

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

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.expect.md

@@ -80,7 +80,7 @@ function handleSubmit(callback) {
 async function upload(file) {
   const $ = _c(1);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = { blob: { url: "https://example.com/file.jpg" } };
     $[0] = t0;
   } else {
@@ -112,7 +112,7 @@ function Component() {
   const t0 = handleSubmit(onSubmit);
   let t1;
   let t2;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = <input type="text" name="signature" />;
     t2 = <button type="submit">Submit</button>;
     $[0] = t1;

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

@@ -51,7 +51,7 @@ function Component() {
   const ref = useRef(null);
   const [state, setState] = useState(false);
   let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t0 = () => {
       ref.current = "Ok";
     };
@@ -62,7 +62,7 @@ function Component() {
   const setRef = t0;
   let t1;
   let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t1 = () => {
       setRef();
     };
@@ -76,7 +76,7 @@ function Component() {
   useEffect(t1, t2);
   let t3;
   let t4;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[3] === globalThis.Symbol.for("react.memo_cache_sentinel")) {
     t3 = () => {
       setState(true);
     };