Flag the change

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactComponent-test.js

@@ -612,6 +612,7 @@ describe('ReactComponent', () => {
     );
   });
 
+  // @gate renameElementSymbol
   it('throws if a legacy element is used as a child', async () => {
     const inlinedElement = {
       $$typeof: Symbol.for('react.element'),

packages/react-dom/src/__tests__/ReactDOMOption-test.js

@@ -134,11 +134,12 @@ describe('ReactDOMOption', () => {
     }).rejects.toThrow('Objects are not valid as a React child');
   });
 
+  // @gate www
   it('should support element-ish child', async () => {
     // This is similar to <fbt>.
     // We don't toString it because you must instead provide a value prop.
     const obj = {
-      $$typeof: Symbol.for('react.transitional.element'),
+      $$typeof: Symbol.for('react.element'),
       type: props => props.content,
       ref: null,
       key: null,

packages/react-dom/src/__tests__/refs-test.js

@@ -382,14 +382,14 @@ describe('ref swapping', () => {
     }).rejects.toThrow('Expected ref to be a function');
   });
 
-  // @gate !enableRefAsProp
+  // @gate !enableRefAsProp && www
   it('undefined ref on manually inlined React element triggers error', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
     await expect(async () => {
       await act(() => {
         root.render({
-          $$typeof: Symbol.for('react.transitional.element'),
+          $$typeof: Symbol.for('react.element'),
           type: 'div',
           props: {
             ref: undefined,

packages/shared/ReactFeatureFlags.js

@@ -143,6 +143,9 @@ export const transitionLaneExpirationMs = 5000;
 
 // const __NEXT_MAJOR__ = __EXPERIMENTAL__;
 
+// Renames the internal symbol for elements since they have changed signature/constructor
+export const renameElementSymbol = true;
+
 // Removes legacy style context
 export const disableLegacyContext = true;
 

packages/shared/ReactSymbols.js

@@ -7,15 +7,17 @@
  * @flow
  */
 
+import {renameElementSymbol} from 'shared/ReactFeatureFlags';
+
 // 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.
-export const REACT_ELEMENT_TYPE: symbol = Symbol.for(
-  'react.transitional.element',
-);
 export const REACT_LEGACY_ELEMENT_TYPE: symbol = Symbol.for('react.element');
+export const REACT_ELEMENT_TYPE: symbol = renameElementSymbol
+  ? Symbol.for('react.transitional.element')
+  : REACT_LEGACY_ELEMENT_TYPE;
 export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
 export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
 export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');

packages/shared/__tests__/ReactSymbols-test.internal.js

@@ -23,6 +23,7 @@ describe('ReactSymbols', () => {
     });
   };
 
+  // @gate renameElementSymbol
   it('Symbol values should be unique', () => {
     expectToBeUnique(Object.entries(require('shared/ReactSymbols')));
   });

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -69,6 +69,8 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableGetInspectorDataForInstanceInProduction = true;
 
+export const renameElementSymbol = false;
+
 export const enableRetryLaneExpiration = false;
 export const retryLaneExpirationMs = 5000;
 export const syncLaneExpirationMs = 250;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -104,6 +104,8 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const passChildrenWhenCloningPersistedNodes = false;
 export const enableEarlyReturnForPropDiffing = false;
 
+export const renameElementSymbol = true;
+
 // Profiling Only
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -79,6 +79,8 @@ export const enableServerComponentLogs = true;
 export const enableInfiniteRenderLoopDetection = false;
 export const enableEarlyReturnForPropDiffing = false;
 
+export const renameElementSymbol = true;
+
 // TODO: This must be in sync with the main ReactFeatureFlags file because
 // the Test Renderer's value must be the same as the one used by the
 // react package.

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -90,5 +90,7 @@ export const disableDOMTestUtils = false;
 export const disableDefaultPropsExceptForClasses = false;
 export const enableEarlyReturnForPropDiffing = false;
 
+export const renameElementSymbol = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -90,5 +90,7 @@ export const disableDOMTestUtils = false;
 export const disableDefaultPropsExceptForClasses = false;
 export const enableEarlyReturnForPropDiffing = false;
 
+export const renameElementSymbol = false;
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.www.js

@@ -65,6 +65,8 @@ export const enableSchedulingProfiler: boolean =
 export const disableLegacyContext = __EXPERIMENTAL__;
 export const enableGetInspectorDataForInstanceInProduction = false;
 
+export const renameElementSymbol = false;
+
 export const enableCache = true;
 export const enableLegacyCache = true;
 export const enableFetchInstrumentation = false;