{"parents":["2ed58eb889b2b2a8a745ec6c73785f8a87034d1f"],"files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/__serializers__\/profilingSerializer.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/__serializers__\/timelineDataSerializer.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/preprocessData-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/store-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/__tests__\/utils.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/profilingHooks.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/constants.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/store.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/NoProfilingData.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProcessingData.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.css","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingNotSupported.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/RecordingInProgress.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/CanvasPage.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/EventTooltip.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/ImportButton.css","status":"D"},{"path":"packages\/react-devtools-timeline\/src\/ImportButton.js","status":"D"},{"path":"packages\/react-devtools-timeline\/src\/Timeline.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/TimelineContext.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/TimelineNotSupported.css","status":"A"},{"path":"packages\/react-devtools-timeline\/src\/TimelineNotSupported.js","status":"A"},{"path":"packages\/react-devtools-timeline\/src\/TimelineSearchContext.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/ComponentMeasuresView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/NativeEventsView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/NetworkMeasuresView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/ReactMeasuresView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/SchedulingEventsView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/SnapshotsView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/SuspenseEventsView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/content-views\/ThrownErrorsView.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/createDataResourceFromImportedFile.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/import-worker\/index.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/import-worker\/preprocessData.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/timelineCache.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/types.js","status":"M"},{"path":"packages\/react-devtools-timeline\/src\/utils\/getBatchRange.js","status":"M"},{"path":"scripts\/jest\/config.build-devtools.js","status":"M"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\nindex 1a369acca2..f010261a61 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/TimelineProfiler-test.js\n@@ -15,72 +15,10 @@ describe('Timeline profiler', () => {\n let Scheduler;\n let renderHelper;\n let renderRootHelper;\n+ let store;\n let unmountFns;\n let utils;\n \n- let clearedMarks;\n- let featureDetectionMarkName = null;\n- let marks;\n- let setPerformanceMock;\n-\n- function createUserTimingPolyfill() {\n- featureDetectionMarkName = null;\n-\n- clearedMarks = [];\n- marks = [];\n-\n- \/\/ Remove file-system specific bits or version-specific bits of information from the module range marks.\n- function filterMarkData(markName) {\n- if (markName.startsWith('--react-internal-module-start')) {\n- return `${markName.substr(0, 29)}-`;\n- } else if (markName.startsWith('--react-internal-module-stop')) {\n- return `${markName.substr(0, 28)}-`;\n- } else if (markName.startsWith('--react-version')) {\n- return `${markName.substr(0, 15)}-`;\n- } else {\n- return markName;\n- }\n- }\n-\n- \/\/ This is not a true polyfill, but it gives us enough to capture marks.\n- \/\/ Reference: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/User_Timing_API\n- return {\n- clearMarks(markName) {\n- markName = filterMarkData(markName);\n-\n- clearedMarks.push(markName);\n- marks = marks.filter(mark => mark !== markName);\n- },\n- mark(markName, markOptions) {\n- markName = filterMarkData(markName);\n-\n- if (featureDetectionMarkName === null) {\n- featureDetectionMarkName = markName;\n- }\n-\n- marks.push(markName);\n-\n- if (markOptions != null) {\n- \/\/ This is triggers the feature detection.\n- markOptions.startTime++;\n- }\n- },\n- };\n- }\n-\n- function clearPendingMarks() {\n- clearedMarks.splice(0);\n- }\n-\n- function dispatchAndSetCurrentEvent(element, event) {\n- try {\n- window.event = event;\n- element.dispatchEvent(event);\n- } finally {\n- window.event = undefined;\n- }\n- }\n-\n beforeEach(() => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n@@ -104,1021 +42,2376 @@ describe('Timeline profiler', () => {\n ReactDOM = require('react-dom');\n Scheduler = require('scheduler');\n \n- setPerformanceMock = require('react-devtools-shared\/src\/backend\/profilingHooks')\n- .setPerformanceMock_ONLY_FOR_TESTING;\n- setPerformanceMock(createUserTimingPolyfill());\n- });\n-\n- afterEach(() => {\n- \/\/ Verify all logged marks also get cleared.\n- expect(marks).toHaveLength(0);\n-\n- unmountFns.forEach(unmountFn => unmountFn());\n-\n- setPerformanceMock(null);\n+ store = global.store;\n });\n \n- it('should mark sync render without suspends or state updates', () => {\n- renderHelper(

);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-1\",\n- \"--render-start-1\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-1\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ describe('User Timing API', () => {\n+ let clearedMarks;\n+ let featureDetectionMarkName = null;\n+ let marks;\n+ let setPerformanceMock;\n+\n+ function createUserTimingPolyfill() {\n+ featureDetectionMarkName = null;\n+\n+ clearedMarks = [];\n+ marks = [];\n+\n+ \/\/ Remove file-system specific bits or version-specific bits of information from the module range marks.\n+ function filterMarkData(markName) {\n+ if (markName.startsWith('--react-internal-module-start')) {\n+ return '--react-internal-module-start- at filtered (:0:0)';\n+ } else if (markName.startsWith('--react-internal-module-stop')) {\n+ return '--react-internal-module-stop- at filtered (:1:1)';\n+ } else if (markName.startsWith('--react-version')) {\n+ return '--react-version-';\n+ } else {\n+ return markName;\n+ }\n+ }\n \n- it('should mark concurrent render without suspends or state updates', () => {\n- renderRootHelper(

);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ \/\/ This is not a true polyfill, but it gives us enough to capture marks.\n+ \/\/ Reference: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/User_Timing_API\n+ return {\n+ clearMarks(markName) {\n+ markName = filterMarkData(markName);\n+\n+ clearedMarks.push(markName);\n+ marks = marks.filter(mark => mark !== markName);\n+ },\n+ mark(markName, markOptions) {\n+ markName = filterMarkData(markName);\n+\n+ if (featureDetectionMarkName === null) {\n+ featureDetectionMarkName = markName;\n+ }\n+\n+ marks.push(markName);\n+\n+ if (markOptions != null) {\n+ \/\/ This is triggers the feature detection.\n+ markOptions.startTime++;\n+ }\n+ },\n+ };\n+ }\n \n- it('should mark render yields', async () => {\n- function Bar() {\n- Scheduler.unstable_yieldValue('Bar');\n- return null;\n+ function clearPendingMarks() {\n+ clearedMarks.splice(0);\n }\n \n- function Foo() {\n- Scheduler.unstable_yieldValue('Foo');\n- return ;\n+ function dispatchAndSetCurrentEvent(element, event) {\n+ try {\n+ window.event = event;\n+ element.dispatchEvent(event);\n+ } finally {\n+ window.event = undefined;\n+ }\n }\n \n- React.startTransition(() => {\n- renderRootHelper();\n+ beforeEach(() => {\n+ setPerformanceMock = require('react-devtools-shared\/src\/backend\/profilingHooks')\n+ .setPerformanceMock_ONLY_FOR_TESTING;\n+ setPerformanceMock(createUserTimingPolyfill());\n });\n \n- \/\/ Do one step of work.\n- expect(Scheduler).toFlushAndYieldThrough(['Foo']);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-64\",\n- \"--render-start-64\",\n- \"--component-render-start-Foo\",\n- \"--component-render-stop\",\n- \"--render-yield\",\n- ]\n- `);\n- });\n+ afterEach(() => {\n+ \/\/ Verify all logged marks also get cleared.\n+ expect(marks).toHaveLength(0);\n \n- it('should mark sync render with suspense that resolves', async () => {\n- const fakeSuspensePromise = Promise.resolve(true);\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ unmountFns.forEach(unmountFn => unmountFn());\n+\n+ setPerformanceMock(null);\n+ });\n+\n+ it('should mark sync render without suspends or state updates', () => {\n+ renderHelper(

);\n \n- renderHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-1\",\n- \"--render-start-1\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-1-\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-1\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- await fakeSuspensePromise;\n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--suspense-resolved-0-Example\",\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-1\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n- });\n-\n- it('should mark sync render with suspense that rejects', async () => {\n- const fakeSuspensePromise = Promise.reject(new Error('error'));\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ `);\n+ });\n \n- renderHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-1\",\n- \"--render-start-1\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-1-\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-1\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- await expect(fakeSuspensePromise).rejects.toThrow();\n- expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);\n- });\n+ it('should mark concurrent render without suspends or state updates', () => {\n+ renderRootHelper(

);\n \n- it('should mark concurrent render with suspense that resolves', async () => {\n- const fakeSuspensePromise = Promise.resolve(true);\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n \n- renderRootHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-16-\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- await fakeSuspensePromise;\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--suspense-resolved-0-Example\",\n- ]\n- `);\n- });\n+ clearPendingMarks();\n \n- it('should mark concurrent render with suspense that rejects', async () => {\n- const fakeSuspensePromise = Promise.reject(new Error('error'));\n- function Example() {\n- throw fakeSuspensePromise;\n- }\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n \n- renderRootHelper(\n- \n- \n- <\/React.Suspense>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--suspense-suspend-0-Example-mount-16-\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- await expect(fakeSuspensePromise).rejects.toThrow();\n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--suspense-rejected-0-Example\",\n+ \"--render-start-16\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n- });\n+ `);\n+ });\n \n- it('should mark cascading class component state updates', () => {\n- class Example extends React.Component {\n- state = {didMount: false};\n- componentDidMount() {\n- this.setState({didMount: true});\n- }\n- render() {\n+ it('should mark render yields', async () => {\n+ function Bar() {\n+ Scheduler.unstable_yieldValue('Bar');\n return null;\n }\n- }\n-\n- renderRootHelper();\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--schedule-state-update-1-Example\",\n- \"--layout-effects-stop\",\n- \"--render-start-1\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n \n- it('should mark cascading class component force updates', () => {\n- class Example extends React.Component {\n- componentDidMount() {\n- this.forceUpdate();\n- }\n- render() {\n- return null;\n+ function Foo() {\n+ Scheduler.unstable_yieldValue('Foo');\n+ return ;\n }\n- }\n \n- renderRootHelper();\n+ React.startTransition(() => {\n+ renderRootHelper();\n+ });\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--schedule-forced-update-1-Example\",\n- \"--layout-effects-stop\",\n- \"--render-start-1\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ \/\/ Do one step of work.\n+ expect(Scheduler).toFlushAndYieldThrough(['Foo']);\n \n- it('should mark render phase state updates for class component', () => {\n- class Example extends React.Component {\n- state = {didRender: false};\n- render() {\n- if (this.state.didRender === false) {\n- this.setState({didRender: true});\n- }\n- return null;\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-64\",\n+ \"--render-start-64\",\n+ \"--component-render-start-Foo\",\n+ \"--component-render-stop\",\n+ \"--render-yield\",\n+ ]\n+ `);\n+ });\n+\n+ it('should mark sync render with suspense that resolves', async () => {\n+ const fakeSuspensePromise = Promise.resolve(true);\n+ function Example() {\n+ throw fakeSuspensePromise;\n }\n- }\n \n- renderRootHelper();\n+ renderHelper(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--schedule-render-16\",\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-1-\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-1\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n+ `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- let errorMessage;\n- spyOn(console, 'error').and.callFake(message => {\n- errorMessage = message;\n+ await fakeSuspensePromise;\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--suspense-resolved-0-Example\",\n+ ]\n+ `);\n });\n \n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(console.error).toHaveBeenCalledTimes(1);\n- expect(errorMessage).toContain(\n- 'Cannot update during an existing state transition',\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--schedule-state-update-16-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n-\n- it('should mark render phase force updates for class component', () => {\n- class Example extends React.Component {\n- state = {didRender: false};\n- render() {\n- if (this.state.didRender === false) {\n- this.forceUpdate(() => this.setState({didRender: true}));\n- }\n- return null;\n+ it('should mark sync render with suspense that rejects', async () => {\n+ const fakeSuspensePromise = Promise.reject(new Error('error'));\n+ function Example() {\n+ throw fakeSuspensePromise;\n }\n- }\n \n- renderRootHelper();\n+ renderHelper(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--schedule-render-16\",\n+ \"--schedule-render-1\",\n+ \"--render-start-1\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-1-\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-1\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n+ `);\n \n- clearPendingMarks();\n+ clearPendingMarks();\n \n- let errorMessage;\n- spyOn(console, 'error').and.callFake(message => {\n- errorMessage = message;\n+ await expect(fakeSuspensePromise).rejects.toThrow();\n+ expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);\n });\n \n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(console.error).toHaveBeenCalledTimes(1);\n- expect(errorMessage).toContain(\n- 'Cannot update during an existing state transition',\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--schedule-forced-update-16-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ it('should mark concurrent render with suspense that resolves', async () => {\n+ const fakeSuspensePromise = Promise.resolve(true);\n+ function Example() {\n+ throw fakeSuspensePromise;\n+ }\n \n- it('should mark cascading layout updates', () => {\n- function Example() {\n- const [didMount, setDidMount] = React.useState(false);\n- React.useLayoutEffect(() => {\n- setDidMount(true);\n- }, []);\n- return didMount;\n- }\n+ renderRootHelper(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n+\n+ clearPendingMarks();\n \n- renderRootHelper();\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--schedule-render-16\",\n+ \"--render-start-16\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-16-\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--component-layout-effect-mount-start-Example\",\n- \"--schedule-state-update-1-Example\",\n- \"--component-layout-effect-mount-stop\",\n- \"--layout-effects-stop\",\n- \"--render-start-1\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ `);\n \n- \/\/ This test is coupled to lane implementation details, so I'm disabling it in\n- \/\/ the new fork until it stabilizes so we don't have to repeatedly update it.\n- it('should mark cascading passive updates', () => {\n- function Example() {\n- const [didMount, setDidMount] = React.useState(false);\n- React.useEffect(() => {\n- setDidMount(true);\n- }, []);\n- return didMount;\n- }\n+ clearPendingMarks();\n \n- renderRootHelper();\n-\n- expect(Scheduler).toFlushAndYield([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- \"--passive-effects-start-16\",\n- \"--component-passive-effect-mount-start-Example\",\n- \"--schedule-state-update-16-Example\",\n- \"--component-passive-effect-mount-stop\",\n- \"--passive-effects-stop\",\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ await fakeSuspensePromise;\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--suspense-resolved-0-Example\",\n+ ]\n+ `);\n+ });\n \n- it('should mark render phase updates', () => {\n- function Example() {\n- const [didRender, setDidRender] = React.useState(false);\n- if (!didRender) {\n- setDidRender(true);\n+ it('should mark concurrent render with suspense that rejects', async () => {\n+ const fakeSuspensePromise = Promise.reject(new Error('error'));\n+ function Example() {\n+ throw fakeSuspensePromise;\n }\n- return didRender;\n- }\n \n- renderRootHelper();\n-\n- expect(Scheduler).toFlushAndYield([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- \"--render-start-16\",\n- \"--component-render-start-Example\",\n- \"--schedule-state-update-16-Example\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ renderRootHelper(\n+ \n+ \n+ <\/React.Suspense>,\n+ );\n \n- it('should mark sync render that throws', async () => {\n- spyOn(console, 'error');\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n \n- class ErrorBoundary extends React.Component {\n- state = {error: null};\n- componentDidCatch(error) {\n- this.setState({error});\n- }\n- render() {\n- if (this.state.error) {\n- return null;\n- }\n- return this.props.children;\n- }\n- }\n+ clearPendingMarks();\n \n- function ExampleThatThrows() {\n- throw Error('Expected error');\n- }\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n \n- renderHelper(\n- \n- \n- <\/ErrorBoundary>,\n- );\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-1\",\n- \"--render-start-1\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-stop\",\n- \"--error-ExampleThatThrows-mount-Expected error\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-1\",\n- \"--schedule-state-update-1-ErrorBoundary\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- \"--render-start-1\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--render-start-16\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--suspense-suspend-0-Example-mount-16-\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n+ ]\n+ `);\n \n- it('should mark concurrent render that throws', async () => {\n- spyOn(console, 'error');\n+ clearPendingMarks();\n \n- class ErrorBoundary extends React.Component {\n- state = {error: null};\n- componentDidCatch(error) {\n- this.setState({error});\n- }\n- render() {\n- if (this.state.error) {\n+ await expect(fakeSuspensePromise).rejects.toThrow();\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--suspense-rejected-0-Example\",\n+ ]\n+ `);\n+ });\n+\n+ it('should mark cascading class component state updates', () => {\n+ class Example extends React.Component {\n+ state = {didMount: false};\n+ componentDidMount() {\n+ this.setState({didMount: true});\n+ }\n+ render() {\n return null;\n }\n- return this.props.children;\n }\n- }\n \n- function ExampleThatThrows() {\n- \/\/ eslint-disable-next-line no-throw-literal\n- throw 'Expected error';\n- }\n+ renderRootHelper();\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n+\n+ clearPendingMarks();\n \n- renderRootHelper(\n- \n- \n- <\/ErrorBoundary>,\n- );\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n \n- expect(clearedMarks).toMatchInlineSnapshot(`\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--schedule-render-16\",\n+ \"--render-start-16\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--schedule-state-update-1-Example\",\n+ \"--layout-effects-stop\",\n+ \"--render-start-1\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--render-stop\",\n+ \"--commit-start-1\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--commit-stop\",\n+ \"--commit-stop\",\n ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushUntilNextPaint([]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--render-start-16\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-stop\",\n- \"--error-ExampleThatThrows-mount-Expected error\",\n- \"--render-stop\",\n- \"--render-start-16\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-start-ExampleThatThrows\",\n- \"--component-render-stop\",\n- \"--error-ExampleThatThrows-mount-Expected error\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--schedule-state-update-1-ErrorBoundary\",\n- \"--layout-effects-stop\",\n- \"--render-start-1\",\n- \"--component-render-start-ErrorBoundary\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--commit-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ `);\n+ });\n \n- it('should mark passive and layout effects', async () => {\n- function ComponentWithEffects() {\n- React.useLayoutEffect(() => {\n- Scheduler.unstable_yieldValue('layout 1 mount');\n- return () => {\n- Scheduler.unstable_yieldValue('layout 1 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.unstable_yieldValue('passive 1 mount');\n- return () => {\n- Scheduler.unstable_yieldValue('passive 1 unmount');\n- };\n- }, []);\n-\n- React.useLayoutEffect(() => {\n- Scheduler.unstable_yieldValue('layout 2 mount');\n- return () => {\n- Scheduler.unstable_yieldValue('layout 2 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.unstable_yieldValue('passive 2 mount');\n- return () => {\n- Scheduler.unstable_yieldValue('passive 2 unmount');\n- };\n- }, []);\n-\n- React.useEffect(() => {\n- Scheduler.unstable_yieldValue('passive 3 mount');\n- return () => {\n- Scheduler.unstable_yieldValue('passive 3 unmount');\n- };\n- }, []);\n-\n- return null;\n- }\n+ it('should mark cascading class component force updates', () => {\n+ class Example extends React.Component {\n+ componentDidMount() {\n+ this.forceUpdate();\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n \n- const unmount = renderRootHelper();\n-\n- expect(Scheduler).toFlushUntilNextPaint([\n- 'layout 1 mount',\n- 'layout 2 mount',\n- ]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- \"--render-start-16\",\n- \"--component-render-start-ComponentWithEffects\",\n- \"--component-render-stop\",\n- \"--render-stop\",\n- \"--commit-start-16\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--layout-effects-start-16\",\n- \"--component-layout-effect-mount-start-ComponentWithEffects\",\n- \"--component-layout-effect-mount-stop\",\n- \"--component-layout-effect-mount-start-ComponentWithEffects\",\n- \"--component-layout-effect-mount-stop\",\n- \"--layout-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushAndYield([\n- 'passive 1 mount',\n- 'passive 2 mount',\n- 'passive 3 mount',\n- ]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--passive-effects-start-16\",\n- \"--component-passive-effect-mount-start-ComponentWithEffects\",\n- \"--component-passive-effect-mount-stop\",\n- \"--component-passive-effect-mount-start-ComponentWithEffects\",\n- \"--component-passive-effect-mount-stop\",\n- \"--component-passive-effect-mount-start-ComponentWithEffects\",\n- \"--component-passive-effect-mount-stop\",\n- \"--passive-effects-stop\",\n- ]\n- `);\n-\n- clearPendingMarks();\n-\n- expect(Scheduler).toFlushAndYield([]);\n-\n- unmount();\n-\n- expect(Scheduler).toHaveYielded([\n- 'layout 1 unmount',\n- 'layout 2 unmount',\n- 'passive 1 unmount',\n- 'passive 2 unmount',\n- 'passive 3 unmount',\n- ]);\n-\n- expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-1\",\n- \"--render-start-1\",\n- \"--render-stop\",\n- \"--commit-start-1\",\n- \"--react-version-\",\n- \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n- \"--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\",\n- \"--component-layout-effect-unmount-start-ComponentWithEffects\",\n- \"--component-layout-effect-unmount-stop\",\n- \"--component-layout-effect-unmount-start-ComponentWithEffects\",\n- \"--component-layout-effect-unmount-stop\",\n- \"--layout-effects-start-1\",\n- \"--layout-effects-stop\",\n- \"--passive-effects-start-1\",\n- \"--component-passive-effect-unmount-start-ComponentWithEffects\",\n- \"--component-passive-effect-unmount-stop\",\n- \"--component-passive-effect-unmount-start-ComponentWithEffects\",\n- \"--component-passive-effect-unmount-stop\",\n- \"--component-passive-effect-unmount-start-ComponentWithEffects\",\n- \"--component-passive-effect-unmount-stop\",\n- \"--passive-effects-stop\",\n- \"--commit-stop\",\n- ]\n- `);\n- });\n+ renderRootHelper();\n \n- describe('lane labels', () => {\n- it('regression test SyncLane', () => {\n- renderHelper(

);\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n+\n+ clearPendingMarks();\n+\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n \n expect(clearedMarks).toMatchInlineSnapshot(`\n Array [\n- \"--schedule-render-1\",\n+ \"--render-start-16\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--schedule-forced-update-1-Example\",\n+ \"--layout-effects-stop\",\n \"--render-start-1\",\n+ \"--component-render-start-Example\",\n+ \"--component-render-stop\",\n \"--render-stop\",\n \"--commit-start-1\",\n \"--react-version-\",\n \"--profiler-version-1\",\n- \"--react-internal-module-start-\",\n- \"--react-internal-module-stop-\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n \"--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\",\n- \"--layout-effects-start-1\",\n- \"--layout-effects-stop\",\n+ \"--commit-stop\",\n \"--commit-stop\",\n ]\n `);\n });\n \n- it('regression test DefaultLane', () => {\n- renderRootHelper(

);\n+ it('should mark render phase state updates for class component', () => {\n+ class Example extends React.Component {\n+ state = {didRender: false};\n+ render() {\n+ if (this.state.didRender === false) {\n+ this.setState({didRender: true});\n+ }\n+ return null;\n+ }\n+ }\n+\n+ renderRootHelper();\n+\n expect(clearedMarks).toMatchInlineSnapshot(`\n- Array [\n- \"--schedule-render-16\",\n- ]\n+ Array [\n+ \"--schedule-render-16\",\n+ ]\n+ `);\n+\n+ clearPendingMarks();\n+\n+ let errorMessage;\n+ spyOn(console, 'error').and.callFake(message => {\n+ errorMessage = message;\n+ });\n+\n+ expect(Scheduler).toFlushUntilNextPaint([]);\n+\n+ expect(console.error).toHaveBeenCalledTimes(1);\n+ expect(errorMessage).toContain(\n+ 'Cannot update during an existing state transition',\n+ );\n+\n+ expect(clearedMarks).toMatchInlineSnapshot(`\n+ Array [\n+ \"--render-start-16\",\n+ \"--component-render-start-Example\",\n+ \"--schedule-state-update-16-Example\",\n+ \"--component-render-stop\",\n+ \"--render-stop\",\n+ \"--commit-start-16\",\n+ \"--react-version-\",\n+ \"--profiler-version-1\",\n+ \"--react-internal-module-start- at filtered (:0:0)\",\n+ \"--react-internal-module-stop- at filtered (:1:1)\",\n+ \"--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\",\n+ \"--layout-effects-start-16\",\n+ \"--layout-effects-stop\",\n+ \"--commit-stop\",\n+ ]\n `);\n });\n \n- it('regression test InputDiscreteLane', async () => {\n- const targetRef = React.createRef(null);\n-\n- function App() {\n- const [count, setCount] = React.useState(0);\n- const handleClick = () => {\n- setCount(count + 1);\n- };\n- return

dillon1000/react

Files changed