More accurate naming

Author: eps1lon

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

@@ -818,6 +818,10 @@ describe('InspectedElement', () => {
   it('should support Thenables in React 19', async () => {
     const Example = () => null;
 
+    class SubclassedPromise extends Promise {}
+
+    const plainThenable = {then() {}};
+    const subclassedPromise = new SubclassedPromise(() => {});
     const unusedPromise = Promise.resolve();
     const usedFulfilledPromise = Promise.resolve();
     const usedFulfilledRichPromise = Promise.resolve({
@@ -845,6 +849,8 @@ describe('InspectedElement', () => {
       render(
         <>
           <Example
+            plainThenable={plainThenable}
+            subclassedPromise={subclassedPromise}
             unusedPromise={unusedPromise}
             usedFulfilledPromise={usedFulfilledPromise}
             usedFulfilledRichPromise={usedFulfilledRichPromise}
@@ -872,32 +878,40 @@ describe('InspectedElement', () => {
     const inspectedElement = await inspectElementAtIndex(0);
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
-    {
-      "unusedPromise": Dehydrated {
-        "preview_short": Promise,
-        "preview_long": Promise,
-      },
-      "usedFulfilledPromise": {
-        "value": undefined,
-      },
-      "usedFulfilledRichPromise": {
-        "value": Dehydrated {
-          "preview_short": {…},
-          "preview_long": {some: {…}},
+      {
+        "plainThenable": Dehydrated {
+          "preview_short": Thenable,
+          "preview_long": Thenable,
         },
-      },
-      "usedPendingPromise": Dehydrated {
-        "preview_short": pending Thenable,
-        "preview_long": pending Thenable,
-      },
-      "usedRejectedPromise": {
-        "reason": Dehydrated {
-          "preview_short": Error,
-          "preview_long": Error,
+        "subclassedPromise": Dehydrated {
+          "preview_short": SubclassedPromise,
+          "preview_long": SubclassedPromise,
         },
-      },
-    }
-  `);
+        "unusedPromise": Dehydrated {
+          "preview_short": Promise,
+          "preview_long": Promise,
+        },
+        "usedFulfilledPromise": {
+          "value": undefined,
+        },
+        "usedFulfilledRichPromise": {
+          "value": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {some: {…}},
+          },
+        },
+        "usedPendingPromise": Dehydrated {
+          "preview_short": pending Promise,
+          "preview_long": pending Promise,
+        },
+        "usedRejectedPromise": {
+          "reason": Dehydrated {
+            "preview_short": Error,
+            "preview_long": Error,
+          },
+        },
+      }
+    `);
   });
 
   it('should support Promises in React 18', async () => {

packages/react-devtools-shared/src/hydration.js

@@ -324,7 +324,7 @@ export function dehydrate(
             type: type,
             preview_short: formatDataForPreview(data, false),
             preview_long: formatDataForPreview(data, true),
-            name: 'fulfilled Promise',
+            name: 'fulfilled Thenable',
           };
 
           unserializableValue.value = dehydrate(
@@ -346,7 +346,7 @@ export function dehydrate(
             type: type,
             preview_short: formatDataForPreview(data, false),
             preview_long: formatDataForPreview(data, true),
-            name: 'fulfilled Promise',
+            name: 'rejected Thenable',
           };
 
           unserializableValue.reason = dehydrate(

packages/react-devtools-shared/src/utils.js

@@ -938,25 +938,40 @@ export function formatDataForPreview(
         return 'unserializable';
       }
     case 'thenable':
+      let displayName: string;
+      if (isPlainObject(data)) {
+        displayName = 'Thenable';
+      } else {
+        let resolvedConstructorName = data.constructor.name;
+        if (typeof resolvedConstructorName !== 'string') {
+          resolvedConstructorName =
+            Object.getPrototypeOf(data).constructor.name;
+        }
+        if (typeof resolvedConstructorName === 'string') {
+          displayName = resolvedConstructorName;
+        } else {
+          displayName = 'Thenable';
+        }
+      }
       switch (data.status) {
         case 'pending':
-          return 'pending Thenable';
+          return `pending ${displayName}`;
         case 'fulfilled':
           if (showFormattedValue) {
             const formatted = formatDataForPreview(data.value, false);
-            return `fulfilled Thenable {${truncateForDisplay(formatted)}}`;
+            return `fulfilled ${displayName} {${truncateForDisplay(formatted)}}`;
           } else {
-            return 'fulfilled Thenable {…}';
+            return `fulfilled ${displayName} {…}`;
           }
         case 'rejected':
           if (showFormattedValue) {
             const formatted = formatDataForPreview(data.reason, false);
-            return `rejected Thenable {${truncateForDisplay(formatted)}}`;
+            return `rejected ${displayName} {${truncateForDisplay(formatted)}}`;
           } else {
-            return 'rejected Thenable {…}';
+            return `rejected ${displayName} {…}`;
           }
         default:
-          return Object.getPrototypeOf(data).constructor.name;
+          return displayName;
       }
     case 'object':
       if (showFormattedValue) {