[DevTools] Filter Server Components (#30839)
Support filtering Virtual Instances with existing filters. Server Components are considered "Functions". In a follow up I'll a new filter for "Environment" which will let you filter by Client vs Server (and more).
Sebastian Markbåge committed
Aug 29, 2024 at 12:49 UTC
61739a8a0fd23adf18336d96f9c307a1cd897354
1 file changed
+36
-13
packages/react-devtools-shared/src/backend/fiber/renderer.js
+36
-13
@@ -1216,7 +1216,26 @@ export function attach(
1216
}
1217
1218
function shouldFilterVirtual(data: ReactComponentInfo): boolean {
1219
- // TODO: Apply filters to VirtualInstances.
1219
+ // For purposes of filtering Server Components are always Function Components.
1220
+ // Environment will be used to filter Server vs Client.
1221
+ // Technically they can be forwardRef and memo too but those filters will go away
1222
+ // as those become just plain user space function components like any HoC.
1223
+ if (hideElementsWithTypes.has(ElementTypeFunction)) {
1224
+ return true;
1225
+ }
1226
+
1227
+ if (hideElementsWithDisplayNames.size > 0) {
1228
+ const displayName = data.name;
1229
+ if (displayName != null) {
1230
+ // eslint-disable-next-line no-for-of-loops/no-for-of-loops
1231
+ for (const displayNameRegExp of hideElementsWithDisplayNames) {
1232
+ if (displayNameRegExp.test(displayName)) {
1233
+ return true;
1234
+ }
1235
+ }
1236
+ }
1237
+ }
1238
+
1239
return false;
1240
}
1241
@@ -2446,6 +2465,10 @@ export function attach(
2465
continue;
2466
}
2467
const componentInfo: ReactComponentInfo = (debugEntry: any);
2468
+ if (shouldFilterVirtual(componentInfo)) {
2469
+ // Skip.
2470
+ continue;
2471
+ }
2472
if (level === virtualLevel) {
2473
if (
2474
previousVirtualInstance === null ||
@@ -2864,6 +2887,9 @@ export function attach(
2887
continue;
2888
}
2889
const componentInfo: ReactComponentInfo = (debugEntry: any);
2890
+ if (shouldFilterVirtual(componentInfo)) {
2891
+ continue;
2892
+ }
2893
if (level === virtualLevel) {
2894
if (
2895
previousVirtualInstance === null ||
@@ -3686,19 +3712,16 @@ export function attach(
3712
}
3713
// We couldn't use this Fiber but we might have a VirtualInstance
3714
// that is the nearest unfiltered instance.
3689
- let parentInstance = fiberInstance.parent;
3690
- while (parentInstance !== null) {
3691
- if (parentInstance.kind === FIBER_INSTANCE) {
3692
- // If we find a parent Fiber, it might not be the nearest parent
3693
- // so we break out and continue walking the Fiber tree instead.
3694
- break;
3695
- } else {
3696
- if (!shouldFilterVirtual(parentInstance.data)) {
3697
- return parentInstance.id;
3698
- }
3699
- }
3700
- parentInstance = parentInstance.parent;
3715
+ const parentInstance = fiberInstance.parent;
3716
+ if (
3717
+ parentInstance !== null &&
3718
+ parentInstance.kind === VIRTUAL_INSTANCE
3719
+ ) {
3720
+ // Virtual Instances only exist if they're unfiltered.
3721
+ return parentInstance.id;
3722
}
3723
+ // If we find a parent Fiber, it might not be the nearest parent
3724
+ // so we break out and continue walking the Fiber tree instead.
3725
}
3726
fiber = fiber.return;
3727
}