diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js index 9ec9acbca4d58..07ee71fc69de3 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js @@ -148,7 +148,7 @@ describe('InspectedElementContext', () => { // Modern Context API const BoolContext = React.createContext(contextData.bool); - (BoolContext: any).displayName = 'BoolContext'; + BoolContext.displayName = 'BoolContext'; class ModernContextType extends React.Component { static contextType = BoolContext; @@ -158,7 +158,7 @@ describe('InspectedElementContext', () => { } const ModernContext = React.createContext(); - (ModernContext: any).displayName = 'ModernContext'; + ModernContext.displayName = 'ModernContext'; const container = document.createElement('div'); await utils.actAsync(() => diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js index acdd5f6df40a3..454d574a79ece 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js @@ -61,7 +61,7 @@ export type InspectedElementContextType = {| const InspectedElementContext = createContext( ((null: any): InspectedElementContextType), ); -(InspectedElementContext: any).displayName = 'InspectedElementContext'; +InspectedElementContext.displayName = 'InspectedElementContext'; type ResolveFn = (inspectedElement: InspectedElementFrontend) => void; type InProgressRequest = {| diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js index 0093f3f13179a..029909f3134d1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js @@ -42,7 +42,7 @@ type Context = {| |}; const NativeStyleContext = createContext(((null: any): Context)); -(NativeStyleContext: any).displayName = 'NativeStyleContext'; +NativeStyleContext.displayName = 'NativeStyleContext'; type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void; type InProgressRequest = {| diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js index abf0867e1933e..493ee8d966122 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -24,7 +24,7 @@ import type {Resource, Thenable} from '../../cache'; type Context = (id: number) => Array | null; const OwnersListContext = createContext(((null: any): Context)); -(OwnersListContext: any).displayName = 'OwnersListContext'; +OwnersListContext.displayName = 'OwnersListContext'; type ResolveFn = (ownersList: Array | null) => void; type InProgressRequest = {| diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js index 7847fbc2db74d..8d23660dbcdb6 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -130,12 +130,12 @@ export type DispatcherContext = (action: Action) => void; const TreeStateContext = createContext( ((null: any): StateContext), ); -(TreeStateContext: any).displayName = 'TreeStateContext'; +TreeStateContext.displayName = 'TreeStateContext'; const TreeDispatcherContext = createContext( ((null: any): DispatcherContext), ); -(TreeDispatcherContext: any).displayName = 'TreeDispatcherContext'; +TreeDispatcherContext.displayName = 'TreeDispatcherContext'; type State = {| // Tree diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js index ba9c33d604730..3dc061c354567 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js @@ -20,6 +20,6 @@ export type Context = {| |}; const ViewElementSourceContext = createContext(((null: any): Context)); -(ViewElementSourceContext: any).displayName = 'ViewElementSourceContext'; +ViewElementSourceContext.displayName = 'ViewElementSourceContext'; export default ViewElementSourceContext; diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index ab8ec90f5cb5a..770c106d8c871 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -50,7 +50,7 @@ type ModalDialogContextType = {| const ModalDialogContext = createContext( ((null: any): ModalDialogContextType), ); -(ModalDialogContext: any).displayName = 'ModalDialogContext'; +ModalDialogContext.displayName = 'ModalDialogContext'; function dialogReducer(state, action) { switch (action.type) { diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index 5e148c52a6cc4..f9e0460220a10 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -71,7 +71,7 @@ export type Context = {| |}; const ProfilerContext = createContext(((null: any): Context)); -(ProfilerContext: any).displayName = 'ProfilerContext'; +ProfilerContext.displayName = 'ProfilerContext'; type StoreProfilingState = {| didRecordCommits: boolean, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index ed56eb249c234..3bafda92f74fd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -48,7 +48,7 @@ type Context = {| |}; const SettingsContext = createContext(((null: any): Context)); -(SettingsContext: any).displayName = 'SettingsContext'; +SettingsContext.displayName = 'SettingsContext'; type DocumentElements = Array; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js index d3a2564942da8..d3b500cee872b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js @@ -20,7 +20,7 @@ type Context = { }; const SettingsModalContext = createContext(((null: any): Context)); -(SettingsModalContext: any).displayName = 'SettingsModalContext'; +SettingsModalContext.displayName = 'SettingsModalContext'; function SettingsModalContextController({children}: {|children: React$Node|}) { const [isModalShowing, setIsModalShowing] = useState(false); diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js index 4b9c753e514e0..a26d704cd28a6 100644 --- a/packages/react-devtools-shared/src/devtools/views/context.js +++ b/packages/react-devtools-shared/src/devtools/views/context.js @@ -16,10 +16,10 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; export const BridgeContext = createContext( ((null: any): FrontendBridge), ); -(BridgeContext: any).displayName = 'BridgeContext'; +BridgeContext.displayName = 'BridgeContext'; export const StoreContext = createContext(((null: any): Store)); -(StoreContext: any).displayName = 'StoreContext'; +StoreContext.displayName = 'StoreContext'; export type ContextMenuContextType = {| isEnabledForInspectedElement: boolean, @@ -30,4 +30,4 @@ export const ContextMenuContext = createContext({ isEnabledForInspectedElement: false, viewAttributeSourceFunction: null, }); -(ContextMenuContext: any).displayName = 'ContextMenuContext'; +ContextMenuContext.displayName = 'ContextMenuContext'; diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index 29afa9e295823..306ac73b91a7c 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -66,7 +66,7 @@ function StatefulFunction({name}: StatefulFunctionProps) { } const BoolContext = createContext(true); -(BoolContext: any).displayName = 'BoolContext'; +BoolContext.displayName = 'BoolContext'; type Props = {|name: string, toggle: boolean|}; type State = {|cities: Array, state: string|}; diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js index e5efb3cd376ca..030e995e356c4 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js @@ -66,23 +66,23 @@ class LegacyContextConsumer extends Component { } const ModernContext = createContext(); -(ModernContext: any).displayName = 'ModernContext'; +ModernContext.displayName = 'ModernContext'; const ArrayContext = createContext(contextData.array); -(ArrayContext: any).displayName = 'ArrayContext'; +ArrayContext.displayName = 'ArrayContext'; const BoolContext = createContext(contextData.bool); -(BoolContext: any).displayName = 'BoolContext'; +BoolContext.displayName = 'BoolContext'; const FuncContext = createContext(contextData.func); -(FuncContext: any).displayName = 'FuncContext'; +FuncContext.displayName = 'FuncContext'; const NumberContext = createContext(contextData.number); -(NumberContext: any).displayName = 'NumberContext'; +NumberContext.displayName = 'NumberContext'; const StringContext = createContext(contextData.string); -(StringContext: any).displayName = 'StringContext'; +StringContext.displayName = 'StringContext'; const SymbolContext = createContext(contextData.symbol); -(SymbolContext: any).displayName = 'SymbolContext'; +SymbolContext.displayName = 'SymbolContext'; const NullContext = createContext(null); -(NullContext: any).displayName = 'NullContext'; +NullContext.displayName = 'NullContext'; const UndefinedContext = createContext(undefined); -(UndefinedContext: any).displayName = 'UndefinedContext'; +UndefinedContext.displayName = 'UndefinedContext'; class ModernContextType extends Component { static contextType = ModernContext; diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 74c255577dbd7..2b87427cba8fc 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -66,6 +66,9 @@ export type ReactContext = { // DEV only _currentRenderer?: Object | null, _currentRenderer2?: Object | null, + // This value may be added by application code + // to improve DEV tooling display names + displayName?: string, ... };