Rename the react.element symbol to react.transitional.element (#28813)

We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used. Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the `ref` field on the elements in the next version so we'll likely have to do it again. DiffTrain build for commit 3b551c8.
facebook · Apr 22, 2024 · 5ccb5b7 · 5ccb5b7
1 parent e2bb95f
commit 5ccb5b7
Show file tree

Hide file tree

Showing 20 changed files with 223 additions and 180 deletions.
diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<4b798dcd431887c30b264d36a3b13441>>
+ * @generated SignedSource<<67ecfa6f3ffb08a7102950c78e1002d4>>
  */
 
 'use strict';
@@ -18,11 +18,23 @@ if (__DEV__) {
 
 var dynamicFlagsUntyped = require('ReactNativeInternalFeatureFlags');
 
-// ATTENTION
+// Re-export dynamic flags from the internal module.
+var dynamicFlags = dynamicFlagsUntyped; // We destructure each value before re-exporting to avoid a dynamic look-up on
+// the exports object every time a flag is read.
+
+var enableRenderableContext = dynamicFlags.enableRenderableContext;
+ // The rest of the flags are static for better dead code elimination.
+var enableDebugTracing = false;
+var enableScopeAPI = false;
+var enableLegacyHidden = false;
+var enableTransitionTracing = false;
+
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 // The Symbol used to tag the ReactElement-like types.
-var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+
+var REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_ELEMENT_TYPE = REACT_LEGACY_ELEMENT_TYPE;
 var REACT_PORTAL_TYPE = Symbol.for('react.portal');
 var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
 var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
@@ -38,17 +50,6 @@ var REACT_MEMO_TYPE = Symbol.for('react.memo');
 var REACT_LAZY_TYPE = Symbol.for('react.lazy');
 var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
 
-// Re-export dynamic flags from the internal module.
-var dynamicFlags = dynamicFlagsUntyped; // We destructure each value before re-exporting to avoid a dynamic look-up on
-// the exports object every time a flag is read.
-
-var enableRenderableContext = dynamicFlags.enableRenderableContext;
- // The rest of the flags are static for better dead code elimination.
-var enableDebugTracing = false;
-var enableScopeAPI = false;
-var enableLegacyHidden = false;
-var enableTransitionTracing = false;
-
 var REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference');
 function isValidElementType(type) {
   if (typeof type === 'string' || typeof type === 'function') {

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-prod.js
@@ -7,12 +7,13 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<8b4e45fcdea67ae633a64f641072fdb0>>
+ * @generated SignedSource<<a2ec93969192b62fe71f0ed10a25ef77>>
  */
 
 "use strict";
-var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags"),
-  REACT_ELEMENT_TYPE = Symbol.for("react.element"),
+var enableRenderableContext =
+    require("ReactNativeInternalFeatureFlags").enableRenderableContext,
+  REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
   REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
@@ -26,13 +27,12 @@ var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags"),
   REACT_MEMO_TYPE = Symbol.for("react.memo"),
   REACT_LAZY_TYPE = Symbol.for("react.lazy"),
   REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
-  enableRenderableContext = dynamicFlagsUntyped.enableRenderableContext,
   REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
 function typeOf(object) {
   if ("object" === typeof object && null !== object) {
     var $$typeof = object.$$typeof;
     switch ($$typeof) {
-      case REACT_ELEMENT_TYPE:
+      case REACT_LEGACY_ELEMENT_TYPE:
         switch (((object = object.type), object)) {
           case REACT_FRAGMENT_TYPE:
           case REACT_PROFILER_TYPE:
@@ -67,7 +67,7 @@ exports.ContextConsumer = enableRenderableContext
   ? REACT_CONSUMER_TYPE
   : REACT_CONTEXT_TYPE;
 exports.ContextProvider = ContextProvider;
-exports.Element = REACT_ELEMENT_TYPE;
+exports.Element = REACT_LEGACY_ELEMENT_TYPE;
 exports.ForwardRef = REACT_FORWARD_REF_TYPE;
 exports.Fragment = REACT_FRAGMENT_TYPE;
 exports.Lazy = REACT_LAZY_TYPE;
@@ -91,7 +91,7 @@ exports.isElement = function (object) {
   return (
     "object" === typeof object &&
     null !== object &&
-    object.$$typeof === REACT_ELEMENT_TYPE
+    object.$$typeof === REACT_LEGACY_ELEMENT_TYPE
   );
 };
 exports.isForwardRef = function (object) {

diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-is/cjs/ReactIs-profiling.js
@@ -7,12 +7,13 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<8b4e45fcdea67ae633a64f641072fdb0>>
+ * @generated SignedSource<<a2ec93969192b62fe71f0ed10a25ef77>>
  */
 
 "use strict";
-var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags"),
-  REACT_ELEMENT_TYPE = Symbol.for("react.element"),
+var enableRenderableContext =
+    require("ReactNativeInternalFeatureFlags").enableRenderableContext,
+  REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
   REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
@@ -26,13 +27,12 @@ var dynamicFlagsUntyped = require("ReactNativeInternalFeatureFlags"),
   REACT_MEMO_TYPE = Symbol.for("react.memo"),
   REACT_LAZY_TYPE = Symbol.for("react.lazy"),
   REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
-  enableRenderableContext = dynamicFlagsUntyped.enableRenderableContext,
   REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
 function typeOf(object) {
   if ("object" === typeof object && null !== object) {
     var $$typeof = object.$$typeof;
     switch ($$typeof) {
-      case REACT_ELEMENT_TYPE:
+      case REACT_LEGACY_ELEMENT_TYPE:
         switch (((object = object.type), object)) {
           case REACT_FRAGMENT_TYPE:
           case REACT_PROFILER_TYPE:
@@ -67,7 +67,7 @@ exports.ContextConsumer = enableRenderableContext
   ? REACT_CONSUMER_TYPE
   : REACT_CONTEXT_TYPE;
 exports.ContextProvider = ContextProvider;
-exports.Element = REACT_ELEMENT_TYPE;
+exports.Element = REACT_LEGACY_ELEMENT_TYPE;
 exports.ForwardRef = REACT_FORWARD_REF_TYPE;
 exports.Fragment = REACT_FRAGMENT_TYPE;
 exports.Lazy = REACT_LAZY_TYPE;
@@ -91,7 +91,7 @@ exports.isElement = function (object) {
   return (
     "object" === typeof object &&
     null !== object &&
-    object.$$typeof === REACT_ELEMENT_TYPE
+    object.$$typeof === REACT_LEGACY_ELEMENT_TYPE
   );
 };
 exports.isForwardRef = function (object) {

diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<72055afa4818e8a565d07875c49b2d9d>>
+ * @generated SignedSource<<46b519886f2205ba3e56e9120fea4a08>>
  */
 
 'use strict';
@@ -168,11 +168,12 @@ var HostHoistable = 26;
 var HostSingleton = 27;
 var IncompleteFunctionComponent = 28;
 
-// ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 // The Symbol used to tag the ReactElement-like types.
-var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+
+var REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_ELEMENT_TYPE = REACT_LEGACY_ELEMENT_TYPE;
 var REACT_PORTAL_TYPE = Symbol.for('react.portal');
 var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
 var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
@@ -5422,7 +5423,11 @@ function coerceRef(returnFiber, current, workInProgress, element) {
 }
 
 function throwOnInvalidObjectType(returnFiber, newChild) {
-  // $FlowFixMe[method-unbinding]
+  if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE) {
+    throw new Error('A React Element from an older version of React was rendered. ' + 'This is not supported. It can happen if:\n' + '- Multiple copies of the "react" package is used.\n' + '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' + '- A compiler tries to "inline" JSX instead of using the runtime.');
+  } // $FlowFixMe[method-unbinding]
+
+
   var childString = Object.prototype.toString.call(newChild);
   throw new Error("Objects are not valid as a React child (found: " + (childString === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : childString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.');
 }
@@ -22978,7 +22983,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-canary-acecb093';
+var ReactVersion = '19.0.0-canary-faeca3c1';
 
 /*
  * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<8230647a80c4b86b8cf8384768883557>>
+ * @generated SignedSource<<9553b8ed4acfe1f92cf2f7113b446768>>
  */
 
 "use strict";
@@ -31,7 +31,7 @@ function _createClass(Constructor, protoProps, staticProps) {
 var assign = Object.assign,
   ReactSharedInternals =
     React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-  REACT_ELEMENT_TYPE = Symbol.for("react.element"),
+  REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
   REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
@@ -1385,6 +1385,10 @@ function unwrapThenable(thenable) {
   return trackUsedThenable(thenableState$1, thenable, index);
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
+  if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE)
+    throw Error(
+      'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.'
+    );
   returnFiber = Object.prototype.toString.call(newChild);
   throw Error(
     "Objects are not valid as a React child (found: " +
@@ -1545,7 +1549,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       );
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return (
             (lanes = createFiberFromTypeAndProps(
               newChild.type,
@@ -1608,7 +1612,7 @@ function createChildReconciler(shouldTrackSideEffects) {
         : updateTextNode(returnFiber, oldFiber, "" + newChild, lanes);
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return newChild.key === key
             ? updateElement(returnFiber, oldFiber, newChild, lanes)
             : null;
@@ -1662,7 +1666,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       );
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return (
             (existingChildren =
               existingChildren.get(
@@ -1893,7 +1897,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       (newChild = newChild.props.children);
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           a: {
             for (var key = newChild.key; null !== currentFirstChild; ) {
               if (currentFirstChild.key === key) {
@@ -9144,7 +9148,7 @@ var devToolsConfig$jscomp$inline_1019 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-canary-a8200c0a",
+  version: "19.0.0-canary-926deca4",
   rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1238 = {
@@ -9175,7 +9179,7 @@ var internals$jscomp$inline_1238 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-canary-a8200c0a"
+  reconcilerVersion: "19.0.0-canary-926deca4"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1239 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<9f8b5b89043962a79b6b2123a526bf46>>
+ * @generated SignedSource<<3a52338cfe089716cbc5c55bc70f1def>>
  */
 
 "use strict";
@@ -31,7 +31,7 @@ function _createClass(Constructor, protoProps, staticProps) {
 var assign = Object.assign,
   ReactSharedInternals =
     React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-  REACT_ELEMENT_TYPE = Symbol.for("react.element"),
+  REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
   REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
@@ -1473,6 +1473,10 @@ function unwrapThenable(thenable) {
   return trackUsedThenable(thenableState$1, thenable, index);
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
+  if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE)
+    throw Error(
+      'A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the "react" package is used.\n- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n- A compiler tries to "inline" JSX instead of using the runtime.'
+    );
   returnFiber = Object.prototype.toString.call(newChild);
   throw Error(
     "Objects are not valid as a React child (found: " +
@@ -1633,7 +1637,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       );
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return (
             (lanes = createFiberFromTypeAndProps(
               newChild.type,
@@ -1696,7 +1700,7 @@ function createChildReconciler(shouldTrackSideEffects) {
         : updateTextNode(returnFiber, oldFiber, "" + newChild, lanes);
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return newChild.key === key
             ? updateElement(returnFiber, oldFiber, newChild, lanes)
             : null;
@@ -1750,7 +1754,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       );
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           return (
             (existingChildren =
               existingChildren.get(
@@ -1981,7 +1985,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       (newChild = newChild.props.children);
     if ("object" === typeof newChild && null !== newChild) {
       switch (newChild.$$typeof) {
-        case REACT_ELEMENT_TYPE:
+        case REACT_LEGACY_ELEMENT_TYPE:
           a: {
             for (var key = newChild.key; null !== currentFirstChild; ) {
               if (currentFirstChild.key === key) {
@@ -9760,7 +9764,7 @@ var devToolsConfig$jscomp$inline_1101 = {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-canary-359342b1",
+  version: "19.0.0-canary-1895753d",
   rendererPackageName: "react-test-renderer"
 };
 (function (internals) {
@@ -9804,7 +9808,7 @@ var devToolsConfig$jscomp$inline_1101 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-canary-359342b1"
+  reconcilerVersion: "19.0.0-canary-1895753d"
 });
 exports._Scheduler = Scheduler;
 exports.act = act;