From cd23e40c734d758726419c0a3bd91576211bd83f Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 5 Dec 2022 10:56:57 -0800 Subject: [PATCH 01/17] [DiffTrain] Use original commit message (#25809) Instead of the current commit message (which just shows "Build for ", re-use the commit message from the origin commit instead. --- .github/workflows/commit_artifacts.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/commit_artifacts.yml b/.github/workflows/commit_artifacts.yml index c72400a7c25ac..4a394237771b1 100644 --- a/.github/workflows/commit_artifacts.yml +++ b/.github/workflows/commit_artifacts.yml @@ -146,7 +146,10 @@ jobs: - name: Commit changes to branch uses: stefanzweifel/git-auto-commit-action@v4 with: - commit_message: Build for ${{ github.sha }} + commit_message: | + ${{ github.event.head_commit.message }} + + DiffTrain build for `${{ github.sha }}` branch: builds/facebook-www commit_user_name: ${{ github.actor }} commit_user_email: ${{ github.actor }}@users.noreply.github.com From 2ccfa657d9529cab25eaa25144efc64df12b13c7 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 5 Dec 2022 12:08:28 -0800 Subject: [PATCH 02/17] Fork ReactDOMSharedInternals for www (#25791) This isn't the right way to do this, but internally we have some restrictions so we need to add an indirection. Let's land this now so we can catch up our sync and then fix forward from there. Co-authored-by: Jan Kassens --- .../shared/forks/ReactDOMSharedInternals.www.js | 16 ++++++++++++++++ scripts/rollup/forks.js | 8 ++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/shared/forks/ReactDOMSharedInternals.www.js diff --git a/packages/shared/forks/ReactDOMSharedInternals.www.js b/packages/shared/forks/ReactDOMSharedInternals.www.js new file mode 100644 index 0000000000000..41f52fca4c6c6 --- /dev/null +++ b/packages/shared/forks/ReactDOMSharedInternals.www.js @@ -0,0 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +// $FlowIgnore[cannot-resolve-module] provided by www +const ReactDOM = require('ReactDOMComet'); + +const ReactDOMSharedInternals = + ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + +export default ReactDOMSharedInternals; diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js index 93833be1467b4..db046be29ac2d 100644 --- a/scripts/rollup/forks.js +++ b/scripts/rollup/forks.js @@ -70,6 +70,14 @@ const forks = Object.freeze({ if (entry === 'react-dom' || entry === 'react-dom/server-rendering-stub') { return './packages/react-dom/src/ReactDOMSharedInternals.js'; } + switch (bundleType) { + case FB_WWW_DEV: + case FB_WWW_PROD: + case FB_WWW_PROFILING: + return './packages/shared/forks/ReactDOMSharedInternals.www.js'; + default: + break; + } if ( !entry.startsWith('react-dom/') && dependencies.indexOf('react-dom') === -1 From d807eb52cfd999cfbcb19078a75b15f844e409bb Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Mon, 5 Dec 2022 16:10:03 -0500 Subject: [PATCH 03/17] Revert recent hydration changes (#25812) We're reverting the stack of changes that this code belongs to in order to unblock the sync to Meta's internal codebase. We will attempt to re-land once the sync is unblocked. I have not yet verified that this fixes the error that were reported internally. I will do that before landing. --- .../src/__tests__/TimelineProfiler-test.js | 474 ++++++++++-------- .../src/__tests__/preprocessData-test.js | 176 +++---- ...MServerSelectiveHydration-test.internal.js | 123 +---- .../src/ReactFiberBeginWork.js | 32 +- .../react-reconciler/src/ReactFiberLane.js | 82 ++- .../src/ReactFiberWorkLoop.js | 63 +-- .../__tests__/DebugTracing-test.internal.js | 17 +- 7 files changed, 416 insertions(+), 551 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 180c1a5726687..bc69af0ead1fe 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -126,35 +126,37 @@ describe('Timeline profiler', () => { setPerformanceMock(null); }); + // @reactVersion >=18.0 it('should mark sync render without suspends or state updates', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", + "--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", ] `); }); + // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -162,21 +164,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark render yields', async () => { function Bar() { Scheduler.unstable_yieldValue('Bar'); @@ -196,16 +199,17 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYieldThrough(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-128", - "--render-start-128", - "--component-render-start-Foo", - "--component-render-stop", - "--render-yield", - ] - `); + Array [ + "--schedule-render-64", + "--render-start-64", + "--component-render-start-Foo", + "--component-render-stop", + "--render-yield", + ] + `); }); + // @reactVersion >=18.0 it('should mark sync render with suspense that resolves', async () => { const fakeSuspensePromise = Promise.resolve(true); function Example() { @@ -220,19 +224,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", + "--suspense-suspend-0-Example-mount-1-", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", + "--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", ] @@ -248,6 +252,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark sync render with suspense that rejects', async () => { const fakeSuspensePromise = Promise.reject(new Error('error')); function Example() { @@ -262,19 +267,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", + "--suspense-suspend-0-Example-mount-1-", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", + "--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", ] @@ -286,6 +291,7 @@ describe('Timeline profiler', () => { expect(clearedMarks).toContain(`--suspense-rejected-0-Example`); }); + // @reactVersion >=18.0 it('should mark concurrent render with suspense that resolves', async () => { const fakeSuspensePromise = Promise.resolve(true); function Example() { @@ -299,10 +305,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -310,18 +316,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", + "--suspense-suspend-0-Example-mount-16-", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] @@ -337,6 +343,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render with suspense that rejects', async () => { const fakeSuspensePromise = Promise.reject(new Error('error')); function Example() { @@ -350,10 +357,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -361,18 +368,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", + "--suspense-suspend-0-Example-mount-16-", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] @@ -388,6 +395,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading class component state updates', () => { class Example extends React.Component { state = {didMount: false}; @@ -402,10 +410,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -413,35 +421,36 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", - "--schedule-state-update-2-Example", + "--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-16", + "--schedule-state-update-1-Example", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { class Example extends React.Component { componentDidMount() { @@ -455,10 +464,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -466,35 +475,36 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", - "--schedule-forced-update-2-Example", + "--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-16", + "--schedule-forced-update-1-Example", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark render phase state updates for class component', () => { class Example extends React.Component { state = {didRender: false}; @@ -509,10 +519,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -530,24 +540,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark render phase force updates for class component', () => { let forced = false; class Example extends React.Component { @@ -563,10 +574,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -584,24 +595,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", - "--schedule-forced-update-32-Example", + "--schedule-forced-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -614,10 +626,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -625,37 +637,38 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--component-layout-effect-mount-start-Example", - "--schedule-state-update-2-Example", + "--schedule-state-update-1-Example", "--component-layout-effect-mount-stop", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -671,40 +684,41 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", - "--passive-effects-start-32", + "--passive-effects-start-16", "--component-passive-effect-mount-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-passive-effect-mount-stop", "--passive-effects-stop", - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", ] `); }); + // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -720,25 +734,26 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -767,8 +782,8 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -776,31 +791,32 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", - "--schedule-state-update-2-ErrorBoundary", + "--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-2", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", ] `); }); + // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -829,10 +845,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -840,7 +856,7 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -848,7 +864,7 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--render-start-32", + "--render-start-16", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -856,31 +872,32 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", - "--schedule-state-update-2-ErrorBoundary", + "--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-16", + "--schedule-state-update-1-ErrorBoundary", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -930,18 +947,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-ComponentWithEffects", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-32", + "--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-16", "--component-layout-effect-mount-start-ComponentWithEffects", "--component-layout-effect-mount-stop", "--component-layout-effect-mount-start-ComponentWithEffects", @@ -960,17 +977,17 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--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", - ] - `); + Array [ + "--passive-effects-start-16", + "--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(); @@ -988,22 +1005,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--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", "--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-start-1", "--layout-effects-stop", - "--passive-effects-start-2", + "--passive-effects-start-1", "--component-passive-effect-unmount-start-ComponentWithEffects", "--component-passive-effect-unmount-stop", "--component-passive-effect-unmount-start-ComponentWithEffects", @@ -1017,36 +1034,39 @@ describe('Timeline profiler', () => { }); describe('lane labels', () => { + // @reactVersion >=18.0 it('regression test SyncLane', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", + "--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", ] `); }); + // @reactVersion >=18.0 it('regression test DefaultLane', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); }); + // @reactVersion >=18.0 it('regression test InputDiscreteLane', async () => { const targetRef = React.createRef(null); @@ -1070,24 +1090,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-2-App", - "--render-start-2", + "--schedule-state-update-1-App", + "--render-start-1", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--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-SyncHydrationLane,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,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-2", + "--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", ] `); }); + // @reactVersion >=18.0 it('regression test InputContinuousLane', async () => { const targetRef = React.createRef(null); @@ -1110,18 +1131,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-8-App", - "--render-start-8", + "--schedule-state-update-4-App", + "--render-start-4", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-8", + "--commit-start-4", "--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,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-8", + "--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-4", "--layout-effects-stop", "--commit-stop", ] @@ -1184,6 +1205,7 @@ describe('Timeline profiler', () => { utils.act(() => store.profilerStore.startProfiling()); }); + // @reactVersion >=18.0 it('should mark sync render without suspends or state updates', () => { renderHelper(
); @@ -1191,7 +1213,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1200,6 +1222,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { utils.act(() => renderRootHelper(
)); @@ -1207,7 +1230,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1216,6 +1239,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { let updaterFn; @@ -1248,7 +1272,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000001000", + "lanes": "0b0000000000000000000000000000100", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1257,7 +1281,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000010000000", + "lanes": "0b0000000000000000000000001000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1266,7 +1290,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000010000000", + "lanes": "0b0000000000000000000000001000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1275,7 +1299,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1562,6 +1586,7 @@ describe('Timeline profiler', () => { expect(timelineData.componentMeasures).toHaveLength(2); }); + // @reactVersion >=18.0 it('should mark cascading class component state updates', () => { class Example extends React.Component { state = {didMount: false}; @@ -1604,7 +1629,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1613,7 +1638,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1622,6 +1647,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { let forced = false; class Example extends React.Component { @@ -1663,14 +1689,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1679,6 +1705,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase state updates for class component', () => { class Example extends React.Component { state = {didRender: false}; @@ -1731,7 +1758,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1740,7 +1767,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1749,6 +1776,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase force updates for class component', () => { let forced = false; class Example extends React.Component { @@ -1800,14 +1828,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1816,6 +1844,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1862,7 +1891,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1871,7 +1900,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1880,6 +1909,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1925,7 +1955,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1934,7 +1964,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1943,6 +1973,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -1974,7 +2005,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1983,7 +2014,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1992,6 +2023,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -2058,7 +2090,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2067,7 +2099,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2087,6 +2119,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -2171,7 +2204,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2180,7 +2213,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 30, "type": "schedule-state-update", "warning": null, @@ -2207,6 +2240,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -2361,7 +2395,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2369,7 +2403,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2377,7 +2411,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2385,7 +2419,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2393,7 +2427,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2403,7 +2437,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -2411,7 +2445,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -2419,7 +2453,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -2427,7 +2461,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, @@ -2435,7 +2469,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "passive-effects", }, @@ -2471,7 +2505,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2481,7 +2515,7 @@ describe('Timeline profiler', () => { "componentStack": " in Child (at **) in CommponentWithChildren (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "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 218783657bc81..6c38ce6c9953a 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -613,6 +613,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample legacy render sequence', async () => { utils.legacyRender(
, document.createElement('div')); @@ -628,7 +629,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render-idle", }, @@ -636,7 +637,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render", }, @@ -644,7 +645,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.008, "type": "commit", }, @@ -652,7 +653,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.014, "type": "layout-effects", }, @@ -713,13 +714,12 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [ + 0 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render-idle", }, @@ -727,7 +727,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render", }, @@ -735,7 +735,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.008, "type": "commit", }, @@ -743,11 +743,12 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.014, "type": "layout-effects", }, ], + 1 => Array [], 2 => Array [], 3 => Array [], 4 => Array [], @@ -784,7 +785,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.005, "type": "schedule-render", "warning": null, @@ -799,6 +800,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -825,7 +827,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render-idle", }, @@ -833,7 +835,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render", }, @@ -841,7 +843,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.01, "type": "commit", }, @@ -849,7 +851,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.016, "type": "layout-effects", }, @@ -857,7 +859,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.019, "type": "passive-effects", }, @@ -867,7 +869,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render-idle", }, @@ -875,7 +877,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render", }, @@ -883,7 +885,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.028, "type": "commit", }, @@ -891,7 +893,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.034, "type": "layout-effects", }, @@ -899,7 +901,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.037, "type": "passive-effects", }, @@ -993,13 +995,12 @@ describe('Timeline profiler', () => { 1 => Array [], 2 => Array [], 3 => Array [], - 4 => Array [], - 5 => Array [ + 4 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render-idle", }, @@ -1007,7 +1008,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render", }, @@ -1015,7 +1016,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.01, "type": "commit", }, @@ -1023,7 +1024,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.016, "type": "layout-effects", }, @@ -1031,7 +1032,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.019, "type": "passive-effects", }, @@ -1039,7 +1040,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render-idle", }, @@ -1047,7 +1048,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render", }, @@ -1055,7 +1056,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.028, "type": "commit", }, @@ -1063,7 +1064,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.034, "type": "layout-effects", }, @@ -1071,11 +1072,12 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.037, "type": "passive-effects", }, ], + 5 => Array [], 6 => Array [], 7 => Array [], 8 => Array [], @@ -1108,14 +1110,14 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.005, "type": "schedule-render", "warning": null, }, Object { "componentName": "App", - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.021, "type": "schedule-state-update", "warning": null, @@ -1945,6 +1947,7 @@ describe('Timeline profiler', () => { global.IS_REACT_ACT_ENVIRONMENT = true; }); + // @reactVersion >= 18.0 it('should process a sample legacy render sequence', async () => { utils.legacyRender(
, document.createElement('div')); utils.act(() => store.profilerStore.stopProfiling()); @@ -1960,7 +1963,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -1968,7 +1971,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -1976,7 +1979,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -1984,7 +1987,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, @@ -1995,13 +1998,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "SyncHydrationLane", - 2 => "Sync", - 4 => "InputContinuousHydration", - 8 => "InputContinuous", - 16 => "DefaultHydration", - 32 => "Default", - 64 => "TransitionHydration", + 1 => "Sync", + 2 => "InputContinuousHydration", + 4 => "InputContinuous", + 8 => "DefaultHydration", + 16 => "Default", + 32 => "TransitionHydration", + 64 => "Transition", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2017,7 +2020,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Transition", + 4194304 => "Retry", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2028,13 +2031,12 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [], - 2 => Array [ + 1 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -2042,7 +2044,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -2050,7 +2052,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -2058,11 +2060,12 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, ], + 2 => Array [], 4 => Array [], 8 => Array [], 16 => Array [], @@ -2099,7 +2102,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2114,6 +2117,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -2149,7 +2153,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2157,7 +2161,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2165,7 +2169,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2173,7 +2177,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2181,7 +2185,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2191,7 +2195,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2199,7 +2203,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2207,7 +2211,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2215,7 +2219,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2223,7 +2227,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2263,13 +2267,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "SyncHydrationLane", - 2 => "Sync", - 4 => "InputContinuousHydration", - 8 => "InputContinuous", - 16 => "DefaultHydration", - 32 => "Default", - 64 => "TransitionHydration", + 1 => "Sync", + 2 => "InputContinuousHydration", + 4 => "InputContinuous", + 8 => "DefaultHydration", + 16 => "Default", + 32 => "TransitionHydration", + 64 => "Transition", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2285,7 +2289,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Transition", + 4194304 => "Retry", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2300,13 +2304,12 @@ describe('Timeline profiler', () => { 2 => Array [], 4 => Array [], 8 => Array [], - 16 => Array [], - 32 => Array [ + 16 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2314,7 +2317,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2322,7 +2325,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2330,7 +2333,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2338,7 +2341,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2346,7 +2349,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2354,7 +2357,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2362,7 +2365,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2370,7 +2373,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2378,11 +2381,12 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, ], + 32 => Array [], 64 => Array [], 128 => Array [], 256 => Array [], @@ -2415,7 +2419,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2424,7 +2428,7 @@ describe('Timeline profiler', () => { "componentName": "App", "componentStack": " in App (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-state-update", "warning": null, diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js index 8a3668cd0d396..3469c4faf0683 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js @@ -21,7 +21,6 @@ let Suspense; let act; let IdleEventPriority; -let ContinuousEventPriority; function dispatchMouseHoverEvent(to, from) { if (!to) { @@ -111,18 +110,6 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) { }); } -function TODO_scheduleContinuousSchedulerTask(fn) { - ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => { - const prevEvent = window.event; - window.event = {type: 'message'}; - try { - fn(); - } finally { - window.event = prevEvent; - } - }); -} - describe('ReactDOMServerSelectiveHydration', () => { beforeEach(() => { jest.resetModuleRegistry(); @@ -138,8 +125,6 @@ describe('ReactDOMServerSelectiveHydration', () => { Suspense = React.Suspense; IdleEventPriority = require('react-reconciler/constants').IdleEventPriority; - ContinuousEventPriority = require('react-reconciler/constants') - .ContinuousEventPriority; }); it('hydrates the target boundary synchronously during a click', async () => { @@ -1511,10 +1496,12 @@ describe('ReactDOMServerSelectiveHydration', () => { // Start rendering. This will force the first boundary to hydrate // by scheduling it at one higher pri than Idle. expect(Scheduler).toFlushAndYieldThrough([ + // An update was scheduled to force hydrate the boundary, but React will + // continue rendering at Idle until the next time React yields. This is + // fine though because it will switch to the hydration level when it + // re-enters the work loop. 'App', - - // Start hydrating A - 'A', + 'AA', ]); // Hover over A which (could) schedule at one higher pri than Idle. @@ -1785,104 +1772,4 @@ describe('ReactDOMServerSelectiveHydration', () => { document.body.removeChild(container); }); - - it('can force hydration in response to sync update', () => { - function Child({text}) { - Scheduler.unstable_yieldValue(`Child ${text}`); - return (spanRef = ref)}>{text}; - } - function App({text}) { - Scheduler.unstable_yieldValue(`App ${text}`); - return ( -
- - - -
- ); - } - - let spanRef; - const finalHTML = ReactDOMServer.renderToString(); - expect(Scheduler).toHaveYielded(['App A', 'Child A']); - const container = document.createElement('div'); - document.body.appendChild(container); - container.innerHTML = finalHTML; - const initialSpan = container.getElementsByTagName('span')[0]; - const root = ReactDOMClient.hydrateRoot(container, ); - expect(Scheduler).toFlushUntilNextPaint(['App A']); - - ReactDOM.flushSync(() => { - root.render(); - }); - expect(Scheduler).toHaveYielded(['App B', 'Child A', 'App B', 'Child B']); - expect(initialSpan).toBe(spanRef); - }); - - // @gate experimental || www - it('can force hydration in response to continuous update', () => { - function Child({text}) { - Scheduler.unstable_yieldValue(`Child ${text}`); - return (spanRef = ref)}>{text}; - } - function App({text}) { - Scheduler.unstable_yieldValue(`App ${text}`); - return ( -
- - - -
- ); - } - - let spanRef; - const finalHTML = ReactDOMServer.renderToString(); - expect(Scheduler).toHaveYielded(['App A', 'Child A']); - const container = document.createElement('div'); - document.body.appendChild(container); - container.innerHTML = finalHTML; - const initialSpan = container.getElementsByTagName('span')[0]; - const root = ReactDOMClient.hydrateRoot(container, ); - expect(Scheduler).toFlushUntilNextPaint(['App A']); - - TODO_scheduleContinuousSchedulerTask(() => { - root.render(); - }); - expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']); - expect(initialSpan).toBe(spanRef); - }); - - it('can force hydration in response to default update', () => { - function Child({text}) { - Scheduler.unstable_yieldValue(`Child ${text}`); - return (spanRef = ref)}>{text}; - } - function App({text}) { - Scheduler.unstable_yieldValue(`App ${text}`); - return ( -
- - - -
- ); - } - - let spanRef; - const finalHTML = ReactDOMServer.renderToString(); - expect(Scheduler).toHaveYielded(['App A', 'Child A']); - const container = document.createElement('div'); - document.body.appendChild(container); - container.innerHTML = finalHTML; - const initialSpan = container.getElementsByTagName('span')[0]; - const root = ReactDOMClient.hydrateRoot(container, ); - expect(Scheduler).toFlushUntilNextPaint(['App A']); - - ReactDOM.unstable_batchedUpdates(() => { - root.render(); - }); - expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']); - expect(initialSpan).toBe(spanRef); - }); }); diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index bde65936f1c01..78372d1762916 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -282,14 +282,6 @@ import { const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -// A special exception that's used to unwind the stack when an update flows -// into a dehydrated boundary. -export const SelectiveHydrationException: mixed = new Error( - "This is not a real error. It's an implementation detail of React's " + - "selective hydration feature. If this leaks into userspace, it's a bug in " + - 'React. Please file an issue.', -); - let didReceiveUpdate: boolean = false; let didWarnAboutBadClass; @@ -2868,16 +2860,6 @@ function updateDehydratedSuspenseComponent( attemptHydrationAtLane, eventTime, ); - - // Throw a special object that signals to the work loop that it should - // interrupt the current render. - // - // Because we're inside a React-only execution stack, we don't - // strictly need to throw here — we could instead modify some internal - // work loop state. But using an exception means we don't need to - // check for this case on every iteration of the work loop. So doing - // it this way moves the check out of the fast path. - throw SelectiveHydrationException; } else { // We have already tried to ping at a higher priority than we're rendering with // so if we got here, we must have failed to hydrate at those levels. We must @@ -2888,17 +2870,15 @@ function updateDehydratedSuspenseComponent( } } - // If we did not selectively hydrate, we'll continue rendering without - // hydrating. Mark this tree as suspended to prevent it from committing - // outside a transition. - // - // This path should only happen if the hydration lane already suspended. - // Currently, it also happens during sync updates because there is no - // hydration lane for sync updates. + // If we have scheduled higher pri work above, this will just abort the render + // since we now have higher priority work. We'll try to infinitely suspend until + // we yield. TODO: We could probably just force yielding earlier instead. + renderDidSuspendDelayIfPossible(); + // If we rendered synchronously, we won't yield so have to render something. + // This will cause us to delete any existing content. // TODO: We should ideally have a sync hydration lane that we can apply to do // a pass where we hydrate this subtree in place using the previous Context and then // reapply the update afterwards. - renderDidSuspendDelayIfPossible(); return retrySuspenseComponentWithoutHydrating( current, workInProgress, diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.js index 97a28f88099e0..7ff44ac9a56b6 100644 --- a/packages/react-reconciler/src/ReactFiberLane.js +++ b/packages/react-reconciler/src/ReactFiberLane.js @@ -36,39 +36,39 @@ export const TotalLanes = 31; export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000; export const NoLane: Lane = /* */ 0b0000000000000000000000000000000; -export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001; -export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010; - -export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100; -export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000; - -export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000; -export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000; - -const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000; -const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000; -const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000; -const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000; -const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000; -const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000; -const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000; -const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000; -const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000; -const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000; -const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000; -const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000; -const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000; -const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000; -const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000; -const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000; -const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000; -const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000; - -const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000; -const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000; -const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000; -const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000; -const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000; +export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001; + +export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010; +export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100; + +export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000; +export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000; + +const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000; +const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000; +const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000; +const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000; +const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000; +const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000; +const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000; +const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000; +const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000; +const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000; +const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000; +const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000; +const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000; +const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000; +const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000; +const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000; +const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000; +const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000; + +const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000; +const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000; +const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000; +const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000; +const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000; +const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000; export const SomeRetryLane: Lane = RetryLane1; @@ -85,9 +85,6 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000 // It should be kept in sync with the Lanes values above. export function getLabelForLane(lane: Lane): string | void { if (enableSchedulingProfiler) { - if (lane & SyncHydrationLane) { - return 'SyncHydrationLane'; - } if (lane & SyncLane) { return 'Sync'; } @@ -134,8 +131,6 @@ let nextRetryLane: Lane = RetryLane1; function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { switch (getHighestPriorityLane(lanes)) { - case SyncHydrationLane: - return SyncHydrationLane; case SyncLane: return SyncLane; case InputContinuousHydrationLane: @@ -169,6 +164,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { case RetryLane2: case RetryLane3: case RetryLane4: + case RetryLane5: return lanes & RetryLanes; case SelectiveHydrationLane: return SelectiveHydrationLane; @@ -331,7 +327,6 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number { function computeExpirationTime(lane: Lane, currentTime: number) { switch (lane) { - case SyncHydrationLane: case SyncLane: case InputContinuousHydrationLane: case InputContinuousLane: @@ -369,6 +364,7 @@ function computeExpirationTime(lane: Lane, currentTime: number) { case RetryLane2: case RetryLane3: case RetryLane4: + case RetryLane5: // TODO: Retries should be allowed to expire if they are CPU bound for // too long, but when I made this change it caused a spike in browser // crashes. There must be some other underlying bug; not super urgent but @@ -463,7 +459,7 @@ export function getLanesToRetrySynchronouslyOnError( } export function includesSyncLane(lanes: Lanes): boolean { - return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes; + return (lanes & SyncLane) !== NoLanes; } export function includesNonIdleWork(lanes: Lanes): boolean { @@ -473,8 +469,6 @@ export function includesOnlyRetries(lanes: Lanes): boolean { return (lanes & RetryLanes) === lanes; } export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean { - // TODO: Should hydration lanes be included here? This function is only - // used in `updateDeferredValueImpl`. const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane; return (lanes & UrgentLanes) === NoLanes; } @@ -755,9 +749,6 @@ export function getBumpedLaneForHydration( let lane; switch (renderLane) { - case SyncLane: - lane = SyncHydrationLane; - break; case InputContinuousLane: lane = InputContinuousHydrationLane; break; @@ -784,6 +775,7 @@ export function getBumpedLaneForHydration( case RetryLane2: case RetryLane3: case RetryLane4: + case RetryLane5: lane = TransitionHydrationLane; break; case IdleLane: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 24901177563d3..0c86cbb324020 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -138,7 +138,7 @@ import { NoTimestamp, claimNextTransitionLane, claimNextRetryLane, - includesSyncLane, + includesSomeLane, isSubsetOfLanes, mergeLanes, removeLanes, @@ -175,7 +175,6 @@ import { } from './ReactEventPriorities'; import {requestCurrentTransition, NoTransition} from './ReactFiberTransition'; import { - SelectiveHydrationException, beginWork as originalBeginWork, replayFunctionComponent, } from './ReactFiberBeginWork'; @@ -317,14 +316,13 @@ let workInProgress: Fiber | null = null; // The lanes we're rendering let workInProgressRootRenderLanes: Lanes = NoLanes; -opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5 | 6; +opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5; const NotSuspended: SuspendedReason = 0; const SuspendedOnError: SuspendedReason = 1; const SuspendedOnData: SuspendedReason = 2; const SuspendedOnImmediate: SuspendedReason = 3; const SuspendedOnDeprecatedThrowPromise: SuspendedReason = 4; const SuspendedAndReadyToUnwind: SuspendedReason = 5; -const SuspendedOnHydration: SuspendedReason = 6; // When this is true, the work-in-progress fiber just suspended (or errored) and // we've yet to unwind the stack. In some cases, we may yield to the main thread @@ -915,7 +913,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // TODO: Temporary until we confirm this warning is not fired. if ( existingCallbackNode == null && - !includesSyncLane(existingCallbackPriority) + existingCallbackPriority !== SyncLane ) { console.error( 'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.', @@ -933,7 +931,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // Schedule a new callback. let newCallbackNode; - if (includesSyncLane(newCallbackPriority)) { + if (newCallbackPriority === SyncLane) { // Special case: Sync React callbacks are scheduled on a special // internal queue if (root.tag === LegacyRoot) { @@ -1477,7 +1475,7 @@ function performSyncWorkOnRoot(root) { flushPassiveEffects(); let lanes = getNextLanes(root, NoLanes); - if (!includesSyncLane(lanes)) { + if (!includesSomeLane(lanes, SyncLane)) { // There's no remaining sync work left. ensureRootIsScheduled(root, now()); return null; @@ -1799,17 +1797,6 @@ function handleThrow(root, thrownValue): void { workInProgressSuspendedReason = shouldAttemptToSuspendUntilDataResolves() ? SuspendedOnData : SuspendedOnImmediate; - } else if (thrownValue === SelectiveHydrationException) { - // An update flowed into a dehydrated boundary. Before we can apply the - // update, we need to finish hydrating. Interrupt the work-in-progress - // render so we can restart at the hydration lane. - // - // The ideal implementation would be able to switch contexts without - // unwinding the current stack. - // - // We could name this something more general but as of now it's the only - // case where we think this should happen. - workInProgressSuspendedReason = SuspendedOnHydration; } else { // This is a regular error. const isWakeable = @@ -2051,7 +2038,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) { markRenderStarted(lanes); } - outer: do { + do { try { if ( workInProgressSuspendedReason !== NotSuspended && @@ -2067,23 +2054,11 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) { // function and fork the behavior some other way. const unitOfWork = workInProgress; const thrownValue = workInProgressThrownValue; - switch (workInProgressSuspendedReason) { - case SuspendedOnHydration: { - // Selective hydration. An update flowed into a dehydrated tree. - // Interrupt the current render so the work loop can switch to the - // hydration lane. - workInProgress = null; - workInProgressRootExitStatus = RootDidNotComplete; - break outer; - } - default: { - // Continue with the normal work loop. - workInProgressSuspendedReason = NotSuspended; - workInProgressThrownValue = null; - unwindSuspendedUnitOfWork(unitOfWork, thrownValue); - break; - } - } + workInProgressSuspendedReason = NotSuspended; + workInProgressThrownValue = null; + unwindSuspendedUnitOfWork(unitOfWork, thrownValue); + + // Continue with the normal work loop. } workLoopSync(); break; @@ -2241,14 +2216,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) { unwindSuspendedUnitOfWork(unitOfWork, thrownValue); break; } - case SuspendedOnHydration: { - // Selective hydration. An update flowed into a dehydrated tree. - // Interrupt the current render so the work loop can switch to the - // hydration lane. - workInProgress = null; - workInProgressRootExitStatus = RootDidNotComplete; - break outer; - } default: { throw new Error( 'Unexpected SuspendedReason. This is a bug in React.', @@ -2927,13 +2894,16 @@ function commitRootImpl( // TODO: We can optimize this by not scheduling the callback earlier. Since we // currently schedule the callback in multiple places, will wait until those // are consolidated. - if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) { + if ( + includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && + root.tag !== LegacyRoot + ) { flushPassiveEffects(); } // Read this again, since a passive effect might have updated it remainingLanes = root.pendingLanes; - if (includesSyncLane(remainingLanes)) { + if (includesSomeLane(remainingLanes, (SyncLane: Lane))) { if (enableProfilerTimer && enableProfilerNestedUpdatePhase) { markNestedUpdateScheduled(); } @@ -3771,7 +3741,6 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) { if ( didSuspendOrErrorWhileHydratingDEV() || originalError === SuspenseException || - originalError === SelectiveHydrationException || (originalError !== null && typeof originalError === 'object' && typeof originalError.then === 'function') diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js index 0d4cf546c6d6e..cd235e7cee306 100644 --- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js +++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js @@ -16,9 +16,8 @@ describe('DebugTracing', () => { let logs; - const SYNC_LANE_STRING = '0b0000000000000000000000000000010'; - const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000'; - const RETRY_LANE_STRING = '0b0000000100000000000000000000000'; + const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000'; + const RETRY_LANE_STRING = '0b0000000010000000000000000000000'; global.IS_REACT_ACT_ENVIRONMENT = true; @@ -88,9 +87,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - `group: ⚛️ render (${SYNC_LANE_STRING})`, + 'group: ⚛️ render (0b0000000000000000000000000000001)', 'log: ⚛️ Example suspended', - `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, + 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', ]); logs.splice(0); @@ -122,9 +121,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - `group: ⚛️ render (${SYNC_LANE_STRING})`, + 'group: ⚛️ render (0b0000000000000000000000000000001)', 'log: ', - `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, + 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', ]); logs.splice(0); @@ -238,7 +237,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, + 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]); @@ -296,7 +295,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, + 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]); From 2f16409f3a40de334973abdcba08e09284ed1c9d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 6 Dec 2022 11:51:09 -0500 Subject: [PATCH 04/17] Bump qs from 6.4.0 to 6.4.1 in /fixtures/attribute-behavior (#25820) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps [qs](https://github.com/ljharb/qs) from 6.4.0 to 6.4.1.
Changelog

Sourced from qs's changelog.

6.4.1

  • [Fix] parse: ignore __proto__ keys (#428)
  • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
  • [Fix] use safer-buffer instead of Buffer constructor
  • [Fix] utils.merge: avoid a crash with a null target and an array source
  • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
  • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
  • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
  • [Fix] when parseArrays is false, properly handle keys ending in []
  • [Robustness] stringify: avoid relying on a global undefined (#427)
  • [Refactor] use cached Array.isArray
  • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
  • [readme] remove travis badge; add github actions/codecov badges; update URLs
  • [Docs] Clarify the need for "arrayLimit" option
  • [meta] fix README.md (#399)
  • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
  • [meta] add FUNDING.yml
  • [actions] backport actions from main
  • [Tests] remove nonexistent tape option
  • [Dev Deps] backport from main
Commits
  • 486aa46 v6.4.1
  • 727ef5d [Fix] parse: ignore __proto__ keys (#428)
  • cd1874e [Robustness] stringify: avoid relying on a global undefined (#427)
  • 45e987c [readme] remove travis badge; add github actions/codecov badges; update URLs
  • 90a3bce [meta] fix README.md (#399)
  • 9566d25 [Fix] fix for an impossible situation: when the formatter is called with a no...
  • 74227ef Clean up license text so it’s properly detected as BSD-3-Clause
  • 35dfb22 [actions] backport actions from main
  • 7d4670f [Dev Deps] backport from main
  • 0485440 [Fix] use safer-buffer instead of Buffer constructor
  • Additional commits viewable in compare view

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=qs&package-manager=npm_and_yarn&previous-version=6.4.0&new-version=6.4.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) - `@dependabot use these labels` will set the current labels as the default for future PRs for this repo and language - `@dependabot use these reviewers` will set the current reviewers as the default for future PRs for this repo and language - `@dependabot use these assignees` will set the current assignees as the default for future PRs for this repo and language - `@dependabot use this milestone` will set the current milestone as the default for future PRs for this repo and language You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/facebook/react/network/alerts).
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- fixtures/attribute-behavior/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fixtures/attribute-behavior/yarn.lock b/fixtures/attribute-behavior/yarn.lock index f24e819d791a6..9416cd9a5db5c 100644 --- a/fixtures/attribute-behavior/yarn.lock +++ b/fixtures/attribute-behavior/yarn.lock @@ -5026,8 +5026,8 @@ qs@6.5.0: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49" qs@~6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" + version "6.4.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6" query-string@^4.1.0: version "4.3.4" From 7c39922891bf8e0ce179a78a373a61b3afe3c1c7 Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 6 Dec 2022 09:01:24 -0800 Subject: [PATCH 05/17] [DiffTrain] Strip @license from files (#25821) We need to remove this for some internal tests. This was previously in our upgrade script so adding it back here for parity. Test plan: files were updated correctly [[1]](https://github.com/facebook/react/commit/1704bbb8268345bf7aa405101313b3639e03e221#diff-80b968e05ce2ceeff6e17c938dc722aff2c1c660f8ef402e6664bc5b2cafa5fbL2) [[2]](https://github.com/facebook/react/commit/1704bbb8268345bf7aa405101313b3639e03e221#diff-6ecd07a61c8e0e28793dace3f9f62751e4808de9c2965aa1ddeb0157f3c9b4ecL2) Co-authored-by: Jan Kassens --- .github/workflows/commit_artifacts.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/workflows/commit_artifacts.yml b/.github/workflows/commit_artifacts.yml index 4a394237771b1..e60fa1200754c 100644 --- a/.github/workflows/commit_artifacts.yml +++ b/.github/workflows/commit_artifacts.yml @@ -99,6 +99,11 @@ jobs: } else { process.exitCode = 1; } + - name: Strip @license from eslint plugin and react-refresh + run: | + sed -i -e 's/ @license React*//' \ + build/oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \ + build/oss-stable/react-refresh/cjs/react-refresh-babel.development.js - name: Move relevant files into compiled run: | mkdir -p ./compiled From c961f2f476092a138da5082dfc12916d85509649 Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 6 Dec 2022 09:55:37 -0800 Subject: [PATCH 06/17] [DiffTrain] Add REVISION and REVISION_TRANSFORM to output (#25830) We use these for the sync script, so to preserve option value let's continue adding these files so the script can still be used for arbitrary commits. --- .github/workflows/commit_artifacts.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/commit_artifacts.yml b/.github/workflows/commit_artifacts.yml index e60fa1200754c..9505643dc3fe2 100644 --- a/.github/workflows/commit_artifacts.yml +++ b/.github/workflows/commit_artifacts.yml @@ -129,6 +129,10 @@ jobs: ./compiled/babel-plugin-react-refresh/index.js ls -R ./compiled + - name: Add REVISION files + run: | + echo ${{ github.sha }} >> ./compiled/facebook-www/REVISION + cp ./compiled/facebook-www/REVISION ./compiled/facebook-www/REVISION_TRANSFORMS - uses: actions/upload-artifact@v3 with: name: compiled From 7db45b9a38b8d1b5b945756cf38a174c1ec6118a Mon Sep 17 00:00:00 2001 From: lushevol Date: Wed, 7 Dec 2022 04:21:01 +0800 Subject: [PATCH 07/17] fix invalid link to react-devtools-extensions/src/__tests__ (#25816) --- packages/react-devtools/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md index cf6ff53d053d7..ac0799127a8b9 100644 --- a/packages/react-devtools/CONTRIBUTING.md +++ b/packages/react-devtools/CONTRIBUTING.md @@ -65,7 +65,7 @@ yarn build:chrome && yarn test:chrome --url= ``` # Unit tests -Core DevTools functionality is typically unit tested (see [here](https://github.com/facebook/react/tree/main/packages/react-devtools-shared/src/__tests__) and [here](https://github.com/facebook/react/tree/main/packages/react-devtools-extensions/src/__tests__)). To run tests, you'll first need to build or download React and React DOM ([as explained above](#build-react-and-react-dom)) and then use the following NPM script: +Core DevTools functionality is typically unit tested (see [here](https://github.com/facebook/react/tree/main/packages/react-devtools-shared/src/__tests__)). To run tests, you'll first need to build or download React and React DOM ([as explained above](#build-react-and-react-dom)) and then use the following NPM script: ```sh yarn test-build-devtools ``` From 645ae2686b157c9f80193e1ada75b7e00ef49acf Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 6 Dec 2022 16:12:20 -0500 Subject: [PATCH 08/17] [react-www] remove forked bundle (#25831) The `enableNewReconciler` was gone with 420f0b7fa1fcc609fc7b438c4599d0f76fab4bc0, this removes the bundle config. --- dangerfile.js | 1 - scripts/rollup/bundles.js | 11 ----------- 2 files changed, 12 deletions(-) diff --git a/dangerfile.js b/dangerfile.js index b0c95d27b0f38..2322e85654474 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -46,7 +46,6 @@ const CRITICAL_ARTIFACT_PATHS = new Set([ 'oss-experimental/react-dom/cjs/react-dom.production.min.js', 'facebook-www/ReactDOM-prod.classic.js', 'facebook-www/ReactDOM-prod.modern.js', - 'facebook-www/ReactDOMForked-prod.classic.js', ]); const kilobyteFormatter = new Intl.NumberFormat('en', { diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 271e5770b87e3..08160a0c86ac2 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -163,17 +163,6 @@ const bundles = [ externals: ['react'], }, - /******* React DOM - www - Uses forked reconciler *******/ - { - moduleType: RENDERER, - bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING], - entry: 'react-dom', - global: 'ReactDOMForked', - minifyWithProdErrorCodes: true, - wrapWithModuleBoundaries: true, - externals: ['react'], - }, - /******* Test Utils *******/ { moduleType: RENDERER_UTILS, From d69b2cf8208848b0f71b5214ddff55a1ff437cc8 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Tue, 6 Dec 2022 17:25:30 -0500 Subject: [PATCH 09/17] [bug fix] revert values in ReactFiberFlags to keep consistency for devtools (#25832) ## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useEffect`, it triggers an error. This was introduced in #25663 when we try to keep the `ReactFiberFlags` numbers consistent with reconciler, in order to fix an issue with server components. However, the values of `ReactFiberFlags` in reconciler were actually changed a while ago in https://github.com/facebook/react/commit/b4204ede66284e7153ffb11fd434cd9b9a64a56f We made this mistake because, although it's not mentioned in the comment, `DidCapture` and `Hydrating` are actually used by DevTools This caused - the latest (not stable) react version is broken on devtools before 4.27.0 (but only in uncommon cases such server components) - all earlier react versions are broken on latest devtools (4.27.0) To keep most versions work, we need to revert the commit that changed the `ReactFiberFlags` values ## How did you test this change? 1. add a `useEffect` in a component in the TodoList of the shell, trigger the error in devtools 2. after change, the error is gone --- .../src/backend/ReactFiberFlags.js | 10 ++-- .../react-reconciler/src/ReactFiberFlags.js | 60 ++++++++++--------- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js index aeece6acb9131..8cc47dc7ce442 100644 --- a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -10,8 +10,8 @@ // This list of flags must be synced with the following file: // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js -export const NoFlags = /* */ 0b00000000000000000000000000; -export const PerformedWork = /* */ 0b00000000000000000000000001; -export const Placement = /* */ 0b00000000000000000000000010; -export const DidCapture = /* */ 0b00000000000000000001000000; -export const Hydrating = /* */ 0b00000000000000100000000000; +export const NoFlags = /* */ 0b000000000000000000000000000; +export const PerformedWork = /* */ 0b000000000000000000000000001; +export const Placement = /* */ 0b000000000000000000000000010; +export const DidCapture = /* */ 0b000000000000000000010000000; +export const Hydrating = /* */ 0b000000000000001000000000000; diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js index cf0e40ff0a12c..d53da4d5fde4d 100644 --- a/packages/react-reconciler/src/ReactFiberFlags.js +++ b/packages/react-reconciler/src/ReactFiberFlags.js @@ -12,23 +12,29 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags'; export type Flags = number; // Don't change these values. They're used by React Dev Tools. -export const NoFlags = /* */ 0b00000000000000000000000000; -export const PerformedWork = /* */ 0b00000000000000000000000001; -export const Placement = /* */ 0b00000000000000000000000010; -export const DidCapture = /* */ 0b00000000000000000001000000; -export const Hydrating = /* */ 0b00000000000000100000000000; +export const NoFlags = /* */ 0b000000000000000000000000000; +export const PerformedWork = /* */ 0b000000000000000000000000001; +export const Placement = /* */ 0b000000000000000000000000010; +export const DidCapture = /* */ 0b000000000000000000010000000; +export const Hydrating = /* */ 0b000000000000001000000000000; // You can change the rest (and add more). -export const Update = /* */ 0b00000000000000000000000100; -export const ChildDeletion = /* */ 0b00000000000000000000001000; -export const ContentReset = /* */ 0b00000000000000000000010000; -export const Callback = /* */ 0b00000000000000000000100000; -export const ForceClientRender = /* */ 0b00000000000000000010000000; -export const Ref = /* */ 0b00000000000000000100000000; -export const Snapshot = /* */ 0b00000000000000001000000000; -export const Passive = /* */ 0b00000000000000010000000000; -export const Visibility = /* */ 0b00000000000001000000000000; -export const StoreConsistency = /* */ 0b00000000000010000000000000; +export const Update = /* */ 0b000000000000000000000000100; +/* Skipped value: 0b000000000000000000000001000; */ + +export const ChildDeletion = /* */ 0b000000000000000000000010000; +export const ContentReset = /* */ 0b000000000000000000000100000; +export const Callback = /* */ 0b000000000000000000001000000; +/* Used by DidCapture: 0b000000000000000000010000000; */ + +export const ForceClientRender = /* */ 0b000000000000000000100000000; +export const Ref = /* */ 0b000000000000000001000000000; +export const Snapshot = /* */ 0b000000000000000010000000000; +export const Passive = /* */ 0b000000000000000100000000000; +/* Used by Hydrating: 0b000000000000001000000000000; */ + +export const Visibility = /* */ 0b000000000000010000000000000; +export const StoreConsistency = /* */ 0b000000000000100000000000000; export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot | StoreConsistency; @@ -37,26 +43,26 @@ export const LifecycleEffectMask = export const HostEffectMask = /* */ 0b00000000000011111111111111; // These are not really side effects, but we still reuse this field. -export const Incomplete = /* */ 0b00000000000100000000000000; -export const ShouldCapture = /* */ 0b00000000001000000000000000; -export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000; -export const DidPropagateContext = /* */ 0b00000000100000000000000000; -export const NeedsPropagation = /* */ 0b00000001000000000000000000; -export const Forked = /* */ 0b00000010000000000000000000; +export const Incomplete = /* */ 0b000000000001000000000000000; +export const ShouldCapture = /* */ 0b000000000010000000000000000; +export const ForceUpdateForLegacySuspense = /* */ 0b000000000100000000000000000; +export const DidPropagateContext = /* */ 0b000000001000000000000000000; +export const NeedsPropagation = /* */ 0b000000010000000000000000000; +export const Forked = /* */ 0b000000100000000000000000000; // Static tags describe aspects of a fiber that are not specific to a render, // e.g. a fiber uses a passive effect (even if there are no updates on this particular render). // This enables us to defer more work in the unmount case, // since we can defer traversing the tree during layout to look for Passive effects, // and instead rely on the static flag as a signal that there may be cleanup work. -export const RefStatic = /* */ 0b00000100000000000000000000; -export const LayoutStatic = /* */ 0b00001000000000000000000000; -export const PassiveStatic = /* */ 0b00010000000000000000000000; +export const RefStatic = /* */ 0b000001000000000000000000000; +export const LayoutStatic = /* */ 0b000010000000000000000000000; +export const PassiveStatic = /* */ 0b000100000000000000000000000; // Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`. -export const PlacementDEV = /* */ 0b00100000000000000000000000; -export const MountLayoutDev = /* */ 0b01000000000000000000000000; -export const MountPassiveDev = /* */ 0b10000000000000000000000000; +export const PlacementDEV = /* */ 0b001000000000000000000000000; +export const MountLayoutDev = /* */ 0b010000000000000000000000000; +export const MountPassiveDev = /* */ 0b100000000000000000000000000; // Groups of flags that are used in the commit phase to skip over trees that // don't contain effects, by checking subtreeFlags. From d4bc16a7d69eb2ea38a88c8ac0b461d5f72cdcab Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 6 Dec 2022 19:14:31 -0500 Subject: [PATCH 10/17] Revert "[react-www] remove forked bundle" (#25837) Reverts facebook/react#25831 --- dangerfile.js | 1 + scripts/rollup/bundles.js | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/dangerfile.js b/dangerfile.js index 2322e85654474..b0c95d27b0f38 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -46,6 +46,7 @@ const CRITICAL_ARTIFACT_PATHS = new Set([ 'oss-experimental/react-dom/cjs/react-dom.production.min.js', 'facebook-www/ReactDOM-prod.classic.js', 'facebook-www/ReactDOM-prod.modern.js', + 'facebook-www/ReactDOMForked-prod.classic.js', ]); const kilobyteFormatter = new Intl.NumberFormat('en', { diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 08160a0c86ac2..271e5770b87e3 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -163,6 +163,17 @@ const bundles = [ externals: ['react'], }, + /******* React DOM - www - Uses forked reconciler *******/ + { + moduleType: RENDERER, + bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING], + entry: 'react-dom', + global: 'ReactDOMForked', + minifyWithProdErrorCodes: true, + wrapWithModuleBoundaries: true, + externals: ['react'], + }, + /******* Test Utils *******/ { moduleType: RENDERER_UTILS, From bfcbf3306794eb3de37d866551127fc2bdae53d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 7 Dec 2022 09:41:50 -0500 Subject: [PATCH 11/17] toString children of title (#25838) children of title can either behave like children or like an attribute. We're kind of treating it more like an attribute now so we should support toString/valueOf like we do on attributes. --- .../src/client/ReactDOMFloatClient.js | 22 ++++++++++++++----- .../src/server/ReactDOMFloatServer.js | 22 ++++++++++++++----- .../src/server/ReactDOMServerFormatConfig.js | 19 +++++++++++----- .../src/__tests__/ReactDOMFizzServer-test.js | 12 ++++++---- 4 files changed, 53 insertions(+), 22 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index b09789d436fb7..14699940e31fd 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -587,17 +587,27 @@ export function getResource( return null; } case 'title': { - let child = pendingProps.children; - if (Array.isArray(child) && child.length === 1) { - child = child[0]; + const children = pendingProps.children; + let child; + if (Array.isArray(children)) { + child = children.length === 1 ? children[0] : null; + } else { + child = children; } - if (typeof child === 'string' || typeof child === 'number') { + if ( + typeof child !== 'function' && + typeof child !== 'symbol' && + child !== null && + child !== undefined + ) { + // eslint-disable-next-line react-internal/safe-string-coercion + const childString = '' + (child: any); const headRoot: Document = getDocumentFromRoot(resourceRoot); const headResources = getResourcesFromRoot(headRoot).head; - const key = getTitleKey(child); + const key = getTitleKey(childString); let resource = headResources.get(key); if (!resource) { - const titleProps = titlePropsFromRawProps(child, pendingProps); + const titleProps = titlePropsFromRawProps(childString, pendingProps); resource = { type: 'title', props: titleProps, diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js index 2805b629d4b48..fe75f9833745a 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js +++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js @@ -652,17 +652,27 @@ export function resourcesFromElement(type: string, props: Props): boolean { const resources = currentResources; switch (type) { case 'title': { - let child = props.children; - if (Array.isArray(child) && child.length === 1) { - child = child[0]; + const children = props.children; + let child; + if (Array.isArray(children)) { + child = children.length === 1 ? children[0] : null; + } else { + child = children; } - if (typeof child === 'string' || typeof child === 'number') { - const key = 'title::' + child; + if ( + typeof child !== 'function' && + typeof child !== 'symbol' && + child !== null && + child !== undefined + ) { + // eslint-disable-next-line react-internal/safe-string-coercion + const childString = '' + (child: any); + const key = 'title::' + childString; let resource = resources.headsMap.get(key); if (!resource) { resource = { type: 'title', - props: titlePropsFromRawProps(child, props), + props: titlePropsFromRawProps(childString, props), flushed: false, }; resources.headsMap.set(key, resource); diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index c66292d801835..14fba1762ca9a 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -1473,12 +1473,19 @@ function pushTitleImpl( } target.push(endOfStartTag); - const child = - Array.isArray(children) && children.length < 2 - ? children[0] || null - : children; - if (typeof child === 'string' || typeof child === 'number') { - target.push(stringToChunk(escapeTextForBrowser(child))); + const child = Array.isArray(children) + ? children.length < 2 + ? children[0] + : null + : children; + if ( + typeof child !== 'function' && + typeof child !== 'symbol' && + child !== null && + child !== undefined + ) { + // eslint-disable-next-line react-internal/safe-string-coercion + target.push(stringToChunk(escapeTextForBrowser('' + child))); } target.push(endTag1, stringToChunk('title'), endTag2); return null; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index b900f3452b4ee..79455a7225df8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -5144,8 +5144,10 @@ describe('ReactDOMFizzServer', () => { } if (gate(flags => flags.enableFloat)) { - // invalid titles are not emitted on the server when float is on - expect(getVisibleChildren(container)).toEqual(undefined); + // object titles are toStringed when float is on + expect(getVisibleChildren(container)).toEqual( + {'[object Object]'}, + ); } else { expect(getVisibleChildren(container)).toEqual(hello); } @@ -5159,8 +5161,10 @@ describe('ReactDOMFizzServer', () => { expect(Scheduler).toFlushAndYield([]); expect(errors).toEqual([]); if (gate(flags => flags.enableFloat)) { - // invalid titles are not emitted on the server when float is on - expect(getVisibleChildren(container)).toEqual(undefined); + // object titles are toStringed when float is on + expect(getVisibleChildren(container)).toEqual( + {'[object Object]'}, + ); } else { expect(getVisibleChildren(container)).toEqual(hello); } From b94275150ab79f47f0ea889a729d85968caa0b4b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 15:50:16 +0000 Subject: [PATCH 12/17] Bump qs from 6.4.0 to 6.4.1 in /fixtures/packaging/webpack/dev (#25824) --- fixtures/packaging/webpack/dev/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fixtures/packaging/webpack/dev/yarn.lock b/fixtures/packaging/webpack/dev/yarn.lock index 961a3a8208a0e..2da73debceea8 100644 --- a/fixtures/packaging/webpack/dev/yarn.lock +++ b/fixtures/packaging/webpack/dev/yarn.lock @@ -936,8 +936,8 @@ punycode@^1.2.4, punycode@^1.4.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" qs@~6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" + version "6.4.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6" querystring-es3@^0.2.0: version "0.2.1" From 8e24b046877b1a69e58b45dde15ef2e17124ad98 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 15:50:36 +0000 Subject: [PATCH 13/17] Bump qs from 6.4.0 to 6.4.1 in /fixtures/packaging/brunch/dev (#25822) --- fixtures/packaging/brunch/dev/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fixtures/packaging/brunch/dev/yarn.lock b/fixtures/packaging/brunch/dev/yarn.lock index 564eec0059237..8620edba1f2d7 100644 --- a/fixtures/packaging/brunch/dev/yarn.lock +++ b/fixtures/packaging/brunch/dev/yarn.lock @@ -1590,8 +1590,8 @@ qs@6.5.1: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" qs@~6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" + version "6.4.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6" querystring-es3@~0.2.1: version "0.2.1" From a0619e26ca46cb848a23e71b0ab8a2bd51d2053d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 15:58:42 +0000 Subject: [PATCH 14/17] Bump qs from 6.4.0 to 6.4.1 in /fixtures/packaging/webpack-alias/prod (#25823) --- fixtures/packaging/webpack-alias/prod/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fixtures/packaging/webpack-alias/prod/yarn.lock b/fixtures/packaging/webpack-alias/prod/yarn.lock index 961a3a8208a0e..2da73debceea8 100644 --- a/fixtures/packaging/webpack-alias/prod/yarn.lock +++ b/fixtures/packaging/webpack-alias/prod/yarn.lock @@ -936,8 +936,8 @@ punycode@^1.2.4, punycode@^1.4.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" qs@~6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" + version "6.4.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.1.tgz#2bad97710a5b661c366b378b1e3a44a592ff45e6" querystring-es3@^0.2.0: version "0.2.1" From c60033920011043b4aee92ab3cc668ad7e146e1e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 16:10:33 +0000 Subject: [PATCH 15/17] Bump qs from 6.5.2 to 6.5.3 in /fixtures/concurrent/time-slicing (#25846) --- fixtures/concurrent/time-slicing/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fixtures/concurrent/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock index d4a66e69e618f..49371b778a0de 100644 --- a/fixtures/concurrent/time-slicing/yarn.lock +++ b/fixtures/concurrent/time-slicing/yarn.lock @@ -6536,9 +6536,9 @@ qs@6.7.0: integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== qs@~6.5.2: - version "6.5.2" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" - integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== + version "6.5.3" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" + integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA== query-string@^4.1.0: version "4.3.4" From 827cbdbcc694e1aa9f4a8768c8677a1531c77ea3 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Wed, 7 Dec 2022 12:23:52 -0500 Subject: [PATCH 16/17] React DevTools 4.27.0 -> 4.27.1 (#25835) patch for devtools bug --- packages/react-devtools-core/package.json | 2 +- packages/react-devtools-extensions/chrome/manifest.json | 4 ++-- packages/react-devtools-extensions/edge/manifest.json | 4 ++-- packages/react-devtools-extensions/firefox/manifest.json | 2 +- packages/react-devtools-inline/package.json | 2 +- packages/react-devtools-timeline/package.json | 2 +- packages/react-devtools/CHANGELOG.md | 7 +++++++ packages/react-devtools/package.json | 4 ++-- 8 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index 556467d033ba8..91a3760f6e426 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-core", - "version": "4.27.0", + "version": "4.27.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 251d250b0b0bc..444becd988ae8 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", - "version": "4.27.0", - "version_name": "4.27.0", + "version": "4.27.1", + "version_name": "4.27.1", "minimum_chrome_version": "88", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index a946b1661284a..2ecad6f6f928a 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", - "version": "4.27.0", - "version_name": "4.27.0", + "version": "4.27.1", + "version_name": "4.27.1", "minimum_chrome_version": "88", "icons": { "16": "icons/16-production.png", diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index 18aa44a430550..4566db908e8a3 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", - "version": "4.27.0", + "version": "4.27.1", "applications": { "gecko": { "id": "@react-devtools", diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index d41dcdc9453b4..d29437849ca47 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-inline", - "version": "4.27.0", + "version": "4.27.1", "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json index c6e8537f336f5..1f86b2540271b 100644 --- a/packages/react-devtools-timeline/package.json +++ b/packages/react-devtools-timeline/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-devtools-timeline", - "version": "4.27.0", + "version": "4.27.1", "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db", diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md index 45808d8d848e6..aefd1dbb73704 100644 --- a/packages/react-devtools/CHANGELOG.md +++ b/packages/react-devtools/CHANGELOG.md @@ -4,6 +4,13 @@ --- +### 4.27.1 +December 6, 2022 + +* [bug fix] revert values in ReactFiberFlags to keep consistency for devtools ([mondaychen](https://github.com/mondaychen) in [#25832](https://github.com/facebook/react/pull/25832)) + +--- + ### 4.27.0 November 28, 2022 diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index 7f0b9967b670b..d866ead7dc5a5 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools", - "version": "4.27.0", + "version": "4.27.1", "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": { @@ -26,7 +26,7 @@ "electron": "^11.1.0", "ip": "^1.1.4", "minimist": "^1.2.3", - "react-devtools-core": "4.27.0", + "react-devtools-core": "4.27.1", "update-notifier": "^2.1.0" } } From 5dfc485f6957bf941fcd9565e0271aea019d7c9e Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 7 Dec 2022 12:51:46 -0800 Subject: [PATCH 17/17] fix tests for when float is off (#25839) Some tests fail when float is off but when singletons are on. This PR makes some adjustments 1. 2 singleton tests assert float semantics so will fail. 2. the float dispatcher was being set on the server even when float was off. while the float calls didn't do anything warnings were still generated. Instead we provide an empty object for the dispatcher if float is off. Longer term the dispatcher should move to formatconfig and just reference the float methods if the flag is on 3. some external fizz runtime tests did not gate against float but should have --- .../react-dom-bindings/src/server/ReactDOMFloatServer.js | 2 +- .../src/server/ReactDOMServerFormatConfig.js | 6 +++++- packages/react-dom/src/__tests__/ReactDOMFloat-test.js | 2 +- .../src/__tests__/ReactDOMSingletonComponents-test.js | 4 ++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js index fe75f9833745a..d25638809db27 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js +++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js @@ -202,7 +202,7 @@ export function setCurrentlyRenderingBoundaryResourcesTarget( resources.boundaryResources = boundaryResources; } -export const ReactDOMServerDispatcher = { +export const ReactDOMServerFloatDispatcher = { preload, preinit, }; diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index 14fba1762ca9a..a7f1a20cc1f15 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -69,7 +69,7 @@ import { resourcesFromElement, resourcesFromLink, resourcesFromScript, - ReactDOMServerDispatcher, + ReactDOMServerFloatDispatcher, } from './ReactDOMFloatServer'; export { createResources, @@ -89,6 +89,10 @@ import { import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher; +const ReactDOMServerDispatcher = enableFloat + ? ReactDOMServerFloatDispatcher + : {}; + export function prepareToRender(resources: Resources): mixed { prepareToRenderResources(resources); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 6ce5b6617876d..36a288a67a008 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -608,6 +608,7 @@ describe('ReactDOMFloat', () => { ]); }); + // @gate enableFloat it('dedupes if the external runtime is explicitly loaded using preinit', async () => { const unstable_externalRuntimeSrc = 'src-of-external-runtime'; function App() { @@ -5681,7 +5682,6 @@ describe('ReactDOMFloat', () => { ); }); - // @gate enableFloat it('should not treat title descendants of svg into resources', async () => { await actIntoEmptyDocument(() => { const {pipe} = renderToPipeableStream( diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js index 0899d7d3c7871..026302c18cc27 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js @@ -116,7 +116,7 @@ describe('ReactDOM HostSingleton', () => { : children; } - // @gate enableHostSingletons + // @gate enableHostSingletons && enableFloat it('warns if you render the same singleton twice at the same time', async () => { const root = ReactDOMClient.createRoot(document); root.render( @@ -201,7 +201,7 @@ describe('ReactDOM HostSingleton', () => { ); }); - // @gate enableHostSingletons + // @gate enableHostSingletons && enableFloat it('renders into html, head, and body persistently so the node identities never change and extraneous styles are retained', async () => { gate(flags => { if (flags.enableHostSingletons !== true) {