diff --git a/.eslintrc.js b/.eslintrc.js index 9445bacebe835..c5350074671ed 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -140,8 +140,6 @@ module.exports = { 'packages/react-dom/src/test-utils/**/*.js', 'packages/react-devtools-shared/**/*.js', 'packages/react-noop-renderer/**/*.js', - 'packages/react-pg/**/*.js', - 'packages/react-fs/**/*.js', 'packages/react-refresh/**/*.js', 'packages/react-server-dom-webpack/**/*.js', 'packages/react-test-renderer/**/*.js', @@ -277,5 +275,6 @@ module.exports = { trustedTypes: 'readonly', IS_REACT_ACT_ENVIRONMENT: 'readonly', AsyncLocalStorage: 'readonly', + globalThis: 'readonly', }, }; diff --git a/ReactVersions.js b/ReactVersions.js index 26701175ec3de..789068abeb899 100644 --- a/ReactVersions.js +++ b/ReactVersions.js @@ -43,7 +43,7 @@ const stablePackages = { // These packages do not exist in the @next or @latest channel, only // @experimental. We don't use semver, just the commit sha, so this is just a // list of package names instead of a map. -const experimentalPackages = ['react-fetch', 'react-fs', 'react-pg']; +const experimentalPackages = []; module.exports = { ReactVersion, diff --git a/fixtures/fizz/yarn.lock b/fixtures/fizz/yarn.lock index 4cc15f152c628..7c5f1df02f65b 100644 --- a/fixtures/fizz/yarn.lock +++ b/fixtures/fizz/yarn.lock @@ -3267,9 +3267,9 @@ loader-runner@^2.4.0: integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== loader-utils@^1.2.3, loader-utils@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" - integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== + version "1.4.2" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3" + integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg== dependencies: big.js "^5.2.2" emojis-list "^3.0.0" @@ -3460,7 +3460,12 @@ minimatch@^3.0.4: dependencies: brace-expansion "^1.1.7" -minimist@^1.2.0, minimist@^1.2.6: +minimist@^1.2.0: + version "1.2.7" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18" + integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== + +minimist@^1.2.6: version "1.2.6" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock index 28067347b3d10..afacff324cb2c 100644 --- a/fixtures/flight/yarn.lock +++ b/fixtures/flight/yarn.lock @@ -3192,6 +3192,7 @@ bfj@^7.0.2: big.js@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" + integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== binary-extensions@^2.0.0: version "2.1.0" @@ -6399,20 +6400,7 @@ json5@^1.0.1: dependencies: minimist "^1.2.0" -json5@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6" - dependencies: - minimist "^1.2.0" - -json5@^2.1.2: - version "2.1.3" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43" - integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA== - dependencies: - minimist "^1.2.5" - -json5@^2.2.0, json5@^2.2.1: +json5@^2.1.0, json5@^2.1.2, json5@^2.2.0, json5@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== @@ -6507,9 +6495,9 @@ loader-runner@^4.2.0: integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg== loader-utils@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0" - integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ== + version "2.0.4" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" + integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== dependencies: big.js "^5.2.2" emojis-list "^3.0.0" @@ -6783,11 +6771,6 @@ minimist@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" -minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== - minimist@^1.2.6: version "1.2.6" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index 2b9eea6d66f8a..af31e5e6fd600 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -898,7 +898,11 @@ describe('ReactHooksInspectionIntegration', () => { await LazyFoo; - Scheduler.unstable_flushAll(); + expect(() => { + Scheduler.unstable_flushAll(); + }).toErrorDev([ + 'Foo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.', + ]); const childFiber = renderer.root._currentFiber(); const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js index bd17e6fba4b02..70048a9de6cd1 100644 --- a/packages/react-devtools-core/src/backend.js +++ b/packages/react-devtools-core/src/backend.js @@ -14,6 +14,11 @@ import {initBackend} from 'react-devtools-shared/src/backend'; import {__DEBUG__} from 'react-devtools-shared/src/constants'; import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor'; import {getDefaultComponentFilters} from 'react-devtools-shared/src/utils'; +import { + initializeUsingCachedSettings, + cacheConsolePatchSettings, + type DevToolsSettingsManager, +} from './cachedSettings'; import type {BackendBridge} from 'react-devtools-shared/src/bridge'; import type {ComponentFilter} from 'react-devtools-shared/src/types'; @@ -29,6 +34,7 @@ type ConnectOptions = { retryConnectionDelay?: number, isAppActive?: () => boolean, websocket?: ?WebSocket, + devToolsSettingsManager: ?DevToolsSettingsManager, ... }; @@ -63,6 +69,7 @@ export function connectToDevTools(options: ?ConnectOptions) { resolveRNStyle = null, retryConnectionDelay = 2000, isAppActive = () => true, + devToolsSettingsManager, } = options || {}; const protocol = useHttps ? 'wss' : 'ws'; @@ -78,6 +85,16 @@ export function connectToDevTools(options: ?ConnectOptions) { } } + if (devToolsSettingsManager != null) { + try { + initializeUsingCachedSettings(devToolsSettingsManager); + } catch (e) { + // If we call a method on devToolsSettingsManager that throws, or if + // is invalid data read out, don't throw and don't interrupt initialization + console.error(e); + } + } + if (!isAppActive()) { // If the app is in background, maybe retry later. // Don't actually attempt to connect until we're in foreground. @@ -142,6 +159,15 @@ export function connectToDevTools(options: ?ConnectOptions) { }, ); + if (devToolsSettingsManager != null && bridge != null) { + bridge.addListener('updateConsolePatchSettings', consolePatchSettings => + cacheConsolePatchSettings( + devToolsSettingsManager, + consolePatchSettings, + ), + ); + } + // The renderer interface doesn't read saved component filters directly, // because they are generally stored in localStorage within the context of the extension. // Because of this it relies on the extension to pass filters. diff --git a/packages/react-devtools-core/src/cachedSettings.js b/packages/react-devtools-core/src/cachedSettings.js new file mode 100644 index 0000000000000..cb6dddfec313b --- /dev/null +++ b/packages/react-devtools-core/src/cachedSettings.js @@ -0,0 +1,77 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import { + type ConsolePatchSettings, + writeConsolePatchSettingsToWindow, +} from 'react-devtools-shared/src/backend/console'; +import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils'; + +// Note: all keys should be optional in this type, because users can use newer +// versions of React DevTools with older versions of React Native, and the object +// provided by React Native may not include all of this type's fields. +export type DevToolsSettingsManager = { + getConsolePatchSettings: ?() => string, + setConsolePatchSettings: ?(key: string) => void, +}; + +export function initializeUsingCachedSettings( + devToolsSettingsManager: DevToolsSettingsManager, +) { + initializeConsolePatchSettings(devToolsSettingsManager); +} + +function initializeConsolePatchSettings( + devToolsSettingsManager: DevToolsSettingsManager, +) { + if (devToolsSettingsManager.getConsolePatchSettings == null) { + return; + } + const consolePatchSettingsString = devToolsSettingsManager.getConsolePatchSettings(); + if (consolePatchSettingsString == null) { + return; + } + const parsedConsolePatchSettings = parseConsolePatchSettings( + consolePatchSettingsString, + ); + if (parsedConsolePatchSettings == null) { + return; + } + writeConsolePatchSettingsToWindow(parsedConsolePatchSettings); +} + +function parseConsolePatchSettings( + consolePatchSettingsString: string, +): ?ConsolePatchSettings { + const parsedValue = JSON.parse(consolePatchSettingsString ?? '{}'); + const { + appendComponentStack, + breakOnConsoleErrors, + showInlineWarningsAndErrors, + hideConsoleLogsInStrictMode, + browserTheme, + } = parsedValue; + return { + appendComponentStack: castBool(appendComponentStack) ?? true, + breakOnConsoleErrors: castBool(breakOnConsoleErrors) ?? false, + showInlineWarningsAndErrors: castBool(showInlineWarningsAndErrors) ?? true, + hideConsoleLogsInStrictMode: castBool(hideConsoleLogsInStrictMode) ?? false, + browserTheme: castBrowserTheme(browserTheme) ?? 'dark', + }; +} + +export function cacheConsolePatchSettings( + devToolsSettingsManager: DevToolsSettingsManager, + value: ConsolePatchSettings, +): void { + if (devToolsSettingsManager.setConsolePatchSettings == null) { + return; + } + devToolsSettingsManager.setConsolePatchSettings(JSON.stringify(value)); +} diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index bc69af0ead1fe..7c449ef77387b 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -132,16 +132,16 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -153,10 +153,10 @@ describe('Timeline profiler', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -164,15 +164,15 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -199,14 +199,14 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYieldThrough(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-64", - "--render-start-64", - "--component-render-start-Foo", - "--component-render-stop", - "--render-yield", - ] - `); + Array [ + "--schedule-render-128", + "--render-start-128", + "--component-render-start-Foo", + "--component-render-stop", + "--render-yield", + ] + `); }); // @reactVersion >=18.0 @@ -224,19 +224,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-1-", + "--suspense-suspend-0-Example-mount-2-", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -267,19 +267,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-1-", + "--suspense-suspend-0-Example-mount-2-", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -305,10 +305,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -316,18 +316,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-16-", + "--suspense-suspend-0-Example-mount-32-", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -357,10 +357,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -368,18 +368,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-16-", + "--suspense-suspend-0-Example-mount-32-", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -410,10 +410,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -421,29 +421,29 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", "--commit-stop", ] @@ -464,10 +464,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -475,29 +475,29 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", "--commit-stop", ] @@ -519,10 +519,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -540,18 +540,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -574,10 +574,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -595,18 +595,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", - "--schedule-forced-update-16-Example", + "--schedule-forced-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -626,10 +626,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -637,31 +637,31 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--component-layout-effect-mount-start-Example", - "--schedule-state-update-1-Example", + "--schedule-state-update-2-Example", "--component-layout-effect-mount-stop", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", "--commit-stop", ] @@ -684,35 +684,35 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", - "--passive-effects-start-16", + "--passive-effects-start-32", "--component-passive-effect-mount-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-passive-effect-mount-stop", "--passive-effects-stop", - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", ] `); @@ -734,19 +734,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -782,8 +782,8 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -791,26 +791,26 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", ] `); @@ -845,10 +845,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -856,7 +856,7 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -864,7 +864,7 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--render-start-16", + "--render-start-32", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -872,25 +872,25 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--commit-stop", "--commit-stop", ] @@ -947,18 +947,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-ComponentWithEffects", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--component-layout-effect-mount-start-ComponentWithEffects", "--component-layout-effect-mount-stop", "--component-layout-effect-mount-start-ComponentWithEffects", @@ -977,17 +977,17 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - 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", - ] - `); + 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", + ] + `); clearPendingMarks(); @@ -1005,22 +1005,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--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-1", + "--layout-effects-start-2", "--layout-effects-stop", - "--passive-effects-start-1", + "--passive-effects-start-2", "--component-passive-effect-unmount-start-ComponentWithEffects", "--component-passive-effect-unmount-stop", "--component-passive-effect-unmount-start-ComponentWithEffects", @@ -1040,16 +1040,16 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -1060,10 +1060,10 @@ describe('Timeline profiler', () => { it('regression test DefaultLane', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); }); // @reactVersion >=18.0 @@ -1090,18 +1090,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-1-App", - "--render-start-1", + "--schedule-state-update-2-App", + "--render-start-2", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -1131,18 +1131,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-4-App", - "--render-start-4", + "--schedule-state-update-8-App", + "--render-start-8", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-4", + "--commit-start-8", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -1213,7 +1213,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1230,7 +1230,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1272,7 +1272,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000001000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1281,7 +1281,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000001000000", + "lanes": "0b0000000000000000000000010000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1290,7 +1290,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000001000000", + "lanes": "0b0000000000000000000000010000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1299,7 +1299,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1629,7 +1629,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1638,7 +1638,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1689,14 +1689,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1758,7 +1758,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1767,7 +1767,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1828,14 +1828,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1891,7 +1891,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1900,7 +1900,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1955,7 +1955,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1964,7 +1964,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -2005,7 +2005,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2014,7 +2014,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2090,7 +2090,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2099,7 +2099,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2204,7 +2204,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2213,7 +2213,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 30, "type": "schedule-state-update", "warning": null, @@ -2395,7 +2395,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2403,7 +2403,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2411,7 +2411,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2419,7 +2419,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2427,7 +2427,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2437,7 +2437,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -2445,7 +2445,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -2453,7 +2453,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -2461,7 +2461,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, @@ -2469,7 +2469,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "passive-effects", }, @@ -2505,7 +2505,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2515,7 +2515,7 @@ describe('Timeline profiler', () => { "componentStack": " in Child (at **) in CommponentWithChildren (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index 6c38ce6c9953a..38a7d5e99b0a6 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -629,7 +629,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render-idle", }, @@ -637,7 +637,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render", }, @@ -645,7 +645,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.008, "type": "commit", }, @@ -653,7 +653,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.014, "type": "layout-effects", }, @@ -714,12 +714,13 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [ + 0 => Array [], + 1 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render-idle", }, @@ -727,7 +728,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render", }, @@ -735,7 +736,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.008, "type": "commit", }, @@ -743,12 +744,11 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.014, "type": "layout-effects", }, ], - 1 => Array [], 2 => Array [], 3 => Array [], 4 => Array [], @@ -785,7 +785,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.005, "type": "schedule-render", "warning": null, @@ -827,7 +827,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render-idle", }, @@ -835,7 +835,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render", }, @@ -843,7 +843,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.01, "type": "commit", }, @@ -851,7 +851,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.016, "type": "layout-effects", }, @@ -859,7 +859,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.019, "type": "passive-effects", }, @@ -869,7 +869,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render-idle", }, @@ -877,7 +877,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render", }, @@ -885,7 +885,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.028, "type": "commit", }, @@ -893,7 +893,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.034, "type": "layout-effects", }, @@ -901,7 +901,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.037, "type": "passive-effects", }, @@ -995,12 +995,13 @@ describe('Timeline profiler', () => { 1 => Array [], 2 => Array [], 3 => Array [], - 4 => Array [ + 4 => Array [], + 5 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render-idle", }, @@ -1008,7 +1009,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render", }, @@ -1016,7 +1017,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.01, "type": "commit", }, @@ -1024,7 +1025,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.016, "type": "layout-effects", }, @@ -1032,7 +1033,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.019, "type": "passive-effects", }, @@ -1040,7 +1041,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render-idle", }, @@ -1048,7 +1049,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render", }, @@ -1056,7 +1057,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.028, "type": "commit", }, @@ -1064,7 +1065,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.034, "type": "layout-effects", }, @@ -1072,12 +1073,11 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.037, "type": "passive-effects", }, ], - 5 => Array [], 6 => Array [], 7 => Array [], 8 => Array [], @@ -1110,14 +1110,14 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.005, "type": "schedule-render", "warning": null, }, Object { "componentName": "App", - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.021, "type": "schedule-state-update", "warning": null, @@ -1963,7 +1963,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -1971,7 +1971,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -1979,7 +1979,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -1987,7 +1987,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, @@ -1998,13 +1998,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "Sync", - 2 => "InputContinuousHydration", - 4 => "InputContinuous", - 8 => "DefaultHydration", - 16 => "Default", - 32 => "TransitionHydration", - 64 => "Transition", + 1 => "SyncHydrationLane", + 2 => "Sync", + 4 => "InputContinuousHydration", + 8 => "InputContinuous", + 16 => "DefaultHydration", + 32 => "Default", + 64 => "TransitionHydration", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2020,7 +2020,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Retry", + 4194304 => "Transition", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2031,12 +2031,13 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [ + 1 => Array [], + 2 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -2044,7 +2045,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -2052,7 +2053,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -2060,12 +2061,11 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, ], - 2 => Array [], 4 => Array [], 8 => Array [], 16 => Array [], @@ -2102,7 +2102,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2153,7 +2153,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2161,7 +2161,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2169,7 +2169,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2177,7 +2177,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2185,7 +2185,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2195,7 +2195,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2203,7 +2203,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2211,7 +2211,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2219,7 +2219,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2227,7 +2227,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2267,13 +2267,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "Sync", - 2 => "InputContinuousHydration", - 4 => "InputContinuous", - 8 => "DefaultHydration", - 16 => "Default", - 32 => "TransitionHydration", - 64 => "Transition", + 1 => "SyncHydrationLane", + 2 => "Sync", + 4 => "InputContinuousHydration", + 8 => "InputContinuous", + 16 => "DefaultHydration", + 32 => "Default", + 64 => "TransitionHydration", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2289,7 +2289,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Retry", + 4194304 => "Transition", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2304,12 +2304,13 @@ describe('Timeline profiler', () => { 2 => Array [], 4 => Array [], 8 => Array [], - 16 => Array [ + 16 => Array [], + 32 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2317,7 +2318,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2325,7 +2326,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2333,7 +2334,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2341,7 +2342,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2349,7 +2350,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2357,7 +2358,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2365,7 +2366,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2373,7 +2374,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2381,12 +2382,11 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, ], - 32 => Array [], 64 => Array [], 128 => Array [], 256 => Array [], @@ -2419,7 +2419,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2428,7 +2428,7 @@ describe('Timeline profiler', () => { "componentName": "App", "componentStack": " in App (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "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 new file mode 100644 index 0000000000000..aeece6acb9131 --- /dev/null +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -0,0 +1,17 @@ +/** + * 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 + */ + +// 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; diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 1a3ea52e45b32..78812286bf211 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -25,7 +25,7 @@ import { initialize as setupTraceUpdates, toggleEnabled as setTraceUpdatesEnabled, } from './views/TraceUpdates'; -import {patch as patchConsole} from './console'; +import {patch as patchConsole, type ConsolePatchSettings} from './console'; import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge'; import type {BackendBridge} from 'react-devtools-shared/src/bridge'; @@ -712,11 +712,11 @@ export default class Agent extends EventEmitter<{ showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, browserTheme, - }) => { - // If the frontend preference has change, - // or in the case of React Native- if the backend is just finding out the preference- + }: ConsolePatchSettings) => { + // If the frontend preferences have changed, + // or in the case of React Native- if the backend is just finding out the preferences- // then reinstall the console overrides. - // It's safe to call these methods multiple times, so we don't need to worry about that. + // It's safe to call `patchConsole` multiple times. patchConsole({ appendComponentStack, breakOnConsoleErrors, diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 274c0ba083969..5753d910eba1d 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -15,6 +15,7 @@ import {format, formatWithStyles} from './utils'; import {getInternalReactConstants} from './renderer'; import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack'; import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags'; +import {castBool, castBrowserTheme} from '../utils'; const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn']; const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m'; @@ -143,6 +144,14 @@ const consoleSettingsRef = { browserTheme: 'dark', }; +export type ConsolePatchSettings = { + appendComponentStack: boolean, + breakOnConsoleErrors: boolean, + showInlineWarningsAndErrors: boolean, + hideConsoleLogsInStrictMode: boolean, + browserTheme: BrowserTheme, +}; + // Patches console methods to append component stack for the current fiber. // Call unpatch() to remove the injected behavior. export function patch({ @@ -151,13 +160,7 @@ export function patch({ showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, browserTheme, -}: { - appendComponentStack: boolean, - breakOnConsoleErrors: boolean, - showInlineWarningsAndErrors: boolean, - hideConsoleLogsInStrictMode: boolean, - browserTheme: BrowserTheme, -}): void { +}: ConsolePatchSettings): void { // Settings may change after we've patched the console. // Using a shared ref allows the patch function to read the latest values. consoleSettingsRef.appendComponentStack = appendComponentStack; @@ -390,14 +393,19 @@ export function patchConsoleUsingWindowValues() { }); } -function castBool(v: any): ?boolean { - if (v === true || v === false) { - return v; - } -} - -function castBrowserTheme(v: any): ?BrowserTheme { - if (v === 'light' || v === 'dark' || v === 'auto') { - return v; - } +// After receiving cached console patch settings from React Native, we set them on window. +// When the console is initially patched (in renderer.js and hook.js), these values are read. +// The browser extension (etc.) sets these values on window, but through another method. +export function writeConsolePatchSettingsToWindow( + settings: ConsolePatchSettings, +): void { + window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = + settings.appendComponentStack; + window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = + settings.breakOnConsoleErrors; + window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = + settings.showInlineWarningsAndErrors; + window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = + settings.hideConsoleLogsInStrictMode; + window.__REACT_DEVTOOLS_BROWSER_THEME__ = settings.browserTheme; } diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index d08cd8a5ddede..68425faac8d7a 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -88,6 +88,13 @@ import { MEMO_SYMBOL_STRING, SERVER_CONTEXT_SYMBOL_STRING, } from './ReactSymbols'; +import { + DidCapture, + NoFlags, + PerformedWork, + Placement, + Hydrating, +} from './ReactFiberFlags'; import {format} from './utils'; import { enableProfilerChangedHookIndices, @@ -135,15 +142,6 @@ type ReactPriorityLevelsType = { NoPriority: number, }; -type ReactTypeOfSideEffectType = { - DidCapture: number, - NoFlags: number, - PerformedWork: number, - Placement: number, - Incomplete: number, - Hydrating: number, -}; - function getFiberFlags(fiber: Fiber): number { // The name of this field changed from "effectTag" to "flags" return fiber.flags !== undefined ? fiber.flags : (fiber: any).effectTag; @@ -162,19 +160,9 @@ export function getInternalReactConstants( getDisplayNameForFiber: getDisplayNameForFiberType, getTypeSymbol: getTypeSymbolType, ReactPriorityLevels: ReactPriorityLevelsType, - ReactTypeOfSideEffect: ReactTypeOfSideEffectType, ReactTypeOfWork: WorkTagMap, StrictModeBits: number, } { - const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = { - DidCapture: 0b10000000, - NoFlags: 0b00, - PerformedWork: 0b01, - Placement: 0b10, - Incomplete: 0b10000000000000, - Hydrating: 0b1000000000000, - }; - // ********************************************************** // The section below is copied from files in React repo. // Keep it in sync, and add version guards if it changes. @@ -237,6 +225,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: 26, // In reality, 18.2+. But doesn't hurt to include it here + HostSingleton: 27, // Same as above HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -269,6 +259,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -300,6 +292,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: 17, IndeterminateComponent: 2, @@ -331,6 +325,8 @@ export function getInternalReactConstants( HostComponent: 7, HostPortal: 6, HostRoot: 5, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 8, IncompleteClassComponent: -1, // Doesn't exist yet IndeterminateComponent: 4, @@ -362,6 +358,8 @@ export function getInternalReactConstants( HostComponent: 5, HostPortal: 4, HostRoot: 3, + HostResource: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet HostText: 6, IncompleteClassComponent: -1, // Doesn't exist yet IndeterminateComponent: 0, @@ -401,6 +399,8 @@ export function getInternalReactConstants( IndeterminateComponent, ForwardRef, HostRoot, + HostResource, + HostSingleton, HostComponent, HostPortal, HostText, @@ -466,6 +466,8 @@ export function getInternalReactConstants( } return null; case HostComponent: + case HostSingleton: + case HostResource: return type; case HostPortal: case HostText: @@ -548,7 +550,6 @@ export function getInternalReactConstants( getTypeSymbol, ReactPriorityLevels, ReactTypeOfWork, - ReactTypeOfSideEffect, StrictModeBits, }; } @@ -581,16 +582,8 @@ export function attach( getTypeSymbol, ReactPriorityLevels, ReactTypeOfWork, - ReactTypeOfSideEffect, StrictModeBits, } = getInternalReactConstants(version); - const { - DidCapture, - Hydrating, - NoFlags, - PerformedWork, - Placement, - } = ReactTypeOfSideEffect; const { CacheComponent, ClassComponent, @@ -600,6 +593,8 @@ export function attach( Fragment, FunctionComponent, HostRoot, + HostResource, + HostSingleton, HostPortal, HostComponent, HostText, @@ -1044,6 +1039,8 @@ export function attach( case HostRoot: return ElementTypeRoot; case HostComponent: + case HostResource: + case HostSingleton: return ElementTypeHostComponent; case HostPortal: case HostText: diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 0392768613764..ef03c5717a505 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -40,6 +40,8 @@ export type WorkTagMap = { HostComponent: WorkTag, HostPortal: WorkTag, HostRoot: WorkTag, + HostResource: WorkTag, + HostSingleton: WorkTag, HostText: WorkTag, IncompleteClassComponent: WorkTag, IndeterminateComponent: WorkTag, diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 64b32a44483cb..19549e1b0dbe2 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -17,7 +17,7 @@ import type { RendererID, } from 'react-devtools-shared/src/backend/types'; import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types'; -import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; +import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/console'; const BATCH_DURATION = 100; @@ -171,14 +171,6 @@ type NativeStyleEditor_SetValueParams = { value: string, }; -type UpdateConsolePatchSettingsParams = { - appendComponentStack: boolean, - breakOnConsoleErrors: boolean, - showInlineWarningsAndErrors: boolean, - hideConsoleLogsInStrictMode: boolean, - browserTheme: BrowserTheme, -}; - type SavedPreferencesParams = { appendComponentStack: boolean, breakOnConsoleErrors: boolean, @@ -247,7 +239,7 @@ type FrontendEvents = { stopProfiling: [], storeAsGlobal: [StoreAsGlobalParams], updateComponentFilters: [Array], - updateConsolePatchSettings: [UpdateConsolePatchSettingsParams], + updateConsolePatchSettings: [ConsolePatchSettings], viewAttributeSource: [ViewAttributeSourceParams], viewElementSource: [ElementAndRendererID], diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js index 6557fddbef985..f3a83da5ea628 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js @@ -9,6 +9,7 @@ import {copy} from 'clipboard-js'; import * as React from 'react'; +import {ElementTypeHostComponent} from 'react-devtools-shared/src/types'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import KeyValue from './KeyValue'; @@ -33,52 +34,55 @@ export default function InspectedElementStateTree({ inspectedElement, store, }: Props): React.Node { - const {state} = inspectedElement; + const {state, type} = inspectedElement; + + // HostSingleton and HostResource may have state that we don't want to expose to users + const isHostComponent = type === ElementTypeHostComponent; const entries = state != null ? Object.entries(state) : null; + const isEmpty = entries === null || entries.length === 0; + + if (isEmpty || isHostComponent) { + return null; + } + if (entries !== null) { entries.sort(alphaSortEntries); } - const isEmpty = entries === null || entries.length === 0; - const handleCopy = () => copy(serializeDataForCopy(((state: any): Object))); - if (isEmpty) { - return null; - } else { - return ( -
-
-
state
- {!isEmpty && ( - - )} -
- {isEmpty &&
None
} - {!isEmpty && - (entries: any).map(([name, value]) => ( -