[DevTools] Improve HOC search UX (#18802)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
facebook · May 15, 2020 · 7c08090 · 7c08090
1 parent 121af31
commit 7c08090
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 60 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -626,4 +626,7 @@ exports[`Store should show the right display names for special component types 1
  <MyComponent> [ForwardRef]
  ▾ <Suspense>
  <MyComponent5>
+ <Baz> [withFoo][withBar]
+ <Baz> [Memo][withFoo][withBar]
+ <Baz> [ForwardRef][withFoo][withBar]
 `;
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -871,6 +871,16 @@ describe('Store', () => {
  const MyComponent5 = (props, ref) => null;
  const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
+ const FakeHigherOrderComponent = () => null;
+ FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
+
+ const MemoizedFakeHigherOrderComponent = React.memo(
+ FakeHigherOrderComponent,
+ );
+ const ForwardRefFakeHigherOrderComponent = React.forwardRef(
+ FakeHigherOrderComponent,
+ );
+
  const App = () => (
  <React.Fragment>
  <MyComponent />
@@ -882,6 +892,9 @@ describe('Store', () => {
  <React.Suspense fallback="Loading...">
  <LazyComponent />
  </React.Suspense>
+ <FakeHigherOrderComponent />
+ <MemoizedFakeHigherOrderComponent />
+ <ForwardRefFakeHigherOrderComponent />
  </React.Fragment>
  );
 

diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
@@ -7,11 +7,6 @@
  * @flow
  */
 
-import {
- ElementTypeForwardRef,
- ElementTypeMemo,
-} from 'react-devtools-shared/src/types';
-
 import type {Element} from './views/Components/types';
 import type Store from './store';
 
@@ -30,19 +25,6 @@ export function printElement(element: Element, includeWeight: boolean = false) {
  if (element.hocDisplayNames !== null) {
  hocDisplayNames = [...element.hocDisplayNames];
  }
- if (element.type === ElementTypeMemo) {
- if (hocDisplayNames === null) {
- hocDisplayNames = ['Memo'];
- } else {
- hocDisplayNames.push('Memo');
- }
- } else if (element.type === ElementTypeForwardRef) {
- if (hocDisplayNames === null) {
- hocDisplayNames = ['ForwardRef'];
- } else {
- hocDisplayNames.push('ForwardRef');
- }
- }
 
  const hocs =
  hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -9,10 +9,6 @@
 
 import * as React from 'react';
 import {Fragment} from 'react';
-import {
- ElementTypeMemo,
- ElementTypeForwardRef,
-} from 'react-devtools-shared/src/types';
 import styles from './Badge.css';
 
 import type {ElementType} from 'react-devtools-shared/src/types';
@@ -21,35 +17,24 @@ type Props = {|
  className?: string,
  hocDisplayNames: Array<string> | null,
  type: ElementType,
+ children: React$Node,
 |};
 
-export default function Badge({className, hocDisplayNames, type}: Props) {
- let hocDisplayName = null;
+export default function Badge({
+ className,
+ hocDisplayNames,
+ type,
+ children,
+}: Props) {
  let totalBadgeCount = 0;
- let typeLabel = null;
 
  if (hocDisplayNames !== null) {
- hocDisplayName = hocDisplayNames[0];
  totalBadgeCount += hocDisplayNames.length;
  }
 
- if (type === ElementTypeMemo) {
- typeLabel = 'Memo';
- totalBadgeCount++;
- } else if (type === ElementTypeForwardRef) {
- typeLabel = 'ForwardRef';
- totalBadgeCount++;
- }
-
- if (hocDisplayNames === null && typeLabel === null) {
- return null;
- }
-
  return (
  <Fragment>
- <div className={`${styles.Badge} ${className || ''}`}>
- {hocDisplayName || typeLabel}
- </div>
+ <div className={`${styles.Badge} ${className || ''}`}>{children}</div>
  {totalBadgeCount > 1 && (
  <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
  )}

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -137,11 +137,17 @@ export default function ElementView({data, index, style}: Props) {
  "
  </Fragment>
  )}
- <Badge
- className={styles.Badge}
- hocDisplayNames={hocDisplayNames}
- type={type}
- />
+ {hocDisplayNames !== null && hocDisplayNames.length > 0 ? (
+ <Badge
+ className={styles.Badge}
+ hocDisplayNames={hocDisplayNames}
+ type={type}>
+ <DisplayName
+ displayName={hocDisplayNames[0]}
+ id={((id: any): number)}
+ />
+ </Badge>
+ ) : null}
  </div>
  </div>
  );

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -8,10 +8,6 @@
  */
 
 import * as React from 'react';
-import {
- ElementTypeForwardRef,
- ElementTypeMemo,
-} from 'react-devtools-shared/src/types';
 import styles from './HocBadges.css';
 
 import type {Element} from './types';
@@ -21,22 +17,14 @@ type Props = {|
 |};
 
 export default function HocBadges({element}: Props) {
- const {hocDisplayNames, type} = ((element: any): Element);
+ const {hocDisplayNames} = ((element: any): Element);
 
- let typeBadge = null;
- if (type === ElementTypeMemo) {
- typeBadge = 'Memo';
- } else if (type === ElementTypeForwardRef) {
- typeBadge = 'ForwardRef';
- }
-
- if (hocDisplayNames === null && typeBadge === null) {
+ if (hocDisplayNames === null) {
  return null;
  }
 
  return (
  <div className={styles.HocBadges}>
- {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
  {hocDisplayNames !== null &&
  hocDisplayNames.map(hocDisplayName => (
  <div key={hocDisplayName} className={styles.Badge}>

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -275,6 +275,20 @@ export function separateDisplayNameAndHOCs(
  break;
  }
 
+ if (type === ElementTypeMemo) {
+ if (hocDisplayNames === null) {
+ hocDisplayNames = ['Memo'];
+ } else {
+ hocDisplayNames.unshift('Memo');
+ }
+ } else if (type === ElementTypeForwardRef) {
+ if (hocDisplayNames === null) {
+ hocDisplayNames = ['ForwardRef'];
+ } else {
+ hocDisplayNames.unshift('ForwardRef');
+ }
+ }
+
  return [displayName, hocDisplayNames];
 }