From 3b654cd93f8c07ef81f9387ead53ab6f8c14512e Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sat, 2 May 2020 03:02:39 +0500 Subject: [PATCH 01/10] match built-in hoc types --- .../react-devtools-shared/src/devtools/utils.js | 13 ------------- .../src/devtools/views/Components/Badge.js | 8 -------- packages/react-devtools-shared/src/utils.js | 8 ++++++-- 3 files changed, 6 insertions(+), 23 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index bd281d28e1b16..ecf17a799c005 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/packages/react-devtools-shared/src/devtools/utils.js @@ -30,19 +30,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 index 8362055cb3966..6d937c72ebd86 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js @@ -33,14 +33,6 @@ export default function Badge({className, hocDisplayNames, type}: Props) { totalBadgeCount += hocDisplayNames.length; } - if (type === ElementTypeMemo) { - typeLabel = 'Memo'; - totalBadgeCount++; - } else if (type === ElementTypeForwardRef) { - typeLabel = 'ForwardRef'; - totalBadgeCount++; - } - if (hocDisplayNames === null && typeLabel === null) { return null; } diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index f4982e814bd15..66081ebcb1072 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -260,9 +260,7 @@ export function separateDisplayNameAndHOCs( switch (type) { case ElementTypeClass: - case ElementTypeForwardRef: case ElementTypeFunction: - case ElementTypeMemo: if (displayName.indexOf('(') >= 0) { const matches = displayName.match(/[^()]+/g); if (matches != null) { @@ -271,6 +269,12 @@ export function separateDisplayNameAndHOCs( } } break; + case ElementTypeForwardRef: + hocDisplayNames = ['ForwardRef'] + break; + case ElementTypeMemo: + hocDisplayNames = ['Memo'] + break; default: break; } From 6ceac4d1d31087e684d9aadb226882e346eb65a2 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sat, 2 May 2020 03:42:06 +0500 Subject: [PATCH 02/10] highlight matched hoc name --- .../src/devtools/utils.js | 5 ---- .../src/devtools/views/Components/Badge.js | 23 +++++++------------ .../src/devtools/views/Components/Element.js | 16 +++++++++---- packages/react-devtools-shared/src/utils.js | 6 ++--- 4 files changed, 22 insertions(+), 28 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index ecf17a799c005..d4c9d60700d16 100644 --- 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'; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js index 6d937c72ebd86..a2c37b801e170 100644 --- 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,27 +17,24 @@ type Props = {| className?: string, hocDisplayNames: Array | 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 (hocDisplayNames === null && typeLabel === null) { - return null; - } - return ( -
- {hocDisplayName || typeLabel} -
+
{children}
{totalBadgeCount > 1 && (
+{totalBadgeCount - 1}
)} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 1fa40035efdd7..46b54511181d9 100644 --- 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) { " )} - + {hocDisplayNames !== null ? ( + + + + ) : null} ); diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 66081ebcb1072..34757f967b67e 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -270,10 +270,10 @@ export function separateDisplayNameAndHOCs( } break; case ElementTypeForwardRef: - hocDisplayNames = ['ForwardRef'] - break; + hocDisplayNames = ['ForwardRef']; + break; case ElementTypeMemo: - hocDisplayNames = ['Memo'] + hocDisplayNames = ['Memo']; break; default: break; From 6a830d3fad1a9995fff51b21092d2bac1ac48104 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sat, 9 May 2020 14:10:51 +0500 Subject: [PATCH 03/10] handle hoc wrapper --- packages/react-devtools-shared/src/utils.js | 22 +++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 34757f967b67e..ece95ff0cec7b 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -260,7 +260,9 @@ export function separateDisplayNameAndHOCs( switch (type) { case ElementTypeClass: + case ElementTypeForwardRef: case ElementTypeFunction: + case ElementTypeMemo: if (displayName.indexOf('(') >= 0) { const matches = displayName.match(/[^()]+/g); if (matches != null) { @@ -269,16 +271,24 @@ export function separateDisplayNameAndHOCs( } } break; - case ElementTypeForwardRef: - hocDisplayNames = ['ForwardRef']; - break; - case ElementTypeMemo: - hocDisplayNames = ['Memo']; - break; default: 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]; } From dc1c95507f07aa4421d12f14ac48a81a868d151d Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sat, 9 May 2020 16:36:25 +0500 Subject: [PATCH 04/10] remove duplicate from HocBadges --- .../src/devtools/views/Components/HocBadges.js | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js index 4cf88d596d7bb..10398305c9148 100644 --- 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 (
- {typeBadge !== null &&
{typeBadge}
} {hocDisplayNames !== null && hocDisplayNames.map(hocDisplayName => (
From ceac87cfab127bf3952e08b172d8991d98514cee Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 15 May 2020 09:14:51 -0700 Subject: [PATCH 05/10] Added length check for `hocDisplayNames` --- .../src/devtools/views/Components/Element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 46b54511181d9..a209a55ace781 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -137,7 +137,7 @@ export default function ElementView({data, index, style}: Props) { " )} - {hocDisplayNames !== null ? ( + {hocDisplayNames !== null && hocDisplayNames.length > 0 ? ( Date: Fri, 15 May 2020 09:26:20 -0700 Subject: [PATCH 06/10] Adding Store test for HOC badge names --- .../src/__tests__/store-test.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 201b73ffc9c4a..4f2f32248bd7d 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -352,18 +352,18 @@ describe('Store', () => { }; const Wrapper = ({shouldSuspense}) => ( - + }> {shouldSuspense ? : } - + ); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); act(() => { root.render(); }); @@ -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 = () => ( @@ -882,6 +892,9 @@ describe('Store', () => { + + + ); From 4471028b681daabdca4a2ee57cc35cc9e0b67844 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 15 May 2020 09:26:29 -0700 Subject: [PATCH 07/10] Update Store test snapshot for HOC badge names --- .../src/__tests__/__snapshots__/store-test.js.snap | 3 +++ 1 file changed, 3 insertions(+) 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 index 4224a451cd506..a44160ad61200 100644 --- 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 [ForwardRef] ▾ + [withFoo][withBar] + [withFoo][withBar][Memo] + [withFoo][withBar][ForwardRef] `; From d92bc4c36c56725c63957bc3d6ecd4e3c5babdd4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 15 May 2020 09:27:16 -0700 Subject: [PATCH 08/10] Reverted accidental "unstable_" prefix rename b'c of old branch. --- packages/react-devtools-shared/src/__tests__/store-test.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 4f2f32248bd7d..4a0df686b5e67 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -352,18 +352,19 @@ describe('Store', () => { }; const Wrapper = ({shouldSuspense}) => ( - + }> {shouldSuspense ? : } - + ); const container = document.createElement('div'); - const root = ReactDOM.unstable_createRoot(container); + const root = ReactDOM. + createRoot(container); act(() => { root.render(); }); From 19ef410e5bd2cbd8c8034d9682dbfd527a96becb Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 15 May 2020 09:28:10 -0700 Subject: [PATCH 09/10] Formatting error Editing files in GitHub UI is hard :( --- packages/react-devtools-shared/src/__tests__/store-test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 4a0df686b5e67..fc05da3226688 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -363,8 +363,7 @@ describe('Store', () => { ); const container = document.createElement('div'); - const root = ReactDOM. - createRoot(container); + const root = ReactDOM.createRoot(container); act(() => { root.render(); }); From 4f8a664bf67e0c848914fe1c675f7c9fa7273326 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 15 May 2020 09:48:16 -0700 Subject: [PATCH 10/10] Update store-test.js.snap --- .../src/__tests__/__snapshots__/store-test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index a44160ad61200..46e5f86aedc07 100644 --- a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap +++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap @@ -627,6 +627,6 @@ exports[`Store should show the right display names for special component types 1 ▾ [withFoo][withBar] - [withFoo][withBar][Memo] - [withFoo][withBar][ForwardRef] + [Memo][withFoo][withBar] + [ForwardRef][withFoo][withBar] `;