diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index a09b4e54de4ca..acffea6a42c45 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,32 @@ 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-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 +355,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 +382,35 @@ 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-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 +439,35 @@ 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-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 +496,48 @@ 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-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-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 +553,48 @@ 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-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-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 +611,10 @@ describe('Timeline profiler', () => {
modernRender();
expect(clearedMarks).toMatchInlineSnapshot(`
- [
- "--schedule-render-32",
- ]
- `);
+ [
+ "--schedule-render-32",
+ ]
+ `);
clearPendingMarks();
@@ -617,23 +631,25 @@ 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-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 +667,10 @@ describe('Timeline profiler', () => {
modernRender();
expect(clearedMarks).toMatchInlineSnapshot(`
- [
- "--schedule-render-32",
- ]
- `);
+ [
+ "--schedule-render-32",
+ ]
+ `);
clearPendingMarks();
@@ -671,23 +687,25 @@ 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-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 +720,50 @@ 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-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-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 +780,43 @@ 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-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-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 +833,26 @@ 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-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 +883,58 @@ 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",
+ "--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-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-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 +982,29 @@ 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-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 +1015,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 +1042,35 @@ 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-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 +1084,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 +1115,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 +1143,25 @@ 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-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 +1185,25 @@ 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-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 +1269,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 +1321,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 +1418,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 +1476,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 +1517,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 +1554,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 +1661,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 +1718,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 +1757,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 +1816,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 +1884,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 +1953,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 +2008,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 +2071,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 +2134,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 +2206,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 +2347,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 +2542,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 c7edb766a24b6..f3e29a23cffd8 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -841,9 +841,9 @@ describe('Timeline profiler', () => {
{
"batchUID": 0,
"depth": 0,
- "duration": 0.012,
+ "duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.006,
+ "timestamp": 0.008,
"type": "render-idle",
},
{
@@ -851,15 +851,15 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.006,
+ "timestamp": 0.008,
"type": "render",
},
{
"batchUID": 0,
"depth": 0,
- "duration": 0.008,
+ "duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.01,
+ "timestamp": 0.012,
"type": "commit",
},
{
@@ -867,7 +867,7 @@ describe('Timeline profiler', () => {
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.016,
+ "timestamp": 0.02,
"type": "layout-effects",
},
{
@@ -875,7 +875,7 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.019,
+ "timestamp": 0.023,
"type": "passive-effects",
},
],
@@ -883,9 +883,9 @@ describe('Timeline profiler', () => {
{
"batchUID": 1,
"depth": 0,
- "duration": 0.012,
+ "duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.024,
+ "timestamp": 0.028,
"type": "render-idle",
},
{
@@ -893,15 +893,15 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.024,
+ "timestamp": 0.028,
"type": "render",
},
{
"batchUID": 1,
"depth": 0,
- "duration": 0.008,
+ "duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.028,
+ "timestamp": 0.032,
"type": "commit",
},
{
@@ -909,7 +909,7 @@ describe('Timeline profiler', () => {
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.034,
+ "timestamp": 0.04,
"type": "layout-effects",
},
{
@@ -917,7 +917,7 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.037,
+ "timestamp": 0.043,
"type": "passive-effects",
},
],
@@ -926,33 +926,33 @@ describe('Timeline profiler', () => {
{
"componentName": "App",
"duration": 0.001,
- "timestamp": 0.007,
+ "timestamp": 0.009,
"type": "render",
"warning": null,
},
{
"componentName": "App",
"duration": 0.002,
- "timestamp": 0.02,
+ "timestamp": 0.024,
"type": "passive-effect-mount",
"warning": null,
},
{
"componentName": "App",
"duration": 0.001,
- "timestamp": 0.025,
+ "timestamp": 0.029,
"type": "render",
"warning": null,
},
{
"componentName": "App",
"duration": 0.001,
- "timestamp": 0.038,
+ "timestamp": 0.044,
"type": "passive-effect-mount",
"warning": null,
},
],
- "duration": 0.04,
+ "duration": 0.046,
"flamechart": [],
"internalModuleSourceToRanges": Map {
undefined => [
@@ -1015,9 +1015,9 @@ describe('Timeline profiler', () => {
{
"batchUID": 0,
"depth": 0,
- "duration": 0.012,
+ "duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.006,
+ "timestamp": 0.008,
"type": "render-idle",
},
{
@@ -1025,15 +1025,15 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.006,
+ "timestamp": 0.008,
"type": "render",
},
{
"batchUID": 0,
"depth": 0,
- "duration": 0.008,
+ "duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.01,
+ "timestamp": 0.012,
"type": "commit",
},
{
@@ -1041,7 +1041,7 @@ describe('Timeline profiler', () => {
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.016,
+ "timestamp": 0.02,
"type": "layout-effects",
},
{
@@ -1049,15 +1049,15 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.019,
+ "timestamp": 0.023,
"type": "passive-effects",
},
{
"batchUID": 1,
"depth": 0,
- "duration": 0.012,
+ "duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.024,
+ "timestamp": 0.028,
"type": "render-idle",
},
{
@@ -1065,15 +1065,15 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.024,
+ "timestamp": 0.028,
"type": "render",
},
{
"batchUID": 1,
"depth": 0,
- "duration": 0.008,
+ "duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.028,
+ "timestamp": 0.032,
"type": "commit",
},
{
@@ -1081,7 +1081,7 @@ describe('Timeline profiler', () => {
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.034,
+ "timestamp": 0.04,
"type": "layout-effects",
},
{
@@ -1089,7 +1089,7 @@ describe('Timeline profiler', () => {
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.037,
+ "timestamp": 0.043,
"type": "passive-effects",
},
],
@@ -1126,14 +1126,14 @@ describe('Timeline profiler', () => {
"schedulingEvents": [
{
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.005,
+ "timestamp": 0.007,
"type": "schedule-render",
"warning": null,
},
{
"componentName": "App",
"lanes": "0b0000000000000000000000000000101",
- "timestamp": 0.021,
+ "timestamp": 0.025,
"type": "schedule-state-update",
"warning": null,
},
diff --git a/packages/react-devtools-shell/src/e2e-regression/app.js b/packages/react-devtools-shell/src/e2e-regression/app.js
index a2b4eb735cced..d0210d323570d 100644
--- a/packages/react-devtools-shell/src/e2e-regression/app.js
+++ b/packages/react-devtools-shell/src/e2e-regression/app.js
@@ -3,8 +3,7 @@
// This test harness mounts each test app as a separate root to test multi-root applications.
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
import ListApp from '../e2e-apps/ListApp';
function mountApp(App: () => React$Node) {
@@ -12,7 +11,7 @@ function mountApp(App: () => React$Node) {
((document.body: any): HTMLBodyElement).appendChild(container);
- const root = createRoot(container);
+ const root = ReactDOMClient.createRoot(container);
root.render();
}
function mountTestApp() {
@@ -27,5 +26,5 @@ window.parent.REACT_DOM_APP = {
createTestNameSelector: name => `[data-testname="${name}"]`,
findAllNodes: (container, nodes) =>
container.querySelectorAll(nodes.join(' ')),
- ...ReactDOM,
+ ...ReactDOMClient,
};
diff --git a/packages/react-devtools-shell/src/e2e-regression/devtools.js b/packages/react-devtools-shell/src/e2e-regression/devtools.js
index 4e560b584e657..6e9ada823ca47 100644
--- a/packages/react-devtools-shell/src/e2e-regression/devtools.js
+++ b/packages/react-devtools-shell/src/e2e-regression/devtools.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
import {
activate as activateBackend,
initialize as initializeBackend,
@@ -32,7 +32,7 @@ function init(appIframe, devtoolsContainer, appSource) {
const DevTools = createDevTools(contentWindow);
inject(contentDocument, appSource, () => {
- createRoot(devtoolsContainer).render(
+ ReactDOMClient.createRoot(devtoolsContainer).render(
);
// ReactDOM Test Selector APIs used by Playwright e2e tests
-window.parent.REACT_DOM_APP = ReactDOM;
+window.parent.REACT_DOM_APP = ReactDOMClient;
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 542443855d89c..89bc2b57f99c8 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -8,8 +8,7 @@
*/
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {createRoot} from 'react-dom/client';
+import * as ReactDOMClient from 'react-dom/client';
import {
activate as activateBackend,
initialize as initializeBackend,
@@ -41,7 +40,7 @@ function init(appIframe, devtoolsContainer, appSource) {
const DevTools = createDevTools(contentWindow);
inject(contentDocument, appSource, () => {
- createRoot(devtoolsContainer).render(
+ ReactDOMClient.createRoot(devtoolsContainer).render(
({
},
});
+const clientAsSeparateBuild = semver.gte(REACT_VERSION, '19.0.0');
+
const app = makeConfig(
{
'app-index': './src/app/index.js',
@@ -142,8 +144,14 @@ const app = makeConfig(
react: resolve(builtModulesDir, 'react'),
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
'react-devtools-feature-flags': resolveFeatureFlags('shell'),
- 'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
- 'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+ 'react-dom/client': resolve(
+ builtModulesDir,
+ clientAsSeparateBuild ? 'react-dom/unstable_testing' : 'react-dom/client',
+ ),
+ 'react-dom': resolve(
+ builtModulesDir,
+ clientAsSeparateBuild ? 'react-dom' : 'react-dom/unstable_testing',
+ ),
'react-is': resolve(builtModulesDir, 'react-is'),
scheduler: resolve(builtModulesDir, 'scheduler'),
},