{"commit":{"shortRevision":"ea03ddd583","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-06-09T15:50:17-07:00","subject":"Added Flow type coverage for all EventEmitter subclasses","revision":"ea03ddd583baad7790f36959fb4abe308e85ac24"},"body":"","patch":"diff --git a\/flow.js b\/flow.js\nindex fbbc999554..740d69f34b 100644\n--- a\/flow.js\n+++ b\/flow.js\n@@ -1,11 +1,17 @@\n \/\/ @flow\n \n declare module 'events' {\n- declare class EventEmitter {\n- addListener: (type: string, fn: Function) => void;\n- emit: (type: string, data: any) => void;\n- removeListener: (type: string, fn: Function) => void;\n- removeAllListeners: (type?: string) => void;\n+ declare class EventEmitter {\n+ addListener>(\n+ event: Event,\n+ listener: (...$ElementType) => any\n+ ): void;\n+ emit: >(\n+ event: Event,\n+ ...$ElementType\n+ ) => void;\n+ removeListener(event: $Keys, listener: Function): void;\n+ removeAllListeners(event?: $Keys): void;\n }\n \n declare export default typeof EventEmitter;\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 12ba9a8a14..d8dcc15862 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -3,6 +3,7 @@\n import EventEmitter from 'events';\n import memoize from 'memoize-one';\n import throttle from 'lodash.throttle';\n+import Bridge from 'src\/bridge';\n import {\n SESSION_STORAGE_LAST_SELECTION_KEY,\n SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n@@ -23,7 +24,7 @@ import type {\n RendererID,\n RendererInterface,\n } from '.\/types';\n-import type { Bridge, ComponentFilter } from '..\/types';\n+import type { ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -67,7 +68,9 @@ type PersistedSelection = {|\n path: Array,\n |};\n \n-export default class Agent extends EventEmitter {\n+export default class Agent extends EventEmitter<{|\n+ shutdown: [],\n+|}> {\n _bridge: Bridge;\n _isProfiling: boolean = false;\n _recordChangeDescriptions: boolean = false;\n@@ -273,9 +276,11 @@ export default class Agent extends EventEmitter {\n screenshotCaptured = ({\n commitIndex,\n dataURL,\n+ rootID,\n }: {|\n commitIndex: number,\n dataURL: string,\n+ rootID: number,\n |}) => {\n this._bridge.send('screenshotCaptured', { commitIndex, dataURL });\n };\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex fe7b5dcfca..d2fd74139e 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -13,10 +13,10 @@ export type ExpirationTime = number;\n export type RefObject = {|\n current: any,\n |};\n-export type Source = {\n+export type Source = {|\n fileName: string,\n lineNumber: number,\n-};\n+|};\n export type HookType =\n | 'useState'\n | 'useReducer'\ndiff --git a\/src\/bridge.js b\/src\/bridge.js\nindex 1619e51852..c6c3f1b223 100644\n--- a\/src\/bridge.js\n+++ b\/src\/bridge.js\n@@ -2,16 +2,85 @@\n \n import EventEmitter from 'events';\n \n-import type { Wall } from '.\/types';\n+import type { ComponentFilter, Wall } from '.\/types';\n+import type {\n+ InspectedElement,\n+ OwnersList,\n+ ProfilingDataBackend,\n+ RendererID,\n+} from 'src\/backend\/types';\n \n const BATCH_DURATION = 100;\n \n+type ElementAndRendererID = {| id: number, rendererID: RendererID |};\n+\n type Message = {|\n event: string,\n payload: any,\n |};\n \n-export default class Bridge extends EventEmitter {\n+type HighlightElementInDOM = {|\n+ ...ElementAndRendererID,\n+ displayName: string,\n+ hideAfterTimeout: boolean,\n+ openNativeElementsPanel: boolean,\n+ scrollIntoView: boolean,\n+|};\n+\n+type OverrideValue = {|\n+ ...ElementAndRendererID,\n+ path: Array,\n+ value: any,\n+|};\n+\n+type OverrideHookState = {|\n+ ...OverrideValue,\n+ hookID: number,\n+|};\n+\n+type OverrideSuspense = {|\n+ ...ElementAndRendererID,\n+ forceFallback: boolean,\n+|};\n+\n+export default class Bridge extends EventEmitter<{|\n+ captureScreenshot: [{| commitIndex: number, rootID: number |}],\n+ clearHighlightedElementInDOM: [],\n+ getOwnersList: [ElementAndRendererID],\n+ getProfilingData: [{| rendererID: RendererID |}],\n+ getProfilingStatus: [],\n+ highlightElementInDOM: [HighlightElementInDOM],\n+ init: [],\n+ inspectElement: [ElementAndRendererID],\n+ inspectedElement: [InspectedElement | number | null],\n+ isBackendStorageAPISupported: [boolean],\n+ logElementToConsole: [ElementAndRendererID],\n+ operations: [Uint32Array],\n+ ownersList: [OwnersList],\n+ overrideContext: [OverrideValue],\n+ overrideHookState: [OverrideHookState],\n+ overrideProps: [OverrideValue],\n+ overrideState: [OverrideValue],\n+ overrideSuspense: [OverrideSuspense],\n+ profilingData: [ProfilingDataBackend],\n+ profilingStatus: [boolean],\n+ reloadAndProfile: [boolean],\n+ reloadAppForProfiling: [],\n+ screenshotCaptured: [\n+ {| commitIndex: number, dataURL: string, rootID: number |},\n+ ],\n+ selectElement: [ElementAndRendererID],\n+ selectFiber: [number],\n+ shutdown: [],\n+ startInspectingDOM: [],\n+ startProfiling: [boolean],\n+ stopInspectingDOM: [boolean],\n+ stopProfiling: [],\n+ syncSelectionFromNativeElementsPanel: [],\n+ syncSelectionToNativeElementsPanel: [],\n+ updateComponentFilters: [Array],\n+ viewElementSource: [ElementAndRendererID],\n+|}> {\n _isShutdown: boolean = false;\n _messageQueue: Array = [];\n _timeoutID: TimeoutID | null = null;\n@@ -25,7 +94,7 @@ export default class Bridge extends EventEmitter {\n \n this._wallUnlisten =\n wall.listen((message: Message) => {\n- this.emit(message.event, message.payload);\n+ (this: any).emit(message.event, message.payload);\n }) || null;\n }\n \n@@ -64,7 +133,9 @@ export default class Bridge extends EventEmitter {\n this._isShutdown = true;\n \n \/\/ Disable the API inherited from EventEmitter that can add more listeners and send more messages.\n+ \/\/ $FlowFixMe This property is not writable.\n this.addListener = function() {};\n+ \/\/ $FlowFixMe This property is not writable.\n this.emit = function() {};\n \/\/ NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.\n \ndiff --git a\/src\/devtools\/ProfilerStore.js b\/src\/devtools\/ProfilerStore.js\nindex b15726c542..1f20fa2a05 100644\n--- a\/src\/devtools\/ProfilerStore.js\n+++ b\/src\/devtools\/ProfilerStore.js\n@@ -3,6 +3,7 @@\n import EventEmitter from 'events';\n import memoize from 'memoize-one';\n import throttle from 'lodash.throttle';\n+import Bridge from 'src\/bridge';\n import { prepareProfilingDataFrontendFromBackendAndStore } from '.\/views\/Profiler\/utils';\n import ProfilingCache from '.\/ProfilingCache';\n import Store from '.\/store';\n@@ -14,11 +15,14 @@ import type {\n ProfilingDataFrontend,\n SnapshotNode,\n } from '.\/views\/Profiler\/types';\n-import type { Bridge } from '..\/types';\n \n const THROTTLE_CAPTURE_SCREENSHOT_DURATION = 500;\n \n-export default class ProfilerStore extends EventEmitter {\n+export default class ProfilerStore extends EventEmitter<{|\n+ isProcessingData: [],\n+ isProfiling: [],\n+ profilingData: [],\n+|}> {\n _bridge: Bridge;\n \n \/\/ Suspense cache for lazily calculating derived profiling data.\ndiff --git a\/src\/devtools\/index.js b\/src\/devtools\/index.js\nindex e656198314..b41b51a110 100644\n--- a\/src\/devtools\/index.js\n+++ b\/src\/devtools\/index.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import type { Bridge } from '..\/types';\n+import Bridge from 'src\/bridge';\n \n type Shell = {|\n connect: (callback: Function) => void,\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex d4501273a8..5e2e14d983 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -2,6 +2,7 @@\n \n import EventEmitter from 'events';\n import { inspect } from 'util';\n+import Bridge from 'src\/bridge';\n import {\n TREE_OPERATION_ADD,\n TREE_OPERATION_REMOVE,\n@@ -21,7 +22,7 @@ import { printStore } from 'src\/__tests__\/storeSerializer';\n import ProfilerStore from '.\/ProfilerStore';\n \n import type { Element } from '.\/views\/Components\/types';\n-import type { Bridge, ComponentFilter, ElementType } from '..\/types';\n+import type { ComponentFilter, ElementType } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -57,7 +58,16 @@ export type Capabilities = {|\n * The store is the single source of truth for updates from the backend.\n * ContextProviders can subscribe to the Store for specific things they want to provide.\n *\/\n-export default class Store extends EventEmitter {\n+export default class Store extends EventEmitter<{|\n+ captureScreenshots: [],\n+ collapseNodesByDefault: [],\n+ componentFilters: [],\n+ mutated: [[Array, Map]],\n+ recordChangeDescriptions: [],\n+ roots: [],\n+ supportsProfiling: [],\n+ supportsReloadAndProfile: [],\n+|}> {\n _bridge: Bridge;\n \n _captureScreenshots: boolean = false;\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex c27d97eb8b..119cb47d9e 100644\n--- a\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -14,28 +14,33 @@ import { hydrate } from 'src\/hydration';\n import { TreeStateContext } from '.\/TreeContext';\n import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n+import type { InspectedElement as InspectedElementBackend } from 'src\/backend\/types';\n import type {\n DehydratedData,\n Element,\n- InspectedElement,\n+ InspectedElement as InspectedElementFrontend,\n } from 'src\/devtools\/views\/Components\/types';\n import type { Resource, Thenable } from '..\/..\/cache';\n \n type Context = {|\n- read(id: number): InspectedElement | null,\n+ read(id: number): InspectedElementFrontend | null,\n |};\n \n const InspectedElementContext = createContext(((null: any): Context));\n InspectedElementContext.displayName = 'InspectedElementContext';\n \n-type ResolveFn = (inspectedElement: InspectedElement) => void;\n+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;\n type InProgressRequest = {|\n- promise: Thenable,\n+ promise: Thenable,\n resolveFn: ResolveFn,\n |};\n \n const inProgressRequests: WeakMap = new WeakMap();\n-const resource: Resource = createResource(\n+const resource: Resource<\n+ Element,\n+ Element,\n+ InspectedElementFrontend\n+> = createResource(\n (element: Element) => {\n let request = inProgressRequests.get(element);\n if (request != null) {\n@@ -85,7 +90,7 @@ function InspectedElementContextController({ children }: Props) {\n \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n useEffect(() => {\n const onInspectedElement = (\n- inspectedElement: InspectedElement | number | null\n+ data: InspectedElementBackend | number | null\n ) => {\n \/\/ A null value means that the element no longer exists in the backend.\n \/\/ If it's the same element that's currently selected, that selection will be removed once the Store updates.\n@@ -93,23 +98,21 @@ function InspectedElementContextController({ children }: Props) {\n \/\/ Either way there is nothing we need to do in this case.\n \/\/ A numeric value indicates that the element hasn't changed since we last requested its data,\n \/\/ in which case we don't need to invalidate the cache and re-render anything in the DevTools.\n- if (inspectedElement !== null && typeof inspectedElement === 'object') {\n- const id = inspectedElement.id;\n-\n- const { displayName, type } = inspectedElement;\n-\n- const [\n- displayNameWithoutHOCs,\n- hocDisplayNames,\n- ] = separateDisplayNameAndHOCs(displayName, type);\n-\n- inspectedElement = (({\n- ...inspectedElement,\n- displayName: displayNameWithoutHOCs,\n+ if (data !== null && typeof data === 'object') {\n+ const id = data.id;\n+\n+ const inspectedElement: InspectedElementFrontend = {\n+ canEditFunctionProps: data.canEditFunctionProps,\n+ canEditHooks: data.canEditHooks,\n+ canToggleSuspense: data.canToggleSuspense,\n+ canViewSource: data.canViewSource,\n+ id: data.id,\n+ source: data.source,\n+ type: data.type,\n owners:\n- inspectedElement.owners === null\n+ data.owners === null\n ? null\n- : inspectedElement.owners.map(owner => {\n+ : data.owners.map(owner => {\n const [\n displayName,\n hocDisplayNames,\n@@ -120,13 +123,12 @@ function InspectedElementContextController({ children }: Props) {\n hocDisplayNames,\n };\n }),\n- hocDisplayNames,\n- context: hydrateHelper(inspectedElement.context),\n- events: hydrateHelper(inspectedElement.events),\n- hooks: hydrateHelper(inspectedElement.hooks),\n- props: hydrateHelper(inspectedElement.props),\n- state: hydrateHelper(inspectedElement.state),\n- }: any): InspectedElement);\n+ context: hydrateHelper(data.context),\n+ events: hydrateHelper(data.events),\n+ hooks: hydrateHelper(data.hooks),\n+ props: hydrateHelper(data.props),\n+ state: hydrateHelper(data.state),\n+ };\n \n const element = store.getElementByID(id);\n if (element !== null) {\n@@ -174,16 +176,13 @@ function InspectedElementContextController({ children }: Props) {\n bridge.send('selectElement', { id: selectedElementID, rendererID });\n \n const onInspectedElement = (\n- inspectedElement: InspectedElement | number | null\n+ data: InspectedElementBackend | number | null\n ) => {\n- if (inspectedElement !== null) {\n+ if (data !== null) {\n \/\/ If this is the element we requested, wait a little bit and then ask for an update.\n- if (inspectedElement === selectedElementID) {\n+ if (data === selectedElementID) {\n timeoutID = setTimeout(sendRequest, 1000);\n- } else if (\n- typeof inspectedElement === 'object' &&\n- inspectedElement.id === selectedElementID\n- ) {\n+ } else if (typeof data === 'object' && data.id === selectedElementID) {\n timeoutID = setTimeout(sendRequest, 1000);\n }\n }\ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nindex f83b1a6d39..aa7e2dab05 100644\n--- a\/src\/devtools\/views\/Components\/OwnersListContext.js\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -11,11 +11,8 @@ import { BridgeContext, StoreContext } from '..\/context';\n import { TreeStateContext } from '.\/TreeContext';\n import { separateDisplayNameAndHOCs } from 'src\/utils';\n \n-import type {\n- Element,\n- Owner,\n- OwnersList,\n-} from 'src\/devtools\/views\/Components\/types';\n+import type { OwnersList } from 'src\/backend\/types';\n+import type { Element, Owner } from 'src\/devtools\/views\/Components\/types';\n import type { Resource, Thenable } from '..\/..\/cache';\n \n type Context = (id: number) => Array | null;\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nindex 106b184ac5..a1c2a2b80c 100644\n--- a\/src\/devtools\/views\/Components\/types.js\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -52,8 +52,6 @@ export type Source = {|\n export type InspectedElement = {|\n id: number,\n \n- displayName: string | null,\n-\n \/\/ Does the current renderer support editable hooks?\n canEditHooks: boolean,\n \ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex c02eef4fe1..606ffb706a 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -6,6 +6,7 @@ import '@reach\/menu-button\/styles.css';\n import '@reach\/tooltip\/styles.css';\n \n import React, { useState } from 'react';\n+import Bridge from 'src\/bridge';\n import Store from '..\/store';\n import { BridgeContext, StoreContext } from '.\/context';\n import Components from '.\/Components\/Components';\n@@ -23,8 +24,6 @@ import styles from '.\/DevTools.css';\n \n import '.\/root.css';\n \n-import type { Bridge } from '..\/..\/types';\n-\n export type BrowserName = 'Chrome' | 'Firefox';\n export type BrowserTheme = 'dark' | 'light';\n export type TabID = 'components' | 'profiler' | 'settings';\ndiff --git a\/src\/devtools\/views\/context.js b\/src\/devtools\/views\/context.js\nindex 5e25f1940e..e5ede9ef48 100644\n--- a\/src\/devtools\/views\/context.js\n+++ b\/src\/devtools\/views\/context.js\n@@ -1,8 +1,7 @@\n \/\/ @flow\n \n import { createContext } from 'react';\n-\n-import type { Bridge } from '..\/..\/types';\n+import Bridge from 'src\/bridge';\n \n import Store from '..\/store';\n \ndiff --git a\/src\/types.js b\/src\/types.js\nindex ca1329af9d..446e63ddc7 100644\n--- a\/src\/types.js\n+++ b\/src\/types.js\n@@ -1,11 +1,5 @@\n \/\/ @flow\n \n-export type Bridge = {\n- addListener(type: string, callback: Function): void,\n- removeListener(type: string, callback: Function): void,\n- send(event: string, payload: any, transferable?: Array): void,\n-};\n-\n export type Wall = {|\n \/\/ `listen` returns the \"unlisten\" function.\n listen: (fn: Function) => Function,\n","files":[{"path":"flow.js","status":"M"},{"path":"src\/backend\/agent.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"},{"path":"src\/bridge.js","status":"M"},{"path":"src\/devtools\/ProfilerStore.js","status":"M"},{"path":"src\/devtools\/index.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"path":"src\/devtools\/views\/Components\/InspectedElementContext.js","status":"M"},{"path":"src\/devtools\/views\/Components\/OwnersListContext.js","status":"M"},{"path":"src\/devtools\/views\/Components\/types.js","status":"M"},{"path":"src\/devtools\/views\/DevTools.js","status":"M"},{"path":"src\/devtools\/views\/context.js","status":"M"},{"path":"src\/types.js","status":"M"}],"parents":["b3046c6e196eadd879e971ea3f1b2f6bacff1119"]}

dillon1000/react

Files changed