The library for web and native user interfaces.
Mirrored from https://github.com/247TaxiDriver/QOS-React.git
Synced Nov 10, 16:30 UTC
[DevTools] Support secondary environment name when it changes (#30842)
We currently support the Environment Name change within a Component. #29867 If this happens, we give it two HoCs. The problem with this is that we only show one followed by `+1` in the list. Before: <img width="529" alt="Screenshot 2024-08-28 at 6 50 31 PM" src="https://github.com/user-attachments/assets/c080be72-c254-4d4d-89b6-d1b7f9a9ada8"> After: <img width="1101" alt="Screenshot 2024-08-28 at 7 16 21 PM" src="https://github.com/user-attachments/assets/04718674-164b-4255-9cf6-dec9198f12b7"> I could potentially instead badge this case as `A/B` in a single badge.
Sebastian Markbåge committed
Aug 30, 2024 at 10:05 UTC
e56f4ae38d118168e0561f1b86ecbdef592138e4
1 file changed
+43
-3
packages/react-devtools-shared/src/backend/fiber/renderer.js
+43
-3
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import type {ReactComponentInfo} from 'shared/ReactTypes';
10
+import type {ReactComponentInfo, ReactDebugInfo} from 'shared/ReactTypes';
11
12
import {
13
ComponentFilterDisplayName,
@@ -2226,6 +2226,7 @@ export function attach(
2226
function recordVirtualMount(
2227
instance: VirtualInstance,
2228
parentInstance: DevToolsInstance | null,
2229
+ secondaryEnv: null | string,
2230
): void {
2231
const id = instance.id;
2232
@@ -2239,6 +2240,9 @@ export function attach(
2240
let displayName = componentInfo.name || '';
2241
if (typeof env === 'string') {
2242
// We model environment as an HoC name for now.
2243
+ if (secondaryEnv !== null) {
2244
+ displayName = secondaryEnv + '(' + displayName + ')';
2245
+ }
2246
displayName = env + '(' + displayName + ')';
2247
}
2248
const elementType = ElementTypeVirtual;
@@ -2444,6 +2448,25 @@ export function attach(
2448
pendingRealUnmountedIDs.push(id);
2449
}
2450
2451
+ function getSecondaryEnvironmentName(
2452
+ debugInfo: ?ReactDebugInfo,
2453
+ index: number,
2454
+ ): null | string {
2455
+ if (debugInfo != null) {
2456
+ const componentInfo: ReactComponentInfo = (debugInfo[index]: any);
2457
+ for (let i = index + 1; i < debugInfo.length; i++) {
2458
+ const debugEntry = debugInfo[i];
2459
+ if (typeof debugEntry.env === 'string') {
2460
+ // If the next environment is different then this component was the boundary
2461
+ // and it changed before entering the next component. So we assign this
2462
+ // component a secondary environment.
2463
+ return componentInfo.env !== debugEntry.env ? debugEntry.env : null;
2464
+ }
2465
+ }
2466
+ }
2467
+ return null;
2468
+ }
2469
+
2470
function mountVirtualChildrenRecursively(
2471
firstChild: Fiber,
2472
lastChild: null | Fiber, // non-inclusive
@@ -2464,6 +2487,7 @@ export function attach(
2487
// Not a Component. Some other Debug Info.
2488
continue;
2489
}
2490
+ // Scan up until the next Component to see if this component changed environment.
2491
const componentInfo: ReactComponentInfo = (debugEntry: any);
2492
if (shouldFilterVirtual(componentInfo)) {
2493
// Skip.
@@ -2487,7 +2511,15 @@ export function attach(
2511
);
2512
}
2513
previousVirtualInstance = createVirtualInstance(componentInfo);
2490
- recordVirtualMount(previousVirtualInstance, reconcilingParent);
2514
+ const secondaryEnv = getSecondaryEnvironmentName(
2515
+ fiber._debugInfo,
2516
+ i,
2517
+ );
2518
+ recordVirtualMount(
2519
+ previousVirtualInstance,
2520
+ reconcilingParent,
2521
+ secondaryEnv,
2522
+ );
2523
insertChild(previousVirtualInstance);
2524
previousVirtualInstanceFirstFiber = fiber;
2525
}
@@ -2951,7 +2983,15 @@ export function attach(
2983
} else {
2984
// Otherwise we create a new instance.
2985
const newVirtualInstance = createVirtualInstance(componentInfo);
2954
- recordVirtualMount(newVirtualInstance, reconcilingParent);
2986
+ const secondaryEnv = getSecondaryEnvironmentName(
2987
+ nextChild._debugInfo,
2988
+ i,
2989
+ );
2990
+ recordVirtualMount(
2991
+ newVirtualInstance,
2992
+ reconcilingParent,
2993
+ secondaryEnv,
2994
+ );
2995
insertChild(newVirtualInstance);
2996
previousVirtualInstance = newVirtualInstance;
2997
previousVirtualInstanceWasMount = true;