Moved ref to its own section, without a head, displayed above props

facebook · Jul 3, 2022 · 3fc0c2e · 3fc0c2e
1 parent 7ad89dc
commit 3fc0c2e
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 103 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2927,14 +2927,9 @@ describe('InspectedElement', () => {
       await utils.actAsync(() => legacyRender(<Example />, container));
 
       const inspectedElement = await inspectElementAtIndex(1);
-      expect(inspectedElement.ref).toMatchInlineSnapshot(`
-        Object {
-          "current": Dehydrated {
-            "preview_short": <div />,
-            "preview_long": <div />,
-          },
-        }
-      `);
+      expect(inspectedElement.ref).toMatchInlineSnapshot(
+        `"{current: <div />}"`,
+      );
     });
 
     it('supports useRef on class components', async () => {
@@ -2951,7 +2946,7 @@ describe('InspectedElement', () => {
       await utils.actAsync(() => legacyRender(<Example />, container));
 
       const inspectedElement = await inspectElementAtIndex(1);
-      expect(inspectedElement.ref).toEqual({current: expect.any(Object)});
+      expect(inspectedElement.ref).toEqual('{current: {…}}');
     });
 
     it('supports ref callbacks', async () => {
@@ -2966,15 +2961,7 @@ describe('InspectedElement', () => {
       await utils.actAsync(() => legacyRender(<Example />, container));
 
       const inspectedElement = await inspectElementAtIndex(1);
-      expect(inspectedElement.ref).toMatchInlineSnapshot(`
-        Object {
-          "inspectable": false,
-          "name": "ref",
-          "preview_long": "ƒ ref() {}",
-          "preview_short": "ƒ ref() {}",
-          "type": "function",
-        }
-      `);
+      expect(inspectedElement.ref).toMatchInlineSnapshot(`"ƒ ref() {}"`);
     });
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -38,6 +38,7 @@ import {
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {formatDataForPreview} from 'react-devtools-shared/src/utils';
 import {
   cleanForBridge,
   copyToClipboard,
@@ -3712,9 +3713,13 @@ export function attach(
       cleanedInspectedElement.state,
       createIsPathAllowed('state', null),
     );
-    cleanedInspectedElement.ref = cleanForBridge(
-      cleanedInspectedElement.ref,
-      createIsPathAllowed('ref', null),
+
+    // Ref is a special case;
+    // don't dehydrate it in the same way (because it's not hydratable/inspectable).
+    // Just stringify it instead...
+    cleanedInspectedElement.ref = formatDataForPreview(
+      mostRecentlyInspectedElement.ref,
+      true,
     );
 
     return {

diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
@@ -212,12 +212,12 @@ export function convertInspectedElementBackendToFrontend(
     props,
     rendererPackageName,
     rendererVersion,
+    ref,
     rootType,
     state,
     key,
     errors,
     warnings,
-    ref,
   } = inspectedElementBackend;
 
   const inspectedElement: InspectedElementFrontend = {
@@ -259,9 +259,9 @@ export function convertInspectedElementBackendToFrontend(
     hooks: hydrateHelper(hooks),
     props: hydrateHelper(props),
     state: hydrateHelper(state),
+    ref,
     errors,
     warnings,
-    ref: hydrateHelper(ref),
   };
 
   return inspectedElement;

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementRefTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementRefTree.js
diff --git a/...s/react-devtools-shared/src/devtools/views/Components/InspectedElementSpecialPropsTree.js b/...s/react-devtools-shared/src/devtools/views/Components/InspectedElementSpecialPropsTree.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import sharedStyles from './InspectedElementSharedStyles.css';
+
+// This is a little janky but it keeps the visual styles in sync.
+import keyValueStyles from './KeyValue.css';
+
+import type {InspectedElement} from './types';
+
+type Props = {|
+  inspectedElement: InspectedElement,
+|};
+
+export default function InspectedElementSpecialPropsTree({
+  inspectedElement,
+}: Props) {
+  const {ref} = inspectedElement;
+
+  if (ref === null) {
+    return null;
+  }
+
+  return (
+    <div className={sharedStyles.InspectedElementTree}>
+      {ref && (
+        <div className={keyValueStyles.Item} style={{paddingLeft: '1rem'}}>
+          ref
+          <div className={keyValueStyles.AfterName}>:</div>
+          <span className={keyValueStyles.Value}>{ref}</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -22,7 +22,7 @@ import InspectedElementContextTree from './InspectedElementContextTree';
 import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
-import InspectedElementRefTree from './InspectedElementRefTree';
+import InspectedElementSpecialPropsTree from './InspectedElementSpecialPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
 import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
@@ -90,6 +90,13 @@ export default function InspectedElementView({
       <div className={styles.InspectedElement}>
         <HocBadges element={element} />
 
+        <InspectedElementSpecialPropsTree
+          bridge={bridge}
+          element={element}
+          inspectedElement={inspectedElement}
+          store={store}
+        />
+
         <InspectedElementPropsTree
           bridge={bridge}
           element={element}
@@ -143,13 +150,6 @@ export default function InspectedElementView({
           store={store}
         />
 
-        <InspectedElementRefTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
-
         <NativeStyleEditor />
 
         {showRenderedBy && (

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -101,7 +101,7 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
-  ref: Object | Function | null,
+  ref: string | null,
   errors: Array<[string, number]>,
   warnings: Array<[string, number]>,
 

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Refs.js b/packages/react-devtools-shell/src/app/InspectableElements/Refs.js
@@ -34,6 +34,14 @@ export default function Refs() {
       <div ref={() => {}} />
       <ClassComponent ref={classComponentRef} />
       <ForwardRefComponent ref={forwardRefComponentRef} />
+      <ClassComponent ref={() => {}} />
+      <ClassComponent
+        key={0}
+        ref={function namedRefCallback() {}}
+        foo="foo"
+        bar={123}
+        baz={function namedProp() {}}
+      />
     </React.Fragment>
   );
 }