Added displayName to internal Context Flow type

Author: Brian Vaughn

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<any> {
       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(() =>

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -61,7 +61,7 @@ export type InspectedElementContextType = {|
 const InspectedElementContext = createContext<InspectedElementContextType>(
   ((null: any): InspectedElementContextType),
 );
-(InspectedElementContext: any).displayName = 'InspectedElementContext';
+InspectedElementContext.displayName = 'InspectedElementContext';
 
 type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
 type InProgressRequest = {|

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js

@@ -42,7 +42,7 @@ type Context = {|
 |};
 
 const NativeStyleContext = createContext<Context>(((null: any): Context));
-(NativeStyleContext: any).displayName = 'NativeStyleContext';
+NativeStyleContext.displayName = 'NativeStyleContext';
 
 type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
 type InProgressRequest = {|

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<Owner> | null;
 
 const OwnersListContext = createContext<Context>(((null: any): Context));
-(OwnersListContext: any).displayName = 'OwnersListContext';
+OwnersListContext.displayName = 'OwnersListContext';
 
 type ResolveFn = (ownersList: Array<Owner> | null) => void;
 type InProgressRequest = {|

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -130,12 +130,12 @@ export type DispatcherContext = (action: Action) => void;
 const TreeStateContext = createContext<StateContext>(
   ((null: any): StateContext),
 );
-(TreeStateContext: any).displayName = 'TreeStateContext';
+TreeStateContext.displayName = 'TreeStateContext';
 
 const TreeDispatcherContext = createContext<DispatcherContext>(
   ((null: any): DispatcherContext),
 );
-(TreeDispatcherContext: any).displayName = 'TreeDispatcherContext';
+TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
 type State = {|
   // Tree

packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js

@@ -20,6 +20,6 @@ export type Context = {|
 |};
 
 const ViewElementSourceContext = createContext<Context>(((null: any): Context));
-(ViewElementSourceContext: any).displayName = 'ViewElementSourceContext';
+ViewElementSourceContext.displayName = 'ViewElementSourceContext';
 
 export default ViewElementSourceContext;

packages/react-devtools-shared/src/devtools/views/ModalDialog.js

@@ -50,7 +50,7 @@ type ModalDialogContextType = {|
 const ModalDialogContext = createContext<ModalDialogContextType>(
   ((null: any): ModalDialogContextType),
 );
-(ModalDialogContext: any).displayName = 'ModalDialogContext';
+ModalDialogContext.displayName = 'ModalDialogContext';
 
 function dialogReducer(state, action) {
   switch (action.type) {

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js

@@ -71,7 +71,7 @@ export type Context = {|
 |};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
-(ProfilerContext: any).displayName = 'ProfilerContext';
+ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {|
   didRecordCommits: boolean,

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -48,7 +48,7 @@ type Context = {|
 |};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
-(SettingsContext: any).displayName = 'SettingsContext';
+SettingsContext.displayName = 'SettingsContext';
 
 type DocumentElements = Array<HTMLElement>;
 

packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js

@@ -20,7 +20,7 @@ type Context = {
 };
 
 const SettingsModalContext = createContext<Context>(((null: any): Context));
-(SettingsModalContext: any).displayName = 'SettingsModalContext';
+SettingsModalContext.displayName = 'SettingsModalContext';
 
 function SettingsModalContextController({children}: {|children: React$Node|}) {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);

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<FrontendBridge>(
   ((null: any): FrontendBridge),
 );
-(BridgeContext: any).displayName = 'BridgeContext';
+BridgeContext.displayName = 'BridgeContext';
 
 export const StoreContext = createContext<Store>(((null: any): Store));
-(StoreContext: any).displayName = 'StoreContext';
+StoreContext.displayName = 'StoreContext';
 
 export type ContextMenuContextType = {|
   isEnabledForInspectedElement: boolean,
@@ -30,4 +30,4 @@ export const ContextMenuContext = createContext<ContextMenuContextType>({
   isEnabledForInspectedElement: false,
   viewAttributeSourceFunction: null,
 });
-(ContextMenuContext: any).displayName = 'ContextMenuContext';
+ContextMenuContext.displayName = 'ContextMenuContext';

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<string>, state: string|};

packages/react-devtools-shell/src/app/ElementTypes/index.js

@@ -22,7 +22,7 @@ import {
 } from 'react';
 
 const Context = createContext('abc');
-(Context: any).displayName = 'ExampleContext';
+Context.displayName = 'ExampleContext';
 
 class ClassComponent extends Component<any> {
   render() {

packages/react-devtools-shell/src/app/InspectableElements/Contexts.js

@@ -66,23 +66,23 @@ class LegacyContextConsumer extends Component<any> {
 }
 
 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<any> {
   static contextType = ModernContext;

packages/shared/ReactTypes.js

@@ -66,6 +66,9 @@ export type ReactContext<T> = {
   // DEV only
   _currentRenderer?: Object | null,
   _currentRenderer2?: Object | null,
+  // This value may be added by application code
+  // to improve DEV tooling display names
+  displayName?: string,
   ...
 };