Enable React performance tracks in Canary (#34665)

Co-authored-by: Ruslan Lesiutin <[email protected]>

Author: eps1lon

packages/react-devtools-shared/src/__tests__/preprocessData-test.js

@@ -24,21 +24,8 @@ let utils;
 let assertLog;
 let waitFor;
 
-// This flag is on experimental which disables timeline profiler.
-const enableComponentPerformanceTrack =
-  React.version.startsWith('19') && React.version.includes('experimental');
-
 describe('Timeline profiler', () => {
-  if (enableComponentPerformanceTrack) {
-    test('no tests', () => {});
-    // Ignore all tests.
-    return;
-  }
-
   describe('User Timing API', () => {
-    if (enableComponentPerformanceTrack) {
-      return;
-    }
     let currentlyNotClearedMarks;
     let registeredMarks;
     let featureDetectionMarkName = null;
@@ -168,6 +155,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should return array of lane numbers from bitmask string', () => {
         expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
         expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);
@@ -184,6 +172,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should return empty array if laneBitmaskString is not a bitmask', () => {
         expect(getLanesFromTransportDecimalBitmask('')).toEqual([]);
         expect(getLanesFromTransportDecimalBitmask('hello')).toEqual([]);
@@ -192,6 +181,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
         const REACT_TOTAL_NUM_LANES =
           require('react-devtools-timeline/src/constants').REACT_TOTAL_NUM_LANES;
@@ -317,11 +307,13 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should throw given an empty timeline', async () => {
         await expect(async () => preprocessData([])).rejects.toThrow();
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should throw given a timeline with no Profile event', async () => {
         const randomSample = createUserTimingEntry({
           dur: 100,
@@ -338,6 +330,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should throw given a timeline without an explicit profiler version mark nor any other React marks', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
 
@@ -349,6 +342,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should throw given a timeline with React scheduling marks, but without an explicit profiler version mark', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
         const scheduleRenderSample = createUserTimingEntry({
@@ -363,6 +357,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should return empty data given a timeline with no React scheduling profiling marks', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
         const randomSample = createUserTimingEntry({
@@ -467,6 +462,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should process legacy data format (before lane labels were added)', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
 
@@ -854,6 +850,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion < 19.2
       it('should process a sample createRoot render sequence', async () => {
         function App() {
           const [didMount, setDidMount] = React.useState(false);
@@ -1190,6 +1187,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should populate other user timing marks', async () => {
         const userTimingData = createUserTimingData([]);
         userTimingData.push(
@@ -1240,6 +1238,7 @@ describe('Timeline profiler', () => {
       });
 
       // @reactVersion >= 18.0
+      // @reactVersion < 19.2
       it('should include a suspended resource "displayName" if one is set', async () => {
         let promise = null;
         let resolvedValue = null;
@@ -1381,6 +1380,7 @@ describe('Timeline profiler', () => {
           });
 
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', async () => {
             function Yield({id, value}) {
               Scheduler.log(`${id}:${value}`);
@@ -1443,6 +1443,7 @@ describe('Timeline profiler', () => {
 
         describe('nested updates', () => {
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should not warn about short nested (state) updates during layout effects', async () => {
             function Component() {
               const [didMount, setDidMount] = React.useState(false);
@@ -1474,6 +1475,7 @@ describe('Timeline profiler', () => {
           });
 
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should not warn about short (forced) updates during layout effects', async () => {
             class Component extends React.Component {
               _didMount: boolean = false;
@@ -1629,6 +1631,7 @@ describe('Timeline profiler', () => {
           });
 
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should not warn about transition updates scheduled during commit phase', async () => {
             function Component() {
               const [value, setValue] = React.useState(0);
@@ -1770,6 +1773,7 @@ describe('Timeline profiler', () => {
 
         describe('errors thrown while rendering', () => {
           // @reactVersion >= 18.0
+          // @reactVersion < 19.2
           it('shoult parse Errors thrown during render', async () => {
             jest.spyOn(console, 'error');
 
@@ -1818,6 +1822,7 @@ describe('Timeline profiler', () => {
           // This also tests an edge case where a component suspends while profiling
           // before the first commit is logged (so the lane-to-labels map will not yet exist).
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should warn about suspending during an update', async () => {
             let promise = null;
             let resolvedValue = null;
@@ -1884,6 +1889,7 @@ describe('Timeline profiler', () => {
           });
 
           // @reactVersion >= 18.2
+          // @reactVersion < 19.2
           it('should not warn about suspending during an transition', async () => {
             let promise = null;
             let resolvedValue = null;
@@ -2152,6 +2158,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion < 19.2
     it('should process a sample createRoot render sequence', async () => {
       function App() {
         const [didMount, setDidMount] = React.useState(false);

packages/shared/ReactFeatureFlags.js

@@ -229,7 +229,7 @@ export const enableProfilerTimer = __PROFILE__;
 // Component rendering tracks to show up in the Performance tab.
 // This flag will be used for both Server Component and Client Component tracks.
 // All calls should also be gated on enableProfilerTimer.
-export const enableComponentPerformanceTrack = __EXPERIMENTAL__;
+export const enableComponentPerformanceTrack: boolean = true;
 
 // Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
 // for an experimental timeline tool.

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

@@ -41,8 +41,9 @@ export const enableObjectFiber: boolean = false;
 export const enablePostpone: boolean = false;
 export const enableReactTestRendererWarning: boolean = false;
 export const enableRetryLaneExpiration: boolean = false;
-export const enableSchedulingProfiler: boolean = __PROFILE__;
-export const enableComponentPerformanceTrack: boolean = false;
+export const enableComponentPerformanceTrack: boolean = true;
+export const enableSchedulingProfiler: boolean =
+  !enableComponentPerformanceTrack && __PROFILE__;
 export const enableScopeAPI: boolean = false;
 export const enableEagerAlternateStateNodeCleanup: boolean = true;
 export const enableSuspenseAvoidThisFallback: boolean = false;

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

@@ -15,7 +15,7 @@ export const enableSchedulingProfiler: boolean = false;
 export const enableProfilerTimer: boolean = __PROFILE__;
 export const enableProfilerCommitHooks: boolean = __PROFILE__;
 export const enableProfilerNestedUpdatePhase: boolean = __PROFILE__;
-export const enableComponentPerformanceTrack: boolean = false;
+export const enableComponentPerformanceTrack: boolean = true;
 export const enableUpdaterTracking: boolean = false;
 export const enableLegacyCache: boolean = __EXPERIMENTAL__;
 export const enableAsyncIterableChildren: boolean = false;