Fix flow types (#18204)

* Added missing @flow pragma to React.js

* Fixed useContext() return type definition

* Fixed previously masked Flow errors in DevTools and react-interactions packages

* Added displayName to internal Context Flow type

* Removed Flow generic annotations for createResponder

This seems to cause a parsing error. (Not sure why.) The API is deprecated anyway so I'm being lazy for now and just adding a .

Author: Brian Vaughn

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -14,6 +14,8 @@ import {RegistryContext} from './Contexts';
 
 import styles from './ContextMenu.css';
 
+import type {RegistryContextType} from './Contexts';
+
 function respositionToFit(element: HTMLElement, pageX: number, pageY: number) {
   const ownerWindow = element.ownerDocument.defaultView;
   if (element !== null) {
@@ -52,7 +54,7 @@ type Props = {|
 |};
 
 export default function ContextMenu({children, id}: Props) {
-  const {registerMenu} = useContext(RegistryContext);
+  const {registerMenu} = useContext<RegistryContextType>(RegistryContext);
 
   const [state, setState] = useState(HIDDEN_STATE);
 
@@ -61,12 +63,15 @@ export default function ContextMenu({children, id}: Props) {
   const menuRef = useRef(null);
 
   useEffect(() => {
-    const ownerDocument = bodyAccessorRef.current.ownerDocument;
-    containerRef.current = ownerDocument.createElement('div');
-    ownerDocument.body.appendChild(containerRef.current);
-    return () => {
-      ownerDocument.body.removeChild(containerRef.current);
-    };
+    const element = bodyAccessorRef.current;
+    if (element !== null) {
+      const ownerDocument = element.ownerDocument;
+      containerRef.current = ownerDocument.createElement('div');
+      ownerDocument.body.appendChild(containerRef.current);
+      return () => {
+        ownerDocument.body.removeChild(containerRef.current);
+      };
+    }
   }, []);
 
   useEffect(() => {
@@ -82,45 +87,52 @@ export default function ContextMenu({children, id}: Props) {
       return;
     }
 
-    const menu = menuRef.current;
+    const menu = ((menuRef.current: any): HTMLElement);
+    const container = containerRef.current;
+    if (container !== null) {
+      const hideUnlessContains = event => {
+        if (!menu.contains(event.target)) {
+          setState(HIDDEN_STATE);
+        }
+      };
 
-    const hideUnlessContains = event => {
-      if (!menu.contains(event.target)) {
+      const hide = event => {
         setState(HIDDEN_STATE);
-      }
-    };
+      };
 
-    const hide = event => {
-      setState(HIDDEN_STATE);
-    };
+      const ownerDocument = container.ownerDocument;
+      ownerDocument.addEventListener('mousedown', hideUnlessContains);
+      ownerDocument.addEventListener('touchstart', hideUnlessContains);
+      ownerDocument.addEventListener('keydown', hideUnlessContains);
 
-    const ownerDocument = containerRef.current.ownerDocument;
-    ownerDocument.addEventListener('mousedown', hideUnlessContains);
-    ownerDocument.addEventListener('touchstart', hideUnlessContains);
-    ownerDocument.addEventListener('keydown', hideUnlessContains);
+      const ownerWindow = ownerDocument.defaultView;
+      ownerWindow.addEventListener('resize', hide);
 
-    const ownerWindow = ownerDocument.defaultView;
-    ownerWindow.addEventListener('resize', hide);
+      respositionToFit(menu, state.pageX, state.pageY);
 
-    respositionToFit(menu, state.pageX, state.pageY);
+      return () => {
+        ownerDocument.removeEventListener('mousedown', hideUnlessContains);
+        ownerDocument.removeEventListener('touchstart', hideUnlessContains);
+        ownerDocument.removeEventListener('keydown', hideUnlessContains);
 
-    return () => {
-      ownerDocument.removeEventListener('mousedown', hideUnlessContains);
-      ownerDocument.removeEventListener('touchstart', hideUnlessContains);
-      ownerDocument.removeEventListener('keydown', hideUnlessContains);
-
-      ownerWindow.removeEventListener('resize', hide);
-    };
+        ownerWindow.removeEventListener('resize', hide);
+      };
+    }
   }, [state]);
 
   if (!state.isVisible) {
     return <div ref={bodyAccessorRef} />;
   } else {
-    return createPortal(
-      <div ref={menuRef} className={styles.ContextMenu}>
-        {children(state.data)}
-      </div>,
-      containerRef.current,
-    );
+    const container = containerRef.current;
+    if (container !== null) {
+      return createPortal(
+        <div ref={menuRef} className={styles.ContextMenu}>
+          {children(state.data)}
+        </div>,
+        container,
+      );
+    } else {
+      return null;
+    }
   }
 }

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js

@@ -13,14 +13,16 @@ import {RegistryContext} from './Contexts';
 
 import styles from './ContextMenuItem.css';
 
+import type {RegistryContextType} from './Contexts';
+
 type Props = {|
   children: React$Node,
   onClick: () => void,
   title: string,
 |};
 
 export default function ContextMenuItem({children, onClick, title}: Props) {
-  const {hideMenu} = useContext(RegistryContext);
+  const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
 
   const handleClick = event => {
     onClick();

packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js

@@ -55,7 +55,18 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
   };
 }
 
-export const RegistryContext = createContext({
+export type RegistryContextType = {|
+  hideMenu: () => void,
+  showMenu: ({|
+    data: Object,
+    id: string,
+    pageX: number,
+    pageY: number,
+  |}) => void,
+  registerMenu: (string, ShowFn, HideFn) => Function,
+|};
+
+export const RegistryContext = createContext<RegistryContextType>({
   hideMenu,
   showMenu,
   registerMenu,

packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js

@@ -10,6 +10,7 @@
 import {useContext, useEffect} from 'react';
 import {RegistryContext} from './Contexts';
 
+import type {RegistryContextType} from './Contexts';
 import type {ElementRef} from 'react';
 
 export default function useContextMenu({
@@ -21,7 +22,7 @@ export default function useContextMenu({
   id: string,
   ref: {current: ElementRef<'div'> | null},
 |}) {
-  const {showMenu} = useContext(RegistryContext);
+  const {showMenu} = useContext<RegistryContextType>(RegistryContext);
 
   useEffect(() => {
     if (ref.current !== null) {
@@ -30,11 +31,11 @@ export default function useContextMenu({
         event.stopPropagation();
 
         const pageX =
-          event.pageX ||
-          (event.touches && ((event: any): TouchEvent).touches[0].pageX);
+          (event: any).pageX ||
+          (event.touches && (event: any).touches[0].pageX);
         const pageY =
-          event.pageY ||
-          (event.touches && ((event: any): TouchEvent).touches[0].pageY);
+          (event: any).pageY ||
+          (event.touches && (event: any).touches[0].pageY);
 
         showMenu({data, id, pageX, pageY});
       };

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

@@ -32,11 +32,30 @@ import {NativeStyleContextController} from './NativeStyleEditor/context';
 
 import styles from './Components.css';
 
+type Orientation = 'horizontal' | 'vertical';
+
+type ResizeActionType =
+  | 'ACTION_SET_DID_MOUNT'
+  | 'ACTION_SET_IS_RESIZING'
+  | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
+  | 'ACTION_SET_VERTICAL_PERCENTAGE';
+
+type ResizeAction = {|
+  type: ResizeActionType,
+  payload: any,
+|};
+
+type ResizeState = {|
+  horizontalPercentage: number,
+  isResizing: boolean,
+  verticalPercentage: number,
+|};
+
 function Components(_: {||}) {
-  const wrapperElementRef = useRef<HTMLElement>(null);
-  const resizeElementRef = useRef<HTMLElement>(null);
+  const wrapperElementRef = useRef<null | HTMLElement>(null);
+  const resizeElementRef = useRef<null | HTMLElement>(null);
 
-  const [state, dispatch] = useReducer<ResizeState, ResizeAction>(
+  const [state, dispatch] = useReducer<ResizeState, any, ResizeAction>(
     resizeReducer,
     null,
     initResizeState,
@@ -171,25 +190,6 @@ const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
 const VERTICAL_MODE_MAX_WIDTH = 600;
 const MINIMUM_SIZE = 50;
 
-type Orientation = 'horizontal' | 'vertical';
-
-type ResizeActionType =
-  | 'ACTION_SET_DID_MOUNT'
-  | 'ACTION_SET_IS_RESIZING'
-  | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
-  | 'ACTION_SET_VERTICAL_PERCENTAGE';
-
-type ResizeAction = {|
-  type: ResizeActionType,
-  payload: any,
-|};
-
-type ResizeState = {|
-  horizontalPercentage: number,
-  isResizing: boolean,
-  verticalPercentage: number,
-|};
-
 function initResizeState(): ResizeState {
   let horizontalPercentage = 0.65;
   let verticalPercentage = 0.5;

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

@@ -12,7 +12,7 @@ import {useCallback, useState} from 'react';
 import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
 import styles from './EditableName.css';
 
-type OverrideNameFn = (path: Array<string | number>, value: any) => void;
+type OverrideNameFn = (name: string, value: any) => void;
 
 type EditableNameProps = {|
   autoFocus?: boolean,

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

@@ -241,7 +241,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
   } else {
     let overrideValueFn = null;
     // TODO Maybe read editable value from debug hook?
-    if (canEditHooks && isStateEditable) {
+    if (canEditHooks && isStateEditable && hookID !== null) {
       overrideValueFn = (
         absolutePath: Array<string | number>,
         newValue: any,

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

@@ -51,14 +51,16 @@ export type GetInspectedElement = (
   id: number,
 ) => InspectedElementFrontend | null;
 
-type Context = {|
+export type InspectedElementContextType = {|
   copyInspectedElementPath: CopyInspectedElementPath,
   getInspectedElementPath: GetInspectedElementPath,
   getInspectedElement: GetInspectedElement,
   storeAsGlobal: StoreAsGlobal,
 |};
 
-const InspectedElementContext = createContext<Context>(((null: any): Context));
+const InspectedElementContext = createContext<InspectedElementContextType>(
+  ((null: any): InspectedElementContextType),
+);
 InspectedElementContext.displayName = 'InspectedElementContext';
 
 type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;

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

@@ -24,6 +24,9 @@ import {
 } from 'react-devtools-shared/src/devtools/views/context';
 import {TreeStateContext} from '../TreeContext';
 
+import type {StateContext} from '../TreeContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type Store from 'react-devtools-shared/src/devtools/store';
 import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
 import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -77,8 +80,8 @@ type Props = {|
 |};
 
 function NativeStyleContextController({children}: Props) {
-  const bridge = useContext(BridgeContext);
-  const store = useContext(StoreContext);
+  const bridge = useContext<FrontendBridge>(BridgeContext);
+  const store = useContext<Store>(StoreContext);
 
   const getStyleAndLayout = useCallback<GetStyleAndLayout>(
     (id: number) => {
@@ -95,7 +98,7 @@ function NativeStyleContextController({children}: Props) {
   // It's very important that this context consumes selectedElementID and not NativeStyleID.
   // Otherwise the effect that sends the "inspect" message across the bridge-
   // would itself be blocked by the same render that suspends (waiting for the data).
-  const {selectedElementID} = useContext(TreeStateContext);
+  const {selectedElementID} = useContext<StateContext>(TreeStateContext);
 
   const [
     currentStyleAndLayout,

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

@@ -77,7 +77,7 @@ export default function OwnerStack() {
   const {ownerID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
 
-  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+  const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
     ownerID: null,
     owners: [],
     selectedIndex: 0,

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

@@ -37,9 +37,11 @@ import {
 
 import styles from './SelectedElement.css';
 
+import type {ContextMenuContextType} from '../context';
 import type {
   CopyInspectedElementPath,
   GetInspectedElementPath,
+  InspectedElementContextType,
   StoreAsGlobal,
 } from './InspectedElementContext';
 import type {Element, InspectedElement} from './types';
@@ -62,8 +64,7 @@ export default function SelectedElement(_: Props) {
     getInspectedElementPath,
     getInspectedElement,
     storeAsGlobal,
-    viewInspectedElementPath,
-  } = useContext(InspectedElementContext);
+  } = useContext<InspectedElementContextType>(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
@@ -244,7 +245,6 @@ export default function SelectedElement(_: Props) {
           getInspectedElementPath={getInspectedElementPath}
           inspectedElement={inspectedElement}
           storeAsGlobal={storeAsGlobal}
-          viewInspectedElementPath={viewInspectedElementPath}
         />
       )}
     </div>
@@ -270,7 +270,6 @@ function InspectedElementView({
   getInspectedElementPath,
   inspectedElement,
   storeAsGlobal,
-  viewInspectedElementPath,
 }: InspectedElementViewProps) {
   const {id, type} = element;
   const {
@@ -293,7 +292,7 @@ function InspectedElementView({
   const {
     isEnabledForInspectedElement,
     viewAttributeSourceFunction,
-  } = useContext(ContextMenuContext);
+  } = useContext<ContextMenuContextType>(ContextMenuContext);
 
   const inspectContextPath = useCallback(
     (path: Array<string | number>) => {

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

@@ -78,7 +78,7 @@ type Props = {|
 |};
 
 function ModalDialogContextController({children}: Props) {
-  const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
+  const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
     canBeDismissed: true,
     content: null,
     isVisible: false,

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

@@ -96,7 +96,9 @@ type Props = {|
 |};
 
 function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
-  const [hoveredFiberData, hoverFiber] = useState<number | null>(null);
+  const [hoveredFiberData, hoverFiber] = useState<TooltipFiberData | null>(
+    null,
+  );
   const {lineHeight} = useContext(SettingsContext);
   const {selectFiber, selectedFiberID} = useContext(ProfilerContext);