Flow: add simple explicit export types to Devtools (#25251)

Author: kassens

packages/react-devtools-core/src/standalone.js

@@ -266,7 +266,7 @@ function initialize(socket: WebSocket) {
 
 let startServerTimeoutID: TimeoutID | null = null;
 
-function connectToSocket(socket: WebSocket) {
+function connectToSocket(socket: WebSocket): {close(): void} {
   socket.onerror = err => {
     onDisconnected();
     log.error('Error with websocket connection', err);
@@ -298,7 +298,7 @@ function startServer(
   host?: string = 'localhost',
   httpsOptions?: ServerOptions,
   loggerOptions?: LoggerOptions,
-) {
+): {close(): void} {
   registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
 
   const useHttps = !!httpsOptions;

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

@@ -39,7 +39,7 @@ export function getOwnerIframe(node: HTMLElement): HTMLElement | null {
 
 // Get a bounding client rect for a node, with an
 // offset added to compensate for its border.
-export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
+export function getBoundingClientRectWithBorderOffset(node: HTMLElement): Rect {
   const dimensions = getElementDimensions(node);
   return mergeRectOffsets([
     node.getBoundingClientRect(),
@@ -109,7 +109,22 @@ export function getNestedBoundingClientRect(
   }
 }
 
-export function getElementDimensions(domElement: Element) {
+export function getElementDimensions(
+  domElement: Element,
+): {
+  borderBottom: number,
+  borderLeft: number,
+  borderRight: number,
+  borderTop: number,
+  marginBottom: number,
+  marginLeft: number,
+  marginRight: number,
+  marginTop: number,
+  paddingBottom: number,
+  paddingLeft: number,
+  paddingRight: number,
+  paddingTop: number,
+} {
   const calculatedStyle = window.getComputedStyle(domElement);
   return {
     borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),

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

@@ -375,7 +375,7 @@ class Bridge<
     }
   }
 
-  _flush = () => {
+  _flush: () => void = () => {
     // This method is used after the bridge is marked as destroyed in shutdown sequence,
     // so we do not bail out if the bridge marked as destroyed.
     // It is a private method that the bridge ensures is only called at the right times.
@@ -400,7 +400,7 @@ class Bridge<
 
   // Temporarily support older standalone backends by forwarding "overrideValueAtPath" commands
   // to the older message types they may be listening to.
-  overrideValueAtPath = ({
+  overrideValueAtPath: OverrideValueAtPath => void = ({
     id,
     path,
     rendererID,

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

@@ -395,11 +395,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
 //
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-const COMFORTABLE_LINE_HEIGHT = parseInt(
+const COMFORTABLE_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.comfortable['--line-height-data'],
   10,
 );
-const COMPACT_LINE_HEIGHT = parseInt(
+const COMPACT_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.compact['--line-height-data'],
   10,
 );

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

@@ -61,7 +61,7 @@ function showMenu({
   }
 }
 
-function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
+function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn): () => void {
   if (idToShowFnMap.has(id)) {
     throw Error(`Context menu with id "${id}" already registered.`);
   }

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

@@ -13,7 +13,10 @@ import type {Element} from './views/Components/types';
 import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 
-export function printElement(element: Element, includeWeight: boolean = false) {
+export function printElement(
+  element: Element,
+  includeWeight: boolean = false,
+): string {
   let prefix = ' ';
   if (element.children.length > 0) {
     prefix = element.isCollapsed ? '▸' : '▾';
@@ -44,7 +47,7 @@ export function printElement(element: Element, includeWeight: boolean = false) {
 export function printOwnersList(
   elements: Array<Element>,
   includeWeight: boolean = false,
-) {
+): string {
   return elements
     .map(element => printElement(element, includeWeight))
     .join('\n');
@@ -54,7 +57,7 @@ export function printStore(
   store: Store,
   includeWeight: boolean = false,
   state: StateContext | null = null,
-) {
+): string {
   const snapshotLines = [];
 
   let rootWeight = 0;
@@ -172,7 +175,7 @@ export function smartParse(value: any) {
   }
 }
 
-export function smartStringify(value: any) {
+export function smartStringify(value: any): string {
   if (typeof value === 'number') {
     if (Number.isNaN(value)) {
       return 'NaN';

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

@@ -46,7 +46,7 @@ type Props = {
   type: IconType,
 };
 
-export default function ButtonIcon({className = '', type}: Props) {
+export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   switch (type) {
     case 'add':

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

@@ -25,7 +25,7 @@ export default function Badge({
   hocDisplayNames,
   type,
   children,
-}: Props) {
+}: Props): React.Node {
   if (hocDisplayNames === null || hocDisplayNames.length === 0) {
     return null;
   }

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

@@ -15,7 +15,7 @@ import {
   ElementTypeSuspense,
 } from 'react-devtools-shared/src/types';
 
-export default function CannotSuspendWarningMessage() {
+export default function CannotSuspendWarningMessage(): React.Node {
   const store = useContext(StoreContext);
   const areSuspenseElementsHidden = !!store.componentFilters.find(
     filter =>

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

@@ -15,7 +15,7 @@ import SearchInput from '../SearchInput';
 
 type Props = {};
 
-export default function ComponentSearchInput(props: Props) {
+export default function ComponentSearchInput(props: Props): React.Node {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);