Flow: well_formed_exports for devtools (#25266)

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

@@ -74,7 +74,7 @@ export const logEvent: LogFunction =
       }
     : function logEvent() {};
 
-export const registerEventLogger =
+export const registerEventLogger: (logFunction: LogFunction) => () => void =
   enableLogger === true
     ? function registerEventLogger(logFunction: LogFunction): () => void {
         if (enableLogger) {

packages/react-devtools-shared/src/backend/agent.js

@@ -254,7 +254,9 @@ export default class Agent extends EventEmitter<{
     return this._rendererInterfaces;
   }
 
-  clearErrorsAndWarnings = ({rendererID}: {rendererID: RendererID}) => {
+  clearErrorsAndWarnings: ({rendererID: RendererID}) => void = ({
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -263,7 +265,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  clearErrorsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+  clearErrorsForFiberID: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -272,7 +274,10 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  clearWarningsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+  clearWarningsForFiberID: ElementAndRendererID => void = ({
+    id,
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -281,7 +286,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
+  copyElementPath: CopyElementParams => void = ({
+    id,
+    path,
+    rendererID,
+  }: CopyElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -290,7 +299,13 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  deletePath = ({hookID, id, path, rendererID, type}: DeletePathParams) => {
+  deletePath: DeletePathParams => void = ({
+    hookID,
+    id,
+    path,
+    rendererID,
+    type,
+  }: DeletePathParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -344,18 +359,18 @@ export default class Agent extends EventEmitter<{
     return null;
   }
 
-  getBackendVersion = () => {
+  getBackendVersion: () => void = () => {
     const version = process.env.DEVTOOLS_VERSION;
     if (version) {
       this._bridge.send('backendVersion', version);
     }
   };
 
-  getBridgeProtocol = () => {
+  getBridgeProtocol: () => void = () => {
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
 
-  getProfilingData = ({rendererID}: {rendererID: RendererID}) => {
+  getProfilingData: ({rendererID: RendererID}) => void = ({rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -364,11 +379,11 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingData', renderer.getProfilingData());
   };
 
-  getProfilingStatus = () => {
+  getProfilingStatus: () => void = () => {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  getOwnersList = ({id, rendererID}: ElementAndRendererID) => {
+  getOwnersList: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -378,13 +393,13 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  inspectElement = ({
+  inspectElement: InspectElementParams => void = ({
     forceFullData,
     id,
     path,
     rendererID,
     requestID,
-  }: InspectElementParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -414,7 +429,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  logElementToConsole = ({id, rendererID}: ElementAndRendererID) => {
+  logElementToConsole: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -423,7 +438,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideError = ({id, rendererID, forceError}: OverrideErrorParams) => {
+  overrideError: OverrideErrorParams => void = ({
+    id,
+    rendererID,
+    forceError,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -432,11 +451,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideSuspense = ({
+  overrideSuspense: OverrideSuspenseParams => void = ({
     id,
     rendererID,
     forceFallback,
-  }: OverrideSuspenseParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -445,14 +464,14 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideValueAtPath = ({
+  overrideValueAtPath: OverrideValueAtPathParams => void = ({
     hookID,
     id,
     path,
     rendererID,
     type,
     value,
-  }: OverrideValueAtPathParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -463,13 +482,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideContext = ({
+  overrideContext: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // Don't forward a message that's already been forwarded by the front-end Bridge.
     // We only need to process the override command once!
     if (!wasForwarded) {
@@ -485,14 +504,14 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideHookState = ({
+  overrideHookState: OverrideHookParams => void = ({
     id,
     hookID,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: OverrideHookParams) => {
+  }) => {
     // Don't forward a message that's already been forwarded by the front-end Bridge.
     // We only need to process the override command once!
     if (!wasForwarded) {
@@ -508,13 +527,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideProps = ({
+  overrideProps: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // Don't forward a message that's already been forwarded by the front-end Bridge.
     // We only need to process the override command once!
     if (!wasForwarded) {
@@ -530,13 +549,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideState = ({
+  overrideState: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // Don't forward a message that's already been forwarded by the front-end Bridge.
     // We only need to process the override command once!
     if (!wasForwarded) {
@@ -550,7 +569,9 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  reloadAndProfile = (recordChangeDescriptions: boolean) => {
+  reloadAndProfile: (
+    recordChangeDescriptions: boolean,
+  ) => void = recordChangeDescriptions => {
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
     sessionStorageSetItem(
       SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
@@ -563,14 +584,14 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('reloadAppForProfiling');
   };
 
-  renamePath = ({
+  renamePath: RenamePathParams => void = ({
     hookID,
     id,
     newPath,
     oldPath,
     rendererID,
     type,
-  }: RenamePathParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -607,7 +628,9 @@ export default class Agent extends EventEmitter<{
     }
   }
 
-  setTraceUpdatesEnabled = (traceUpdatesEnabled: boolean) => {
+  setTraceUpdatesEnabled: (
+    traceUpdatesEnabled: boolean,
+  ) => void = traceUpdatesEnabled => {
     this._traceUpdatesEnabled = traceUpdatesEnabled;
 
     setTraceUpdatesEnabled(traceUpdatesEnabled);
@@ -620,7 +643,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  syncSelectionFromNativeElementsPanel = () => {
+  syncSelectionFromNativeElementsPanel: () => void = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
     if (target == null) {
       return;
@@ -628,12 +651,14 @@ export default class Agent extends EventEmitter<{
     this.selectNode(target);
   };
 
-  shutdown = () => {
+  shutdown: () => void = () => {
     // Clean up the overlay if visible, and associated events.
     this.emit('shutdown');
   };
 
-  startProfiling = (recordChangeDescriptions: boolean) => {
+  startProfiling: (
+    recordChangeDescriptions: boolean,
+  ) => void = recordChangeDescriptions => {
     this._recordChangeDescriptions = recordChangeDescriptions;
     this._isProfiling = true;
     for (const rendererID in this._rendererInterfaces) {
@@ -645,7 +670,7 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  stopProfiling = () => {
+  stopProfiling: () => void = () => {
     this._isProfiling = false;
     this._recordChangeDescriptions = false;
     for (const rendererID in this._rendererInterfaces) {
@@ -657,11 +682,16 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  stopInspectingNative = (selected: boolean) => {
+  stopInspectingNative: (selected: boolean) => void = selected => {
     this._bridge.send('stopInspectingNative', selected);
   };
 
-  storeAsGlobal = ({count, id, path, rendererID}: StoreAsGlobalParams) => {
+  storeAsGlobal: StoreAsGlobalParams => void = ({
+    count,
+    id,
+    path,
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -670,18 +700,18 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  updateConsolePatchSettings = ({
+  updateConsolePatchSettings: ({
+    appendComponentStack: boolean,
+    breakOnConsoleErrors: boolean,
+    browserTheme: BrowserTheme,
+    hideConsoleLogsInStrictMode: boolean,
+    showInlineWarningsAndErrors: boolean,
+  }) => void = ({
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {
-    appendComponentStack: boolean,
-    breakOnConsoleErrors: boolean,
-    showInlineWarningsAndErrors: boolean,
-    hideConsoleLogsInStrictMode: boolean,
-    browserTheme: BrowserTheme,
   }) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
@@ -696,7 +726,9 @@ export default class Agent extends EventEmitter<{
     });
   };
 
-  updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
+  updateComponentFilters: (
+    componentFilters: Array<ComponentFilter>,
+  ) => void = componentFilters => {
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
@@ -705,7 +737,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  viewAttributeSource = ({id, path, rendererID}: CopyElementParams) => {
+  viewAttributeSource: CopyElementParams => void = ({id, path, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -714,7 +746,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
+  viewElementSource: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -723,11 +755,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  onTraceUpdates = (nodes: Set<NativeType>) => {
+  onTraceUpdates: (nodes: Set<NativeType>) => void = nodes => {
     this.emit('traceUpdates', nodes);
   };
 
-  onFastRefreshScheduled = () => {
+  onFastRefreshScheduled: () => void = () => {
     if (__DEBUG__) {
       debug('onFastRefreshScheduled');
     }
@@ -735,7 +767,7 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('fastRefreshScheduled');
   };
 
-  onHookOperations = (operations: Array<number>) => {
+  onHookOperations: (operations: Array<number>) => void = operations => {
     if (__DEBUG__) {
       debug(
         'onHookOperations',
@@ -800,19 +832,22 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('unsupportedRendererVersion', rendererID);
   }
 
-  _throttledPersistSelection = throttle((rendererID: number, id: number) => {
-    // This is throttled, so both renderer and selected ID
-    // might not be available by the time we read them.
-    // This is why we need the defensive checks here.
-    const renderer = this._rendererInterfaces[rendererID];
-    const path = renderer != null ? renderer.getPathForElement(id) : null;
-    if (path !== null) {
-      sessionStorageSetItem(
-        SESSION_STORAGE_LAST_SELECTION_KEY,
-        JSON.stringify(({rendererID, path}: PersistedSelection)),
-      );
-    } else {
-      sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
-    }
-  }, 1000);
+  _throttledPersistSelection: any = throttle(
+    (rendererID: number, id: number) => {
+      // This is throttled, so both renderer and selected ID
+      // might not be available by the time we read them.
+      // This is why we need the defensive checks here.
+      const renderer = this._rendererInterfaces[rendererID];
+      const path = renderer != null ? renderer.getPathForElement(id) : null;
+      if (path !== null) {
+        sessionStorageSetItem(
+          SESSION_STORAGE_LAST_SELECTION_KEY,
+          JSON.stringify(({rendererID, path}: PersistedSelection)),
+        );
+      } else {
+        sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
+      }
+    },
+    1000,
+  );
 }

packages/react-devtools-shared/src/backend/utils.js

@@ -119,7 +119,9 @@ export function copyWithSet(
   return updated;
 }
 
-export function getEffectDurations(root: Object) {
+export function getEffectDurations(
+  root: Object,
+): {effectDuration: any | null, passiveEffectDuration: any | null} {
   // Profiling durations are only available for certain builds.
   // If available, they'll be stored on the HostRoot.
   let effectDuration = null;

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

@@ -53,7 +53,7 @@ type Props = {
   id: string,
 };
 
-export default function ContextMenu({children, id}: Props) {
+export default function ContextMenu({children, id}: Props): React.Node {
   const {hideMenu, registerMenu} = useContext<RegistryContextType>(
     RegistryContext,
   );

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

@@ -21,7 +21,11 @@ type Props = {
   title: string,
 };
 
-export default function ContextMenuItem({children, onClick, title}: Props) {
+export default function ContextMenuItem({
+  children,
+  onClick,
+  title,
+}: Props): React.Node {
   const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
 
   const handleClick = event => {

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void;
@@ -81,8 +83,10 @@ export type RegistryContextType = {
   registerMenu: typeof registerMenu,
 };
 
-export const RegistryContext = createContext<RegistryContextType>({
-  hideMenu,
-  showMenu,
-  registerMenu,
-});
+export const RegistryContext: ReactContext<RegistryContextType> = createContext<RegistryContextType>(
+  {
+    hideMenu,
+    showMenu,
+    registerMenu,
+  },
+);

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

@@ -201,10 +201,10 @@ export default class ProfilerStore extends EventEmitter<{
     // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
-  _takeProfilingSnapshotRecursive = (
+  _takeProfilingSnapshotRecursive: (
     elementID: number,
     profilingSnapshots: Map<number, SnapshotNode>,
-  ) => {
+  ) => void = (elementID, profilingSnapshots) => {
     const element = this._store.getElementByID(elementID);
     if (element !== null) {
       const snapshotNode: SnapshotNode = {
@@ -223,7 +223,7 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeOperations = (operations: Array<number>) => {
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
     // The first two values are always rendererID and rootID
     const rendererID = operations[0];
     const rootID = operations[1];
@@ -249,7 +249,9 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {
+  onBridgeProfilingData: (
+    dataBackend: ProfilingDataBackend,
+  ) => void = dataBackend => {
     if (this._isProfiling) {
       // This should never happen, but if it does- ignore previous profiling data.
       return;
@@ -279,14 +281,14 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeShutdown = () => {
+  onBridgeShutdown: () => void = () => {
     this._bridge.removeListener('operations', this.onBridgeOperations);
     this._bridge.removeListener('profilingData', this.onBridgeProfilingData);
     this._bridge.removeListener('profilingStatus', this.onProfilingStatus);
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
   };
 
-  onProfilingStatus = (isProfiling: boolean) => {
+  onProfilingStatus: (isProfiling: boolean) => void = isProfiling => {
     if (isProfiling) {
       this._dataBackends.splice(0);
       this._dataFrontend = null;

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

@@ -33,26 +33,20 @@ export default class ProfilingCache {
     this._profilerStore = profilerStore;
   }
 
-  getCommitTree = ({
-    commitIndex,
-    rootID,
-  }: {
+  getCommitTree: ({
     commitIndex: number,
     rootID: number,
-  }) =>
+  }) => CommitTree = ({commitIndex, rootID}) =>
     getCommitTree({
       commitIndex,
       profilerStore: this._profilerStore,
       rootID,
     });
 
-  getFiberCommits = ({
-    fiberID,
-    rootID,
-  }: {
+  getFiberCommits: ({
     fiberID: number,
     rootID: number,
-  }): Array<number> => {
+  }) => Array<number> = ({fiberID, rootID}) => {
     const cachedFiberCommits = this._fiberCommits.get(fiberID);
     if (cachedFiberCommits != null) {
       return cachedFiberCommits;
@@ -71,15 +65,11 @@ export default class ProfilingCache {
     return fiberCommits;
   };
 
-  getFlamegraphChartData = ({
-    commitIndex,
-    commitTree,
-    rootID,
-  }: {
+  getFlamegraphChartData: ({
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  }): FlamegraphChartData =>
+  }) => FlamegraphChartData = ({commitIndex, commitTree, rootID}) =>
     getFlamegraphChartData({
       commitIndex,
       commitTree,
@@ -87,15 +77,11 @@ export default class ProfilingCache {
       rootID,
     });
 
-  getRankedChartData = ({
-    commitIndex,
-    commitTree,
-    rootID,
-  }: {
+  getRankedChartData: ({
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  }): RankedChartData =>
+  }) => RankedChartData = ({commitIndex, commitTree, rootID}) =>
     getRankedChartData({
       commitIndex,
       commitTree,

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

@@ -828,10 +828,10 @@ export default class Store extends EventEmitter<{
     }
   }
 
-  _adjustParentTreeWeight = (
+  _adjustParentTreeWeight: (
     parentElement: Element | null,
     weightDelta: number,
-  ) => {
+  ) => void = (parentElement, weightDelta) => {
     let isInsideCollapsedSubTree = false;
 
     while (parentElement != null) {
@@ -869,20 +869,17 @@ export default class Store extends EventEmitter<{
     }
   }
 
-  onBridgeNativeStyleEditorSupported = ({
-    isSupported,
-    validAttributes,
-  }: {
+  onBridgeNativeStyleEditorSupported: ({
     isSupported: boolean,
     validAttributes: ?$ReadOnlyArray<string>,
-  }) => {
+  }) => void = ({isSupported, validAttributes}) => {
     this._isNativeStyleEditorSupported = isSupported;
     this._nativeStyleEditorValidAttributes = validAttributes || null;
 
     this.emit('supportsNativeStyleEditor');
   };
 
-  onBridgeOperations = (operations: Array<number>) => {
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');
       debug('onBridgeOperations', operations.join(','));
@@ -1328,15 +1325,15 @@ export default class Store extends EventEmitter<{
   // this message enables the backend to override the frontend's current ("saved") filters.
   // This action should also override the saved filters too,
   // else reloading the frontend without reloading the backend would leave things out of sync.
-  onBridgeOverrideComponentFilters = (
+  onBridgeOverrideComponentFilters: (
     componentFilters: Array<ComponentFilter>,
-  ) => {
+  ) => void = componentFilters => {
     this._componentFilters = componentFilters;
 
     setSavedComponentFilters(componentFilters);
   };
 
-  onBridgeShutdown = () => {
+  onBridgeShutdown: () => void = () => {
     if (__DEBUG__) {
       debug('onBridgeShutdown', 'unsubscribing from Bridge');
     }
@@ -1373,30 +1370,36 @@ export default class Store extends EventEmitter<{
     }
   };
 
-  onBackendStorageAPISupported = (isBackendStorageAPISupported: boolean) => {
+  onBackendStorageAPISupported: (
+    isBackendStorageAPISupported: boolean,
+  ) => void = isBackendStorageAPISupported => {
     this._isBackendStorageAPISupported = isBackendStorageAPISupported;
 
     this.emit('supportsReloadAndProfile');
   };
 
-  onBridgeSynchronousXHRSupported = (isSynchronousXHRSupported: boolean) => {
+  onBridgeSynchronousXHRSupported: (
+    isSynchronousXHRSupported: boolean,
+  ) => void = isSynchronousXHRSupported => {
     this._isSynchronousXHRSupported = isSynchronousXHRSupported;
 
     this.emit('supportsReloadAndProfile');
   };
 
-  onBridgeUnsupportedRendererVersion = () => {
+  onBridgeUnsupportedRendererVersion: () => void = () => {
     this._unsupportedRendererVersionDetected = true;
 
     this.emit('unsupportedRendererVersionDetected');
   };
 
-  onBridgeBackendVersion = (backendVersion: string) => {
+  onBridgeBackendVersion: (backendVersion: string) => void = backendVersion => {
     this._backendVersion = backendVersion;
     this.emit('backendVersion');
   };
 
-  onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
+  onBridgeProtocol: (
+    bridgeProtocol: BridgeProtocol,
+  ) => void = bridgeProtocol => {
     if (this._onBridgeProtocolTimeoutID !== null) {
       clearTimeout(this._onBridgeProtocolTimeoutID);
       this._onBridgeProtocolTimeoutID = null;
@@ -1411,7 +1414,7 @@ export default class Store extends EventEmitter<{
     }
   };
 
-  onBridgeProtocolTimeout = () => {
+  onBridgeProtocolTimeout: () => void = () => {
     this._onBridgeProtocolTimeoutID = null;
 
     // If we timed out, that indicates the backend predates the bridge protocol,

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

@@ -149,7 +149,7 @@ export function printStore(
 // We use JSON.parse to parse string values
 // e.g. 'foo' is not valid JSON but it is a valid string
 // so this method replaces e.g. 'foo' with "foo"
-export function sanitizeForParse(value: any) {
+export function sanitizeForParse(value: any): any | string {
   if (typeof value === 'string') {
     if (
       value.length >= 2 &&
@@ -162,7 +162,7 @@ export function sanitizeForParse(value: any) {
   return value;
 }
 
-export function smartParse(value: any) {
+export function smartParse(value: any): any | void | number {
   switch (value) {
     case 'Infinity':
       return Infinity;

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

@@ -26,7 +26,7 @@ export default function Button({
   testName,
   title,
   ...rest
-}: Props) {
+}: Props): React.Node {
   let button = (
     // $FlowFixMe unsafe spread
     <button

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

@@ -258,4 +258,6 @@ function setResizeCSSVariable(
   }
 }
 
-export default portaledContent(Components);
+export default (portaledContent(
+  Components,
+): React$StatelessFunctionalComponent<{}>);

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

@@ -23,7 +23,7 @@ export default function ExpandCollapseToggle({
   disabled,
   isOpen,
   setIsOpen,
-}: ExpandCollapseToggleProps) {
+}: ExpandCollapseToggleProps): React.Node {
   return (
     <Button
       className={styles.ExpandCollapseToggle}

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

@@ -7,12 +7,16 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 export type FetchFileWithCaching = (url: string) => Promise<string>;
 export type Context = FetchFileWithCaching | null;
 
-const FetchFileWithCachingContext = createContext<Context>(null);
+const FetchFileWithCachingContext: ReactContext<Context> = createContext<Context>(
+  null,
+);
 FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
 
 export default FetchFileWithCachingContext;

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import type {Thenable} from 'shared/ReactTypes';
 
 import {createContext} from 'react';
@@ -16,7 +18,9 @@ export type HookNamesModuleLoaderFunction = () => Thenable<ParseHookNamesModule>
 export type Context = HookNamesModuleLoaderFunction | null;
 
 // TODO (Webpack 5) Hopefully we can remove this context entirely once the Webpack 5 upgrade is completed.
-const HookNamesModuleLoaderContext = createContext<Context>(null);
+const HookNamesModuleLoaderContext: ReactContext<Context> = createContext<Context>(
+  null,
+);
 HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
 
 export default HookNamesModuleLoaderContext;

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -55,7 +57,7 @@ type Context = {
   toggleParseHookNames: ToggleParseHookNames,
 };
 
-export const InspectedElementContext = createContext<Context>(
+export const InspectedElementContext: ReactContext<Context> = createContext<Context>(
   ((null: any): Context),
 );
 
@@ -65,7 +67,9 @@ export type Props = {
   children: ReactNodeList,
 };
 
-export function InspectedElementContextController({children}: Props) {
+export function InspectedElementContextController({
+  children,
+}: Props): React.Node {
   const {selectedElementID} = useContext(TreeStateContext);
   const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
   const bridge = useContext(BridgeContext);

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

@@ -417,5 +417,6 @@ function HookView({
   }
 }
 
-// $FlowFixMe
-export default React.memo(InspectedElementHooksTree);
+export default (React.memo(
+  InspectedElementHooksTree,
+): React.ComponentType<HookViewProps>);

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

@@ -75,7 +75,7 @@ export default function KeyValue({
   pathRoot,
   store,
   value,
-}: KeyValueProps) {
+}: KeyValueProps): React.Node {
   const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
   canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
   canEditValues = !readOnlyGlobalFlag && canEditValues;

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -41,7 +43,9 @@ type Context = {
   getStyleAndLayout: GetStyleAndLayout,
 };
 
-const NativeStyleContext = createContext<Context>(((null: any): Context));
+const NativeStyleContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 NativeStyleContext.displayName = 'NativeStyleContext';
 
 type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
@@ -79,7 +83,7 @@ type Props = {
   children: React$Node,
 };
 
-function NativeStyleContextController({children}: Props) {
+function NativeStyleContextController({children}: Props): React.Node {
   const bridge = useContext<FrontendBridge>(BridgeContext);
   const store = useContext<Store>(StoreContext);
 

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useCallback, useContext, useEffect} from 'react';
 import {createResource} from '../../cache';
@@ -23,7 +25,9 @@ import type {Resource, Thenable} from '../../cache';
 
 type Context = (id: number) => Array<SerializedElement> | null;
 
-const OwnersListContext = createContext<Context>(((null: any): Context));
+const OwnersListContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 OwnersListContext.displayName = 'OwnersListContext';
 
 type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
@@ -61,7 +65,7 @@ type Props = {
   children: React$Node,
 };
 
-function OwnersListContextController({children}: Props) {
+function OwnersListContextController({children}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const {ownerID} = useContext(TreeStateContext);

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

@@ -24,6 +24,8 @@
 // For this reason, changes to the tree context are processed in sequence: tree -> search -> owners
 // This enables each section to potentially override (or mask) previous values.
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -148,12 +150,12 @@ type Action =
 
 export type DispatcherContext = (action: Action) => void;
 
-const TreeStateContext = createContext<StateContext>(
+const TreeStateContext: ReactContext<StateContext> = createContext<StateContext>(
   ((null: any): StateContext),
 );
 TreeStateContext.displayName = 'TreeStateContext';
 
-const TreeDispatcherContext = createContext<DispatcherContext>(
+const TreeDispatcherContext: ReactContext<DispatcherContext> = createContext<DispatcherContext>(
   ((null: any): DispatcherContext),
 );
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
@@ -835,7 +837,7 @@ function TreeContextController({
   defaultOwnerID,
   defaultSelectedElementID,
   defaultSelectedElementIndex,
-}: Props) {
+}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 

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

@@ -7,8 +7,10 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
-const TreeFocusedContext = createContext<boolean>(false);
+const TreeFocusedContext: ReactContext<boolean> = createContext<boolean>(false);
 
 export default TreeFocusedContext;

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 import type {
@@ -19,7 +21,9 @@ export type Context = {
   viewElementSourceFunction: ViewElementSource | null,
 };
 
-const ViewElementSourceContext = createContext<Context>(((null: any): Context));
+const ViewElementSourceContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 ViewElementSourceContext.displayName = 'ViewElementSourceContext';
 
 export default ViewElementSourceContext;

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools';
@@ -15,7 +17,9 @@ export type Context = {
   viewUrlSourceFunction: ViewUrlSource | null,
 };
 
-const ViewSourceContext = createContext<Context>(((null: any): Context));
+const ViewSourceContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 ViewSourceContext.displayName = 'ViewSourceContext';
 
 export default ViewSourceContext;

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

@@ -56,7 +56,17 @@ const InitialState: State = {
 export default class ErrorBoundary extends Component<Props, State> {
   state: State = InitialState;
 
-  static getDerivedStateFromError(error: any) {
+  static getDerivedStateFromError(
+    error: any,
+  ): {
+    callStack: string | null,
+    errorMessage: string | null,
+    hasError: boolean,
+    isTimeout: boolean,
+    isUnknownHookError: boolean,
+    isUnsupportedBridgeOperationError: boolean,
+    isUserError: boolean,
+  } {
     const errorMessage =
       typeof error === 'object' &&
       error !== null &&
@@ -112,7 +122,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     }
   }
 
-  render() {
+  render(): React.Node {
     const {canDismiss: canDismissProp, children} = this.props;
     const {
       callStack,
@@ -201,7 +211,10 @@ export default class ErrorBoundary extends Component<Props, State> {
     return children;
   }
 
-  _logError = (error: any, componentStack: string | null) => {
+  _logError: (error: any, componentStack: string | null) => void = (
+    error,
+    componentStack,
+  ) => {
     logEvent({
       event_name: 'error',
       error_message: error.message ?? null,
@@ -210,7 +223,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     });
   };
 
-  _dismissError = () => {
+  _dismissError: () => void = () => {
     const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
     if (typeof onBeforeDismissCallback === 'function') {
       onBeforeDismissCallback();
@@ -219,7 +232,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     this.setState(InitialState);
   };
 
-  _onStoreError = (error: Error) => {
+  _onStoreError: (error: Error) => void = error => {
     if (!this.state.hasError) {
       this._logError(error, null);
       this.setState({

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

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
 import * as React from 'react';
 import {
   createContext,
@@ -55,7 +56,7 @@ type ModalDialogContextType = {
   dispatch: Dispatch,
 };
 
-const ModalDialogContext = createContext<ModalDialogContextType>(
+const ModalDialogContext: ReactContext<ModalDialogContextType> = createContext<ModalDialogContextType>(
   ((null: any): ModalDialogContextType),
 );
 ModalDialogContext.displayName = 'ModalDialogContext';

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

@@ -25,7 +25,7 @@ type Props = {
   ...
 };
 
-function CommitFlamegraphListItem({data, index, style}: Props) {
+function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
   const {
     chartData,
     onElementMouseEnter,
@@ -131,4 +131,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
   );
 }
 
-export default memo<Props>(CommitFlamegraphListItem, areEqual);
+export default (memo(
+  CommitFlamegraphListItem,
+  areEqual,
+): React.ComponentType<Props>);

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

@@ -80,4 +80,7 @@ function CommitRankedListItem({data, index, style}: Props) {
   );
 }
 
-export default memo<Props>(CommitRankedListItem, areEqual);
+export default (memo(
+  CommitRankedListItem,
+  areEqual,
+): React.ComponentType<Props>);

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

@@ -196,4 +196,4 @@ const tabsWithTimeline = [
   },
 ];
 
-export default portaledContent(Profiler);
+export default (portaledContent(Profiler): React.ComponentType<{}>);

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useCallback, useContext, useMemo, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
@@ -67,7 +69,9 @@ export type Context = {
   selectFiber: (id: number | null, name: string | null) => void,
 };
 
-const ProfilerContext = createContext<Context>(((null: any): Context));
+const ProfilerContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {

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

@@ -99,6 +99,7 @@ function List({
   totalDurations,
   width,
 }: ListProps) {
+  // $FlowFixMe[incompatible-use]
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const divRef = useRef<HTMLDivElement | null>(null);
   const prevCommitIndexRef = useRef<number | null>(null);

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

@@ -96,4 +96,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   );
 }
 
-export default memo<Props>(SnapshotCommitListItem, areEqual);
+export default (memo(
+  SnapshotCommitListItem,
+  areEqual,
+): React.ComponentType<Props>);

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -67,7 +69,9 @@ type Context = {
   setTraceUpdatesEnabled: (value: boolean) => void,
 };
 
-const SettingsContext = createContext<Context>(((null: any): Context));
+const SettingsContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 SettingsContext.displayName = 'SettingsContext';
 
 function useLocalStorageWithLog<T>(
@@ -100,7 +104,7 @@ function SettingsContextController({
   children,
   componentsPortalContainer,
   profilerPortalContainer,
-}: Props) {
+}: Props): React.Node {
   const bridge = useContext(BridgeContext);
 
   const [

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

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useMemo, useState} from 'react';
 
@@ -19,10 +21,16 @@ type Context = {
   ...
 };
 
-const SettingsModalContext = createContext<Context>(((null: any): Context));
+const SettingsModalContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 SettingsModalContext.displayName = 'SettingsModalContext';
 
-function SettingsModalContextController({children}: {children: React$Node}) {
+function SettingsModalContextController({
+  children,
+}: {
+  children: React$Node,
+}): React.Node {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
 
   const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [

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

@@ -24,7 +24,7 @@ const INSTRUCTIONS_FB_URL =
   'https://fb.me/devtools-unsupported-bridge-protocol';
 const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
-export default function UnsupportedBridgeProtocolDialog(_: {}) {
+export default function UnsupportedBridgeProtocolDialog(_: {}): null {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
 

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

@@ -18,7 +18,7 @@ import styles from './UnsupportedVersionDialog.css';
 
 type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
 
-export default function UnsupportedVersionDialog(_: {}) {
+export default function UnsupportedVersionDialog(_: {}): null {
   const {dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
   const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');

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

@@ -7,18 +7,21 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
 import {createContext} from 'react';
 import Store from '../store';
 
 import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views/DevTools';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-export const BridgeContext = createContext<FrontendBridge>(
+export const BridgeContext: ReactContext<FrontendBridge> = createContext<FrontendBridge>(
   ((null: any): FrontendBridge),
 );
 BridgeContext.displayName = 'BridgeContext';
 
-export const StoreContext = createContext<Store>(((null: any): Store));
+export const StoreContext: ReactContext<Store> = createContext<Store>(
+  ((null: any): Store),
+);
 StoreContext.displayName = 'StoreContext';
 
 export type ContextMenuContextType = {
@@ -26,10 +29,12 @@ export type ContextMenuContextType = {
   viewAttributeSourceFunction: ViewAttributeSource | null,
 };
 
-export const ContextMenuContext = createContext<ContextMenuContextType>({
-  isEnabledForInspectedElement: false,
-  viewAttributeSourceFunction: null,
-});
+export const ContextMenuContext: ReactContext<ContextMenuContextType> = createContext<ContextMenuContextType>(
+  {
+    isEnabledForInspectedElement: false,
+    viewAttributeSourceFunction: null,
+  },
+);
 ContextMenuContext.displayName = 'ContextMenuContext';
 
 export type OptionsContextType = {
@@ -41,11 +46,13 @@ export type OptionsContextType = {
   hideViewSourceAction: boolean,
 };
 
-export const OptionsContext = createContext<OptionsContextType>({
-  readOnly: false,
-  hideSettings: false,
-  hideToggleErrorAction: false,
-  hideToggleSuspenseAction: false,
-  hideLogAction: false,
-  hideViewSourceAction: false,
-});
+export const OptionsContext: ReactContext<OptionsContextType> = createContext<OptionsContextType>(
+  {
+    readOnly: false,
+    hideSettings: false,
+    hideToggleErrorAction: false,
+    hideToggleSuspenseAction: false,
+    hideLogAction: false,
+    hideViewSourceAction: false,
+  },
+);

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

@@ -11,7 +11,7 @@ import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
 import {THEME_STYLES} from '../../constants';
 
-const useThemeStyles = () => {
+const useThemeStyles = (): any => {
   const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
 
   const style = useMemo(

packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js

@@ -191,7 +191,7 @@ export default function createGridComponent({
   initInstanceProps: InitInstanceProps,
   shouldResetStyleCacheOnItemSizeChange: boolean,
   validateProps: ValidateProps,
-|}) {
+|}): React.ComponentType<Props<mixed>> {
   return class Grid<T> extends PureComponent<Props<T>, State> {
     _instanceProps: any = initInstanceProps(this.props, this);
     _resetIsScrollingTimeoutId: TimeoutID | null = null;

packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js

@@ -156,7 +156,7 @@ export default function createListComponent({
   initInstanceProps: InitInstanceProps,
   shouldResetStyleCacheOnItemSizeChange: boolean,
   validateProps: ValidateProps,
-|}) {
+|}): React.ComponentType<Props<$FlowFixMe>> {
   return class List<T> extends PureComponent<Props<T>, State> {
     _instanceProps: any = initInstanceProps(this.props, this);
     _outerRef: ?HTMLDivElement;

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

@@ -13,9 +13,9 @@ import {Component} from 'react';
 function noop() {}
 
 export default class SimpleValues extends Component {
-  anonymousFunction = () => {};
+  anonymousFunction: () => void = () => {};
 
-  render() {
+  render(): React.Node {
     return (
       <ChildComponent
         string="abc"

packages/react-devtools-shell/src/app/ToDoList/ListItem.js

@@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) {
   );
 }
 
-export default memo<Props>(ListItem);
+export default (memo(ListItem): React.ComponentType<Props>);

packages/react-devtools-timeline/src/TimelineContext.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -38,14 +40,16 @@ export type Context = {
   selectedEvent: ReactEventInfo,
 };
 
-const TimelineContext = createContext<Context>(((null: any): Context));
+const TimelineContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 TimelineContext.displayName = 'TimelineContext';
 
 type Props = {
   children: React$Node,
 };
 
-function TimelineContextController({children}: Props) {
+function TimelineContextController({children}: Props): React.Node {
   const searchInputContainerRef = useRef(null);
   const [file, setFile] = useState<string | null>(null);
 

packages/react-devtools-timeline/src/TimelineSearchContext.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useMemo, useReducer} from 'react';
 
@@ -122,7 +124,9 @@ export type Context = {
   searchText: string,
 };
 
-const TimelineSearchContext = createContext<Context>(((null: any): Context));
+const TimelineSearchContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 TimelineSearchContext.displayName = 'TimelineSearchContext';
 
 type Props = {
@@ -135,7 +139,7 @@ function TimelineSearchContextController({
   children,
   profilerData,
   viewState,
-}: Props) {
+}: Props): React.Node {
   const [state, dispatch] = useReducer<State, State, Action>(reducer, {
     profilerData,
     searchIndex: -1,

packages/react-devtools-timeline/src/import-worker/index.js

@@ -28,4 +28,5 @@ export type ImportWorkerOutputData =
 
 export type importFileFunction = (file: File) => ImportWorkerOutputData;
 
-export const importFile = (file: File) => workerizedImportFile.importFile(file);
+export const importFile = (file: File): Promise<ImportWorkerOutputData> =>
+  workerizedImportFile.importFile(file);

packages/react-devtools-timeline/src/utils/formatting.js

@@ -20,7 +20,7 @@ export function formatTimestamp(ms: number): string {
   );
 }
 
-export function formatDuration(ms: number) {
+export function formatDuration(ms: number): string {
   return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});
 }
 

packages/react-devtools-timeline/src/view-base/VerticalScrollView.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Size, IntrinsicSize} from './geometry';
 import type {
   Interaction,
   MouseDownInteraction,
@@ -78,7 +79,7 @@ export class VerticalScrollView extends View {
     this._setScrollState(this._scrollState);
   }
 
-  desiredSize() {
+  desiredSize(): Size | IntrinsicSize {
     return this._contentView.desiredSize();
   }
 
@@ -195,7 +196,7 @@ export class VerticalScrollView extends View {
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
     if (!this._isPanning) {
       return;
     }

packages/react-devtools-timeline/src/view-base/View.js

@@ -55,7 +55,7 @@ export class View {
    * @see setNeedsDisplay
    * @private
    */
-  _needsDisplay = true;
+  _needsDisplay: boolean = true;
 
   /**
    * Whether the hierarchy below this view has subviews that need display.
@@ -65,7 +65,7 @@ export class View {
    * @see setSubviewsNeedDisplay
    * @private
    */
-  _subviewsNeedDisplay = false;
+  _subviewsNeedDisplay: boolean = false;
 
   constructor(
     surface: Surface,

packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js

@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   MouseUpInteraction,
 } from '../useCanvasInteraction';
-import type {Rect} from '../geometry';
+import type {Rect, Size} from '../geometry';
 import type {ViewRefs} from '../Surface';
 
 import {BORDER_SIZE, COLORS} from '../../content-views/constants';
@@ -42,7 +42,7 @@ export class ResizeBarView extends View {
     this._label = label;
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this.showLabel
       ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
       : {height: RESIZE_BAR_HEIGHT, width: 0};

scripts/flow/config/flowconfig

@@ -47,6 +47,11 @@ exact_by_default=true
 munge_underscores=false
 types_first=false
 
+well_formed_exports=true
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-shared
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-shell
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-timeline
+
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%