From 0b4f443020af386f2b48c47c074cb504ed672dc8 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 9 Jan 2023 15:46:48 -0500 Subject: [PATCH] [flow] enable enforce_local_inference_annotations (#25921) This setting is an incremental path to the next Flow version enforcing type annotations on most functions (except some inline callbacks). Used ``` node_modules/.bin/flow codemod annotate-functions-and-classes --write . ``` to add a majority of the types with some hand cleanup when for large inferred objects that should just be `Fiber` or weird constructs including `any`. Suppressed the remaining issues. Builds on #25918 --- packages/jest-react/src/internalAct.js | 2 +- packages/react-cache/src/ReactCacheOld.js | 7 +- .../react-client/src/ReactFlightClient.js | 11 +- .../src/ReactFlightClientStream.js | 1 + .../react-debug-tools/src/ReactDebugHooks.js | 18 +-- packages/react-devtools-core/src/backend.js | 4 +- .../react-devtools-core/src/standalone.js | 10 +- .../react-devtools-extensions/src/backend.js | 4 +- packages/react-devtools-inline/src/backend.js | 2 + .../react-devtools-inline/src/frontend.js | 1 + .../src/backend/agent.js | 2 +- .../src/backend/console.js | 2 + .../src/backend/legacy/renderer.js | 2 +- .../src/backend/legacy/utils.js | 2 + .../src/backend/profilingHooks.js | 2 +- .../src/backend/renderer.js | 34 +++--- .../src/backend/views/Highlighter/Overlay.js | 8 +- .../src/backend/views/Highlighter/index.js | 4 +- .../src/devtools/ContextMenu/ContextMenu.js | 11 +- .../devtools/ContextMenu/ContextMenuItem.js | 2 +- .../src/devtools/cache.js | 4 +- .../src/devtools/store.js | 6 +- .../views/Components/ComponentSearchInput.js | 3 +- .../devtools/views/Components/Components.js | 1 + .../views/Components/EditableValue.js | 3 + .../src/devtools/views/Components/Element.js | 5 + .../Components/InspectedElementContextTree.js | 1 + .../Components/InspectedElementHooksTree.js | 1 + .../InspectedElementSuspenseToggle.js | 2 +- .../src/devtools/views/Components/KeyValue.js | 11 +- .../NativeStyleEditor/AutoSizeInput.js | 1 + .../NativeStyleEditor/StyleEditor.js | 3 + .../views/Components/NewArrayValue.js | 3 +- .../devtools/views/Components/NewKeyValue.js | 8 +- .../devtools/views/Components/OwnersStack.js | 2 +- .../src/devtools/views/Components/Tree.js | 3 +- .../src/devtools/views/ModalDialog.js | 2 +- .../views/Profiler/CommitTreeBuilder.js | 2 +- .../views/Profiler/SidebarEventInfo.js | 3 +- .../Profiler/SidebarSelectedFiberInfo.js | 1 + .../views/Profiler/SnapshotSelector.js | 4 + .../src/devtools/views/Profiler/Tooltip.js | 12 +- .../src/devtools/views/SearchInput.js | 2 + .../src/devtools/views/hooks.js | 6 +- packages/react-devtools-shared/src/hook.js | 35 ++++-- .../react-window/src/createGridComponent.js | 27 +++-- .../react-window/src/createListComponent.js | 25 ++-- .../react-window/src/shouldComponentUpdate.js | 3 +- .../src/registerDevToolsEventLogger.js | 2 +- .../src/app/DeeplyNestedComponents/index.js | 6 +- .../src/app/EditableProps/index.js | 13 +- .../src/app/ElementTypes/index.js | 2 +- .../src/app/ErrorBoundaries/index.js | 7 +- .../src/app/Iframe/index.js | 1 + .../src/app/InlineWarnings/index.js | 19 +++ .../src/app/InspectableElements/Contexts.js | 66 ++++++++--- .../app/InspectableElements/CustomHooks.js | 4 +- .../app/InspectableElements/CustomObject.js | 2 +- .../src/app/SuspenseTree/index.js | 3 +- .../react-devtools-shell/src/app/devtools.js | 2 +- .../react-devtools-shell/src/app/index.js | 5 +- .../src/e2e-apps/ListApp.js | 1 + .../src/e2e-apps/ListAppLegacy.js | 5 +- .../src/e2e-regression/app-legacy.js | 2 +- .../src/e2e-regression/app.js | 2 +- .../src/perf-regression/apps/LargeSubtree.js | 2 +- .../src/EventTooltip.js | 5 +- .../react-devtools-timeline/src/Timeline.js | 1 + .../src/TimelineSearchInput.js | 3 +- .../src/content-views/ReactMeasuresView.js | 4 +- .../src/view-base/Surface.js | 6 +- .../src/client/ReactDOMComponent.js | 7 +- .../src/client/ReactDOMHostConfig.js | 4 +- .../src/client/ReactDOMInput.js | 4 +- .../src/client/ReactDOMSelect.js | 2 +- .../src/client/getNodeForCharacterOffset.js | 4 +- .../src/client/inputValueTracking.js | 5 +- .../src/events/DOMEventProperties.js | 2 +- .../src/events/DOMPluginEventSystem.js | 1 + .../src/events/ReactDOMEventListener.js | 16 +-- .../src/events/ReactDOMEventReplaying.js | 2 +- .../src/events/SyntheticEvent.js | 23 ++-- .../events/plugins/BeforeInputEventPlugin.js | 20 ++-- .../src/events/plugins/ChangeEventPlugin.js | 40 ++++--- .../src/events/plugins/SelectEventPlugin.js | 6 +- .../src/server/ReactDOMServerFormatConfig.js | 18 ++- .../src/server/escapeTextForBrowser.js | 2 +- .../src/shared/DOMProperty.js | 3 +- packages/react-dom/src/client/ReactDOMRoot.js | 4 + .../src/server/ReactDOMFizzServerNode.js | 5 +- .../src/server/ReactDOMFizzStaticNode.js | 2 +- .../src/server/ReactDOMLegacyServerImpl.js | 2 + .../server/ReactDOMLegacyServerNodeStream.js | 2 + .../src/dom/create-event-handle/Focus.js | 5 +- .../react-native-renderer/src/ReactFabric.js | 2 + .../src/ReactFabricHostConfig.js | 1 + .../src/ReactNativeBridgeEventPlugin.js | 7 ++ .../src/ReactNativeEventEmitter.js | 1 + .../src/ReactNativeFiberInspector.js | 5 + .../src/ReactNativeGetListeners.js | 1 + .../src/ReactNativeRenderer.js | 1 + .../src/legacy-events/EventBatching.js | 1 + packages/react-reconciler/src/DebugTracing.js | 4 +- .../react-reconciler/src/ReactChildFiber.js | 10 +- packages/react-reconciler/src/ReactFiber.js | 1 + .../src/ReactFiberBeginWork.js | 111 ++++++++++-------- .../src/ReactFiberCacheComponent.js | 3 +- .../src/ReactFiberClassComponent.js | 34 +++--- .../src/ReactFiberClassUpdateQueue.js | 2 +- .../src/ReactFiberCommitWork.js | 17 +-- .../react-reconciler/src/ReactFiberHooks.js | 6 +- .../src/ReactFiberHydrationContext.js | 2 +- .../src/ReactFiberReconciler.js | 2 +- .../react-reconciler/src/ReactFiberRoot.js | 10 +- .../react-reconciler/src/ReactFiberScope.js | 17 ++- .../react-reconciler/src/ReactFiberThrow.js | 1 + .../src/ReactFiberTreeReflection.js | 2 +- .../src/ReactFiberWorkLoop.js | 37 +++--- .../src/ReactStrictModeWarnings.js | 2 +- .../react-refresh/src/ReactFreshRuntime.js | 14 ++- .../ReactFlightDOMRelayClientHostConfig.js | 1 + .../src/ReactFlightDOMClient.js | 4 +- .../src/ReactFlightDOMServerNode.js | 4 +- .../src/ReactFlightWebpackNodeLoader.js | 4 +- .../src/ReactFlightWebpackNodeRegister.js | 12 +- .../src/ReactFlightWebpackPlugin.js | 4 +- .../ReactFlightNativeRelayClientHostConfig.js | 1 + .../src/ReactFizzClassComponent.js | 14 ++- packages/react-server/src/ReactFizzServer.js | 13 +- .../react-server/src/ReactFlightServer.js | 7 +- .../src/ReactTestRenderer.js | 4 + packages/react/src/ReactAct.js | 9 +- packages/react/src/ReactChildren.js | 1 + packages/react/src/ReactContext.js | 11 +- packages/react/src/ReactLazy.js | 2 + packages/scheduler/src/forks/Scheduler.js | 10 +- packages/scheduler/src/forks/SchedulerMock.js | 1 + .../scheduler/src/forks/SchedulerPostTask.js | 2 +- packages/shared/ReactErrorUtils.js | 1 + packages/shared/checkPropTypes.js | 2 +- packages/shared/invokeGuardedCallbackImpl.js | 3 + .../src/useSyncExternalStoreWithSelector.js | 2 +- scripts/flow/config/flowconfig | 2 +- scripts/flow/createFlowConfigs.js | 2 - 144 files changed, 689 insertions(+), 371 deletions(-) diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js index d078c888c75ed..1b5349554c40d 100644 --- a/packages/jest-react/src/internalAct.js +++ b/packages/jest-react/src/internalAct.js @@ -122,7 +122,7 @@ export function act(scope: () => Thenable | T): Thenable { } } -function flushActWork(resolve, reject) { +function flushActWork(resolve: () => void, reject: (error: any) => void) { if (Scheduler.unstable_hasPendingWork()) { try { Scheduler.unstable_flushUntilNextPaint(); diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js index 3c83b76cacbcd..99716076984c0 100644 --- a/packages/react-cache/src/ReactCacheOld.js +++ b/packages/react-cache/src/ReactCacheOld.js @@ -7,7 +7,7 @@ * @flow */ -import type {Thenable} from 'shared/ReactTypes'; +import type {ReactContext, Thenable} from 'shared/ReactTypes'; import * as React from 'react'; @@ -48,7 +48,7 @@ const ReactCurrentDispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED .ReactCurrentDispatcher; -function readContext(Context) { +function readContext(Context: ReactContext) { const dispatcher = ReactCurrentDispatcher.current; if (dispatcher === null) { // This wasn't being minified but we're going to retire this package anyway. @@ -62,6 +62,7 @@ function readContext(Context) { return dispatcher.readContext(Context); } +// $FlowFixMe[missing-local-annot] function identityHashFn(input) { if (__DEV__) { if ( @@ -133,7 +134,7 @@ function accessResult( } } -function deleteEntry(resource, key) { +function deleteEntry(resource: any, key: mixed) { const entriesForResource = entries.get(resource); if (entriesForResource !== undefined) { entriesForResource.delete(key); diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index c023a1feca632..3c9d26338b660 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -94,6 +94,7 @@ type SomeChunk = | InitializedChunk | ErroredChunk; +// $FlowFixMe[missing-this-annot] function Chunk(status: any, value: any, reason: any, response: Response) { this.status = status; this.value = value; @@ -104,6 +105,7 @@ function Chunk(status: any, value: any, reason: any, response: Response) { Chunk.prototype = (Object.create(Promise.prototype): any); // TODO: This doesn't return a new Promise chain unlike the real .then Chunk.prototype.then = function( + this: SomeChunk, resolve: (value: T) => mixed, reject: (reason: mixed) => mixed, ) { @@ -369,7 +371,11 @@ export function reportGlobalError(response: Response, error: Error): void { }); } -function createElement(type, key, props): React$Element { +function createElement( + type: mixed, + key: mixed, + props: mixed, +): React$Element { const element: any = { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, @@ -446,6 +452,7 @@ function createModelResolver( value: null, }; } + // $FlowFixMe[missing-local-annot] return value => { parentObject[key] = value; blocked.deps--; @@ -465,7 +472,7 @@ function createModelResolver( } function createModelReject(chunk: SomeChunk) { - return error => triggerErrorOnChunk(chunk, error); + return (error: mixed) => triggerErrorOnChunk(chunk, error); } export function parseModelString( diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js index c3f3c48b1a5bc..4709ca8085ddc 100644 --- a/packages/react-client/src/ReactFlightClientStream.js +++ b/packages/react-client/src/ReactFlightClientStream.js @@ -122,6 +122,7 @@ export function processBinaryChunk( } function createFromJSONCallback(response: Response) { + // $FlowFixMe[missing-this-annot] return function(key: string, value: JSONValue) { if (typeof value === 'string') { // We can't use .bind here because we need the "this" value. diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 5971c38a97afe..fbe4dc2f360a4 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -350,7 +350,7 @@ const Dispatcher: DispatcherType = { // create a proxy to throw a custom error // in case future versions of React adds more hooks const DispatcherProxyHandler = { - get(target, prop) { + get(target: DispatcherType, prop: string) { if (target.hasOwnProperty(prop)) { return target[prop]; } @@ -404,7 +404,7 @@ export type HooksTree = Array; let mostLikelyAncestorIndex = 0; -function findSharedIndex(hookStack, rootStack, rootIndex) { +function findSharedIndex(hookStack: any, rootStack: any, rootIndex: number) { const source = rootStack[rootIndex].source; hookSearch: for (let i = 0; i < hookStack.length; i++) { if (hookStack[i].source === source) { @@ -425,7 +425,7 @@ function findSharedIndex(hookStack, rootStack, rootIndex) { return -1; } -function findCommonAncestorIndex(rootStack, hookStack) { +function findCommonAncestorIndex(rootStack: any, hookStack: any) { let rootIndex = findSharedIndex( hookStack, rootStack, @@ -446,7 +446,7 @@ function findCommonAncestorIndex(rootStack, hookStack) { return -1; } -function isReactWrapper(functionName, primitiveName) { +function isReactWrapper(functionName: any, primitiveName: string) { if (!functionName) { return false; } @@ -460,7 +460,7 @@ function isReactWrapper(functionName, primitiveName) { ); } -function findPrimitiveIndex(hookStack, hook) { +function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) { const stackCache = getPrimitiveStackCache(); const primitiveStack = stackCache.get(hook.primitive); if (primitiveStack === undefined) { @@ -488,7 +488,7 @@ function findPrimitiveIndex(hookStack, hook) { return -1; } -function parseTrimmedStack(rootStack, hook) { +function parseTrimmedStack(rootStack: any, hook: HookLogEntry) { // Get the stack trace between the primitive hook function and // the root function call. I.e. the stack frames of custom hooks. const hookStack = ErrorStackParser.parse(hook.stackError); @@ -520,8 +520,8 @@ function parseCustomHookName(functionName: void | string): string { } function buildTree( - rootStack, - readHookLog, + rootStack: any, + readHookLog: Array, includeHooksSource: boolean, ): HooksTree { const rootChildren = []; @@ -764,7 +764,7 @@ function inspectHooksOfForwardRef( return buildTree(rootStack, readHookLog, includeHooksSource); } -function resolveDefaultProps(Component, baseProps) { +function resolveDefaultProps(Component: any, baseProps: any) { if (Component && Component.defaultProps) { // Resolve default props. Taken from ReactElement const props = assign({}, baseProps); diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js index 70048a9de6cd1..f14ece0eefd19 100644 --- a/packages/react-devtools-core/src/backend.js +++ b/packages/react-devtools-core/src/backend.js @@ -44,7 +44,7 @@ const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__; let savedComponentFilters: Array = getDefaultComponentFilters(); -function debug(methodName: string, ...args) { +function debug(methodName: string, ...args: Array) { if (__DEBUG__) { console.log( `%c[core/backend] %c${methodName}`, @@ -276,7 +276,7 @@ export function connectToDevTools(options: ?ConnectOptions) { scheduleRetry(); } - function handleMessage(event) { + function handleMessage(event: MessageEvent) { let data; try { if (typeof event.data === 'string') { diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 1b11a4710099c..22cf1677003e1 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -86,11 +86,12 @@ let bridge: FrontendBridge | null = null; let store: Store | null = null; let root = null; -const log = (...args) => console.log('[React DevTools]', ...args); -log.warn = (...args) => console.warn('[React DevTools]', ...args); -log.error = (...args) => console.error('[React DevTools]', ...args); +const log = (...args: Array) => console.log('[React DevTools]', ...args); +log.warn = (...args: Array) => console.warn('[React DevTools]', ...args); +log.error = (...args: Array) => + console.error('[React DevTools]', ...args); -function debug(methodName: string, ...args) { +function debug(methodName: string, ...args: Array) { if (__DEBUG__) { console.log( `%c[core/standalone] %c${methodName}`, @@ -166,6 +167,7 @@ function onDisconnected() { disconnectedCallback(); } +// $FlowFixMe[missing-local-annot] function onError({code, message}) { safeUnmount(); diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js index ad55ed6d50fdc..5c397c3ee2128 100644 --- a/packages/react-devtools-extensions/src/backend.js +++ b/packages/react-devtools-extensions/src/backend.js @@ -8,6 +8,7 @@ let welcomeHasInitialized = false; +// $FlowFixMe[missing-local-annot] function welcome(event) { if ( event.source !== window || @@ -42,7 +43,7 @@ function welcome(event) { window.addEventListener('message', welcome); -function setup(hook) { +function setup(hook: any) { if (hook == null) { // DevTools didn't get injected into this page (maybe b'c of the contentType). return; @@ -55,6 +56,7 @@ function setup(hook) { const bridge = new Bridge({ listen(fn) { + // $FlowFixMe[missing-local-annot] const listener = event => { if ( event.source !== window || diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js index 97d2368ac1696..659b6c8521c95 100644 --- a/packages/react-devtools-inline/src/backend.js +++ b/packages/react-devtools-inline/src/backend.js @@ -10,6 +10,7 @@ import type {BackendBridge} from 'react-devtools-shared/src/bridge'; import type {Wall} from 'react-devtools-shared/src/types'; function startActivation(contentWindow: any, bridge: BackendBridge) { + // $FlowFixMe[missing-local-annot] const onSavedPreferences = data => { // This is the only message we're listening for, // so it's safe to cleanup after we've received it. @@ -96,6 +97,7 @@ export function createBridge(contentWindow: any, wall?: Wall): BackendBridge { if (wall == null) { wall = { listen(fn) { + // $FlowFixMe[missing-local-annot] const onMessage = ({data}) => { fn(data); }; diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js index 272fbba0b9265..018ce76c5df25 100644 --- a/packages/react-devtools-inline/src/frontend.js +++ b/packages/react-devtools-inline/src/frontend.js @@ -37,6 +37,7 @@ export function createBridge(contentWindow: any, wall?: Wall): FrontendBridge { if (wall == null) { wall = { listen(fn) { + // $FlowFixMe[missing-local-annot] const onMessage = ({data}) => { fn(data); }; diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 78812286bf211..0af2033cf955f 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -42,7 +42,7 @@ import type {ComponentFilter} from '../types'; import {isSynchronousXHRSupported} from './utils'; import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; -const debug = (methodName, ...args) => { +const debug = (methodName: string, ...args: Array) => { if (__DEBUG__) { console.log( `%cAgent %c${methodName}`, diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 5753d910eba1d..61ead6d7c478d 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -197,6 +197,7 @@ export function patch({ ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__ : targetConsole[method]); + // $FlowFixMe[missing-local-annot] const overrideMethod = (...args) => { let shouldAppendWarningStack = false; if (method !== 'log') { @@ -335,6 +336,7 @@ export function patchForStrictMode() { ? targetConsole[method].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ : targetConsole[method]); + // $FlowFixMe[missing-local-annot] const overrideMethod = (...args) => { if (!consoleSettingsRef.hideConsoleLogsInStrictMode) { // Dim the text color of the double logs if we're not diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 8d02e853a4060..1b667cf122185 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -195,7 +195,7 @@ export function attach( return ((internalInstanceToIDMap.get(internalInstance): any): number); } - function areEqualArrays(a, b) { + function areEqualArrays(a: Array, b: Array) { if (a.length !== b.length) { return false; } diff --git a/packages/react-devtools-shared/src/backend/legacy/utils.js b/packages/react-devtools-shared/src/backend/legacy/utils.js index 581f8e9222d20..bc443c1dd164e 100644 --- a/packages/react-devtools-shared/src/backend/legacy/utils.js +++ b/packages/react-devtools-shared/src/backend/legacy/utils.js @@ -11,6 +11,7 @@ import type {InternalInstance} from './renderer'; export function decorate(object: Object, attr: string, fn: Function): Function { const old = object[attr]; + // $FlowFixMe[missing-this-annot] webpack config needs to be updated to allow `this` type annotations object[attr] = function(instance: InternalInstance) { return fn.call(this, old, arguments); }; @@ -34,6 +35,7 @@ export function restoreMany(source: Object, olds: Object): void { } } +// $FlowFixMe[missing-this-annot] webpack config needs to be updated to allow `this` type annotations export function forceUpdate(instance: InternalInstance): void { if (typeof instance.forceUpdate === 'function') { instance.forceUpdate(); diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index f83875b14d1a5..47d173c55c3c4 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -204,7 +204,7 @@ export function createProfilingHooks({ } } - function markAndClear(markName) { + function markAndClear(markName: string) { // This method won't be called unless these functions are defined, so we can skip the extra typeof check. ((performanceTarget: any): Performance).mark(markName); ((performanceTarget: any): Performance).clearMarks(markName); diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 68425faac8d7a..54f95a2fbea6a 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -2546,7 +2546,7 @@ export function attach( // We don't patch any methods so there is no cleanup. } - function rootSupportsProfiling(root) { + function rootSupportsProfiling(root: any) { if (root.memoizedInteractions != null) { // v16 builds include this field for the scheduler/tracing API. return true; @@ -2610,7 +2610,7 @@ export function attach( } } - function getUpdatersList(root): Array | null { + function getUpdatersList(root: any): Array | null { return root.memoizedUpdaters != null ? Array.from(root.memoizedUpdaters) .filter(fiber => getFiberIDUnsafe(fiber) !== null) @@ -2618,7 +2618,7 @@ export function attach( : null; } - function handleCommitFiberUnmount(fiber) { + function handleCommitFiberUnmount(fiber: any) { // If the untrackFiberSet already has the unmounted Fiber, this means we've already // recordedUnmount, so we don't need to do it again. If we don't do this, we might // end up double-deleting Fibers in some cases (like Legacy Suspense). @@ -2630,7 +2630,7 @@ export function attach( } } - function handlePostCommitFiberRoot(root) { + function handlePostCommitFiberRoot(root: any) { if (isProfiling && rootSupportsProfiling(root)) { if (currentCommitProfilingMetadata !== null) { const {effectDuration, passiveEffectDuration} = getEffectDurations( @@ -2644,7 +2644,7 @@ export function attach( } } - function handleCommitFiberRoot(root, priorityLevel) { + function handleCommitFiberRoot(root: any, priorityLevel: void | number) { const current = root.current; const alternate = current.alternate; @@ -2805,18 +2805,18 @@ export function attach( } } - function getDisplayNameForFiberID(id) { + function getDisplayNameForFiberID(id: number) { const fiber = idToArbitraryFiberMap.get(id); return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null; } - function getFiberForNative(hostInstance) { + function getFiberForNative(hostInstance: NativeType) { return renderer.findFiberByHostInstance(hostInstance); } function getFiberIDForNative( - hostInstance, - findNearestUnfilteredAncestor = false, + hostInstance: NativeType, + findNearestUnfilteredAncestor: boolean = false, ) { let fiber = renderer.findFiberByHostInstance(hostInstance); if (fiber != null) { @@ -2832,7 +2832,7 @@ export function attach( // This function is copied from React and should be kept in sync: // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js - function assertIsMounted(fiber) { + function assertIsMounted(fiber: Fiber) { if (getNearestMountedFiber(fiber) !== fiber) { throw new Error('Unable to find node on an unmounted component.'); } @@ -3712,7 +3712,7 @@ export function attach( }; } - function logElementToConsole(id) { + function logElementToConsole(id: number) { const result = isMostRecentlyInspectedElementCurrent(id) ? mostRecentlyInspectedElement : inspectElementRaw(id); @@ -4149,7 +4149,7 @@ export function attach( // null (do nothing) const forceErrorForFiberIDs = new Map(); - function shouldErrorFiberAccordingToMap(fiber) { + function shouldErrorFiberAccordingToMap(fiber: any) { if (typeof setErrorHandler !== 'function') { throw new Error( 'Expected overrideError() to not get called for earlier React versions.', @@ -4185,7 +4185,7 @@ export function attach( return status; } - function overrideError(id, forceError) { + function overrideError(id: number, forceError: boolean) { if ( typeof setErrorHandler !== 'function' || typeof scheduleUpdate !== 'function' @@ -4214,12 +4214,12 @@ export function attach( const forceFallbackForSuspenseIDs = new Set(); - function shouldSuspendFiberAccordingToSet(fiber) { + function shouldSuspendFiberAccordingToSet(fiber: any) { const maybeID = getFiberIDUnsafe(((fiber: any): Fiber)); return maybeID !== null && forceFallbackForSuspenseIDs.has(maybeID); } - function overrideSuspense(id, forceFallback) { + function overrideSuspense(id: number, forceFallback: boolean) { if ( typeof setSuspenseHandler !== 'function' || typeof scheduleUpdate !== 'function' @@ -4317,7 +4317,9 @@ export function attach( return true; } - function updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath) { + function updateTrackedPathStateAfterMount( + mightSiblingsBeOnTrackedPath: boolean, + ) { // updateTrackedPathStateBeforeMount() told us whether to match siblings. // Now that we're entering siblings, let's use that information. mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath; diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js index 5414f3ef0efe9..f19a335bf79d7 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -277,7 +277,11 @@ export default class Overlay { } } -function findTipPos(dims, bounds, tipSize) { +function findTipPos( + dims: Box, + bounds: Box, + tipSize: {height: number, width: number}, +) { const tipHeight = Math.max(tipSize.height, 20); const tipWidth = Math.max(tipSize.width, 60); const margin = 5; @@ -314,7 +318,7 @@ function findTipPos(dims, bounds, tipSize) { }; } -function boxWrap(dims, what, node) { +function boxWrap(dims: any, what: string, node: HTMLElement) { assign(node.style, { borderTopWidth: dims[what + 'Top'] + 'px', borderLeftWidth: dims[what + 'Left'] + 'px', diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 6793e92e51dd8..dada3978e2e3a 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -38,7 +38,7 @@ export default function setupHighlighter( registerListenersOnWindow(window); } - function registerListenersOnWindow(window) { + function registerListenersOnWindow(window: any) { // This plug-in may run in non-DOM environments (e.g. React Native). if (window && typeof window.addEventListener === 'function') { window.addEventListener('click', onClick, true); @@ -66,7 +66,7 @@ export default function setupHighlighter( iframesListeningTo = new Set(); } - function removeListenersOnWindow(window) { + function removeListenersOnWindow(window: any) { // This plug-in may run in non-DOM environments (e.g. React Native). if (window && typeof window.removeEventListener === 'function') { window.removeEventListener('click', onClick, true); diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js index a800b58fc37e5..3b4d2b6964965 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js @@ -81,7 +81,15 @@ export default function ContextMenu({children, id}: Props): React.Node { }, []); useEffect(() => { - const showMenuFn = ({data, pageX, pageY}) => { + const showMenuFn = ({ + data, + pageX, + pageY, + }: { + data: any, + pageX: number, + pageY: number, + }) => { setState({data, isVisible: true, pageX, pageY}); }; const hideMenuFn = () => setState(HIDDEN_STATE); @@ -96,6 +104,7 @@ export default function ContextMenu({children, id}: Props): React.Node { const menu = ((menuRef.current: any): HTMLElement); const container = containerRef.current; if (container !== null) { + // $FlowFixMe[missing-local-annot] const hideUnlessContains = event => { if (!menu.contains(event.target)) { hideMenu(); diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js index 3de6acef774b1..d634f5eeef286 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js @@ -28,7 +28,7 @@ export default function ContextMenuItem({ }: Props): React.Node { const {hideMenu} = useContext(RegistryContext); - const handleClick = event => { + const handleClick = (event: any) => { onClick(); hideMenu(); }; diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js index 6afbc64ada418..c8f62ba3853c3 100644 --- a/packages/react-devtools-shared/src/devtools/cache.js +++ b/packages/react-devtools-shared/src/devtools/cache.js @@ -7,7 +7,7 @@ * @flow */ -import type {Thenable} from 'shared/ReactTypes'; +import type {ReactContext, Thenable} from 'shared/ReactTypes'; import * as React from 'react'; import {createContext} from 'react'; @@ -63,7 +63,7 @@ const Rejected = 2; const ReactCurrentDispatcher = (React: any) .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher; -function readContext(Context) { +function readContext(Context: ReactContext) { const dispatcher = ReactCurrentDispatcher.current; if (dispatcher === null) { throw new Error( diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 71d53c886e67b..fd9264eed5a2b 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -46,7 +46,7 @@ import type { } from 'react-devtools-shared/src/bridge'; import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError'; -const debug = (methodName, ...args) => { +const debug = (methodName: string, ...args: Array) => { if (__DEBUG__) { console.log( `%cStore %c${methodName}`, @@ -1146,7 +1146,7 @@ export default class Store extends EventEmitter<{ debug(`Remove root ${id}`); } - const recursivelyDeleteElements = elementID => { + const recursivelyDeleteElements = (elementID: number) => { const element = this._idToElement.get(elementID); this._idToElement.delete(elementID); if (element) { @@ -1431,7 +1431,7 @@ export default class Store extends EventEmitter<{ // but the downstream errors they cause will be reported as bugs. // For example, https://github.com/facebook/react/issues/21402 // Emitting an error event allows the ErrorBoundary to show the original error. - _throwAndEmitError(error: Error) { + _throwAndEmitError(error: Error): empty { this.emit('error', error); // Throwing is still valuable for local development 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 3085f0a2120ed..f84e29bf7302f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js @@ -19,7 +19,8 @@ export default function ComponentSearchInput(props: Props): React.Node { const {searchIndex, searchResults, searchText} = useContext(TreeStateContext); const dispatch = useContext(TreeDispatcherContext); - const search = text => dispatch({type: 'SET_SEARCH_TEXT', payload: text}); + const search = (text: string) => + dispatch({type: 'SET_SEARCH_TEXT', payload: text}); const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}); const goToPreviousResult = () => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js index 9535e598174d3..ba2e99cf34393 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js @@ -100,6 +100,7 @@ function Components(_: {}) { onResizeEnd = () => dispatch({type: 'ACTION_SET_IS_RESIZING', payload: false}); + // $FlowFixMe[missing-local-annot] onResize = event => { const resizeElement = resizeElementRef.current; const wrapperElement = wrapperElementRef.current; 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 03fe9d7bf7fb2..0511a388a574a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js @@ -36,6 +36,7 @@ export default function EditableValue({ externalValue: value, }); + // $FlowFixMe[missing-local-annot] const handleChange = ({target}) => dispatch({ type: 'UPDATE', @@ -43,6 +44,7 @@ export default function EditableValue({ externalValue: value, }); + // $FlowFixMe[missing-local-annot] const handleCheckBoxToggle = ({target}) => { dispatch({ type: 'UPDATE', @@ -58,6 +60,7 @@ export default function EditableValue({ overrideValue(path, target.checked); }; + // $FlowFixMe[missing-local-annot] const handleKeyDown = event => { // Prevent keydown events from e.g. change selected element in the tree event.stopPropagation(); 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 bb850398df32e..c43164b511039 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -75,6 +75,7 @@ export default function Element({data, index, style}: Props): React.Node { } }; + // $FlowFixMe[missing-local-annot] const handleClick = ({metaKey}) => { if (id !== null) { logEvent({ @@ -99,6 +100,7 @@ export default function Element({data, index, style}: Props): React.Node { setIsHovered(false); }; + // $FlowFixMe[missing-local-annot] const handleKeyDoubleClick = event => { // Double clicks on key value are used for text selection (if the text has been truncated). // They should not enter the owners tree view. @@ -220,6 +222,7 @@ export default function Element({data, index, style}: Props): React.Node { } // Prevent double clicks on toggle from drilling into the owner list. +// $FlowFixMe[missing-local-annot] const swallowDoubleClick = event => { event.preventDefault(); event.stopPropagation(); @@ -233,6 +236,7 @@ type ExpandCollapseToggleProps = { function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) { const {children, id, isCollapsed} = element; + // $FlowFixMe[missing-local-annot] const toggleCollapsed = event => { event.preventDefault(); event.stopPropagation(); @@ -240,6 +244,7 @@ function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) { store.toggleIsCollapsed(id, !isCollapsed); }; + // $FlowFixMe[missing-local-annot] const stopPropagation = event => { // Prevent the row from selecting event.stopPropagation(); 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 f04a0fd8e067b..eb74c244d9d1a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js @@ -53,6 +53,7 @@ export default function InspectedElementContextTree({ // We add an object with a "value" key as a wrapper around Context data // so that we can use the shared component to display it. // This wrapper object can't be renamed. + // $FlowFixMe[missing-local-annot] const canRenamePathsAtDepth = depth => depth > 1; if (isEmpty) { 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 f97a27c372a4c..6744cf4bc6477 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js @@ -223,6 +223,7 @@ function HookView({ // Certain hooks are not editable at all (as identified by react-debug-tools). // Primitive hook names (e.g. the "State" name for useState) are also never editable. + // $FlowFixMe[missing-local-annot] const canRenamePathsAtDepth = depth => isStateEditable && depth > 1; const isCustomHook = subHooks.length > 0; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js index b400c6c7f3294..09808d6e3dfdd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js @@ -39,7 +39,7 @@ export default function InspectedElementSuspenseToggle({ const isSuspended = state !== null; - const toggleSuspense = (path, value) => { + const toggleSuspense = (path: any, value: boolean) => { const rendererID = store.getRendererIDForElement(id); if (rendererID !== null) { bridge.send('overrideSuspense', { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js index 26c65c15ff96f..ca2f623c1a4c1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js @@ -138,7 +138,7 @@ export default function KeyValue({ paddingLeft: `${(depth - 1) * 0.75}rem`, }; - const overrideValue = (newPath, newValue) => { + const overrideValue = (newPath: Array, newValue: any) => { if (hookID != null) { newPath = parseHookPathForEdit(newPath); } @@ -156,7 +156,7 @@ export default function KeyValue({ } }; - const deletePath = pathToDelete => { + const deletePath = (pathToDelete: Array) => { if (hookID != null) { pathToDelete = parseHookPathForEdit(pathToDelete); } @@ -173,7 +173,10 @@ export default function KeyValue({ } }; - const renamePath = (oldPath, newPath) => { + const renamePath = ( + oldPath: Array, + newPath: Array, + ) => { if (newPath[newPath.length - 1] === '') { // Deleting the key suggests an intent to delete the whole path. if (canDeletePaths) { @@ -477,7 +480,9 @@ export default function KeyValue({ return children; } +// $FlowFixMe[missing-local-annot] function DeleteToggle({deletePath, name, path}) { + // $FlowFixMe[missing-local-annot] const handleClick = event => { event.stopPropagation(); deletePath(path); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js index 057dd4625f2c3..059cb42273f44 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js @@ -27,6 +27,7 @@ export default function AutoSizeInput({ value, ...rest }: Props): React.Node { + // $FlowFixMe[missing-local-annot] const onFocusWrapper = event => { const input = event.target; if (input !== null) { 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 7b85633f214a8..5b7cdf8563412 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 @@ -171,6 +171,7 @@ function Row({ const [isAttributeValid, setIsAttributeValid] = useState(true); const [isValueValid, setIsValueValid] = useState(true); + // $FlowFixMe[missing-local-annot] const validateAndSetLocalAttribute = newAttribute => { const isValid = newAttribute === '' || @@ -183,6 +184,7 @@ function Row({ }); }; + // $FlowFixMe[missing-local-annot] const validateAndSetLocalValue = newValue => { let isValid = false; try { @@ -262,6 +264,7 @@ function Field({ placeholder, value, }: FieldProps) { + // $FlowFixMe[missing-local-annot] const onKeyDown = event => { switch (event.key) { case 'Enter': 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 0a6cdf842fa01..c8247f7449623 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js @@ -46,7 +46,8 @@ export default function NewArrayValue({ // This is a bit of an unusual usage of the EditableName component, // but otherwise it acts the way we want for a new Array entry. - const overrideName = (oldPath, newPath) => { + // $FlowFixMe[missing-local-annot] + const overrideName = (oldPath: any, newPath) => { const value = newPath[newPath.length - 1]; let parsedValue; 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 6435e6da4bf59..8fb4cc1dc8ca9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js @@ -42,11 +42,15 @@ export default function NewKeyValue({ const [newPropKey, setNewPropKey] = useState(0); const [newPropName, setNewPropName] = useState(''); - const overrideNewEntryName = (oldPath, newPath) => { + // $FlowFixMe[missing-local-annot] + const overrideNewEntryName = (oldPath: any, newPath) => { setNewPropName(newPath[newPath.length - 1]); }; - const overrideNewEntryValue = (newPath, value) => { + const overrideNewEntryValue = ( + newPath: Array, + value: any, + ) => { if (!newPropName) { return; } 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 f79a307885c91..c557e374ab2f5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js @@ -56,7 +56,7 @@ type State = { selectedIndex: number, }; -function dialogReducer(state, action) { +function dialogReducer(state: State, action: Action) { switch (action.type) { case 'UPDATE_OWNER_ID': const selectedIndex = action.owners.findIndex( 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 106bda6d36123..7374e4d70ff32 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js @@ -101,7 +101,7 @@ export default function Tree(props: Props): React.Node { // Picking an element in the inspector should put focus into the tree. // This ensures that keyboard navigation works right after picking a node. useEffect(() => { - function handleStopInspectingNative(didSelectNode) { + function handleStopInspectingNative(didSelectNode: boolean) { if (didSelectNode && focusTargetRef.current !== null) { focusTargetRef.current.focus(); logEvent({ @@ -540,6 +540,7 @@ function updateIndentationSizeVar( list.style.setProperty('--indentation-size', `${maxIndentationSize}px`); } +// $FlowFixMe[missing-local-annot] function InnerElementType({children, style, ...rest}) { const {ownerID} = useContext(TreeStateContext); diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index c7d3f7befb7a2..cf927e055de71 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -61,7 +61,7 @@ const ModalDialogContext: ReactContext = createContext { +const debug = (methodName: string, ...args: Array) => { if (__DEBUG__) { console.log( `%cCommitTreeBuilder %c${methodName}`, 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 716bf67adee76..d0d8be666ed32 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js @@ -7,6 +7,7 @@ * @flow */ +import type {Stack} from '../../utils'; import type {SchedulingEvent} from 'react-devtools-timeline/src/types'; import * as React from 'react'; @@ -35,7 +36,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) { const {componentName, timestamp} = eventInfo; const componentStack = eventInfo.componentStack || null; - const viewSource = source => { + const viewSource = (source: ?Stack) => { if (viewUrlSourceFunction != null && source != null) { viewUrlSourceFunction(...source); } 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 bfdb4a6e31684..930183ee0cc65 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js @@ -38,6 +38,7 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node { rootID: ((rootID: any): number), }); + // $FlowFixMe[missing-local-annot] const handleKeyDown = event => { switch (event.key) { case 'ArrowUp': 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 052c0c100c648..57b26ce15fa3d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -86,6 +86,7 @@ export default function SnapshotSelector(_: Props): React.Node { let label = null; if (numFilteredCommits > 0) { + // $FlowFixMe[missing-local-annot] const handleCommitInputChange = event => { const value = parseInt(event.currentTarget.value, 10); if (!isNaN(value)) { @@ -100,10 +101,12 @@ export default function SnapshotSelector(_: Props): React.Node { } }; + // $FlowFixMe[missing-local-annot] const handleClick = event => { event.currentTarget.select(); }; + // $FlowFixMe[missing-local-annot] const handleKeyDown = event => { switch (event.key) { case 'ArrowDown': @@ -159,6 +162,7 @@ export default function SnapshotSelector(_: Props): React.Node { selectCommitIndex(filteredCommitIndices[nextCommitIndex]); }; + // $FlowFixMe[missing-local-annot] const handleKeyDown = event => { switch (event.key) { case 'ArrowLeft': 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 baf61f82822be..b43f51cb04e23 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js @@ -55,7 +55,15 @@ export default function Tooltip({ const TOOLTIP_OFFSET = 5; // Method used to find the position of the tooltip based on current mouse position -function getTooltipPosition(element, mousePosition) { +function getTooltipPosition( + element: empty, + mousePosition: { + height: number, + mouseX: number, + mouseY: number, + width: number, + }, +) { const {height, mouseX, mouseY, width} = mousePosition; let top: number | string = 0; let left: number | string = 0; @@ -85,7 +93,7 @@ function getTooltipPosition(element, mousePosition) { // method used to find the current mouse position inside the container function getMousePosition( - relativeContainer, + relativeContainer: null, mouseEvent: SyntheticMouseEvent, ) { if (relativeContainer !== null) { diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js index 2569b685536ec..8a43202f87c30 100644 --- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js +++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js @@ -40,9 +40,11 @@ export default function SearchInput({ const resetSearch = () => search(''); + // $FlowFixMe[missing-local-annot] const handleChange = ({currentTarget}) => { search(currentTarget.value); }; + // $FlowFixMe[missing-local-annot] const handleKeyPress = ({key, shiftKey}) => { if (key === 'Enter') { if (shiftKey) { diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 6cc82dd424dd8..c5ee3a3e83d7a 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -43,7 +43,10 @@ type UseEditableValueState = { parsedValue: any, }; -function useEditableValueReducer(state, action) { +function useEditableValueReducer( + state: UseEditableValueState, + action: UseEditableValueAction, +) { switch (action.type) { case 'RESET': return { @@ -188,6 +191,7 @@ export function useLocalStorage( // Listen for changes to this local storage value made from other windows. // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings". useLayoutEffect(() => { + // $FlowFixMe[missing-local-annot] const onStorage = event => { const newValue = getValueFromLocalStorage(); if (key === event.key && storedValue !== newValue) { diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 547f6b35e63ab..acecd13f06a69 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -9,7 +9,12 @@ */ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; -import type {DevToolsHook} from 'react-devtools-shared/src/backend/types'; +import type { + RendererID, + ReactRenderer, + Handler, + DevToolsHook, +} from 'react-devtools-shared/src/backend/types'; import { patchConsoleUsingWindowValues, @@ -40,7 +45,7 @@ export function installHook(target: any): DevToolsHook | null { } } - function detectReactBuildType(renderer) { + function detectReactBuildType(renderer: ReactRenderer) { try { if (typeof renderer.version === 'string') { // React DOM Fiber (16+) @@ -263,7 +268,7 @@ export function installHook(target: any): DevToolsHook | null { ? targetConsole[method].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ : targetConsole[method]); - const overrideMethod = (...args) => { + const overrideMethod = (...args: $ReadOnlyArray) => { if (!hideConsoleLogsInStrictMode) { // Dim the text color of the double logs if we're not // hiding them. @@ -316,7 +321,7 @@ export function installHook(target: any): DevToolsHook | null { let uidCounter = 0; - function inject(renderer) { + function inject(renderer: ReactRenderer) { const id = ++uidCounter; renderers.set(id, renderer); @@ -374,19 +379,19 @@ export function installHook(target: any): DevToolsHook | null { let hasDetectedBadDCE = false; - function sub(event, fn) { + function sub(event: string, fn: Handler) { hook.on(event, fn); return () => hook.off(event, fn); } - function on(event, fn) { + function on(event: string, fn: Handler) { if (!listeners[event]) { listeners[event] = []; } listeners[event].push(fn); } - function off(event, fn) { + function off(event: string, fn: Handler) { if (!listeners[event]) { return; } @@ -399,13 +404,13 @@ export function installHook(target: any): DevToolsHook | null { } } - function emit(event, data) { + function emit(event: string, data: any) { if (listeners[event]) { listeners[event].map(fn => fn(data)); } } - function getFiberRoots(rendererID) { + function getFiberRoots(rendererID: RendererID) { const roots = fiberRoots; if (!roots[rendererID]) { roots[rendererID] = new Set(); @@ -413,14 +418,18 @@ export function installHook(target: any): DevToolsHook | null { return roots[rendererID]; } - function onCommitFiberUnmount(rendererID, fiber) { + function onCommitFiberUnmount(rendererID: RendererID, fiber: any) { const rendererInterface = rendererInterfaces.get(rendererID); if (rendererInterface != null) { rendererInterface.handleCommitFiberUnmount(fiber); } } - function onCommitFiberRoot(rendererID, root, priorityLevel) { + function onCommitFiberRoot( + rendererID: RendererID, + root: any, + priorityLevel: void | number, + ) { const mountedRoots = hook.getFiberRoots(rendererID); const current = root.current; const isKnownRoot = mountedRoots.has(root); @@ -439,14 +448,14 @@ export function installHook(target: any): DevToolsHook | null { } } - function onPostCommitFiberRoot(rendererID, root) { + function onPostCommitFiberRoot(rendererID: RendererID, root: any) { const rendererInterface = rendererInterfaces.get(rendererID); if (rendererInterface != null) { rendererInterface.handlePostCommitFiberRoot(root); } } - function setStrictMode(rendererID, isStrictMode) { + function setStrictMode(rendererID: RendererID, isStrictMode: any) { const rendererInterface = rendererInterfaces.get(rendererID); if (rendererInterface != null) { if (isStrictMode) { diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js index d1da857a5496a..a4c90eba85f32 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js @@ -143,7 +143,13 @@ type ValidateProps = (props: Props) => void; const IS_SCROLLING_DEBOUNCE_INTERVAL = 150; -const defaultItemKey = ({ columnIndex, data, rowIndex }) => +const defaultItemKey = ( + { + columnIndex, + data, + rowIndex + }: { columnIndex: number, data: any, rowIndex: number }, +) => `${rowIndex}:${columnIndex}`; // In DEV mode, this Set helps us only log a warning once per component instance. @@ -197,7 +203,7 @@ export default function createGridComponent({ _resetIsScrollingTimeoutId: TimeoutID | null = null; _outerRef: ?HTMLDivElement; - static defaultProps = { + static defaultProps: { direction: string, itemData: void, useIsScrolling: boolean } = { direction: 'ltr', itemData: undefined, useIsScrolling: false, @@ -393,7 +399,7 @@ export default function createGridComponent({ } } - render() { + render(): any { const { children, className, @@ -486,7 +492,7 @@ export default function createGridComponent({ ); } - _callOnItemsRendered: ( + _callOnItemsRendered: (( overscanColumnStartIndex: number, overscanColumnStopIndex: number, overscanRowStartIndex: number, @@ -495,8 +501,7 @@ export default function createGridComponent({ visibleColumnStopIndex: number, visibleRowStartIndex: number, visibleRowStopIndex: number - ) => void; - _callOnItemsRendered = memoizeOne( + ) => void) = memoizeOne( ( overscanColumnStartIndex: number, overscanColumnStopIndex: number, @@ -519,14 +524,13 @@ export default function createGridComponent({ }) ); - _callOnScroll: ( + _callOnScroll: (( scrollLeft: number, scrollTop: number, horizontalScrollDirection: ScrollDirection, verticalScrollDirection: ScrollDirection, scrollUpdateWasRequested: boolean - ) => void; - _callOnScroll = memoizeOne( + ) => void) = memoizeOne( ( scrollLeft: number, scrollTop: number, @@ -595,7 +599,6 @@ export default function createGridComponent({ // So that pure component sCU will prevent re-renders. // We maintain this cache, and pass a style prop rather than index, // So that List can clear cached styles and force item re-render if necessary. - _getItemStyle: (rowIndex: number, columnIndex: number) => Object; _getItemStyle = (rowIndex: number, columnIndex: number): Object => { const { columnWidth, direction, rowHeight } = this.props; @@ -628,8 +631,8 @@ export default function createGridComponent({ return style; }; - _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache; - _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({})); + _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) = + memoizeOne((_: any, __: any, ___: any) => ({})); _getHorizontalRangeToRender(): [number, number, number, number] { const { diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js index 11ff59317c5f5..210dba2b642bc 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js @@ -162,7 +162,13 @@ export default function createListComponent({ _outerRef: ?HTMLDivElement; _resetIsScrollingTimeoutId: TimeoutID | null = null; - static defaultProps = { + static defaultProps: { + direction: string, + itemData: void, + layout: string, + overscanCount: number, + useIsScrolling: boolean, + } = { direction: 'ltr', itemData: undefined, layout: 'vertical', @@ -288,7 +294,7 @@ export default function createListComponent({ } } - render() { + render(): any { const { children, className, @@ -370,13 +376,12 @@ export default function createListComponent({ ); } - _callOnItemsRendered: ( + _callOnItemsRendered: (( overscanStartIndex: number, overscanStopIndex: number, visibleStartIndex: number, visibleStopIndex: number - ) => void; - _callOnItemsRendered = memoizeOne( + ) => void) = memoizeOne( ( overscanStartIndex: number, overscanStopIndex: number, @@ -391,12 +396,11 @@ export default function createListComponent({ }) ); - _callOnScroll: ( + _callOnScroll: (( scrollDirection: ScrollDirection, scrollOffset: number, scrollUpdateWasRequested: boolean - ) => void; - _callOnScroll = memoizeOne( + ) => void) = memoizeOne( ( scrollDirection: ScrollDirection, scrollOffset: number, @@ -446,7 +450,6 @@ export default function createListComponent({ // So that pure component sCU will prevent re-renders. // We maintain this cache, and pass a style prop rather than index, // So that List can clear cached styles and force item re-render if necessary. - _getItemStyle: (index: number) => Object; _getItemStyle = (index: number): Object => { const { direction, itemSize, layout } = this.props; @@ -480,8 +483,8 @@ export default function createListComponent({ return style; }; - _getItemStyleCache: (_: any, __: any, ___: any) => ItemStyleCache; - _getItemStyleCache = memoizeOne((_: any, __: any, ___: any) => ({})); + _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) = + memoizeOne((_: any, __: any, ___: any) => ({})); _getRangeToRender(): [number, number, number, number] { const { itemCount, overscanCount } = this.props; diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js b/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js index 6b891bd4d2e50..01ca6d5071268 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js @@ -7,8 +7,9 @@ import shallowDiffers from './shallowDiffers'; // It knows to compare individual style props and ignore the wrapper object. // See https://reactjs.org/docs/react-component.html#shouldcomponentupdate export default function shouldComponentUpdate( + this: interface { props: any, state: any }, nextProps: Object, - nextState: Object + nextState: Object, ): boolean { return ( !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState) diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js index 8f261c1ed90d5..6bc08d91524b7 100644 --- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js +++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js @@ -56,7 +56,7 @@ export function registerDevToolsEventLogger( } } - function handleLoggingIFrameLoaded(iframe) { + function handleLoggingIFrameLoaded(iframe: HTMLIFrameElement) { if (loggingIFrame != null) { return; } diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js index dc1de76dfa733..8c9a02e5e0c79 100644 --- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js +++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js @@ -10,19 +10,19 @@ import * as React from 'react'; import {Fragment} from 'react'; -function wrapWithHoc(Component, index) { +function wrapWithHoc(Component: () => any, index: number) { function HOC() { return ; } - const displayName = Component.displayName || Component.name; + const displayName = (Component: any).displayName || Component.name; // $FlowFixMe[incompatible-type] found when upgrading Flow HOC.displayName = `withHoc${index}(${displayName})`; return HOC; } -function wrapWithNested(Component, times) { +function wrapWithNested(Component: () => any, times: number) { for (let i = 0; i < times; i++) { Component = wrapWithHoc(Component, i); } diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index fe617337faeb2..5cfad3f7e837f 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -7,6 +7,7 @@ * @flow */ +import type {ReactContext} from 'shared/ReactTypes'; import * as React from 'react'; import { createContext, @@ -23,7 +24,8 @@ import { const initialData = {foo: 'FOO', bar: 'BAR'}; -function reducer(state, action) { +// $FlowFixMe[missing-local-annot] +function reducer(state, action: {type: string}) { switch (action.type) { case 'swap': return {foo: state.bar, bar: state.foo}; @@ -72,19 +74,20 @@ type Props = {name: string, toggle: boolean}; type State = {cities: Array, state: string}; class StatefulClass extends Component { - static contextType = BoolContext; + static contextType: ReactContext = BoolContext; state: State = { cities: ['San Francisco', 'San Jose'], state: 'California', }; - handleChange = ({target}) => + // $FlowFixMe[missing-local-annot] + handleChange = ({target}): any => this.setState({ state: target.value, }); - render() { + render(): any { return (