diff --git a/.github/workflows/commit_artifacts.yml b/.github/workflows/commit_artifacts.yml index c72400a7c25ac..9505643dc3fe2 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 @@ -124,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 @@ -146,7 +155,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 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" 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" 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" 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" 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" 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-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-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-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/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 ``` 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" } } 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..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, }; @@ -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..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); @@ -1473,12 +1477,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); } diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 100036b2a5030..b216700671cca 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__/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-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) { 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/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. 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})`, ]); 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