@samitouri / QOS-React-2 / commits / e6a062bd2a

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

Jan Kassens committed Sep 13, 2022 at 12:03 UTC e6a062bd2a1d53f7349a0d0950d89593b63a0c3c
133 files changed +275 -163
packages/react-devtools-core/src/standalone.js
+2 -2
@@ -266,7 +266,7 @@ function initialize(socket: WebSocket) {
266
267 let startServerTimeoutID: TimeoutID | null = null;
268
269 -function connectToSocket(socket: WebSocket) {
269 +function connectToSocket(socket: WebSocket): {close(): void} {
270 socket.onerror = err => {
271 onDisconnected();
272 log.error('Error with websocket connection', err);
@@ -298,7 +298,7 @@ function startServer(
298 host?: string = 'localhost',
299 httpsOptions?: ServerOptions,
300 loggerOptions?: LoggerOptions,
301 -) {
301 +): {close(): void} {
302 registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
303
304 const useHttps = !!httpsOptions;
packages/react-devtools-shared/src/backend/views/utils.js
+17 -2
@@ -39,7 +39,7 @@ export function getOwnerIframe(node: HTMLElement): HTMLElement | null {
39
40 // Get a bounding client rect for a node, with an
41 // offset added to compensate for its border.
42 -export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
42 +export function getBoundingClientRectWithBorderOffset(node: HTMLElement): Rect {
43 const dimensions = getElementDimensions(node);
44 return mergeRectOffsets([
45 node.getBoundingClientRect(),
@@ -109,7 +109,22 @@ export function getNestedBoundingClientRect(
109 }
110 }
111
112 -export function getElementDimensions(domElement: Element) {
112 +export function getElementDimensions(
113 + domElement: Element,
114 +): {
115 + borderBottom: number,
116 + borderLeft: number,
117 + borderRight: number,
118 + borderTop: number,
119 + marginBottom: number,
120 + marginLeft: number,
121 + marginRight: number,
122 + marginTop: number,
123 + paddingBottom: number,
124 + paddingLeft: number,
125 + paddingRight: number,
126 + paddingTop: number,
127 +} {
128 const calculatedStyle = window.getComputedStyle(domElement);
129 return {
130 borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),
packages/react-devtools-shared/src/bridge.js
+2 -2
@@ -375,7 +375,7 @@ class Bridge<
375 }
376 }
377
378 - _flush = () => {
378 + _flush: () => void = () => {
379 // This method is used after the bridge is marked as destroyed in shutdown sequence,
380 // so we do not bail out if the bridge marked as destroyed.
381 // It is a private method that the bridge ensures is only called at the right times.
@@ -400,7 +400,7 @@ class Bridge<
400
401 // Temporarily support older standalone backends by forwarding "overrideValueAtPath" commands
402 // to the older message types they may be listening to.
403 - overrideValueAtPath = ({
403 + overrideValueAtPath: OverrideValueAtPath => void = ({
404 id,
405 path,
406 rendererID,
packages/react-devtools-shared/src/constants.js
+2 -2
@@ -395,11 +395,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
395 //
396 // Sometimes the inline target is rendered before root styles are applied,
397 // which would result in e.g. NaN itemSize being passed to react-window list.
398 -const COMFORTABLE_LINE_HEIGHT = parseInt(
398 +const COMFORTABLE_LINE_HEIGHT: number = parseInt(
399 THEME_STYLES.comfortable['--line-height-data'],
400 10,
401 );
402 -const COMPACT_LINE_HEIGHT = parseInt(
402 +const COMPACT_LINE_HEIGHT: number = parseInt(
403 THEME_STYLES.compact['--line-height-data'],
404 10,
405 );
packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+1 -1
@@ -61,7 +61,7 @@ function showMenu({
61 }
62 }
63
64 -function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
64 +function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn): () => void {
65 if (idToShowFnMap.has(id)) {
66 throw Error(`Context menu with id "${id}" already registered.`);
67 }
packages/react-devtools-shared/src/devtools/utils.js
+7 -4
@@ -13,7 +13,10 @@ import type {Element} from './views/Components/types';
13 import type {StateContext} from './views/Components/TreeContext';
14 import type Store from './store';
15
16 -export function printElement(element: Element, includeWeight: boolean = false) {
16 +export function printElement(
17 + element: Element,
18 + includeWeight: boolean = false,
19 +): string {
20 let prefix = ' ';
21 if (element.children.length > 0) {
22 prefix = element.isCollapsed ? '▸' : '▾';
@@ -44,7 +47,7 @@ export function printElement(element: Element, includeWeight: boolean = false) {
47 export function printOwnersList(
48 elements: Array<Element>,
49 includeWeight: boolean = false,
47 -) {
50 +): string {
51 return elements
52 .map(element => printElement(element, includeWeight))
53 .join('\n');
@@ -54,7 +57,7 @@ export function printStore(
57 store: Store,
58 includeWeight: boolean = false,
59 state: StateContext | null = null,
57 -) {
60 +): string {
61 const snapshotLines = [];
62
63 let rootWeight = 0;
@@ -172,7 +175,7 @@ export function smartParse(value: any) {
175 }
176 }
177
175 -export function smartStringify(value: any) {
178 +export function smartStringify(value: any): string {
179 if (typeof value === 'number') {
180 if (Number.isNaN(value)) {
181 return 'NaN';
packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+1 -1
@@ -46,7 +46,7 @@ type Props = {
46 type: IconType,
47 };
48
49 -export default function ButtonIcon({className = '', type}: Props) {
49 +export default function ButtonIcon({className = '', type}: Props): React.Node {
50 let pathData = null;
51 switch (type) {
52 case 'add':
packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+1 -1
@@ -25,7 +25,7 @@ export default function Badge({
25 hocDisplayNames,
26 type,
27 children,
28 -}: Props) {
28 +}: Props): React.Node {
29 if (hocDisplayNames === null || hocDisplayNames.length === 0) {
30 return null;
31 }
packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
+1 -1
@@ -15,7 +15,7 @@ import {
15 ElementTypeSuspense,
16 } from 'react-devtools-shared/src/types';
17
18 -export default function CannotSuspendWarningMessage() {
18 +export default function CannotSuspendWarningMessage(): React.Node {
19 const store = useContext(StoreContext);
20 const areSuspenseElementsHidden = !!store.componentFilters.find(
21 filter =>
packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+1 -1
@@ -15,7 +15,7 @@ import SearchInput from '../SearchInput';
15
16 type Props = {};
17
18 -export default function ComponentSearchInput(props: Props) {
18 +export default function ComponentSearchInput(props: Props): React.Node {
19 const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
20 const dispatch = useContext(TreeDispatcherContext);
21
packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
+1 -1
@@ -38,7 +38,7 @@ export default function EditableName({
38 overrideName,
39 path,
40 type,
41 -}: EditableNameProps) {
41 +}: EditableNameProps): React.Node {
42 const [editableName, setEditableName] = useState(initialValue);
43 const [isValid, setIsValid] = useState(false);
44
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+1 -1
@@ -26,7 +26,7 @@ export default function EditableValue({
26 overrideValue,
27 path,
28 value,
29 -}: EditableValueProps) {
29 +}: EditableValueProps): React.Node {
30 const [state, dispatch] = useEditableValue(value);
31 const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
32
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+1 -1
@@ -32,7 +32,7 @@ type Props = {
32 ...
33 };
34
35 -export default function Element({data, index, style}: Props) {
35 +export default function Element({data, index, style}: Props): React.Node {
36 const store = useContext(StoreContext);
37 const {ownerFlatTree, ownerID, selectedElementID} = useContext(
38 TreeStateContext,
packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+1 -1
@@ -16,7 +16,7 @@ type Props = {
16 element: Element,
17 };
18
19 -export default function HocBadges({element}: Props) {
19 +export default function HocBadges({element}: Props): React.Node {
20 const {hocDisplayNames} = ((element: any): Element);
21
22 if (hocDisplayNames === null) {
packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+1 -1
@@ -14,7 +14,7 @@ import Toggle from '../Toggle';
14 import ButtonIcon from '../ButtonIcon';
15 import {logEvent} from 'react-devtools-shared/src/Logger';
16
17 -export default function InspectHostNodesToggle() {
17 +export default function InspectHostNodesToggle(): React.Node {
18 const [isInspecting, setIsInspecting] = useState(false);
19 const bridge = useContext(BridgeContext);
20
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+1 -1
@@ -32,7 +32,7 @@ export type Props = {};
32
33 // TODO Make edits and deletes also use transition API!
34
35 -export default function InspectedElementWrapper(_: Props) {
35 +export default function InspectedElementWrapper(_: Props): React.Node {
36 const {inspectedElementID} = useContext(TreeStateContext);
37 const dispatch = useContext(TreeDispatcherContext);
38 const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+1 -1
@@ -36,7 +36,7 @@ export default function InspectedElementContextTree({
36 element,
37 inspectedElement,
38 store,
39 -}: Props) {
39 +}: Props): React.Node {
40 const {hasLegacyContext, context, type} = inspectedElement;
41
42 const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+1 -1
@@ -24,7 +24,7 @@ type WrapperProps = {
24
25 export default function InspectedElementErrorBoundaryWrapper({
26 children,
27 -}: WrapperProps) {
27 +}: WrapperProps): React.Node {
28 // Key on the selected element ID so that changing the selected element automatically hides the boundary.
29 // This seems best since an error inspecting one element isn't likely to be relevant to another element.
30 const {selectedElementID} = useContext(TreeStateContext);
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+1 -1
@@ -37,7 +37,7 @@ export default function InspectedElementErrorsAndWarningsTree({
37 bridge,
38 inspectedElement,
39 store,
40 -}: Props) {
40 +}: Props): React.Node {
41 const refresh = useCacheRefresh();
42
43 const [
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+2 -2
@@ -54,7 +54,7 @@ export function InspectedElementHooksTree({
54 parseHookNames,
55 store,
56 toggleParseHookNames,
57 -}: HooksTreeViewProps) {
57 +}: HooksTreeViewProps): React.Node {
58 const {hooks, id} = inspectedElement;
59
60 // Changing parseHookNames is done in a transition, because it suspends.
@@ -137,7 +137,7 @@ export function InnerHooksTreeView({
137 id,
138 inspectedElement,
139 path,
140 -}: InnerHooksTreeViewProps) {
140 +}: InnerHooksTreeViewProps): React.Node {
141 // $FlowFixMe "Missing type annotation for U" whatever that means
142 return hooks.map((hook, index) => (
143 <HookView
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+1 -1
@@ -35,7 +35,7 @@ export default function InspectedElementPropsTree({
35 element,
36 inspectedElement,
37 store,
38 -}: Props) {
38 +}: Props): React.Node {
39 const {readOnly} = React.useContext(OptionsContext);
40
41 const {
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+1 -1
@@ -32,7 +32,7 @@ export default function InspectedElementStateTree({
32 element,
33 inspectedElement,
34 store,
35 -}: Props) {
35 +}: Props): React.Node {
36 const {state} = inspectedElement;
37
38 const entries = state != null ? Object.entries(state) : null;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+1 -1
@@ -30,7 +30,7 @@ export default function InspectedElementStyleXPlugin({
30 element,
31 inspectedElement,
32 store,
33 -}: Props) {
33 +}: Props): React.Node {
34 if (!enableStyleXFeatures) {
35 return null;
36 }
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+1 -1
@@ -27,7 +27,7 @@ export default function InspectedElementSuspenseToggle({
27 bridge,
28 inspectedElement,
29 store,
30 -}: Props) {
30 +}: Props): React.Node {
31 const {readOnly} = React.useContext(OptionsContext);
32
33 const {id, state, type} = inspectedElement;
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+1 -1
@@ -59,7 +59,7 @@ export default function InspectedElementView({
59 inspectedElement,
60 parseHookNames,
61 toggleParseHookNames,
62 -}: Props) {
62 +}: Props): React.Node {
63 const {id} = element;
64 const {
65 owners,
packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
+1 -1
@@ -14,7 +14,7 @@ type Props = {
14 className?: string,
15 };
16
17 -export default function LoadingAnimation({className = ''}: Props) {
17 +export default function LoadingAnimation({className = ''}: Props): React.Node {
18 return (
19 <svg
20 xmlns="http://www.w3.org/2000/svg"
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+1 -1
@@ -26,7 +26,7 @@ export default function AutoSizeInput({
26 testName,
27 value,
28 ...rest
29 -}: Props) {
29 +}: Props): React.Node {
30 const onFocusWrapper = event => {
31 const input = event.target;
32 if (input !== null) {
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
+1 -1
@@ -17,7 +17,7 @@ type Props = {
17 layout: Layout,
18 };
19
20 -export default function LayoutViewer({id, layout}: Props) {
20 +export default function LayoutViewer({id, layout}: Props): React.Node {
21 const {height, margin, padding, y, width, x} = layout;
22
23 return (
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+1 -1
@@ -32,7 +32,7 @@ type Props = {
32 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
33 type ChangeValueFn = (name: string, value: any) => void;
34
35 -export default function StyleEditor({id, style}: Props) {
35 +export default function StyleEditor({id, style}: Props): React.Node {
36 const bridge = useContext(BridgeContext);
37 const store = useContext(StoreContext);
38
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
+1 -1
@@ -18,7 +18,7 @@ import {TreeStateContext} from '../TreeContext';
18
19 type Props = {};
20
21 -export default function NativeStyleEditorWrapper(_: Props) {
21 +export default function NativeStyleEditorWrapper(_: Props): React.Node {
22 const store = useContext(StoreContext);
23
24 const subscription = useMemo(
packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
+1 -1
@@ -40,7 +40,7 @@ export default function NewArrayValue({
40 path,
41 store,
42 type,
43 -}: Props) {
43 +}: Props): React.Node {
44 const [key, setKey] = useState<number>(0);
45 const [isInvalid, setIsInvalid] = useState(false);
46
packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
+1 -1
@@ -38,7 +38,7 @@ export default function NewKeyValue({
38 path,
39 store,
40 type,
41 -}: Props) {
41 +}: Props): React.Node {
42 const [newPropKey, setNewPropKey] = useState<number>(0);
43 const [newPropName, setNewPropName] = useState<string>('');
44
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+1 -1
@@ -77,7 +77,7 @@ function dialogReducer(state, action) {
77 }
78 }
79
80 -export default function OwnerStack() {
80 +export default function OwnerStack(): React.Node {
81 const read = useContext(OwnersListContext);
82 const {ownerID} = useContext(TreeStateContext);
83 const treeDispatch = useContext(TreeDispatcherContext);
packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
+1 -1
@@ -22,7 +22,7 @@ type Data = {
22 stopIndex: number,
23 };
24
25 -export default function SelectedTreeHighlight(_: {}) {
25 +export default function SelectedTreeHighlight(_: {}): React.Node {
26 const {lineHeight} = useContext(SettingsContext);
27 const store = useContext(StoreContext);
28 const treeFocused = useContext(TreeFocusedContext);
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+1 -1
@@ -51,7 +51,7 @@ export type ItemData = {
51
52 type Props = {};
53
54 -export default function Tree(props: Props) {
54 +export default function Tree(props: Props): React.Node {
55 const dispatch = useContext(TreeDispatcherContext);
56 const {
57 numElements,
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
+7 -1
@@ -16,7 +16,13 @@ import {
16 } from '@reach/menu-button';
17 import useThemeStyles from '../../useThemeStyles';
18
19 -const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
19 +const MenuList = ({
20 + children,
21 + ...props
22 +}: {
23 + children: React$Node,
24 + ...
25 +}): React.Node => {
26 const style = useThemeStyles();
27 return (
28 // $FlowFixMe unsafe spread
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
+1 -1
@@ -20,7 +20,7 @@ const Tooltip = ({
20 children: React$Node,
21 className: string,
22 ...
23 -}) => {
23 +}): React.Node => {
24 const style = useThemeStyles();
25 return (
26 // $FlowFixMe unsafe spread
packages/react-devtools-shared/src/devtools/views/DevTools.js
+1 -1
@@ -146,7 +146,7 @@ export default function DevTools({
146 hideToggleSuspenseAction,
147 hideLogAction,
148 hideViewSourceAction,
149 -}: Props) {
149 +}: Props): React.Node {
150 const [currentTab, setTab] = useLocalStorage<TabID>(
151 LOCAL_STORAGE_DEFAULT_TAB_KEY,
152 defaultTab,
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
+1 -1
@@ -24,7 +24,7 @@ export default function CaughtErrorView({
24 info,
25 componentStack,
26 errorMessage,
27 -}: Props) {
27 +}: Props): React.Node {
28 return (
29 <div className={styles.ErrorBoundary}>
30 {children}
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+1 -1
@@ -26,7 +26,7 @@ export default function ErrorView({
26 componentStack,
27 dismissError = null,
28 errorMessage,
29 -}: Props) {
29 +}: Props): React.Node {
30 return (
31 <div className={styles.ErrorBoundary}>
32 {children}
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+1 -1
@@ -31,7 +31,7 @@ export default function ReportNewIssue({
31 callStack,
32 componentStack,
33 errorMessage,
34 -}: Props) {
34 +}: Props): React.Node {
35 let bugURL = process.env.GITHUB_URL;
36 if (!bugURL) {
37 return null;
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
+1 -1
@@ -11,7 +11,7 @@ import * as React from 'react';
11 import LoadingAnimation from 'react-devtools-shared/src/devtools/views/Components/LoadingAnimation';
12 import styles from './shared.css';
13
14 -export default function SearchingGitHubIssues() {
14 +export default function SearchingGitHubIssues(): React.Node {
15 return (
16 <div className={styles.GitHubLinkRow}>
17 <LoadingAnimation className={styles.LoadingIcon} />
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
+1 -1
@@ -23,7 +23,7 @@ export default function SuspendingErrorView({
23 callStack,
24 componentStack,
25 errorMessage,
26 -}: Props) {
26 +}: Props): React.Node {
27 const maybeItem =
28 errorMessage !== null ? findGitHubIssue(errorMessage) : null;
29
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
+1 -1
@@ -26,7 +26,7 @@ export default function TimeoutView({
26 componentStack,
27 dismissError = null,
28 errorMessage,
29 -}: Props) {
29 +}: Props): React.Node {
30 return (
31 <div className={styles.ErrorBoundary}>
32 {children}
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
+1 -1
@@ -22,7 +22,7 @@ export default function UnsupportedBridgeOperationView({
22 children,
23 componentStack,
24 errorMessage,
25 -}: Props) {
25 +}: Props): React.Node {
26 return (
27 <div className={styles.ErrorBoundary}>
28 {children}
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
+1 -1
@@ -17,7 +17,7 @@ export default function UpdateExistingIssue({
17 gitHubIssue,
18 }: {
19 gitHubIssue: GitHubIssue,
20 -}) {
20 +}): React.Node {
21 const {title, url} = gitHubIssue;
22 return (
23 <div className={styles.GitHubLinkRow}>
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+1 -1
@@ -13,7 +13,7 @@ import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants'
13 import Icon from '../Icon';
14 import styles from './shared.css';
15
16 -export default function WorkplaceGroup() {
16 +export default function WorkplaceGroup(): React.Node {
17 if (!isInternalFacebookBuild) {
18 return null;
19 }
packages/react-devtools-shared/src/devtools/views/Icon.js
+5 -1
@@ -34,7 +34,11 @@ type Props = {
34 type: IconType,
35 };
36
37 -export default function Icon({className = '', title = '', type}: Props) {
37 +export default function Icon({
38 + className = '',
39 + title = '',
40 + type,
41 +}: Props): React.Node {
42 let pathData = null;
43 switch (type) {
44 case 'arrow':
packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+2 -2
@@ -87,7 +87,7 @@ type Props = {
87 children: React$Node,
88 };
89
90 -function ModalDialogContextController({children}: Props) {
90 +function ModalDialogContextController({children}: Props): React.Node {
91 const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
92 dialogs: [],
93 });
@@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) {
107 );
108 }
109
110 -function ModalDialog(_: {}) {
110 +function ModalDialog(_: {}): React.Node {
111 const {dialogs, dispatch} = useContext(ModalDialogContext);
112
113 if (dialogs.length === 0) {
packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+1 -1
@@ -42,7 +42,7 @@ export default function ChartNode({
42 width,
43 x,
44 y,
45 -}: Props) {
45 +}: Props): React.Node {
46 return (
47 <g className={styles.Group} transform={`translate(${x},${y})`}>
48 <rect
packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+1 -1
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
15 import {StoreContext} from '../context';
16 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
17
18 -export default function ClearProfilingDataButton() {
18 +export default function ClearProfilingDataButton(): React.Node {
19 const store = useContext(StoreContext);
20 const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
21 const {file, setFile} = useContext(TimelineContext);
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+1 -1
@@ -38,7 +38,7 @@ export type ItemData = {
38 width: number,
39 };
40
41 -export default function CommitFlamegraphAutoSizer(_: {}) {
41 +export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
42 const {profilerStore} = useContext(StoreContext);
43 const {rootID, selectedCommitIndex, selectFiber} = useContext(
44 ProfilerContext,
packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+1 -1
@@ -38,7 +38,7 @@ export type ItemData = {
38 width: number,
39 };
40
41 -export default function CommitRankedAutoSizer(_: {}) {
41 +export default function CommitRankedAutoSizer(_: {}): React.Node {
42 const {profilerStore} = useContext(StoreContext);
43 const {rootID, selectedCommitIndex, selectFiber} = useContext(
44 ProfilerContext,
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+1 -1
@@ -27,7 +27,7 @@ export type Props = {
27 fiberData: ChartNode,
28 };
29
30 -export default function HoveredFiberInfo({fiberData}: Props) {
30 +export default function HoveredFiberInfo({fiberData}: Props): React.Node {
31 const {profilerStore} = useContext(StoreContext);
32 const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
33
packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
+1 -1
@@ -11,7 +11,7 @@ import * as React from 'react';
11
12 import styles from './NoCommitData.css';
13
14 -export default function NoCommitData(_: {}) {
14 +export default function NoCommitData(_: {}): React.Node {
15 return (
16 <div className={styles.NoCommitData}>
17 <div className={styles.Header}>
packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
+1 -1
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
12
13 import styles from './Profiler.css';
14
15 -export default function NoProfilingData() {
15 +export default function NoProfilingData(): React.Node {
16 return (
17 <div className={styles.Column}>
18 <div className={styles.Header}>No profiling data has been recorded.</div>
packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
+1 -1
@@ -11,7 +11,7 @@ import * as React from 'react';
11
12 import styles from './Profiler.css';
13
14 -export default function ProcessingData() {
14 +export default function ProcessingData(): React.Node {
15 return (
16 <div className={styles.Column}>
17 <div className={styles.Header}>Processing data...</div>
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+1 -1
@@ -82,7 +82,7 @@ type Props = {
82 children: React$Node,
83 };
84
85 -function ProfilerContextController({children}: Props) {
85 +function ProfilerContextController({children}: Props): React.Node {
86 const store = useContext(StoreContext);
87 const {selectedElementID} = useContext(TreeStateContext);
88 const dispatch = useContext(TreeDispatcherContext);
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+1 -1
@@ -27,7 +27,7 @@ import styles from './ProfilingImportExportButtons.css';
27
28 import type {ProfilingDataExport} from './types';
29
30 -export default function ProfilingImportExportButtons() {
30 +export default function ProfilingImportExportButtons(): React.Node {
31 const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
32 const {setFile} = useContext(TimelineContext);
33 const store = useContext(StoreContext);
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
+1 -1
@@ -11,7 +11,7 @@ import * as React from 'react';
11
12 import styles from './Profiler.css';
13
14 -export default function ProfilingNotSupported() {
14 +export default function ProfilingNotSupported(): React.Node {
15 return (
16 <div className={styles.Column}>
17 <div className={styles.Header}>Profiling not supported.</div>
packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+1 -1
@@ -19,7 +19,7 @@ export type Props = {
19 disabled?: boolean,
20 };
21
22 -export default function RecordToggle({disabled}: Props) {
22 +export default function RecordToggle({disabled}: Props): React.Node {
23 const {isProfiling, startProfiling, stopProfiling} = useContext(
24 ProfilerContext,
25 );
packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
+1 -1
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
12
13 import styles from './Profiler.css';
14
15 -export default function RecordingInProgress() {
15 +export default function RecordingInProgress(): React.Node {
16 return (
17 <div className={styles.Column}>
18 <div className={styles.Header}>Profiling is in progress...</div>
packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+1 -1
@@ -23,7 +23,7 @@ export default function ReloadAndProfileButton({
23 disabled,
24 }: {
25 disabled: boolean,
26 -}) {
26 +}): React.Node {
27 const bridge = useContext(BridgeContext);
28 const store = useContext(StoreContext);
29
packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+1 -1
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
13
14 import styles from './RootSelector.css';
15
16 -export default function RootSelector(_: {}) {
16 +export default function RootSelector(_: {}): React.Node {
17 const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
18
19 const options = [];
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+1 -1
@@ -19,7 +19,7 @@ import styles from './SidebarCommitInfo.css';
19
20 export type Props = {};
21
22 -export default function SidebarCommitInfo(_: Props) {
22 +export default function SidebarCommitInfo(_: Props): React.Node {
23 const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
24
25 const {profilerStore} = useContext(StoreContext);
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+1 -1
@@ -90,7 +90,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
90 );
91 }
92
93 -export default function SidebarEventInfo(_: Props) {
93 +export default function SidebarEventInfo(_: Props): React.Node {
94 const {selectedEvent} = useContext(TimelineContext);
95 // (TODO) Refactor in next PR so this supports multiple types of events
96 if (selectedEvent && selectedEvent.schedulingEvent) {
packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+1 -1
@@ -20,7 +20,7 @@ import styles from './SidebarSelectedFiberInfo.css';
20
21 export type Props = {};
22
23 -export default function SidebarSelectedFiberInfo(_: Props) {
23 +export default function SidebarSelectedFiberInfo(_: Props): React.Node {
24 const {profilerStore} = useContext(StoreContext);
25 const {
26 rootID,
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+1 -1
@@ -50,7 +50,7 @@ export default function SnapshotCommitList({
50 selectedFilteredCommitIndex,
51 selectCommitIndex,
52 totalDurations,
53 -}: Props) {
53 +}: Props): React.Node {
54 return (
55 <AutoSizer>
56 {({height, width}) => (
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+1 -1
@@ -20,7 +20,7 @@ import styles from './SnapshotSelector.css';
20
21 export type Props = {};
22
23 -export default function SnapshotSelector(_: Props) {
23 +export default function SnapshotSelector(_: Props): React.Node {
24 const {
25 isCommitFilterEnabled,
26 minCommitDuration,
packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
+6 -1
@@ -7,7 +7,12 @@ import styles from './Tooltip.css';
7
8 const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
9
10 -export default function Tooltip({children, className, label, style}: any) {
10 +export default function Tooltip({
11 + children,
12 + className,
13 + label,
14 + style,
15 +}: any): React.Node {
16 const containerRef = useRef(null);
17 const tooltipRef = useRef(null);
18
packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+1 -1
@@ -21,7 +21,7 @@ export type Props = {
21 updaters: Array<SerializedElement>,
22 };
23
24 -export default function Updaters({commitTree, updaters}: Props) {
24 +export default function Updaters({commitTree, updaters}: Props): React.Node {
25 const {selectFiber} = useContext(ProfilerContext);
26
27 const children =
packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+1 -1
@@ -37,7 +37,7 @@ type Props = {
37 fiberID: number,
38 };
39
40 -export default function WhatChanged({fiberID}: Props) {
40 +export default function WhatChanged({fiberID}: Props): React.Node {
41 const {profilerStore} = useContext(StoreContext);
42 const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
43
packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+8 -5
@@ -353,7 +353,7 @@ export function prepareProfilingDataExport(
353 };
354 }
355
356 -export const getGradientColor = (value: number) => {
356 +export const getGradientColor = (value: number): string => {
357 const maxIndex = commitGradient.length - 1;
358 let index;
359 if (Number.isNaN(value)) {
@@ -366,11 +366,11 @@ export const getGradientColor = (value: number) => {
366 return commitGradient[Math.round(index)];
367 };
368
369 -export const formatDuration = (duration: number) =>
369 +export const formatDuration = (duration: number): number | string =>
370 Math.round(duration * 10) / 10 || '<0.1';
371 -export const formatPercentage = (percentage: number) =>
371 +export const formatPercentage = (percentage: number): number =>
372 Math.round(percentage * 100);
373 -export const formatTime = (timestamp: number) =>
373 +export const formatTime = (timestamp: number): number =>
374 Math.round(Math.round(timestamp) / 100) / 10;
375
376 export const scale = (
@@ -378,7 +378,10 @@ export const scale = (
378 maxValue: number,
379 minRange: number,
380 maxRange: number,
381 -) => (value: number, fallbackValue: number) =>
381 +): ((value: number, fallbackValue: number) => number) => (
382 + value: number,
383 + fallbackValue: number,
384 +) =>
385 maxValue - minValue === 0
386 ? fallbackValue
387 : ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
packages/react-devtools-shared/src/devtools/views/ReactLogo.js
+1 -1
@@ -15,7 +15,7 @@ type Props = {
15 className?: string,
16 };
17
18 -export default function ReactLogo({className}: Props) {
18 +export default function ReactLogo({className}: Props): React.Node {
19 return (
20 <svg
21 xmlns="http://www.w3.org/2000/svg"
packages/react-devtools-shared/src/devtools/views/SearchInput.js
+1 -1
@@ -35,7 +35,7 @@ export default function SearchInput({
35 searchResultsCount,
36 searchText,
37 testName,
38 -}: Props) {
38 +}: Props): React.Node {
39 const inputRef = useRef<HTMLInputElement | null>(null);
40
41 const resetSearch = () => search('');
packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+1 -1
@@ -51,7 +51,7 @@ import type {
51 RegExpComponentFilter,
52 } from 'react-devtools-shared/src/types';
53
54 -export default function ComponentsSettings(_: {}) {
54 +export default function ComponentsSettings(_: {}): React.Node {
55 const store = useContext(StoreContext);
56 const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
57
packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+1 -1
@@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext';
13
14 import styles from './SettingsShared.css';
15
16 -export default function DebuggingSettings(_: {}) {
16 +export default function DebuggingSettings(_: {}): React.Node {
17 const {
18 appendComponentStack,
19 breakOnConsoleErrors,
packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+1 -1
@@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null {
28 return `${CHANGE_LOG_URL}#${versionAnchor}`;
29 }
30
31 -export default function GeneralSettings(_: {}) {
31 +export default function GeneralSettings(_: {}): React.Node {
32 const {
33 displayDensity,
34 setDisplayDensity,
packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+1 -1
@@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler
15
16 import styles from './SettingsShared.css';
17
18 -export default function ProfilerSettings(_: {}) {
18 +export default function ProfilerSettings(_: {}): React.Node {
19 const {
20 isCommitFilterEnabled,
21 minCommitDuration,
packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+1 -1
@@ -28,7 +28,7 @@ import styles from './SettingsModal.css';
28
29 type TabID = 'general' | 'components' | 'profiler';
30
31 -export default function SettingsModal(_: {}) {
31 +export default function SettingsModal(_: {}): React.Node {
32 const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
33 const store = useContext(StoreContext);
34 const {profilerStore} = store;
packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
+1 -1
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
15 import {StoreContext} from '../context';
16 import {useSubscription} from '../hooks';
17
18 -export default function SettingsModalContextToggle() {
18 +export default function SettingsModalContextToggle(): React.Node {
19 const {setIsModalShowing} = useContext(SettingsModalContext);
20 const store = useContext(StoreContext);
21 const {profilerStore} = store;
packages/react-devtools-shared/src/devtools/views/TabBar.js
+1 -1
@@ -39,7 +39,7 @@ export default function TabBar({
39 selectTab,
40 tabs,
41 type,
42 -}: Props) {
42 +}: Props): React.Node {
43 if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
44 const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
45 selectTab(firstTab.id);
packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+5 -1
@@ -10,7 +10,11 @@
10 import * as React from 'react';
11 import useThemeStyles from './useThemeStyles';
12
13 -export default function ThemeProvider({children}: {children: React$Node}) {
13 +export default function ThemeProvider({
14 + children,
15 +}: {
16 + children: React.Node,
17 +}): React.Node {
18 const themeStyle = useThemeStyles();
19
20 const style = React.useMemo(() => {
packages/react-devtools-shared/src/devtools/views/Toggle.js
+1 -1
@@ -32,7 +32,7 @@ export default function Toggle({
32 onChange,
33 testName,
34 title,
35 -}: Props) {
35 +}: Props): React.Node {
36 let defaultClassName;
37 if (isDisabled) {
38 defaultClassName = styles.ToggleDisabled;
packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+1 -1
@@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog';
14
15 import styles from './WarnIfLegacyBackendDetected.css';
16
17 -export default function WarnIfLegacyBackendDetected(_: {}) {
17 +export default function WarnIfLegacyBackendDetected(_: {}): null {
18 const bridge = useContext(BridgeContext);
19 const {dispatch} = useContext(ModalDialogContext);
20
packages/react-devtools-shared/src/devtools/views/hooks.js
+4 -1
@@ -329,7 +329,10 @@ export function useSubscription<Value>({
329 return state.value;
330 }
331
332 -export function useHighlightNativeElement() {
332 +export function useHighlightNativeElement(): {
333 + clearHighlightNativeElement: () => void,
334 + highlightNativeElement: (id: number) => void,
335 +} {
336 const bridge = useContext(BridgeContext);
337 const store = useContext(StoreContext);
338
packages/react-devtools-shared/src/hydration.js
+9 -9
@@ -19,15 +19,15 @@ import {
19 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
20
21 export const meta = {
22 - inspectable: Symbol('inspectable'),
23 - inspected: Symbol('inspected'),
24 - name: Symbol('name'),
25 - preview_long: Symbol('preview_long'),
26 - preview_short: Symbol('preview_short'),
27 - readonly: Symbol('readonly'),
28 - size: Symbol('size'),
29 - type: Symbol('type'),
30 - unserializable: Symbol('unserializable'),
22 + inspectable: (Symbol('inspectable'): symbol),
23 + inspected: (Symbol('inspected'): symbol),
24 + name: (Symbol('name'): symbol),
25 + preview_long: (Symbol('preview_long'): symbol),
26 + preview_short: (Symbol('preview_short'): symbol),
27 + readonly: (Symbol('readonly'): symbol),
28 + size: (Symbol('size'): symbol),
29 + type: (Symbol('type'): symbol),
30 + unserializable: (Symbol('unserializable'): symbol),
31 };
32
33 export type Dehydrated = {
packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
+1 -1
@@ -36,7 +36,7 @@ function Nested() {
36
37 const DeeplyNested = wrapWithNested(Nested, 100);
38
39 -export default function DeeplyNestedComponents() {
39 +export default function DeeplyNestedComponents(): React.Node {
40 return (
41 <Fragment>
42 <h1>Deeply nested component</h1>
packages/react-devtools-shell/src/app/EditableProps/index.js
+1 -1
@@ -122,7 +122,7 @@ const ForwardRef = forwardRef<{name: string}, HTMLUListElement>(
122 },
123 );
124
125 -export default function EditableProps() {
125 +export default function EditableProps(): React.Node {
126 return (
127 <Fragment>
128 <h1>Editable props</h1>
packages/react-devtools-shell/src/app/ElementTypes/index.js
+1 -1
@@ -54,7 +54,7 @@ const LazyComponent = lazy(() =>
54 }),
55 );
56
57 -export default function ElementTypes() {
57 +export default function ElementTypes(): React.Node {
58 return (
59 <Profiler id="test" onRender={() => {}}>
60 <Fragment>
packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
+1 -1
@@ -53,7 +53,7 @@ function Component({label}) {
53 return <div>{label}</div>;
54 }
55
56 -export default function ErrorBoundaries() {
56 +export default function ErrorBoundaries(): React.Node {
57 return (
58 <Fragment>
59 <h1>Nested error boundaries demo</h1>
packages/react-devtools-shell/src/app/Hydration/index.js
+1 -1
@@ -106,7 +106,7 @@ function useInnerBaz() {
106 return count;
107 }
108
109 -export default function Hydration() {
109 +export default function Hydration(): React.Node {
110 return (
111 <Fragment>
112 <h1>Hydration</h1>
packages/react-devtools-shell/src/app/Iframe/index.js
+1 -1
@@ -4,7 +4,7 @@ import * as React from 'react';
4 import {Fragment} from 'react';
5 import {createPortal} from 'react-dom';
6
7 -export default function Iframe() {
7 +export default function Iframe(): React.Node {
8 return (
9 <Fragment>
10 <h2>Iframe</h2>
packages/react-devtools-shell/src/app/InlineWarnings/index.js
+1 -1
@@ -155,7 +155,7 @@ function ComponentWithSymbolWarning() {
155 return null;
156 }
157
158 -export default function ErrorsAndWarnings() {
158 +export default function ErrorsAndWarnings(): React.Node {
159 const [count, setCount] = useState(0);
160 const handleClick = () => setCount(count + 1);
161 return (
packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
+1 -1
@@ -18,7 +18,7 @@ const objectOne = {};
18 const objectTwo = {objectOne};
19 objectOne.objectTwo = objectTwo;
20
21 -export default function CircularReferences() {
21 +export default function CircularReferences(): React.Node {
22 return <ChildComponent arrayOne={arrayOne} objectOne={objectOne} />;
23 }
24
packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+1 -1
@@ -237,7 +237,7 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
237 }
238 }
239
240 -export default function Contexts() {
240 +export default function Contexts(): React.Node {
241 return (
242 <div>
243 <h1>Contexts</h1>
packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+1 -1
@@ -114,7 +114,7 @@ function wrapWithHoc(Component) {
114 }
115 const HocWithHooks = wrapWithHoc(FunctionWithHooks);
116
117 -export default function CustomHooks() {
117 +export default function CustomHooks(): React.Node {
118 return (
119 <Fragment>
120 <FunctionWithHooks />
packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
+1 -1
@@ -16,7 +16,7 @@ class Custom {
16 }
17 }
18
19 -export default function CustomObject() {
19 +export default function CustomObject(): React.Node {
20 return <ChildComponent customObject={new Custom()} />;
21 }
22
packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
+1 -1
@@ -19,7 +19,7 @@ const objectWithNullProto = Object.create(null);
19 objectWithNullProto.foo = 'abc';
20 objectWithNullProto.bar = 123;
21
22 -export default function EdgeCaseObjects() {
22 +export default function EdgeCaseObjects(): React.Node {
23 return (
24 <ChildComponent
25 objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
+1 -1
@@ -21,7 +21,7 @@ import SymbolKeys from './SymbolKeys';
21
22 // TODO Add Immutable JS example
23
24 -export default function InspectableElements() {
24 +export default function InspectableElements(): React.Node {
25 return (
26 <Fragment>
27 <h1>Inspectable elements</h1>
packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
+1 -1
@@ -19,7 +19,7 @@ const object = {
19 null: null,
20 };
21
22 -export default function ObjectProps() {
22 +export default function ObjectProps(): React.Node {
23 return (
24 <ChildComponent
25 object={{
packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
+1 -1
@@ -69,7 +69,7 @@ const data = Object.create(base, {
69 },
70 });
71
72 -export default function SymbolKeys() {
72 +export default function SymbolKeys(): React.Node {
73 return <ChildComponent data={data} />;
74 }
75
packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
+1 -1
@@ -34,7 +34,7 @@ const immutable = Immutable.fromJS({
34 // $FlowFixMe
35 const bigInt = BigInt(123); // eslint-disable-line no-undef
36
37 -export default function UnserializableProps() {
37 +export default function UnserializableProps(): React.Node {
38 return (
39 <ChildComponent
40 arrayBuffer={arrayBuffer}
packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
+1 -1
@@ -10,7 +10,7 @@
10 import * as React from 'react';
11 import {StrictMode} from 'react';
12
13 -export default function PartiallyStrictApp() {
13 +export default function PartiallyStrictApp(): React.Node {
14 return (
15 <>
16 <Child />
packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
+1 -1
@@ -12,7 +12,7 @@ import {Fragment, useState} from 'react';
12 // $FlowFixMe
13 import {Button, Text, View} from 'react-native-web';
14
15 -export default function ReactNativeWeb() {
15 +export default function ReactNativeWeb(): React.Node {
16 const [backgroundColor, setBackgroundColor] = useState('purple');
17 const toggleColor = () =>
18 setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
packages/react-devtools-shell/src/app/SuspenseTree/index.js
+1 -1
@@ -10,7 +10,7 @@
10 import * as React from 'react';
11 import {Fragment, Suspense, SuspenseList, useState} from 'react';
12
13 -function SuspenseTree() {
13 +function SuspenseTree(): React.Node {
14 return (
15 <Fragment>
16 <h1>Suspense</h1>
packages/react-devtools-shell/src/app/ToDoList/List.js
+1 -1
@@ -20,7 +20,7 @@ export type Item = {
20
21 type Props = {};
22
23 -export default function List(props: Props) {
23 +export default function List(props: Props): React.Node {
24 const [newItemText, setNewItemText] = useState<string>('');
25 const [items, setItems] = useState<Array<Item>>([
26 {id: 1, isComplete: true, text: 'First'},
packages/react-devtools-shell/src/e2e-apps/ListApp.js
+1 -1
@@ -10,7 +10,7 @@
10 import * as React from 'react';
11 import {useRef, useState} from 'react';
12
13 -export default function App() {
13 +export default function App(): React.Node {
14 return <List />;
15 }
16
packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
+1 -1
@@ -9,7 +9,7 @@
9
10 import * as React from 'react';
11
12 -export default function App() {
12 +export default function App(): React.Node {
13 return <List />;
14 }
15
packages/react-devtools-timeline/src/CanvasPage.js
+1 -1
@@ -74,7 +74,7 @@ type Props = {
74 viewState: ViewState,
75 };
76
77 -function CanvasPage({profilerData, viewState}: Props) {
77 +function CanvasPage({profilerData, viewState}: Props): React.Node {
78 return (
79 <div
80 className={styles.CanvasPage}
packages/react-devtools-timeline/src/EventTooltip.js
+1 -1
@@ -69,7 +69,7 @@ export default function EventTooltip({
69 hoveredEvent,
70 origin,
71 width,
72 -}: Props) {
72 +}: Props): React.Node {
73 const ref = useSmartTooltip({
74 canvasRef,
75 mouseX: origin.x,
packages/react-devtools-timeline/src/Timeline.js
+1 -1
@@ -32,7 +32,7 @@ import {TimelineSearchContextController} from './TimelineSearchContext';
32
33 import styles from './Timeline.css';
34
35 -export function Timeline(_: {}) {
35 +export function Timeline(_: {}): React.Node {
36 const {
37 file,
38 inMemoryTimelineData,
packages/react-devtools-timeline/src/TimelineNotSupported.js
+1 -1
@@ -12,7 +12,7 @@ import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
12
13 import styles from './TimelineNotSupported.css';
14
15 -export default function TimelineNotSupported() {
15 +export default function TimelineNotSupported(): React.Node {
16 return (
17 <div className={styles.Column}>
18 <div className={styles.Header}>Timeline profiling not supported.</div>
packages/react-devtools-timeline/src/TimelineSearchInput.js
+1 -1
@@ -16,7 +16,7 @@ import {TimelineSearchContext} from './TimelineSearchContext';
16
17 type Props = {};
18
19 -export default function TimelineSearchInput(props: Props) {
19 +export default function TimelineSearchInput(props: Props): React.Node {
20 const {searchInputContainerRef} = useContext(TimelineContext);
21 const {dispatch, searchIndex, searchResults, searchText} = useContext(
22 TimelineSearchContext,
packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+1 -1
@@ -69,7 +69,7 @@ export class ComponentMeasuresView extends View {
69 };
70 }
71
72 - desiredSize() {
72 + desiredSize(): IntrinsicSize {
73 return this._intrinsicSize;
74 }
75
packages/react-devtools-timeline/src/content-views/FlamechartView.js
+7 -2
@@ -102,7 +102,7 @@ class FlamechartStackLayerView extends View {
102 };
103 }
104
105 - desiredSize() {
105 + desiredSize(): Size {
106 return this._intrinsicSize;
107 }
108
@@ -342,7 +342,12 @@ export class FlamechartView extends View {
342 this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover));
343 }
344
345 - desiredSize() {
345 + desiredSize(): {
346 + height: number,
347 + hideScrollBarIfLessThanHeight?: number,
348 + maxInitialHeight?: number,
349 + width: number,
350 + } {
351 // Ignore the wishes of the background color view
352 const intrinsicSize = this._verticalStackView.desiredSize();
353 return {
packages/react-devtools-timeline/src/content-views/NativeEventsView.js
+1 -1
@@ -77,7 +77,7 @@ export class NativeEventsView extends View {
77 };
78 }
79
80 - desiredSize() {
80 + desiredSize(): IntrinsicSize {
81 return this._intrinsicSize;
82 }
83
packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
+1 -1
@@ -81,7 +81,7 @@ export class NetworkMeasuresView extends View {
81 };
82 }
83
84 - desiredSize() {
84 + desiredSize(): IntrinsicSize {
85 return this._intrinsicSize;
86 }
87
packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
+1 -1
@@ -71,7 +71,7 @@ export class ReactMeasuresView extends View {
71 };
72 }
73
74 - desiredSize() {
74 + desiredSize(): IntrinsicSize {
75 return this._intrinsicSize;
76 }
77
packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
+1 -1
@@ -60,7 +60,7 @@ export class SchedulingEventsView extends View {
60 };
61 }
62
63 - desiredSize() {
63 + desiredSize(): Size {
64 return this._intrinsicSize;
65 }
66
packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+1 -1
@@ -45,7 +45,7 @@ export class SnapshotsView extends View {
45 this._profilerData = profilerData;
46 }
47
48 - desiredSize() {
48 + desiredSize(): Size {
49 return this._intrinsicSize;
50 }
51
packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
+1 -1
@@ -85,7 +85,7 @@ export class SuspenseEventsView extends View {
85 };
86 }
87
88 - desiredSize() {
88 + desiredSize(): IntrinsicSize {
89 return this._intrinsicSize;
90 }
91
packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
+1 -1
@@ -55,7 +55,7 @@ export class ThrownErrorsView extends View {
55 };
56 }
57
58 - desiredSize() {
58 + desiredSize(): Size {
59 return this._intrinsicSize;
60 }
61
packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
+1 -1
@@ -49,7 +49,7 @@ export class TimeAxisMarkersView extends View {
49 };
50 }
51
52 - desiredSize() {
52 + desiredSize(): Size {
53 return this._intrinsicSize;
54 }
55
packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
+1 -1
@@ -61,7 +61,7 @@ export class UserTimingMarksView extends View {
61 };
62 }
63
64 - desiredSize() {
64 + desiredSize(): Size {
65 return this._intrinsicSize;
66 }
67
packages/react-devtools-timeline/src/content-views/constants.js
+57 -1
@@ -43,7 +43,63 @@ export const INTERVAL_TIMES = [
43 export const MIN_INTERVAL_SIZE_PX = 70;
44
45 // TODO Replace this with "export let" vars
46 -export let COLORS = {
46 +export let COLORS: {
47 + BACKGROUND: string,
48 + INTERNAL_MODULE_FRAME: string,
49 + INTERNAL_MODULE_FRAME_HOVER: string,
50 + INTERNAL_MODULE_FRAME_TEXT: string,
51 + NATIVE_EVENT: string,
52 + NATIVE_EVENT_HOVER: string,
53 + NETWORK_PRIMARY: string,
54 + NETWORK_PRIMARY_HOVER: string,
55 + NETWORK_SECONDARY: string,
56 + NETWORK_SECONDARY_HOVER: string,
57 + PRIORITY_BACKGROUND: string,
58 + PRIORITY_BORDER: string,
59 + PRIORITY_LABEL: string,
60 + REACT_COMMIT: string,
61 + REACT_COMMIT_HOVER: string,
62 + REACT_COMMIT_TEXT: string,
63 + REACT_IDLE: string,
64 + REACT_IDLE_HOVER: string,
65 + REACT_LAYOUT_EFFECTS: string,
66 + REACT_LAYOUT_EFFECTS_HOVER: string,
67 + REACT_LAYOUT_EFFECTS_TEXT: string,
68 + REACT_PASSIVE_EFFECTS: string,
69 + REACT_PASSIVE_EFFECTS_HOVER: string,
70 + REACT_PASSIVE_EFFECTS_TEXT: string,
71 + REACT_RENDER: string,
72 + REACT_RENDER_HOVER: string,
73 + REACT_RENDER_TEXT: string,
74 + REACT_RESIZE_BAR: string,
75 + REACT_RESIZE_BAR_ACTIVE: string,
76 + REACT_RESIZE_BAR_BORDER: string,
77 + REACT_RESIZE_BAR_DOT: string,
78 + REACT_SCHEDULE: string,
79 + REACT_SCHEDULE_HOVER: string,
80 + REACT_SUSPENSE_REJECTED_EVENT: string,
81 + REACT_SUSPENSE_REJECTED_EVENT_HOVER: string,
82 + REACT_SUSPENSE_RESOLVED_EVENT: string,
83 + REACT_SUSPENSE_RESOLVED_EVENT_HOVER: string,
84 + REACT_SUSPENSE_UNRESOLVED_EVENT: string,
85 + REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: string,
86 + REACT_THROWN_ERROR: string,
87 + REACT_THROWN_ERROR_HOVER: string,
88 + REACT_WORK_BORDER: string,
89 + SCROLL_CARET: string,
90 + SCRUBBER_BACKGROUND: string,
91 + SCRUBBER_BORDER: string,
92 + SEARCH_RESULT_FILL: string,
93 + TEXT_COLOR: string,
94 + TEXT_DIM_COLOR: string,
95 + TIME_MARKER_LABEL: string,
96 + USER_TIMING: string,
97 + USER_TIMING_HOVER: string,
98 + WARNING_BACKGROUND: string,
99 + WARNING_BACKGROUND_HOVER: string,
100 + WARNING_TEXT: string,
101 + WARNING_TEXT_INVERED: string,
102 +} = {
103 BACKGROUND: '',
104 INTERNAL_MODULE_FRAME: '',
105 INTERNAL_MODULE_FRAME_HOVER: '',
packages/react-devtools-timeline/src/utils/formatting.js
+1 -1
@@ -11,7 +11,7 @@ import type {SchedulingEvent} from '../types';
11
12 import prettyMilliseconds from 'pretty-ms';
13
14 -export function formatTimestamp(ms: number) {
14 +export function formatTimestamp(ms: number): string {
15 return (
16 ms.toLocaleString(undefined, {
17 minimumFractionDigits: 1,
packages/react-devtools-timeline/src/utils/getBatchRange.js
+5 -1
@@ -45,4 +45,8 @@ function unmemoizedGetBatchRange(
45 return [startTime, stopTime];
46 }
47
48 -export const getBatchRange = memoize(unmemoizedGetBatchRange);
48 +export const getBatchRange: (
49 + batchUID: BatchUID,
50 + data: TimelineData,
51 + minStartTime?: number,
52 +) => [Milliseconds, Milliseconds] = memoize(unmemoizedGetBatchRange);
packages/react-devtools-timeline/src/utils/useSmartTooltip.js
+1 -1
@@ -20,7 +20,7 @@ export default function useSmartTooltip({
20 canvasRef: {current: HTMLCanvasElement | null},
21 mouseX: number,
22 mouseY: number,
23 -}) {
23 +}): {current: HTMLElement | null} {
24 const ref = useRef<HTMLElement | null>(null);
25
26 // HACK: Browser extension reports window.innerHeight of 0,
packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
+3 -2
@@ -7,6 +7,7 @@
7 * @flow
8 */
9
10 +import type {Size, IntrinsicSize} from './geometry';
11 import type {
12 Interaction,
13 MouseDownInteraction,
@@ -39,7 +40,7 @@ import {
40 export class HorizontalPanAndZoomView extends View {
41 _contentView: View;
42 _intrinsicContentWidth: number;
42 - _isPanning = false;
43 + _isPanning: boolean = false;
44 _viewState: ViewState;
45
46 constructor(
@@ -103,7 +104,7 @@ export class HorizontalPanAndZoomView extends View {
104 this.setScrollState(newState);
105 }
106
106 - desiredSize() {
107 + desiredSize(): Size | IntrinsicSize {
108 return this._contentView.desiredSize();
109 }
110
packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
+10 -7
@@ -78,7 +78,7 @@ export class ResizableView extends View {
78 this._restoreMutableViewState();
79 }
80
81 - desiredSize() {
81 + desiredSize(): {+height: number, +width: number} {
82 const subviewDesiredSize = this._subview.desiredSize();
83
84 if (this._shouldRenderResizeBar()) {
@@ -132,7 +132,7 @@ export class ResizableView extends View {
132 this.setNeedsDisplay();
133 }
134
135 - _shouldRenderResizeBar() {
135 + _shouldRenderResizeBar(): boolean {
136 const subviewDesiredSize = this._subview.desiredSize();
137 return subviewDesiredSize.hideScrollBarIfLessThanHeight != null
138 ? subviewDesiredSize.height >
@@ -195,7 +195,7 @@ export class ResizableView extends View {
195 });
196 }
197
198 - _handleClick(interaction: ClickInteraction) {
198 + _handleClick(interaction: ClickInteraction): void | boolean {
199 if (!this._shouldRenderResizeBar()) {
200 return;
201 }
@@ -216,7 +216,7 @@ export class ResizableView extends View {
216 }
217 }
218
219 - _handleDoubleClick(interaction: DoubleClickInteraction) {
219 + _handleDoubleClick(interaction: DoubleClickInteraction): void | boolean {
220 if (!this._shouldRenderResizeBar()) {
221 return;
222 }
@@ -236,7 +236,7 @@ export class ResizableView extends View {
236 }
237 }
238
239 - _handleMouseDown(interaction: MouseDownInteraction) {
239 + _handleMouseDown(interaction: MouseDownInteraction): void | boolean {
240 const cursorLocation = interaction.payload.location;
241 const resizeBarFrame = this._resizeBar.frame;
242 if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
@@ -250,7 +250,7 @@ export class ResizableView extends View {
250 }
251 }
252
253 - _handleMouseMove(interaction: MouseMoveInteraction) {
253 + _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
254 const {_resizingState} = this;
255 if (_resizingState) {
256 this._resizingState = {
@@ -279,7 +279,10 @@ export class ResizableView extends View {
279 }
280 }
281
282 - handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
282 + handleInteraction(
283 + interaction: Interaction,
284 + viewRefs: ViewRefs,
285 + ): void | boolean {
286 switch (interaction.type) {
287 case 'click':
288 return this._handleClick(interaction);
packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
+1 -1
@@ -52,7 +52,7 @@ export class VerticalScrollBarView extends View {
52 this._verticalScrollOverflowView = verticalScrollOverflowView;
53 }
54
55 - desiredSize() {
55 + desiredSize(): {+height: number, +width: number} {
56 return {
57 width: SCROLL_BAR_SIZE,
58 height: 0, // No desired height
packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
+2 -2
@@ -72,10 +72,10 @@ export class VerticalScrollOverflowView extends View {
72 this.setNeedsDisplay();
73 }
74
75 - _onVerticalScrollViewChange = (
75 + _onVerticalScrollViewChange: (
76 scrollState: ScrollState,
77 containerLength: number,
78 - ) => {
78 + ) => void = (scrollState: ScrollState, containerLength: number) => {
79 const maxOffset = scrollState.length - containerLength;
80 if (maxOffset === 0) {
81 return;