Better devtool and stack handling

Author: rickhanlonii

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -135,6 +135,170 @@ describe('Store component filters', () => {
   });
 
   // @reactVersion >= 16.0
+  it('should filter Suspense', async () => {
+    const Suspense = React.Suspense;
+    await actAsync(async () =>
+      render(
+        <React.Fragment>
+          <Suspense>
+            <div>Visible</div>
+          </Suspense>
+          <Suspense>
+            <div>Hidden</div>
+          </Suspense>
+        </React.Fragment>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Suspense>
+            <div>
+        ▾ <Suspense>
+            <div>
+    `);
+  });
+
+  // TODO: How to gate by experimental?
+  it.skip('should filter Activity', async () => {
+    const Activity = React.unstable_Activity;
+
+    await actAsync(async () =>
+      render(
+        <React.Fragment>
+          <Activity mode="visible">
+            <div>Visible</div>
+          </Activity>
+          <Activity mode="hidden">
+            <div>Hidden</div>
+          </Activity>
+        </React.Fragment>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Activity>
+            <div>
+        ▾ <Activity>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <div>
+          <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Activity>
+            <div>
+        ▾ <Activity>
+            <div>
+    `);
+  });
+
+  // TODO: How to gate by experimental?
+  it.skip('should filter ViewTransition', async () => {
+    const ViewTransition = React.unstable_ViewTransition;
+
+    await actAsync(async () =>
+      render(
+        <React.Fragment>
+          <ViewTransition>
+            <div>Visible</div>
+          </ViewTransition>
+          <ViewTransition>
+            <div>Hidden</div>
+          </ViewTransition>
+        </React.Fragment>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ViewTransition>
+            <div>
+        ▾ <ViewTransition>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ViewTransition>
+            <div>
+        ▾ <ViewTransition>
+            <div>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createElementTypeFilter(Types.ElementTypeActivity, false),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ViewTransition>
+            <div>
+        ▾ <ViewTransition>
+            <div>
+    `);
+  });
+
   it('should ignore invalid ElementTypeRoot filter', async () => {
     const Component = () => <div>Hi</div>;
 

packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js

@@ -44,6 +44,7 @@ export function describeFiber(
     ForwardRef,
     ClassComponent,
     ViewTransitionComponent,
+    ActivityComponent,
   } = workTagMap;
 
   switch (workInProgress.tag) {
@@ -60,6 +61,8 @@ export function describeFiber(
       return describeBuiltInComponentFrame('SuspenseList');
     case ViewTransitionComponent:
       return describeBuiltInComponentFrame('ViewTransition');
+    case ActivityComponent:
+      return describeBuiltInComponentFrame('Activity');
     case FunctionComponent:
     case IndeterminateComponent:
     case SimpleMemoComponent:
@@ -154,6 +157,7 @@ export function getOwnerStackByFiberInDev(
     SuspenseComponent,
     SuspenseListComponent,
     ViewTransitionComponent,
+    ActivityComponent,
   } = workTagMap;
   try {
     let info = '';
@@ -184,6 +188,9 @@ export function getOwnerStackByFiberInDev(
       case ViewTransitionComponent:
         info += describeBuiltInComponentFrame('ViewTransition');
         break;
+      case ActivityComponent:
+        info += describeBuiltInComponentFrame('Activity');
+        break;
     }
 
     let owner: void | null | Fiber | ReactComponentInfo = workInProgress;

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -28,6 +28,7 @@ import {
   ElementTypeSuspenseList,
   ElementTypeTracingMarker,
   ElementTypeViewTransition,
+  ElementTypeActivity,
   ElementTypeVirtual,
   StrictMode,
 } from 'react-devtools-shared/src/frontend/types';
@@ -146,7 +147,6 @@ import type {
 import type {Source} from 'react-devtools-shared/src/shared/types';
 import {getSourceLocationByFiber} from './DevToolsFiberComponentStack';
 import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
-import {ActivityComponent} from 'react-reconciler/src/ReactWorkTags';
 
 // Kinds
 const FIBER_INSTANCE = 0;
@@ -578,6 +578,7 @@ export function getInternalReactConstants(version: string): {
     TracingMarkerComponent,
     Throw,
     ViewTransitionComponent,
+    ActivityComponent,
   } = ReactTypeOfWork;
 
   function resolveFiberType(type: any): $FlowFixMe {
@@ -900,6 +901,7 @@ export function attach(
     StrictModeBits,
   } = getInternalReactConstants(version);
   const {
+    ActivityComponent,
     CacheComponent,
     ClassComponent,
     ContextConsumer,
@@ -1488,7 +1490,6 @@ export function attach(
         return true;
       case HostPortal:
       case HostText:
-      case ActivityComponent:
       case LegacyHiddenComponent:
       case OffscreenComponent:
       case Throw:
@@ -1574,6 +1575,8 @@ export function attach(
     const {type, tag} = fiber;
 
     switch (tag) {
+      case ActivityComponent:
+        return ElementTypeActivity;
       case ClassComponent:
       case IncompleteClassComponent:
         return ElementTypeClass;

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -472,6 +472,8 @@ export default function ComponentsSettings({
                         ((parseInt(currentTarget.value, 10): any): ElementType),
                       )
                     }>
+                    {/* TODO: currently only experimental, only list this if it's available */}
+                    {/*<option value={ElementTypeActivity}>activity</option>*/}
                     <option value={ElementTypeClass}>class</option>
                     <option value={ElementTypeContext}>context</option>
                     <option value={ElementTypeFunction}>function</option>
@@ -485,6 +487,10 @@ export default function ComponentsSettings({
                     <option value={ElementTypeOtherOrUnknown}>other</option>
                     <option value={ElementTypeProfiler}>profiler</option>
                     <option value={ElementTypeSuspense}>suspense</option>
+                    {/* TODO: currently only experimental, only list this if it's available */}
+                    {/*<option value={ElementTypeViewTransition}>*/}
+                    {/*  view transition*/}
+                    {/*</option>*/}
                   </select>
                 )}
                 {(componentFilter.type === ComponentFilterLocation ||

packages/react-devtools-shared/src/frontend/types.js

@@ -50,6 +50,7 @@ export const ElementTypeSuspenseList = 13;
 export const ElementTypeTracingMarker = 14;
 export const ElementTypeVirtual = 15;
 export const ElementTypeViewTransition = 16;
+export const ElementTypeActivity = 17;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
@@ -68,7 +69,8 @@ export type ElementType =
   | 13
   | 14
   | 15
-  | 16;
+  | 16
+  | 17;
 
 // WARNING
 // The values below are referenced by ComponentFilters (which are saved via localStorage).

packages/react-reconciler/src/ReactFiberComponentStack.js

@@ -24,6 +24,7 @@ import {
   ClassComponent,
   HostText,
   ViewTransitionComponent,
+  ActivityComponent,
 } from './ReactWorkTags';
 import {
   describeBuiltInComponentFrame,
@@ -53,6 +54,8 @@ function describeFiber(fiber: Fiber): string {
       return describeFunctionComponentFrame(fiber.type.render);
     case ClassComponent:
       return describeClassComponentFrame(fiber.type);
+    case ActivityComponent:
+      return describeBuiltInComponentFrame('Activity');
     case ViewTransitionComponent:
       if (enableViewTransition) {
         return describeBuiltInComponentFrame('ViewTransition');
@@ -129,9 +132,12 @@ export function getOwnerStackByFiberInDev(workInProgress: Fiber): string {
       case SuspenseListComponent:
         info += describeBuiltInComponentFrame('SuspenseList');
         break;
+      case ActivityComponent:
+        info += describeBuiltInComponentFrame('Activity');
+        break;
       case ViewTransitionComponent:
         if (enableViewTransition) {
-          info += describeBuiltInComponentFrame('SuspenseList');
+          info += describeBuiltInComponentFrame('ViewTransition');
           break;
         }
       // Fallthrough