DevTools show error icon when hook name parsing fails (#21820)
Brian Vaughn committed
Jul 7, 2021 at 16:27 UTC
8b34d5a905a17e95b5b9b515b60acbb2370f3603
3 files changed
+19
-9
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
-2
@@ -26,7 +26,6 @@ import {
26
inspectElement,
27
} from 'react-devtools-shared/src/inspectedElementCache';
28
import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache';
29
-import {ElementTypeFunction} from 'react-devtools-shared/src/types';
29
import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
30
import {SettingsContext} from '../Settings/SettingsContext';
31
@@ -112,7 +111,6 @@ export function InspectedElementContextController({children}: Props) {
111
if (parseHookNames) {
112
if (
113
inspectedElement !== null &&
115
- inspectedElement.type === ElementTypeFunction &&
114
inspectedElement.hooks !== null &&
115
loadHookNamesFunction !== null
116
) {
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+4
@@ -81,4 +81,8 @@
81
82
.HookName {
83
color: var(--color-component-name);
84
+}
85
+
86
+.ToggleError {
87
+ color: var(--color-error-text);
88
}
\ No newline at end of file
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+15
-7
@@ -64,6 +64,17 @@ export function InspectedElementHooksTree({
64
toggleParseHookNames();
65
};
66
67
+ const hookParsingFailed = parseHookNames && hookNames === null;
68
+
69
+ let toggleTitle;
70
+ if (hookParsingFailed) {
71
+ toggleTitle = 'Hook parsing failed';
72
+ } else if (parseHookNames) {
73
+ toggleTitle = 'Parsing hook names ...';
74
+ } else {
75
+ toggleTitle = 'Parse hook names (may be slow)';
76
+ }
77
+
78
const handleCopy = () => copy(serializeHooksForCopy(hooks));
79
80
if (hooks === null) {
@@ -73,16 +84,13 @@ export function InspectedElementHooksTree({
84
<div className={styles.HooksTreeView}>
85
<div className={styles.HeaderRow}>
86
<div className={styles.Header}>hooks</div>
76
- {enableHookNameParsing && !parseHookNames && (
87
+ {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && (
88
<Toggle
89
+ className={hookParsingFailed ? styles.ToggleError : null}
90
isChecked={parseHookNamesOptimistic}
79
- isDisabled={parseHookNamesOptimistic}
91
+ isDisabled={parseHookNamesOptimistic || hookParsingFailed}
92
onChange={handleChange}
81
- title={
82
- parseHookNames
83
- ? 'Parse hook names'
84
- : 'Parse hook names (may be slow)'
85
- }>
93
+ title={toggleTitle}>
94
<ButtonIcon type="parse-hook-names" />
95
</Toggle>
96
)}