From 71ba946f5bfc376ebc56776748c1763fd0ca6452 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Thu, 10 Nov 2022 16:02:36 -0500 Subject: [PATCH 1/5] [DevTools] bug fix for Hydrating fibers --- .../src/backend/ReactFiberFlags.js | 9 +++++++++ .../src/backend/renderer.js | 20 +++++++++++++------ 2 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 packages/react-devtools-shared/src/backend/ReactFiberFlags.js 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..bd662b2634f77 --- /dev/null +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -0,0 +1,9 @@ +// 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 Hydrating = /* */ 0b00000000000000100000000000; +export const DidCapture = /* */ 0b00000000000000000001000000; +export const Incomplete = /* */ 0b00000000000100000000000000; \ No newline at end of file diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index cb3a8f2f407c7..e2bbf43f27598 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -88,6 +88,14 @@ import { MEMO_SYMBOL_STRING, SERVER_CONTEXT_SYMBOL_STRING, } from './ReactSymbols'; +import { + DidCapture, + NoFlags, + PerformedWork, + Placement, + Incomplete, + Hydrating, +} from './ReactFiberFlags'; import {format} from './utils'; import { enableProfilerChangedHookIndices, @@ -167,12 +175,12 @@ export function getInternalReactConstants( StrictModeBits: number, } { const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = { - DidCapture: 0b10000000, - NoFlags: 0b00, - PerformedWork: 0b01, - Placement: 0b10, - Incomplete: 0b10000000000000, - Hydrating: 0b1000000000000, + DidCapture, + NoFlags, + PerformedWork, + Placement, + Incomplete, + Hydrating, }; // ********************************************************** From ea4082da36d52a73f27af8b629465f951a279e4e Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Thu, 10 Nov 2022 16:13:03 -0500 Subject: [PATCH 2/5] fix lint --- packages/react-devtools-shared/src/backend/ReactFiberFlags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js index bd662b2634f77..966a335109ecc 100644 --- a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -6,4 +6,4 @@ export const PerformedWork = /* */ 0b00000000000000000000000001; export const Placement = /* */ 0b00000000000000000000000010; export const Hydrating = /* */ 0b00000000000000100000000000; export const DidCapture = /* */ 0b00000000000000000001000000; -export const Incomplete = /* */ 0b00000000000100000000000000; \ No newline at end of file +export const Incomplete = /* */ 0b00000000000100000000000000; From bf2a030eb6c9e737308a78193f0415208ad166b1 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Thu, 10 Nov 2022 16:14:46 -0500 Subject: [PATCH 3/5] better order of flags --- .../src/backend/ReactFiberFlags.js | 11 ++++++++++- packages/react-reconciler/src/ReactFiberFlags.js | 8 ++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js index 966a335109ecc..313a93d80f514 100644 --- a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -1,9 +1,18 @@ +/** + * 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 Hydrating = /* */ 0b00000000000000100000000000; export const DidCapture = /* */ 0b00000000000000000001000000; +export const Hydrating = /* */ 0b00000000000000100000000000; export const Incomplete = /* */ 0b00000000000100000000000000; diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js index d6eb8cd2529bc..0b37fa524a391 100644 --- a/packages/react-reconciler/src/ReactFiberFlags.js +++ b/packages/react-reconciler/src/ReactFiberFlags.js @@ -14,19 +14,20 @@ export type Flags = number; // Don't change these two 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 Incomplete = /* */ 0b00000000000100000000000000; // You can change the rest (and add more). -export const Placement = /* */ 0b00000000000000000000000010; export const Update = /* */ 0b00000000000000000000000100; export const ChildDeletion = /* */ 0b00000000000000000000001000; export const ContentReset = /* */ 0b00000000000000000000010000; export const Callback = /* */ 0b00000000000000000000100000; -export const DidCapture = /* */ 0b00000000000000000001000000; export const ForceClientRender = /* */ 0b00000000000000000010000000; export const Ref = /* */ 0b00000000000000000100000000; export const Snapshot = /* */ 0b00000000000000001000000000; export const Passive = /* */ 0b00000000000000010000000000; -export const Hydrating = /* */ 0b00000000000000100000000000; export const Visibility = /* */ 0b00000000000001000000000000; export const StoreConsistency = /* */ 0b00000000000010000000000000; @@ -37,7 +38,6 @@ 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; From b1a3e0278904b7d99c1b8be0a2a66cd222a6b9ff Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Thu, 10 Nov 2022 16:19:33 -0500 Subject: [PATCH 4/5] update comment --- packages/react-reconciler/src/ReactFiberFlags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js index 0b37fa524a391..258b3df25d210 100644 --- a/packages/react-reconciler/src/ReactFiberFlags.js +++ b/packages/react-reconciler/src/ReactFiberFlags.js @@ -11,7 +11,7 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags'; export type Flags = number; -// Don't change these two values. They're used by React Dev Tools. +// Don't change these values. They're used by React Dev Tools. export const NoFlags = /* */ 0b00000000000000000000000000; export const PerformedWork = /* */ 0b00000000000000000000000001; export const Placement = /* */ 0b00000000000000000000000010; From 510180104ee6edf781a36798cab570ffcb8f0e0f Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Thu, 10 Nov 2022 23:24:14 -0500 Subject: [PATCH 5/5] fix lint & remove unnecessary flag in devtools --- .../src/backend/ReactFiberFlags.js | 1 - .../src/backend/renderer.js | 29 ------------------- .../react-reconciler/src/ReactFiberFlags.js | 2 +- 3 files changed, 1 insertion(+), 31 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js index 313a93d80f514..aeece6acb9131 100644 --- a/packages/react-devtools-shared/src/backend/ReactFiberFlags.js +++ b/packages/react-devtools-shared/src/backend/ReactFiberFlags.js @@ -15,4 +15,3 @@ export const PerformedWork = /* */ 0b00000000000000000000000001; export const Placement = /* */ 0b00000000000000000000000010; export const DidCapture = /* */ 0b00000000000000000001000000; export const Hydrating = /* */ 0b00000000000000100000000000; -export const Incomplete = /* */ 0b00000000000100000000000000; diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index e2bbf43f27598..68425faac8d7a 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -93,7 +93,6 @@ import { NoFlags, PerformedWork, Placement, - Incomplete, Hydrating, } from './ReactFiberFlags'; import {format} from './utils'; @@ -143,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; @@ -170,19 +160,9 @@ export function getInternalReactConstants( getDisplayNameForFiber: getDisplayNameForFiberType, getTypeSymbol: getTypeSymbolType, ReactPriorityLevels: ReactPriorityLevelsType, - ReactTypeOfSideEffect: ReactTypeOfSideEffectType, ReactTypeOfWork: WorkTagMap, StrictModeBits: number, } { - const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = { - DidCapture, - NoFlags, - PerformedWork, - Placement, - Incomplete, - Hydrating, - }; - // ********************************************************** // The section below is copied from files in React repo. // Keep it in sync, and add version guards if it changes. @@ -570,7 +550,6 @@ export function getInternalReactConstants( getTypeSymbol, ReactPriorityLevels, ReactTypeOfWork, - ReactTypeOfSideEffect, StrictModeBits, }; } @@ -603,16 +582,8 @@ export function attach( getTypeSymbol, ReactPriorityLevels, ReactTypeOfWork, - ReactTypeOfSideEffect, StrictModeBits, } = getInternalReactConstants(version); - const { - DidCapture, - Hydrating, - NoFlags, - PerformedWork, - Placement, - } = ReactTypeOfSideEffect; const { CacheComponent, ClassComponent, diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js index 258b3df25d210..cf0e40ff0a12c 100644 --- a/packages/react-reconciler/src/ReactFiberFlags.js +++ b/packages/react-reconciler/src/ReactFiberFlags.js @@ -17,7 +17,6 @@ export const PerformedWork = /* */ 0b00000000000000000000000001; export const Placement = /* */ 0b00000000000000000000000010; export const DidCapture = /* */ 0b00000000000000000001000000; export const Hydrating = /* */ 0b00000000000000100000000000; -export const Incomplete = /* */ 0b00000000000100000000000000; // You can change the rest (and add more). export const Update = /* */ 0b00000000000000000000000100; @@ -38,6 +37,7 @@ 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;