Flow: add simple explicit export types to Devtools

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,20 @@ 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,7 @@ 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 +44,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 +54,7 @@ export function printStore(
   store: Store,
   includeWeight: boolean = false,
   state: StateContext | null = null,
-) {
+): string {
   const snapshotLines = [];
 
   let rootWeight = 0;
@@ -172,7 +172,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);
 

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

@@ -38,7 +38,7 @@ export default function EditableName({
   overrideName,
   path,
   type,
-}: EditableNameProps) {
+}: EditableNameProps): React.Node {
   const [editableName, setEditableName] = useState(initialValue);
   const [isValid, setIsValid] = useState(false);
 

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

@@ -26,7 +26,7 @@ export default function EditableValue({
   overrideValue,
   path,
   value,
-}: EditableValueProps) {
+}: EditableValueProps): React.Node {
   const [state, dispatch] = useEditableValue(value);
   const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
 

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

@@ -32,7 +32,7 @@ type Props = {
   ...
 };
 
-export default function Element({data, index, style}: Props) {
+export default function Element({data, index, style}: Props): React.Node {
   const store = useContext(StoreContext);
   const {ownerFlatTree, ownerID, selectedElementID} = useContext(
     TreeStateContext,

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

@@ -16,7 +16,7 @@ type Props = {
   element: Element,
 };
 
-export default function HocBadges({element}: Props) {
+export default function HocBadges({element}: Props): React.Node {
   const {hocDisplayNames} = ((element: any): Element);
 
   if (hocDisplayNames === null) {

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

@@ -14,7 +14,7 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
-export default function InspectHostNodesToggle() {
+export default function InspectHostNodesToggle(): React.Node {
   const [isInspecting, setIsInspecting] = useState(false);
   const bridge = useContext(BridgeContext);
 

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

@@ -32,7 +32,7 @@ export type Props = {};
 
 // TODO Make edits and deletes also use transition API!
 
-export default function InspectedElementWrapper(_: Props) {
+export default function InspectedElementWrapper(_: Props): React.Node {
   const {inspectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(

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

@@ -36,7 +36,7 @@ export default function InspectedElementContextTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {hasLegacyContext, context, type} = inspectedElement;
 
   const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;

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

@@ -24,7 +24,7 @@ type WrapperProps = {
 
 export default function InspectedElementErrorBoundaryWrapper({
   children,
-}: WrapperProps) {
+}: WrapperProps): React.Node {
   // Key on the selected element ID so that changing the selected element automatically hides the boundary.
   // This seems best since an error inspecting one element isn't likely to be relevant to another element.
   const {selectedElementID} = useContext(TreeStateContext);

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

@@ -37,7 +37,7 @@ export default function InspectedElementErrorsAndWarningsTree({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const refresh = useCacheRefresh();
 
   const [

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

@@ -54,7 +54,7 @@ export function InspectedElementHooksTree({
   parseHookNames,
   store,
   toggleParseHookNames,
-}: HooksTreeViewProps) {
+}: HooksTreeViewProps): React.Node {
   const {hooks, id} = inspectedElement;
 
   // Changing parseHookNames is done in a transition, because it suspends.
@@ -137,7 +137,7 @@ export function InnerHooksTreeView({
   id,
   inspectedElement,
   path,
-}: InnerHooksTreeViewProps) {
+}: InnerHooksTreeViewProps): React.Node {
   // $FlowFixMe "Missing type annotation for U" whatever that means
   return hooks.map((hook, index) => (
     <HookView

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

@@ -35,7 +35,7 @@ export default function InspectedElementPropsTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {

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

@@ -32,7 +32,7 @@ export default function InspectedElementStateTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {state} = inspectedElement;
 
   const entries = state != null ? Object.entries(state) : null;

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

@@ -30,7 +30,7 @@ export default function InspectedElementStyleXPlugin({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   if (!enableStyleXFeatures) {
     return null;
   }

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

@@ -27,7 +27,7 @@ export default function InspectedElementSuspenseToggle({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {id, state, type} = inspectedElement;

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

@@ -59,7 +59,7 @@ export default function InspectedElementView({
   inspectedElement,
   parseHookNames,
   toggleParseHookNames,
-}: Props) {
+}: Props): React.Node {
   const {id} = element;
   const {
     owners,

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

@@ -14,7 +14,7 @@ type Props = {
   className?: string,
 };
 
-export default function LoadingAnimation({className = ''}: Props) {
+export default function LoadingAnimation({className = ''}: Props): React.Node {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

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

@@ -26,7 +26,7 @@ export default function AutoSizeInput({
   testName,
   value,
   ...rest
-}: Props) {
+}: Props): React.Node {
   const onFocusWrapper = event => {
     const input = event.target;
     if (input !== null) {

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

@@ -17,7 +17,7 @@ type Props = {
   layout: Layout,
 };
 
-export default function LayoutViewer({id, layout}: Props) {
+export default function LayoutViewer({id, layout}: Props): React.Node {
   const {height, margin, padding, y, width, x} = layout;
 
   return (

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

@@ -32,7 +32,7 @@ type Props = {
 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
 type ChangeValueFn = (name: string, value: any) => void;
 
-export default function StyleEditor({id, style}: Props) {
+export default function StyleEditor({id, style}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 

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

@@ -18,7 +18,7 @@ import {TreeStateContext} from '../TreeContext';
 
 type Props = {};
 
-export default function NativeStyleEditorWrapper(_: Props) {
+export default function NativeStyleEditorWrapper(_: Props): React.Node {
   const store = useContext(StoreContext);
 
   const subscription = useMemo(

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

@@ -40,7 +40,7 @@ export default function NewArrayValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [key, setKey] = useState<number>(0);
   const [isInvalid, setIsInvalid] = useState(false);
 

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

@@ -38,7 +38,7 @@ export default function NewKeyValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [newPropKey, setNewPropKey] = useState<number>(0);
   const [newPropName, setNewPropName] = useState<string>('');
 

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

@@ -77,7 +77,7 @@ function dialogReducer(state, action) {
   }
 }
 
-export default function OwnerStack() {
+export default function OwnerStack(): React.Node {
   const read = useContext(OwnersListContext);
   const {ownerID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);

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

@@ -22,7 +22,7 @@ type Data = {
   stopIndex: number,
 };
 
-export default function SelectedTreeHighlight(_: {}) {
+export default function SelectedTreeHighlight(_: {}): React.Node {
   const {lineHeight} = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);

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

@@ -51,7 +51,7 @@ export type ItemData = {
 
 type Props = {};
 
-export default function Tree(props: Props) {
+export default function Tree(props: Props): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
     numElements,