diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 4b594acf6c2ed..4a2ba8ff08e67 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/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; diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js index a677c7447efc7..35e8d17192c6a 100644 --- a/packages/react-devtools-shared/src/backend/views/utils.js +++ b/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), diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index fe6ba4407a924..b5dd931ef0a3b 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/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, diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index 1ef8b4dd80831..e51ced674d207 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/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, ); diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js index 89f823b132842..f8d310a02f72b 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js +++ b/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.`); } diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index 7cbce2d771dea..86c9dd6c8cefe 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/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, 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'; diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js index 2d0e3aafb146e..80c9ef2c7c046 100644 --- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js +++ b/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': diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js index 5b342f549030d..41419df5db557 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js +++ b/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; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js b/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js index 3ceb481d49a83..0bf06dadd9e01 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js +++ b/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 => diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js index 292d69e36afd5..339b80e09b078 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js index 766411fa8ec5a..8c358076b1e70 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js index 6f33b2f0f6122..cfb42fc23fd3d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js +++ b/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; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 6f21512fadd43..afaf6e463d01b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/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, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js index ac11356942ead..b5926cdcf58ad 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js +++ b/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) { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index e850417af5c35..d4751ef46fc21 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 9f19dec3b3bd1..c85d769b7eb80 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/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( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js index 8091055e390c2..78420bf1c152b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js +++ b/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; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js index 1b4208d44bca6..e901743a4ee4c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js index 0c338a3231a6b..d275cde78bfa9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js +++ b/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 [ diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js index ab9fbe633f8e7..346a23b8ff126 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/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) => ( { const input = event.target; if (input !== null) { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js index a7f85e5429b0f..ececd4d9f8368 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js +++ b/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 ( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js index 6da945ff9397d..c1db73084e30a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js index 71a4abac99d01..294640487e021 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js +++ b/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( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js index d341d5e0a868b..5baab8ab3cd57 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js +++ b/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(0); const [isInvalid, setIsInvalid] = useState(false); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js index f986ad2e3de6c..04c141e6f6cf9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js +++ b/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(0); const [newPropName, setNewPropName] = useState(''); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js index 379807a595a96..cc1428999a4cd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js index 8721a618fd947..05b34ab66ed7e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js +++ b/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); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js index 76e816f24201a..089d98ecebadb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js +++ b/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, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js index ca93ac41d9d1b..19e7bdaba0f43 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js @@ -16,7 +16,13 @@ import { } from '@reach/menu-button'; import useThemeStyles from '../../useThemeStyles'; -const MenuList = ({children, ...props}: {children: React$Node, ...}) => { +const MenuList = ({ + children, + ...props +}: { + children: React$Node, + ... +}): React.Node => { const style = useThemeStyles(); return ( // $FlowFixMe unsafe spread diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js index c6dbec7ff4528..db3d28a197660 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js @@ -20,7 +20,7 @@ const Tooltip = ({ children: React$Node, className: string, ... -}) => { +}): React.Node => { const style = useThemeStyles(); return ( // $FlowFixMe unsafe spread diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index c29febb62884e..879b9ba0a73b9 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -146,7 +146,7 @@ export default function DevTools({ hideToggleSuspenseAction, hideLogAction, hideViewSourceAction, -}: Props) { +}: Props): React.Node { const [currentTab, setTab] = useLocalStorage( LOCAL_STORAGE_DEFAULT_TAB_KEY, defaultTab, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js index c0d2f45a3b723..c05630a51387c 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js @@ -24,7 +24,7 @@ export default function CaughtErrorView({ info, componentStack, errorMessage, -}: Props) { +}: Props): React.Node { return (
{children} diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js index f15276d50160d..8a038cf8964ed 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js @@ -26,7 +26,7 @@ export default function ErrorView({ componentStack, dismissError = null, errorMessage, -}: Props) { +}: Props): React.Node { return (
{children} diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js index 4cf631928a987..841c18ae2dd68 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js @@ -31,7 +31,7 @@ export default function ReportNewIssue({ callStack, componentStack, errorMessage, -}: Props) { +}: Props): React.Node { let bugURL = process.env.GITHUB_URL; if (!bugURL) { return null; diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js index b7f993b2395d3..bf836a4ba5a94 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js @@ -11,7 +11,7 @@ import * as React from 'react'; import LoadingAnimation from 'react-devtools-shared/src/devtools/views/Components/LoadingAnimation'; import styles from './shared.css'; -export default function SearchingGitHubIssues() { +export default function SearchingGitHubIssues(): React.Node { return (
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js index 820b2076714d6..e66ce694f6b6d 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js @@ -23,7 +23,7 @@ export default function SuspendingErrorView({ callStack, componentStack, errorMessage, -}: Props) { +}: Props): React.Node { const maybeItem = errorMessage !== null ? findGitHubIssue(errorMessage) : null; diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js index 36cfa3a79267a..8abeaa6d280bd 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js @@ -26,7 +26,7 @@ export default function TimeoutView({ componentStack, dismissError = null, errorMessage, -}: Props) { +}: Props): React.Node { return (
{children} diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js index db7675d5bc5c0..b03ab08f80c17 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js @@ -22,7 +22,7 @@ export default function UnsupportedBridgeOperationView({ children, componentStack, errorMessage, -}: Props) { +}: Props): React.Node { return (
{children} diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js index 8a17808a6ce09..06c2478178996 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js @@ -17,7 +17,7 @@ export default function UpdateExistingIssue({ gitHubIssue, }: { gitHubIssue: GitHubIssue, -}) { +}): React.Node { const {title, url} = gitHubIssue; return (
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js index f885f9611f5bb..23d80996a3483 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js @@ -13,7 +13,7 @@ import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants' import Icon from '../Icon'; import styles from './shared.css'; -export default function WorkplaceGroup() { +export default function WorkplaceGroup(): React.Node { if (!isInternalFacebookBuild) { return null; } diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js index fb39a9fe0bb37..606dbe9a98713 100644 --- a/packages/react-devtools-shared/src/devtools/views/Icon.js +++ b/packages/react-devtools-shared/src/devtools/views/Icon.js @@ -34,7 +34,11 @@ type Props = { type: IconType, }; -export default function Icon({className = '', title = '', type}: Props) { +export default function Icon({ + className = '', + title = '', + type, +}: Props): React.Node { let pathData = null; switch (type) { case 'arrow': diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index 5ba2390e79d4b..2bfbc0ec9031e 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -87,7 +87,7 @@ type Props = { children: React$Node, }; -function ModalDialogContextController({children}: Props) { +function ModalDialogContextController({children}: Props): React.Node { const [state, dispatch] = useReducer(dialogReducer, { dialogs: [], }); @@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) { ); } -function ModalDialog(_: {}) { +function ModalDialog(_: {}): React.Node { const {dialogs, dispatch} = useContext(ModalDialogContext); if (dialogs.length === 0) { diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js index e25efabe1654b..e26b73ec8c4bc 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js @@ -42,7 +42,7 @@ export default function ChartNode({ width, x, y, -}: Props) { +}: Props): React.Node { return (
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js index 231de1c1d5a1a..b047e33552200 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js @@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle'; import styles from './Profiler.css'; -export default function NoProfilingData() { +export default function NoProfilingData(): React.Node { return (
No profiling data has been recorded.
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js index 6827bc4407f5b..3aa4b45c1bb0e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js @@ -11,7 +11,7 @@ import * as React from 'react'; import styles from './Profiler.css'; -export default function ProcessingData() { +export default function ProcessingData(): React.Node { return (
Processing data...
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index c7e69f5ba23b8..2d1b6d3fb63fa 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -82,7 +82,7 @@ type Props = { children: React$Node, }; -function ProfilerContextController({children}: Props) { +function ProfilerContextController({children}: Props): React.Node { const store = useContext(StoreContext); const {selectedElementID} = useContext(TreeStateContext); const dispatch = useContext(TreeDispatcherContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js index cf8a9a843847b..189f1af203402 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js @@ -27,7 +27,7 @@ import styles from './ProfilingImportExportButtons.css'; import type {ProfilingDataExport} from './types'; -export default function ProfilingImportExportButtons() { +export default function ProfilingImportExportButtons(): React.Node { const {isProfiling, profilingData, rootID} = useContext(ProfilerContext); const {setFile} = useContext(TimelineContext); const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js index 4dcbe64cef069..6888c885d0914 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js @@ -11,7 +11,7 @@ import * as React from 'react'; import styles from './Profiler.css'; -export default function ProfilingNotSupported() { +export default function ProfilingNotSupported(): React.Node { return (
Profiling not supported.
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js index c1f03ed1317dd..ca7f9c8d3dab4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js @@ -19,7 +19,7 @@ export type Props = { disabled?: boolean, }; -export default function RecordToggle({disabled}: Props) { +export default function RecordToggle({disabled}: Props): React.Node { const {isProfiling, startProfiling, stopProfiling} = useContext( ProfilerContext, ); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js index dc91bb5c9cc4f..dce197ce4b22d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js @@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle'; import styles from './Profiler.css'; -export default function RecordingInProgress() { +export default function RecordingInProgress(): React.Node { return (
Profiling is in progress...
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js index c10abd9834458..fe85bd5b251a1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js @@ -23,7 +23,7 @@ export default function ReloadAndProfileButton({ disabled, }: { disabled: boolean, -}) { +}): React.Node { const bridge = useContext(BridgeContext); const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js index fe15ac8d63258..bb0d3aa9f74d5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js @@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RootSelector.css'; -export default function RootSelector(_: {}) { +export default function RootSelector(_: {}): React.Node { const {profilingData, rootID, setRootID} = useContext(ProfilerContext); const options = []; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js index 284d442f84641..598a8a58b5790 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js @@ -19,7 +19,7 @@ import styles from './SidebarCommitInfo.css'; export type Props = {}; -export default function SidebarCommitInfo(_: Props) { +export default function SidebarCommitInfo(_: Props): React.Node { const {selectedCommitIndex, rootID} = useContext(ProfilerContext); const {profilerStore} = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js index 26b11a8e30c12..b64de0dd2a095 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js @@ -90,7 +90,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) { ); } -export default function SidebarEventInfo(_: Props) { +export default function SidebarEventInfo(_: Props): React.Node { const {selectedEvent} = useContext(TimelineContext); // (TODO) Refactor in next PR so this supports multiple types of events if (selectedEvent && selectedEvent.schedulingEvent) { diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js index c6505ce7a1082..b27aab877656f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js @@ -20,7 +20,7 @@ import styles from './SidebarSelectedFiberInfo.css'; export type Props = {}; -export default function SidebarSelectedFiberInfo(_: Props) { +export default function SidebarSelectedFiberInfo(_: Props): React.Node { const {profilerStore} = useContext(StoreContext); const { rootID, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js index 76cd52e53a0bd..ab967301e777e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js @@ -50,7 +50,7 @@ export default function SnapshotCommitList({ selectedFilteredCommitIndex, selectCommitIndex, totalDurations, -}: Props) { +}: Props): React.Node { return ( {({height, width}) => ( diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js index faf124b5c97ae..2b2c601bc91a9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -20,7 +20,7 @@ import styles from './SnapshotSelector.css'; export type Props = {}; -export default function SnapshotSelector(_: Props) { +export default function SnapshotSelector(_: Props): React.Node { const { isCommitFilterEnabled, minCommitDuration, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js index 8e759485a64a1..0d7af3e63ee48 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js @@ -7,7 +7,12 @@ import styles from './Tooltip.css'; const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0}; -export default function Tooltip({children, className, label, style}: any) { +export default function Tooltip({ + children, + className, + label, + style, +}: any): React.Node { const containerRef = useRef(null); const tooltipRef = useRef(null); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js index bec2920f14f7e..71ab71832cd2b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js @@ -21,7 +21,7 @@ export type Props = { updaters: Array, }; -export default function Updaters({commitTree, updaters}: Props) { +export default function Updaters({commitTree, updaters}: Props): React.Node { const {selectFiber} = useContext(ProfilerContext); const children = diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js index 064dde43662e4..49bd89924723a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js @@ -37,7 +37,7 @@ type Props = { fiberID: number, }; -export default function WhatChanged({fiberID}: Props) { +export default function WhatChanged({fiberID}: Props): React.Node { const {profilerStore} = useContext(StoreContext); const {rootID, selectedCommitIndex} = useContext(ProfilerContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js index 69134bf956d0d..a861c367c2a66 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js @@ -353,7 +353,7 @@ export function prepareProfilingDataExport( }; } -export const getGradientColor = (value: number) => { +export const getGradientColor = (value: number): string => { const maxIndex = commitGradient.length - 1; let index; if (Number.isNaN(value)) { @@ -366,11 +366,11 @@ export const getGradientColor = (value: number) => { return commitGradient[Math.round(index)]; }; -export const formatDuration = (duration: number) => +export const formatDuration = (duration: number): number | string => Math.round(duration * 10) / 10 || '<0.1'; -export const formatPercentage = (percentage: number) => +export const formatPercentage = (percentage: number): number => Math.round(percentage * 100); -export const formatTime = (timestamp: number) => +export const formatTime = (timestamp: number): number => Math.round(Math.round(timestamp) / 100) / 10; export const scale = ( @@ -378,7 +378,10 @@ export const scale = ( maxValue: number, minRange: number, maxRange: number, -) => (value: number, fallbackValue: number) => +): ((value: number, fallbackValue: number) => number) => ( + value: number, + fallbackValue: number, +) => maxValue - minValue === 0 ? fallbackValue : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange); diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js index a473d450f910b..7eb95868e9d18 100644 --- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js +++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js @@ -15,7 +15,7 @@ type Props = { className?: string, }; -export default function ReactLogo({className}: Props) { +export default function ReactLogo({className}: Props): React.Node { return ( (null); const resetSearch = () => search(''); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 9df49e68ffd2a..281b0f101a490 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -51,7 +51,7 @@ import type { RegExpComponentFilter, } from 'react-devtools-shared/src/types'; -export default function ComponentsSettings(_: {}) { +export default function ComponentsSettings(_: {}): React.Node { const store = useContext(StoreContext); const {parseHookNames, setParseHookNames} = useContext(SettingsContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js index 64df0f6586788..8281cefd3d561 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js @@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext'; import styles from './SettingsShared.css'; -export default function DebuggingSettings(_: {}) { +export default function DebuggingSettings(_: {}): React.Node { const { appendComponentStack, breakOnConsoleErrors, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js index 71fc7ab29196f..fd59913932cdf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js @@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null { return `${CHANGE_LOG_URL}#${versionAnchor}`; } -export default function GeneralSettings(_: {}) { +export default function GeneralSettings(_: {}): React.Node { const { displayDensity, setDisplayDensity, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js index cf0c237e6efb9..d9105da2dc0dc 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js @@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler import styles from './SettingsShared.css'; -export default function ProfilerSettings(_: {}) { +export default function ProfilerSettings(_: {}): React.Node { const { isCommitFilterEnabled, minCommitDuration, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js index 6a6730a9f3091..58377f9696b9b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js @@ -28,7 +28,7 @@ import styles from './SettingsModal.css'; type TabID = 'general' | 'components' | 'profiler'; -export default function SettingsModal(_: {}) { +export default function SettingsModal(_: {}): React.Node { const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext); const store = useContext(StoreContext); const {profilerStore} = store; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js index c20124d90f6f3..fa234d1b711c7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js @@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon'; import {StoreContext} from '../context'; import {useSubscription} from '../hooks'; -export default function SettingsModalContextToggle() { +export default function SettingsModalContextToggle(): React.Node { const {setIsModalShowing} = useContext(SettingsModalContext); const store = useContext(StoreContext); const {profilerStore} = store; diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js index 391c1c9714db7..89ba2d30ca824 100644 --- a/packages/react-devtools-shared/src/devtools/views/TabBar.js +++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js @@ -39,7 +39,7 @@ export default function TabBar({ selectTab, tabs, type, -}: Props) { +}: Props): React.Node { if (!tabs.some(tab => tab !== null && tab.id === currentTab)) { const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo); selectTab(firstTab.id); diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js index 7a6deba50100e..eb8a83465d39a 100644 --- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js +++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js @@ -10,7 +10,11 @@ import * as React from 'react'; import useThemeStyles from './useThemeStyles'; -export default function ThemeProvider({children}: {children: React$Node}) { +export default function ThemeProvider({ + children, +}: { + children: React.Node, +}): React.Node { const themeStyle = useThemeStyles(); const style = React.useMemo(() => { diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js index f90367c3cc0bd..b43c7087c9d0b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Toggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js @@ -32,7 +32,7 @@ export default function Toggle({ onChange, testName, title, -}: Props) { +}: Props): React.Node { let defaultClassName; if (isDisabled) { defaultClassName = styles.ToggleDisabled; diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js index 85f3cb5efdb77..7e2307b329805 100644 --- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js +++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js @@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog'; import styles from './WarnIfLegacyBackendDetected.css'; -export default function WarnIfLegacyBackendDetected(_: {}) { +export default function WarnIfLegacyBackendDetected(_: {}): null { const bridge = useContext(BridgeContext); const {dispatch} = useContext(ModalDialogContext); diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 60a2fe8dcb410..8366a221611fe 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -329,7 +329,10 @@ export function useSubscription({ return state.value; } -export function useHighlightNativeElement() { +export function useHighlightNativeElement(): { + clearHighlightNativeElement: () => void, + highlightNativeElement: (id: number) => void, +} { const bridge = useContext(BridgeContext); const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js index bb35c4cf3488a..4d3d9862b75ad 100644 --- a/packages/react-devtools-shared/src/hydration.js +++ b/packages/react-devtools-shared/src/hydration.js @@ -19,15 +19,15 @@ import { import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types'; export const meta = { - inspectable: Symbol('inspectable'), - inspected: Symbol('inspected'), - name: Symbol('name'), - preview_long: Symbol('preview_long'), - preview_short: Symbol('preview_short'), - readonly: Symbol('readonly'), - size: Symbol('size'), - type: Symbol('type'), - unserializable: Symbol('unserializable'), + inspectable: (Symbol('inspectable'): symbol), + inspected: (Symbol('inspected'): symbol), + name: (Symbol('name'): symbol), + preview_long: (Symbol('preview_long'): symbol), + preview_short: (Symbol('preview_short'): symbol), + readonly: (Symbol('readonly'): symbol), + size: (Symbol('size'): symbol), + type: (Symbol('type'): symbol), + unserializable: (Symbol('unserializable'): symbol), }; export type Dehydrated = { diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js index 613914e8abfd1..03cc54c1500e1 100644 --- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js +++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js @@ -36,7 +36,7 @@ function Nested() { const DeeplyNested = wrapWithNested(Nested, 100); -export default function DeeplyNestedComponents() { +export default function DeeplyNestedComponents(): React.Node { return (

Deeply nested component

diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index ca7bd18010b26..ba92cf3fedf05 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -122,7 +122,7 @@ const ForwardRef = forwardRef<{name: string}, HTMLUListElement>( }, ); -export default function EditableProps() { +export default function EditableProps(): React.Node { return (

Editable props

diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js index 4b44a50a6653e..d105bff9e1d05 100644 --- a/packages/react-devtools-shell/src/app/ElementTypes/index.js +++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js @@ -54,7 +54,7 @@ const LazyComponent = lazy(() => }), ); -export default function ElementTypes() { +export default function ElementTypes(): React.Node { return ( {}}> diff --git a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js index 1a4fc7927c06c..df37534a69ada 100644 --- a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js +++ b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js @@ -53,7 +53,7 @@ function Component({label}) { return
{label}
; } -export default function ErrorBoundaries() { +export default function ErrorBoundaries(): React.Node { return (

Nested error boundaries demo

diff --git a/packages/react-devtools-shell/src/app/Hydration/index.js b/packages/react-devtools-shell/src/app/Hydration/index.js index 38347ec934fe5..1d5920223e5be 100644 --- a/packages/react-devtools-shell/src/app/Hydration/index.js +++ b/packages/react-devtools-shell/src/app/Hydration/index.js @@ -106,7 +106,7 @@ function useInnerBaz() { return count; } -export default function Hydration() { +export default function Hydration(): React.Node { return (

Hydration

diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js index f4b562ee311db..50beadd137aa2 100644 --- a/packages/react-devtools-shell/src/app/Iframe/index.js +++ b/packages/react-devtools-shell/src/app/Iframe/index.js @@ -4,7 +4,7 @@ import * as React from 'react'; import {Fragment} from 'react'; import {createPortal} from 'react-dom'; -export default function Iframe() { +export default function Iframe(): React.Node { return (

Iframe

diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js index 964323a28a045..6b7b189f70174 100644 --- a/packages/react-devtools-shell/src/app/InlineWarnings/index.js +++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js @@ -155,7 +155,7 @@ function ComponentWithSymbolWarning() { return null; } -export default function ErrorsAndWarnings() { +export default function ErrorsAndWarnings(): React.Node { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1); return ( diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js index ffce696fa8ef3..5ebd362c0cc9b 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js @@ -18,7 +18,7 @@ const objectOne = {}; const objectTwo = {objectOne}; objectOne.objectTwo = objectTwo; -export default function CircularReferences() { +export default function CircularReferences(): React.Node { return ; } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js index 39c03547fe9c7..700d76ada6df2 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js @@ -237,7 +237,7 @@ class ModernClassContextConsumerWithUpdates extends Component { } } -export default function Contexts() { +export default function Contexts(): React.Node { return (

Contexts

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js index c04496544540f..9b76deb01dd0d 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js @@ -114,7 +114,7 @@ function wrapWithHoc(Component) { } const HocWithHooks = wrapWithHoc(FunctionWithHooks); -export default function CustomHooks() { +export default function CustomHooks(): React.Node { return ( diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js index c4557e5879a1f..a1a855ed340ea 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js @@ -16,7 +16,7 @@ class Custom { } } -export default function CustomObject() { +export default function CustomObject(): React.Node { return ; } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js index b747f855dae48..5c3eb7e3d5f68 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js @@ -19,7 +19,7 @@ const objectWithNullProto = Object.create(null); objectWithNullProto.foo = 'abc'; objectWithNullProto.bar = 123; -export default function EdgeCaseObjects() { +export default function EdgeCaseObjects(): React.Node { return (

Inspectable elements

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js index 16ccad8d32e73..02ce2c9144f64 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js @@ -19,7 +19,7 @@ const object = { null: null, }; -export default function ObjectProps() { +export default function ObjectProps(): React.Node { return ( ; } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js index f0f08b7d173c1..97d0ef18c8228 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js @@ -34,7 +34,7 @@ const immutable = Immutable.fromJS({ // $FlowFixMe const bigInt = BigInt(123); // eslint-disable-line no-undef -export default function UnserializableProps() { +export default function UnserializableProps(): React.Node { return ( diff --git a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js index 89a0badca15f2..82925ed1b5fdd 100644 --- a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js +++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js @@ -12,7 +12,7 @@ import {Fragment, useState} from 'react'; // $FlowFixMe import {Button, Text, View} from 'react-native-web'; -export default function ReactNativeWeb() { +export default function ReactNativeWeb(): React.Node { const [backgroundColor, setBackgroundColor] = useState('purple'); const toggleColor = () => setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple'); diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js index 875cf60fec6d2..db958df1ccfa4 100644 --- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js +++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js @@ -10,7 +10,7 @@ import * as React from 'react'; import {Fragment, Suspense, SuspenseList, useState} from 'react'; -function SuspenseTree() { +function SuspenseTree(): React.Node { return (

Suspense

diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js index a1b784b6e5a10..67bb6d1b4e541 100644 --- a/packages/react-devtools-shell/src/app/ToDoList/List.js +++ b/packages/react-devtools-shell/src/app/ToDoList/List.js @@ -20,7 +20,7 @@ export type Item = { type Props = {}; -export default function List(props: Props) { +export default function List(props: Props): React.Node { const [newItemText, setNewItemText] = useState(''); const [items, setItems] = useState>([ {id: 1, isComplete: true, text: 'First'}, diff --git a/packages/react-devtools-shell/src/e2e-apps/ListApp.js b/packages/react-devtools-shell/src/e2e-apps/ListApp.js index 0e2c2ef8d4cfc..727edf126ce0c 100644 --- a/packages/react-devtools-shell/src/e2e-apps/ListApp.js +++ b/packages/react-devtools-shell/src/e2e-apps/ListApp.js @@ -10,7 +10,7 @@ import * as React from 'react'; import {useRef, useState} from 'react'; -export default function App() { +export default function App(): React.Node { return ; } diff --git a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js index ae18b7183a052..26a4673ba7c5a 100644 --- a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js +++ b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js @@ -9,7 +9,7 @@ import * as React from 'react'; -export default function App() { +export default function App(): React.Node { return ; } diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js index 3853f5cb4d634..35bdfde779a6a 100644 --- a/packages/react-devtools-timeline/src/CanvasPage.js +++ b/packages/react-devtools-timeline/src/CanvasPage.js @@ -74,7 +74,7 @@ type Props = { viewState: ViewState, }; -function CanvasPage({profilerData, viewState}: Props) { +function CanvasPage({profilerData, viewState}: Props): React.Node { return (
Timeline profiling not supported.
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js index 68fd3eaf33e6a..84307dad3084d 100644 --- a/packages/react-devtools-timeline/src/TimelineSearchInput.js +++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js @@ -16,7 +16,7 @@ import {TimelineSearchContext} from './TimelineSearchContext'; type Props = {}; -export default function TimelineSearchInput(props: Props) { +export default function TimelineSearchInput(props: Props): React.Node { const {searchInputContainerRef} = useContext(TimelineContext); const {dispatch, searchIndex, searchResults, searchText} = useContext( TimelineSearchContext, diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js index c4fd41bdfa250..db2884a0726c1 100644 --- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js +++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js @@ -69,7 +69,7 @@ export class ComponentMeasuresView extends View { }; } - desiredSize() { + desiredSize(): IntrinsicSize { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js index bbc8dcf13936b..151c01cdafb4c 100644 --- a/packages/react-devtools-timeline/src/content-views/FlamechartView.js +++ b/packages/react-devtools-timeline/src/content-views/FlamechartView.js @@ -102,7 +102,7 @@ class FlamechartStackLayerView extends View { }; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } @@ -342,7 +342,12 @@ export class FlamechartView extends View { this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover)); } - desiredSize() { + desiredSize(): { + height: number, + hideScrollBarIfLessThanHeight?: number, + maxInitialHeight?: number, + width: number, + } { // Ignore the wishes of the background color view const intrinsicSize = this._verticalStackView.desiredSize(); return { diff --git a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js index 5db13dbc675e3..2def46a6345b3 100644 --- a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js +++ b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js @@ -77,7 +77,7 @@ export class NativeEventsView extends View { }; } - desiredSize() { + desiredSize(): IntrinsicSize { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js index 547af24bb26ab..cd2fdf4732800 100644 --- a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js +++ b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js @@ -81,7 +81,7 @@ export class NetworkMeasuresView extends View { }; } - desiredSize() { + desiredSize(): IntrinsicSize { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js index f46d435738d39..3244eb2d20315 100644 --- a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js +++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js @@ -71,7 +71,7 @@ export class ReactMeasuresView extends View { }; } - desiredSize() { + desiredSize(): IntrinsicSize { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js index 4c35ee6828943..faf8d991876d8 100644 --- a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js +++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js @@ -60,7 +60,7 @@ export class SchedulingEventsView extends View { }; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js index eaaf44659ea33..25804f91908d7 100644 --- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js +++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js @@ -45,7 +45,7 @@ export class SnapshotsView extends View { this._profilerData = profilerData; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js index 370c8f763275c..502dc2858cd4e 100644 --- a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js +++ b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js @@ -85,7 +85,7 @@ export class SuspenseEventsView extends View { }; } - desiredSize() { + desiredSize(): IntrinsicSize { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js index d2a70e9524b14..9c0cb987e353b 100644 --- a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js +++ b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js @@ -55,7 +55,7 @@ export class ThrownErrorsView extends View { }; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js index 47913dbb22655..8d8ef9502f24d 100644 --- a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js +++ b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js @@ -49,7 +49,7 @@ export class TimeAxisMarkersView extends View { }; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js index 36c24091ac0ad..4abcd6b627078 100644 --- a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js +++ b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js @@ -61,7 +61,7 @@ export class UserTimingMarksView extends View { }; } - desiredSize() { + desiredSize(): Size { return this._intrinsicSize; } diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js index bf60a1fbf9a7a..e92e1d53cd966 100644 --- a/packages/react-devtools-timeline/src/content-views/constants.js +++ b/packages/react-devtools-timeline/src/content-views/constants.js @@ -43,7 +43,63 @@ export const INTERVAL_TIMES = [ export const MIN_INTERVAL_SIZE_PX = 70; // TODO Replace this with "export let" vars -export let COLORS = { +export let COLORS: { + BACKGROUND: string, + INTERNAL_MODULE_FRAME: string, + INTERNAL_MODULE_FRAME_HOVER: string, + INTERNAL_MODULE_FRAME_TEXT: string, + NATIVE_EVENT: string, + NATIVE_EVENT_HOVER: string, + NETWORK_PRIMARY: string, + NETWORK_PRIMARY_HOVER: string, + NETWORK_SECONDARY: string, + NETWORK_SECONDARY_HOVER: string, + PRIORITY_BACKGROUND: string, + PRIORITY_BORDER: string, + PRIORITY_LABEL: string, + REACT_COMMIT: string, + REACT_COMMIT_HOVER: string, + REACT_COMMIT_TEXT: string, + REACT_IDLE: string, + REACT_IDLE_HOVER: string, + REACT_LAYOUT_EFFECTS: string, + REACT_LAYOUT_EFFECTS_HOVER: string, + REACT_LAYOUT_EFFECTS_TEXT: string, + REACT_PASSIVE_EFFECTS: string, + REACT_PASSIVE_EFFECTS_HOVER: string, + REACT_PASSIVE_EFFECTS_TEXT: string, + REACT_RENDER: string, + REACT_RENDER_HOVER: string, + REACT_RENDER_TEXT: string, + REACT_RESIZE_BAR: string, + REACT_RESIZE_BAR_ACTIVE: string, + REACT_RESIZE_BAR_BORDER: string, + REACT_RESIZE_BAR_DOT: string, + REACT_SCHEDULE: string, + REACT_SCHEDULE_HOVER: string, + REACT_SUSPENSE_REJECTED_EVENT: string, + REACT_SUSPENSE_REJECTED_EVENT_HOVER: string, + REACT_SUSPENSE_RESOLVED_EVENT: string, + REACT_SUSPENSE_RESOLVED_EVENT_HOVER: string, + REACT_SUSPENSE_UNRESOLVED_EVENT: string, + REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: string, + REACT_THROWN_ERROR: string, + REACT_THROWN_ERROR_HOVER: string, + REACT_WORK_BORDER: string, + SCROLL_CARET: string, + SCRUBBER_BACKGROUND: string, + SCRUBBER_BORDER: string, + SEARCH_RESULT_FILL: string, + TEXT_COLOR: string, + TEXT_DIM_COLOR: string, + TIME_MARKER_LABEL: string, + USER_TIMING: string, + USER_TIMING_HOVER: string, + WARNING_BACKGROUND: string, + WARNING_BACKGROUND_HOVER: string, + WARNING_TEXT: string, + WARNING_TEXT_INVERED: string, +} = { BACKGROUND: '', INTERNAL_MODULE_FRAME: '', INTERNAL_MODULE_FRAME_HOVER: '', diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js index 83354afe96f19..ec51bfbe30843 100644 --- a/packages/react-devtools-timeline/src/utils/formatting.js +++ b/packages/react-devtools-timeline/src/utils/formatting.js @@ -11,7 +11,7 @@ import type {SchedulingEvent} from '../types'; import prettyMilliseconds from 'pretty-ms'; -export function formatTimestamp(ms: number) { +export function formatTimestamp(ms: number): string { return ( ms.toLocaleString(undefined, { minimumFractionDigits: 1, diff --git a/packages/react-devtools-timeline/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js index 8dd425d263e05..a372c7d5f14c4 100644 --- a/packages/react-devtools-timeline/src/utils/getBatchRange.js +++ b/packages/react-devtools-timeline/src/utils/getBatchRange.js @@ -45,4 +45,8 @@ function unmemoizedGetBatchRange( return [startTime, stopTime]; } -export const getBatchRange = memoize(unmemoizedGetBatchRange); +export const getBatchRange: ( + batchUID: BatchUID, + data: TimelineData, + minStartTime?: number, +) => [Milliseconds, Milliseconds] = memoize(unmemoizedGetBatchRange); diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js index f2559364f55fa..1805310d31266 100644 --- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js +++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js @@ -20,7 +20,7 @@ export default function useSmartTooltip({ canvasRef: {current: HTMLCanvasElement | null}, mouseX: number, mouseY: number, -}) { +}): {current: HTMLElement | null} { const ref = useRef(null); // HACK: Browser extension reports window.innerHeight of 0, diff --git a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js index 2a998493eda1b..64251c92a4e2a 100644 --- a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js +++ b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js @@ -7,6 +7,7 @@ * @flow */ +import type {Size, IntrinsicSize} from './geometry'; import type { Interaction, MouseDownInteraction, @@ -39,7 +40,7 @@ import { export class HorizontalPanAndZoomView extends View { _contentView: View; _intrinsicContentWidth: number; - _isPanning = false; + _isPanning: boolean = false; _viewState: ViewState; constructor( @@ -103,7 +104,7 @@ export class HorizontalPanAndZoomView extends View { this.setScrollState(newState); } - desiredSize() { + desiredSize(): Size | IntrinsicSize { return this._contentView.desiredSize(); } diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js index 6af75bb0587a9..0be8d51b81079 100644 --- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js +++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js @@ -78,7 +78,7 @@ export class ResizableView extends View { this._restoreMutableViewState(); } - desiredSize() { + desiredSize(): {+height: number, +width: number} { const subviewDesiredSize = this._subview.desiredSize(); if (this._shouldRenderResizeBar()) { @@ -132,7 +132,7 @@ export class ResizableView extends View { this.setNeedsDisplay(); } - _shouldRenderResizeBar() { + _shouldRenderResizeBar(): boolean { const subviewDesiredSize = this._subview.desiredSize(); return subviewDesiredSize.hideScrollBarIfLessThanHeight != null ? subviewDesiredSize.height > @@ -195,7 +195,7 @@ export class ResizableView extends View { }); } - _handleClick(interaction: ClickInteraction) { + _handleClick(interaction: ClickInteraction): void | boolean { if (!this._shouldRenderResizeBar()) { return; } @@ -216,7 +216,7 @@ export class ResizableView extends View { } } - _handleDoubleClick(interaction: DoubleClickInteraction) { + _handleDoubleClick(interaction: DoubleClickInteraction): void | boolean { if (!this._shouldRenderResizeBar()) { return; } @@ -236,7 +236,7 @@ export class ResizableView extends View { } } - _handleMouseDown(interaction: MouseDownInteraction) { + _handleMouseDown(interaction: MouseDownInteraction): void | boolean { const cursorLocation = interaction.payload.location; const resizeBarFrame = this._resizeBar.frame; if (rectContainsPoint(cursorLocation, resizeBarFrame)) { @@ -250,7 +250,7 @@ export class ResizableView extends View { } } - _handleMouseMove(interaction: MouseMoveInteraction) { + _handleMouseMove(interaction: MouseMoveInteraction): void | boolean { const {_resizingState} = this; if (_resizingState) { this._resizingState = { @@ -279,7 +279,10 @@ export class ResizableView extends View { } } - handleInteraction(interaction: Interaction, viewRefs: ViewRefs) { + handleInteraction( + interaction: Interaction, + viewRefs: ViewRefs, + ): void | boolean { switch (interaction.type) { case 'click': return this._handleClick(interaction); diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js index 0195e0a7968ac..2d082de2fceab 100644 --- a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js +++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js @@ -52,7 +52,7 @@ export class VerticalScrollBarView extends View { this._verticalScrollOverflowView = verticalScrollOverflowView; } - desiredSize() { + desiredSize(): {+height: number, +width: number} { return { width: SCROLL_BAR_SIZE, height: 0, // No desired height diff --git a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js index 37f96f16c2444..f9875bdcb806a 100644 --- a/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js +++ b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js @@ -72,10 +72,10 @@ export class VerticalScrollOverflowView extends View { this.setNeedsDisplay(); } - _onVerticalScrollViewChange = ( + _onVerticalScrollViewChange: ( scrollState: ScrollState, containerLength: number, - ) => { + ) => void = (scrollState: ScrollState, containerLength: number) => { const maxOffset = scrollState.length - containerLength; if (maxOffset === 0) { return;