From d0dc61c836034b369da9f1f09948f8b72524e115 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 10 Apr 2024 11:23:37 +0200 Subject: [PATCH 1/4] Reconciler: Don't retry synchronous render --- .../__tests__/ReactInternalTestUtils-test.js | 8 +- .../__tests__/ReactCacheOld-test.internal.js | 2 +- .../src/__tests__/TimelineProfiler-test.js | 2321 ++++++++--------- .../src/__tests__/preprocessData-test.js | 2 +- .../__tests__/ReactCompositeComponent-test.js | 4 - .../src/__tests__/ReactDOMSelect-test.js | 19 - .../src/__tests__/ReactDOMTextarea-test.js | 1 - .../ReactErrorBoundaries-test.internal.js | 217 -- .../src/ReactFiberWorkLoop.js | 10 +- ...rorBoundaryReconciliation-test.internal.js | 2 +- .../src/__tests__/ReactHooks-test.internal.js | 7 - ...tIncrementalErrorHandling-test.internal.js | 41 +- .../src/__tests__/ReactUse-test.js | 8 - .../src/__tests__/useMemoCache-test.js | 8 +- .../ReactTestRenderer-test.internal.js | 2 - .../ReactElementValidator-test.internal.js | 4 - .../__tests__/ReactProfiler-test.internal.js | 12 +- .../src/__tests__/forwardRef-test.internal.js | 7 - 18 files changed, 1183 insertions(+), 1492 deletions(-) diff --git a/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js index fa985ef9948a..cf14639ddd7f 100644 --- a/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js +++ b/packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js @@ -108,13 +108,7 @@ describe('ReactInternalTestUtils', () => { root.render(); await waitForThrow('Oh no!'); - assertLog([ - 'A', - 'B', - // React will try one more time before giving up. - 'A', - 'B', - ]); + assertLog(['A', 'B']); }); test('waitForPaint', async () => { diff --git a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js index 08318d5f512f..3f76870891dc 100644 --- a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js +++ b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js @@ -153,7 +153,7 @@ describe('ReactCache', () => { // Should throw again on a subsequent read root.render(); await waitForThrow('Failed to load: Hi'); - assertLog(['Error! [Hi]', 'Error! [Hi]']); + assertLog(['Error! [Hi]']); }); it('warns if non-primitive key is passed to a resource without a hash function', async () => { diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index a09b4e54de4c..c8d6e3ceae60 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -121,21 +121,21 @@ describe('Timeline profiler', () => { legacyRender(
); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-1", - "--render-start-1", - "--render-stop", - "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-1", + "--render-start-1", + "--render-stop", + "--commit-start-1", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-1", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); // TODO(hoxyq): investigate why running this test with React 18 fails @@ -154,24 +154,24 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-2", - "--render-start-2", - "--component-render-start-Example", - "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-2", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-2", + "--render-start-2", + "--component-render-start-Example", + "--component-render-stop", + "--suspense-suspend-0-Example-mount-2-", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-2", + "--layout-effects-stop", + "--commit-stop", + ] + `); clearPendingMarks(); @@ -199,24 +199,24 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-2", - "--render-start-2", - "--component-render-start-Example", - "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-2", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-2", + "--render-start-2", + "--component-render-start-Example", + "--component-render-stop", + "--suspense-suspend-0-Example-mount-2-", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-2", + "--layout-effects-stop", + "--commit-stop", + ] + `); clearPendingMarks(); @@ -253,39 +253,39 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-1", - "--render-start-1", - "--component-render-start-ErrorBoundary", - "--component-render-stop", - "--component-render-start-ExampleThatThrows", - "--component-render-start-ExampleThatThrows", - "--component-render-stop", - "--error-ExampleThatThrows-mount-Expected error", - "--render-stop", - "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", - "--schedule-state-update-1-ErrorBoundary", - "--layout-effects-stop", - "--commit-stop", - "--render-start-1", - "--component-render-start-ErrorBoundary", - "--component-render-stop", - "--render-stop", - "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--commit-stop", - ] - `); + [ + "--schedule-render-1", + "--render-start-1", + "--component-render-start-ErrorBoundary", + "--component-render-stop", + "--component-render-start-ExampleThatThrows", + "--component-render-start-ExampleThatThrows", + "--component-render-stop", + "--error-ExampleThatThrows-mount-Expected error", + "--render-stop", + "--commit-start-1", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-1", + "--schedule-state-update-1-ErrorBoundary", + "--layout-effects-stop", + "--commit-stop", + "--render-start-1", + "--component-render-start-ErrorBoundary", + "--component-render-stop", + "--render-stop", + "--commit-start-1", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--commit-stop", + ] + `); }); }); @@ -309,30 +309,30 @@ describe('Timeline profiler', () => { modernRender(
); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); it('should mark render yields', async () => { @@ -353,14 +353,14 @@ describe('Timeline profiler', () => { await waitFor(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-128", - "--render-start-128", - "--component-render-start-Foo", - "--component-render-stop", - "--render-yield", - ] - `); + [ + "--schedule-render-128", + "--render-start-128", + "--component-render-start-Foo", + "--component-render-stop", + "--render-yield", + ] + `); }); it('should mark concurrent render with suspense that resolves', async () => { @@ -380,33 +380,33 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--suspense-suspend-0-Example-mount-32-", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); clearPendingMarks(); @@ -435,33 +435,33 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--suspense-suspend-0-Example-mount-32-", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); clearPendingMarks(); @@ -490,44 +490,44 @@ describe('Timeline profiler', () => { modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--schedule-state-update-2-Example", - "--layout-effects-stop", - "--render-start-2", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--commit-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--schedule-state-update-2-Example", + "--layout-effects-stop", + "--render-start-2", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--commit-stop", + "--commit-stop", + ] + `); }); it('should mark cascading class component force updates', async () => { @@ -543,44 +543,44 @@ describe('Timeline profiler', () => { modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--schedule-forced-update-2-Example", - "--layout-effects-stop", - "--render-start-2", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--commit-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--schedule-forced-update-2-Example", + "--layout-effects-stop", + "--render-start-2", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--commit-stop", + "--commit-stop", + ] + `); }); it('should mark render phase state updates for class component', async () => { @@ -597,10 +597,10 @@ describe('Timeline profiler', () => { modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -617,23 +617,23 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--schedule-state-update-32-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--schedule-state-update-32-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); it('should mark render phase force updates for class component', async () => { @@ -651,10 +651,10 @@ describe('Timeline profiler', () => { modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -671,23 +671,23 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--schedule-forced-update-32-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--schedule-forced-update-32-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); it('should mark cascading layout updates', async () => { @@ -702,46 +702,46 @@ describe('Timeline profiler', () => { modernRender(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--component-layout-effect-mount-start-Example", - "--schedule-state-update-2-Example", - "--component-layout-effect-mount-stop", - "--layout-effects-stop", - "--render-start-2", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--commit-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--component-layout-effect-mount-start-Example", + "--schedule-state-update-2-Example", + "--component-layout-effect-mount-stop", + "--layout-effects-stop", + "--render-start-2", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--commit-stop", + "--commit-stop", + ] + `); }); it('should mark cascading passive updates', async () => { @@ -758,39 +758,39 @@ describe('Timeline profiler', () => { await waitForAll([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - "--passive-effects-start-32", - "--component-passive-effect-mount-start-Example", - "--schedule-state-update-32-Example", - "--component-passive-effect-mount-stop", - "--passive-effects-stop", - "--render-start-32", - "--component-render-start-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--commit-stop", - ] - `); + [ + "--schedule-render-32", + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + "--passive-effects-start-32", + "--component-passive-effect-mount-start-Example", + "--schedule-state-update-32-Example", + "--component-passive-effect-mount-stop", + "--passive-effects-stop", + "--render-start-32", + "--component-render-start-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--commit-stop", + ] + `); }); it('should mark render phase updates', async () => { @@ -807,24 +807,24 @@ describe('Timeline profiler', () => { await waitForAll([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - "--render-start-32", - "--component-render-start-Example", - "--schedule-state-update-32-Example", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-32", + "--render-start-32", + "--component-render-start-Example", + "--schedule-state-update-32-Example", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); it('should mark concurrent render that throws', async () => { @@ -855,54 +855,47 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); clearPendingMarks(); await waitForPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--render-start-32", - "--component-render-start-ErrorBoundary", - "--component-render-stop", - "--component-render-start-ExampleThatThrows", - "--component-render-stop", - "--error-ExampleThatThrows-mount-Expected error", - "--render-stop", - "--render-start-32", - "--component-render-start-ErrorBoundary", - "--component-render-stop", - "--component-render-start-ExampleThatThrows", - "--component-render-stop", - "--error-ExampleThatThrows-mount-Expected error", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--schedule-state-update-2-ErrorBoundary", - "--layout-effects-stop", - "--render-start-2", - "--component-render-start-ErrorBoundary", - "--component-render-stop", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--commit-stop", - "--commit-stop", - ] - `); + [ + "--render-start-32", + "--component-render-start-ErrorBoundary", + "--component-render-stop", + "--component-render-start-ExampleThatThrows", + "--component-render-stop", + "--error-ExampleThatThrows-mount-Expected error", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--schedule-state-update-2-ErrorBoundary", + "--layout-effects-stop", + "--render-start-2", + "--component-render-start-ErrorBoundary", + "--component-render-stop", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--commit-stop", + "--commit-stop", + ] + `); }); it('should mark passive and layout effects', async () => { @@ -950,27 +943,27 @@ describe('Timeline profiler', () => { await waitForPaint(['layout 1 mount', 'layout 2 mount']); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - "--render-start-32", - "--component-render-start-ComponentWithEffects", - "--component-render-stop", - "--render-stop", - "--commit-start-32", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-32", - "--component-layout-effect-mount-start-ComponentWithEffects", - "--component-layout-effect-mount-stop", - "--component-layout-effect-mount-start-ComponentWithEffects", - "--component-layout-effect-mount-stop", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-32", + "--render-start-32", + "--component-render-start-ComponentWithEffects", + "--component-render-stop", + "--render-stop", + "--commit-start-32", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-32", + "--component-layout-effect-mount-start-ComponentWithEffects", + "--component-layout-effect-mount-stop", + "--component-layout-effect-mount-start-ComponentWithEffects", + "--component-layout-effect-mount-stop", + "--layout-effects-stop", + "--commit-stop", + ] + `); clearPendingMarks(); @@ -981,17 +974,17 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--passive-effects-start-32", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--passive-effects-stop", - ] - `); + [ + "--passive-effects-start-32", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--passive-effects-stop", + ] + `); clearPendingMarks(); @@ -1008,33 +1001,33 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-2", - "--render-start-2", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--component-layout-effect-unmount-start-ComponentWithEffects", - "--component-layout-effect-unmount-stop", - "--component-layout-effect-unmount-start-ComponentWithEffects", - "--component-layout-effect-unmount-stop", - "--layout-effects-start-2", - "--layout-effects-stop", - "--passive-effects-start-2", - "--component-passive-effect-unmount-start-ComponentWithEffects", - "--component-passive-effect-unmount-stop", - "--component-passive-effect-unmount-start-ComponentWithEffects", - "--component-passive-effect-unmount-stop", - "--component-passive-effect-unmount-start-ComponentWithEffects", - "--component-passive-effect-unmount-stop", - "--passive-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-2", + "--render-start-2", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--component-layout-effect-unmount-start-ComponentWithEffects", + "--component-layout-effect-unmount-stop", + "--component-layout-effect-unmount-start-ComponentWithEffects", + "--component-layout-effect-unmount-stop", + "--layout-effects-start-2", + "--layout-effects-stop", + "--passive-effects-start-2", + "--component-passive-effect-unmount-start-ComponentWithEffects", + "--component-passive-effect-unmount-stop", + "--component-passive-effect-unmount-start-ComponentWithEffects", + "--component-passive-effect-unmount-stop", + "--component-passive-effect-unmount-start-ComponentWithEffects", + "--component-passive-effect-unmount-stop", + "--passive-effects-stop", + "--commit-stop", + ] + `); }); }); @@ -1048,21 +1041,21 @@ describe('Timeline profiler', () => { legacyRender(
); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-1", - "--render-start-1", - "--render-stop", - "--commit-start-1", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-render-1", + "--render-start-1", + "--render-stop", + "--commit-start-1", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-1", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); }); @@ -1079,10 +1072,10 @@ describe('Timeline profiler', () => { it('regression test DefaultLane', () => { modernRender(
); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-render-32", - ] - `); + [ + "--schedule-render-32", + ] + `); }); it('regression test InputDiscreteLane', async () => { @@ -1107,23 +1100,23 @@ describe('Timeline profiler', () => { await Promise.resolve(); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-state-update-2-App", - "--render-start-2", - "--component-render-start-App", - "--component-render-stop", - "--render-stop", - "--commit-start-2", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-2", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-state-update-2-App", + "--render-start-2", + "--component-render-start-App", + "--component-render-stop", + "--render-stop", + "--commit-start-2", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-2", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); it('regression test InputContinuousLane', async () => { @@ -1147,23 +1140,23 @@ describe('Timeline profiler', () => { await waitForAll([]); expect(clearedMarks).toMatchInlineSnapshot(` - [ - "--schedule-state-update-8-App", - "--render-start-8", - "--component-render-start-App", - "--component-render-stop", - "--render-stop", - "--commit-start-8", - "--react-version-", - "--profiler-version-1", - "--react-internal-module-start- at filtered (:0:0)", - "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", - "--layout-effects-start-8", - "--layout-effects-stop", - "--commit-stop", - ] - `); + [ + "--schedule-state-update-8-App", + "--render-start-8", + "--component-render-start-App", + "--component-render-stop", + "--render-stop", + "--commit-start-8", + "--react-version-", + "--profiler-version-1", + "--react-internal-module-start- at filtered (:0:0)", + "--react-internal-module-stop- at filtered (:1:1)", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred", + "--layout-effects-start-8", + "--layout-effects-stop", + "--commit-stop", + ] + `); }); }); }); @@ -1229,15 +1222,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000000001", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000000001", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + ] + `); }); // @reactVersion <= 18.2 @@ -1281,60 +1274,60 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "ErrorBoundary", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "ExampleThatThrows", - "duration": 0, - "timestamp": 20, - "type": "render", - "warning": null, - }, - { - "componentName": "ErrorBoundary", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "ErrorBoundary", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "ExampleThatThrows", + "duration": 0, + "timestamp": 20, + "type": "render", + "warning": null, + }, + { + "componentName": "ErrorBoundary", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000000001", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "ErrorBoundary", - "componentStack": " - in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000001", - "timestamp": 20, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000000001", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "ErrorBoundary", + "componentStack": " + in ErrorBoundary (at **)", + "lanes": "0b0000000000000000000000000000001", + "timestamp": 20, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); expect(timelineData.thrownErrors).toMatchInlineSnapshot(` - [ - { - "componentName": "ExampleThatThrows", - "message": "Expected error", - "phase": "mount", - "timestamp": 20, - "type": "thrown-error", - }, - ] - `); + [ + { + "componentName": "ExampleThatThrows", + "message": "Expected error", + "phase": "mount", + "timestamp": 20, + "type": "thrown-error", + }, + ] + `); }); // @reactVersion <= 18.2 @@ -1378,19 +1371,19 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - { - "componentName": "Example", - "depth": 0, - "duration": 10, - "id": "0", - "phase": "mount", - "promiseName": "", - "resolution": "resolved", - "timestamp": 10, - "type": "suspense", - "warning": null, - } - `); + { + "componentName": "Example", + "depth": 0, + "duration": 10, + "id": "0", + "phase": "mount", + "promiseName": "", + "resolution": "resolved", + "timestamp": 10, + "type": "suspense", + "warning": null, + } + `); // There should be two batches of renders: Suspeneded and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); @@ -1436,19 +1429,19 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - { - "componentName": "Example", - "depth": 0, - "duration": 10, - "id": "0", - "phase": "mount", - "promiseName": "", - "resolution": "rejected", - "timestamp": 10, - "type": "suspense", - "warning": null, - } - `); + { + "componentName": "Example", + "depth": 0, + "duration": 10, + "id": "0", + "phase": "mount", + "promiseName": "", + "resolution": "rejected", + "timestamp": 10, + "type": "suspense", + "warning": null, + } + `); // There should be two batches of renders: Suspeneded and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); @@ -1477,15 +1470,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + ] + `); }); it('should mark concurrent render without suspends or state updates', () => { @@ -1514,45 +1507,45 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000010000000", - "timestamp": 10, - "type": "schedule-state-update", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000010000000", + "timestamp": 10, + "type": "schedule-state-update", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 0, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 0, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); }); @@ -1621,19 +1614,19 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - { - "componentName": "Example", - "depth": 0, - "duration": 10, - "id": "0", - "phase": "mount", - "promiseName": "", - "resolution": "resolved", - "timestamp": 10, - "type": "suspense", - "warning": null, - } - `); + { + "componentName": "Example", + "depth": 0, + "duration": 10, + "id": "0", + "phase": "mount", + "promiseName": "", + "resolution": "resolved", + "timestamp": 10, + "type": "suspense", + "warning": null, + } + `); // There should be two batches of renders: Suspeneded and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); @@ -1678,19 +1671,19 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - { - "componentName": "Example", - "depth": 0, - "duration": 10, - "id": "0", - "phase": "mount", - "promiseName": "", - "resolution": "rejected", - "timestamp": 10, - "type": "suspense", - "warning": null, - } - `); + { + "componentName": "Example", + "depth": 0, + "duration": 10, + "id": "0", + "phase": "mount", + "promiseName": "", + "resolution": "rejected", + "timestamp": 10, + "type": "suspense", + "warning": null, + } + `); // There should be two batches of renders: Suspeneded and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); @@ -1717,42 +1710,42 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000000010", - "timestamp": 20, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000000010", + "timestamp": 20, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); it('should mark cascading class component force updates', async () => { @@ -1776,40 +1769,40 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "lanes": "0b0000000000000000000000000000010", - "timestamp": 20, - "type": "schedule-force-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "lanes": "0b0000000000000000000000000000010", + "timestamp": 20, + "type": "schedule-force-update", + "warning": null, + }, + ] + `); }); it('should mark render phase state updates for class component', async () => { @@ -1844,42 +1837,42 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); it('should mark render phase force updates for class component', async () => { @@ -1913,40 +1906,40 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 20, - "type": "schedule-force-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 20, + "type": "schedule-force-update", + "warning": null, + }, + ] + `); }); it('should mark cascading layout updates', async () => { @@ -1968,49 +1961,49 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 1, - "timestamp": 20, - "type": "layout-effect-mount", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 21, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 1, + "timestamp": 20, + "type": "layout-effect-mount", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 21, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000000010", - "timestamp": 21, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000000010", + "timestamp": 21, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); it('should mark cascading passive updates', async () => { @@ -2031,49 +2024,49 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "Example", - "duration": 1, - "timestamp": 20, - "type": "passive-effect-mount", - "warning": null, - }, - { - "componentName": "Example", - "duration": 10, - "timestamp": 21, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "Example", + "duration": 1, + "timestamp": 20, + "type": "passive-effect-mount", + "warning": null, + }, + { + "componentName": "Example", + "duration": 10, + "timestamp": 21, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 21, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 21, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); it('should mark render phase updates', async () => { @@ -2094,35 +2087,35 @@ describe('Timeline profiler', () => { // Render phase updates should be retried as part of the same batch. expect(timelineData.batchUIDToMeasuresMap.size).toBe(1); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "Example", - "duration": 20, - "timestamp": 10, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "Example", + "duration": 20, + "timestamp": 10, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Example", - "componentStack": " - in Example (at **)", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 20, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Example", + "componentStack": " + in Example (at **)", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 20, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); it('should mark concurrent render that throws', async () => { @@ -2166,81 +2159,81 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "ErrorBoundary", - "duration": 10, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "ExampleThatThrows", - "duration": 0, - "timestamp": 20, - "type": "render", - "warning": null, - }, - { - "componentName": "ErrorBoundary", - "duration": 10, - "timestamp": 20, - "type": "render", - "warning": null, - }, - { - "componentName": "ExampleThatThrows", - "duration": 0, - "timestamp": 30, - "type": "render", - "warning": null, - }, - { - "componentName": "ErrorBoundary", - "duration": 10, - "timestamp": 30, - "type": "render", - "warning": null, - }, - ] - `); + [ + { + "componentName": "ErrorBoundary", + "duration": 10, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "ExampleThatThrows", + "duration": 0, + "timestamp": 20, + "type": "render", + "warning": null, + }, + { + "componentName": "ErrorBoundary", + "duration": 10, + "timestamp": 20, + "type": "render", + "warning": null, + }, + { + "componentName": "ExampleThatThrows", + "duration": 0, + "timestamp": 30, + "type": "render", + "warning": null, + }, + { + "componentName": "ErrorBoundary", + "duration": 10, + "timestamp": 30, + "type": "render", + "warning": null, + }, + ] + `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "ErrorBoundary", - "componentStack": " - in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000010", - "timestamp": 30, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "ErrorBoundary", + "componentStack": " + in ErrorBoundary (at **)", + "lanes": "0b0000000000000000000000000000010", + "timestamp": 30, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); expect(timelineData.thrownErrors).toMatchInlineSnapshot(` - [ - { - "componentName": "ExampleThatThrows", - "message": "Expected error", - "phase": "mount", - "timestamp": 20, - "type": "thrown-error", - }, - { - "componentName": "ExampleThatThrows", - "message": "Expected error", - "phase": "mount", - "timestamp": 30, - "type": "thrown-error", - }, - ] - `); + [ + { + "componentName": "ExampleThatThrows", + "message": "Expected error", + "phase": "mount", + "timestamp": 20, + "type": "thrown-error", + }, + { + "componentName": "ExampleThatThrows", + "message": "Expected error", + "phase": "mount", + "timestamp": 30, + "type": "thrown-error", + }, + ] + `); }); it('should mark passive and layout effects', async () => { @@ -2307,174 +2300,174 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - [ - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "render", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "layout-effect-mount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "layout-effect-mount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-mount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-mount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-mount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "layout-effect-unmount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "layout-effect-unmount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-unmount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-unmount", - "warning": null, - }, - { - "componentName": "ComponentWithEffects", - "duration": 0, - "timestamp": 10, - "type": "passive-effect-unmount", - "warning": null, - }, - ] - `); + [ + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "render", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "layout-effect-mount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "layout-effect-mount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-mount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-mount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-mount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "layout-effect-unmount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "layout-effect-unmount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-unmount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-unmount", + "warning": null, + }, + { + "componentName": "ComponentWithEffects", + "duration": 0, + "timestamp": 10, + "type": "passive-effect-unmount", + "warning": null, + }, + ] + `); expect(timelineData.batchUIDToMeasuresMap).toMatchInlineSnapshot(` - Map { - 1 => [ - { - "batchUID": 1, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "render-idle", - }, - { - "batchUID": 1, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "render", - }, - { - "batchUID": 1, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "commit", - }, - { - "batchUID": 1, - "depth": 1, - "duration": 0, - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "layout-effects", - }, - { - "batchUID": 1, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "passive-effects", - }, - ], - 2 => [ - { - "batchUID": 2, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000000010", - "timestamp": 10, - "type": "render-idle", - }, - { - "batchUID": 2, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000000010", - "timestamp": 10, - "type": "render", - }, - { - "batchUID": 2, - "depth": 0, - "duration": 0, - "lanes": "0b0000000000000000000000000000010", - "timestamp": 10, - "type": "commit", - }, - { - "batchUID": 2, - "depth": 1, - "duration": 0, - "lanes": "0b0000000000000000000000000000010", - "timestamp": 10, - "type": "layout-effects", - }, - { - "batchUID": 2, - "depth": 1, - "duration": 0, - "lanes": "0b0000000000000000000000000000010", - "timestamp": 10, - "type": "passive-effects", - }, - ], - } - `); + Map { + 1 => [ + { + "batchUID": 1, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "render-idle", + }, + { + "batchUID": 1, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "render", + }, + { + "batchUID": 1, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "commit", + }, + { + "batchUID": 1, + "depth": 1, + "duration": 0, + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "layout-effects", + }, + { + "batchUID": 1, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "passive-effects", + }, + ], + 2 => [ + { + "batchUID": 2, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000000010", + "timestamp": 10, + "type": "render-idle", + }, + { + "batchUID": 2, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000000010", + "timestamp": 10, + "type": "render", + }, + { + "batchUID": 2, + "depth": 0, + "duration": 0, + "lanes": "0b0000000000000000000000000000010", + "timestamp": 10, + "type": "commit", + }, + { + "batchUID": 2, + "depth": 1, + "duration": 0, + "lanes": "0b0000000000000000000000000000010", + "timestamp": 10, + "type": "layout-effects", + }, + { + "batchUID": 2, + "depth": 1, + "duration": 0, + "lanes": "0b0000000000000000000000000000010", + "timestamp": 10, + "type": "passive-effects", + }, + ], + } + `); }); it('should generate component stacks for state update', async () => { @@ -2502,25 +2495,25 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - [ - { - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-render", - "warning": null, - }, - { - "componentName": "Child", - "componentStack": " - in Child (at **) - in CommponentWithChildren (at **)", - "lanes": "0b0000000000000000000000000100000", - "timestamp": 10, - "type": "schedule-state-update", - "warning": null, - }, - ] - `); + [ + { + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-render", + "warning": null, + }, + { + "componentName": "Child", + "componentStack": " + in Child (at **) + in CommponentWithChildren (at **)", + "lanes": "0b0000000000000000000000000100000", + "timestamp": 10, + "type": "schedule-state-update", + "warning": null, + }, + ] + `); }); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index c7edb766a24b..bf6b260ffbc8 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -1792,7 +1792,7 @@ describe('Timeline profiler', () => { testMarks.push(...createUserTimingData(clearedMarks)); const data = await preprocessData(testMarks); - expect(data.thrownErrors).toHaveLength(2); + expect(data.thrownErrors).toHaveLength(1); expect(data.thrownErrors[0].message).toMatchInlineSnapshot( '"Expected error"', ); diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index 4630f9ddbc16..62d2f6283b59 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -1186,8 +1186,6 @@ describe('ReactCompositeComponent', () => { }).toErrorDev([ 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + 'did you accidentally return an object from the constructor?', - 'Warning: No `render` method found on the RenderTextInvalidConstructor instance: ' + - 'did you accidentally return an object from the constructor?', ]); }); @@ -1226,8 +1224,6 @@ describe('ReactCompositeComponent', () => { }).toErrorDev([ 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + 'you may have forgotten to define `render`.', - 'Warning: No `render` method found on the RenderTestUndefinedRender instance: ' + - 'you may have forgotten to define `render`.', ]); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js index eac858697f57..8ae27c3b0fcc 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js @@ -1297,9 +1297,6 @@ describe('ReactDOMSelect', () => { 'Form field values (value, checked, defaultValue, or defaultChecked props)' + ' must be strings, not TemporalLike. ' + 'This value must be coerced to a string before using it here.', - 'Form field values (value, checked, defaultValue, or defaultChecked props)' + - ' must be strings, not TemporalLike. ' + - 'This value must be coerced to a string before using it here.', ]); }); @@ -1323,8 +1320,6 @@ describe('ReactDOMSelect', () => { }).toErrorDev([ 'The provided `value` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', - 'The provided `value` attribute is an unsupported type TemporalLike.' + - ' This value must be coerced to a string before using it here.', ]); }); @@ -1349,8 +1344,6 @@ describe('ReactDOMSelect', () => { }).toErrorDev([ 'The provided `value` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', - 'The provided `value` attribute is an unsupported type TemporalLike.' + - ' This value must be coerced to a string before using it here.', ]); }); @@ -1483,9 +1476,6 @@ describe('ReactDOMSelect', () => { 'Form field values (value, checked, defaultValue, or defaultChecked props)' + ' must be strings, not TemporalLike. ' + 'This value must be coerced to a string before using it here.', - 'Form field values (value, checked, defaultValue, or defaultChecked props)' + - ' must be strings, not TemporalLike. ' + - 'This value must be coerced to a string before using it here.', ]); }); @@ -1510,8 +1500,6 @@ describe('ReactDOMSelect', () => { }).toErrorDev([ 'The provided `value` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', - 'The provided `value` attribute is an unsupported type TemporalLike.' + - ' This value must be coerced to a string before using it here.', ]); }); @@ -1535,8 +1523,6 @@ describe('ReactDOMSelect', () => { }).toErrorDev([ 'The provided `value` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', - 'The provided `value` attribute is an unsupported type TemporalLike.' + - ' This value must be coerced to a string before using it here.', ]); }); @@ -1571,9 +1557,6 @@ describe('ReactDOMSelect', () => { 'Form field values (value, checked, defaultValue, or defaultChecked props)' + ' must be strings, not TemporalLike. ' + 'This value must be coerced to a string before using it here.', - 'Form field values (value, checked, defaultValue, or defaultChecked props)' + - ' must be strings, not TemporalLike. ' + - 'This value must be coerced to a string before using it here.', ]); }); @@ -1610,8 +1593,6 @@ describe('ReactDOMSelect', () => { }).toErrorDev([ 'The provided `value` attribute is an unsupported type TemporalLike.' + ' This value must be coerced to a string before using it here.', - 'The provided `value` attribute is an unsupported type TemporalLike.' + - ' This value must be coerced to a string before using it here.', ]); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js index db7cb1bf6268..e0b0b7b41c9e 100644 --- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js @@ -672,7 +672,6 @@ describe('ReactDOMTextarea', () => { }).rejects.toThrow('