From 8003ab9cf5c711eb00f741bbd89def56b066b999 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Fri, 9 Sep 2022 16:03:48 -0400 Subject: [PATCH] Flow: remove explicit object syntax (#25223) --- packages/react-cache/src/LRU.js | 4 +- packages/react-cache/src/ReactCacheOld.js | 12 +-- .../react-client/src/ReactFlightClient.js | 24 ++--- .../src/ReactFlightClientHostConfigStream.js | 4 +- .../react-debug-tools/src/ReactDebugHooks.js | 12 +-- .../react-devtools-core/src/standalone.js | 8 +- .../flow-typed/jest.js | 10 +- packages/react-devtools-inline/src/backend.js | 4 +- .../react-devtools-inline/src/frontend.js | 8 +- packages/react-devtools-shared/src/Logger.js | 52 +++++------ .../src/__tests__/profilingCache-test.js | 5 +- .../src/__tests__/profilingCharts-test.js | 4 +- .../__tests__/storeComponentFilters-test.js | 2 +- .../setupNativeStyleEditor.js | 10 +- .../src/backend/NativeStyleEditor/types.js | 12 +-- .../src/backend/agent.js | 60 ++++++------ .../src/backend/console.js | 8 +- .../src/backend/profilingHooks.js | 8 +- .../src/backend/renderer.js | 20 ++-- .../src/backend/types.js | 74 +++++++-------- .../src/backend/views/Highlighter/Overlay.js | 2 +- .../src/backend/views/TraceUpdates/index.js | 4 +- .../react-devtools-shared/src/backendAPI.js | 24 ++--- packages/react-devtools-shared/src/bridge.js | 92 +++++++++---------- .../src/devtools/ContextMenu/ContextMenu.js | 4 +- .../devtools/ContextMenu/ContextMenuItem.js | 4 +- .../src/devtools/ContextMenu/Contexts.js | 10 +- .../devtools/ContextMenu/useContextMenu.js | 6 +- .../src/devtools/ProfilerStore.js | 4 +- .../src/devtools/ProfilingCache.js | 16 ++-- .../src/devtools/cache.js | 12 +-- .../src/devtools/index.js | 4 +- .../src/devtools/store.js | 24 ++--- .../src/devtools/views/ButtonIcon.js | 4 +- .../src/devtools/views/Components/Badge.js | 4 +- .../views/Components/ComponentSearchInput.js | 2 +- .../devtools/views/Components/Components.js | 10 +- .../devtools/views/Components/EditableName.js | 4 +- .../views/Components/EditableValue.js | 4 +- .../src/devtools/views/Components/Element.js | 12 +-- .../views/Components/ExpandCollapseToggle.js | 4 +- .../devtools/views/Components/HocBadges.js | 4 +- .../views/Components/InspectedElement.js | 2 +- .../Components/InspectedElementContext.js | 12 +-- .../Components/InspectedElementContextTree.js | 4 +- .../InspectedElementErrorBoundary.js | 4 +- .../InspectedElementErrorsAndWarningsTree.js | 12 +-- .../Components/InspectedElementHooksTree.js | 12 +-- .../Components/InspectedElementPropsTree.js | 4 +- .../Components/InspectedElementStateTree.js | 4 +- .../InspectedElementStyleXPlugin.js | 4 +- .../InspectedElementSuspenseToggle.js | 4 +- .../views/Components/InspectedElementView.js | 12 +-- .../src/devtools/views/Components/KeyValue.js | 4 +- .../views/Components/LoadingAnimation.js | 4 +- .../NativeStyleEditor/LayoutViewer.js | 4 +- .../NativeStyleEditor/StyleEditor.js | 16 ++-- .../Components/NativeStyleEditor/context.js | 12 +-- .../Components/NativeStyleEditor/index.js | 2 +- .../Components/NativeStyleEditor/types.js | 4 +- .../views/Components/NewArrayValue.js | 4 +- .../devtools/views/Components/NewKeyValue.js | 4 +- .../views/Components/OwnersListContext.js | 8 +- .../devtools/views/Components/OwnersStack.js | 16 ++-- .../views/Components/SelectedTreeHighlight.js | 6 +- .../src/devtools/views/Components/Tree.js | 10 +- .../devtools/views/Components/TreeContext.js | 88 +++++++++--------- .../Components/ViewElementSourceContext.js | 4 +- .../views/Components/ViewSourceContext.js | 4 +- .../src/devtools/views/Components/types.js | 20 ++-- .../src/devtools/views/DevTools.js | 4 +- .../views/ErrorBoundary/CaughtErrorView.js | 4 +- .../views/ErrorBoundary/ErrorBoundary.js | 8 +- .../devtools/views/ErrorBoundary/ErrorView.js | 4 +- .../views/ErrorBoundary/ReportNewIssue.js | 4 +- .../ErrorBoundary/SuspendingErrorView.js | 4 +- .../views/ErrorBoundary/TimeoutView.js | 4 +- .../UnsupportedBridgeOperationView.js | 4 +- .../ErrorBoundary/UpdateExistingIssue.js | 4 +- .../src/devtools/views/ErrorBoundary/cache.js | 12 +-- .../devtools/views/ErrorBoundary/githubAPI.js | 4 +- .../src/devtools/views/Icon.js | 4 +- .../src/devtools/views/ModalDialog.js | 30 +++--- .../src/devtools/views/Profiler/ChartNode.js | 4 +- .../views/Profiler/CommitFlamegraph.js | 10 +- .../devtools/views/Profiler/CommitRanked.js | 10 +- .../views/Profiler/CommitTreeBuilder.js | 4 +- .../views/Profiler/FlamegraphChartBuilder.js | 12 +-- .../views/Profiler/HoveredFiberInfo.js | 8 +- .../devtools/views/Profiler/NoCommitData.js | 2 +- .../src/devtools/views/Profiler/Profiler.js | 2 +- .../views/Profiler/ProfilerContext.js | 12 +-- .../views/Profiler/RankedChartBuilder.js | 12 +-- .../devtools/views/Profiler/RecordToggle.js | 4 +- .../views/Profiler/ReloadAndProfileButton.js | 8 +- .../devtools/views/Profiler/RootSelector.js | 2 +- .../views/Profiler/SidebarCommitInfo.js | 2 +- .../views/Profiler/SidebarEventInfo.js | 6 +- .../Profiler/SidebarSelectedFiberInfo.js | 2 +- .../views/Profiler/SnapshotCommitList.js | 16 ++-- .../views/Profiler/SnapshotSelector.js | 2 +- .../src/devtools/views/Profiler/Updaters.js | 4 +- .../devtools/views/Profiler/WhatChanged.js | 4 +- .../src/devtools/views/Profiler/types.js | 40 ++++---- .../src/devtools/views/ReactLogo.js | 4 +- .../src/devtools/views/SearchInput.js | 4 +- .../views/Settings/ComponentsSettings.js | 6 +- .../views/Settings/DebuggingSettings.js | 2 +- .../views/Settings/GeneralSettings.js | 4 +- .../views/Settings/ProfilerSettings.js | 2 +- .../views/Settings/SettingsContext.js | 8 +- .../devtools/views/Settings/SettingsModal.js | 4 +- .../views/Settings/SettingsModalContext.js | 2 +- .../src/devtools/views/TabBar.js | 8 +- .../src/devtools/views/ThemeProvider.js | 2 +- .../views/UnsupportedBridgeProtocolDialog.js | 6 +- .../views/UnsupportedVersionDialog.js | 4 +- .../views/WarnIfLegacyBackendDetected.js | 4 +- .../src/devtools/views/context.js | 8 +- .../src/devtools/views/hooks.js | 16 ++-- .../src/dynamicImportCache.js | 12 +-- packages/react-devtools-shared/src/hook.js | 4 +- .../src/hookNamesCache.js | 12 +-- .../src/hooks/SourceMapConsumer.js | 16 ++-- .../src/hooks/SourceMapMetadataConsumer.js | 4 +- .../src/hooks/SourceMapTypes.js | 8 +- .../src/hooks/astUtils.js | 10 +- .../src/hooks/generateHookMap.js | 8 +- .../src/hooks/getHookNameForLocation.js | 6 +- .../parseHookNames/loadSourceAndMetadata.js | 4 +- .../parseHookNames/parseSourceAndMetadata.js | 12 +-- .../react-devtools-shared/src/hydration.js | 4 +- .../src/inspectedElementCache.js | 16 ++-- .../src/inspectedElementMutableSource.js | 4 +- .../src/registerDevToolsEventLogger.js | 4 +- packages/react-devtools-shared/src/types.js | 28 +++--- .../src/app/EditableProps/index.js | 8 +- .../src/app/ToDoList/List.js | 6 +- .../src/app/ToDoList/ListItem.js | 4 +- .../react-devtools-timeline/src/CanvasPage.js | 10 +- .../src/EventTooltip.js | 40 ++++---- .../react-devtools-timeline/src/Timeline.js | 6 +- .../src/TimelineContext.js | 8 +- .../src/TimelineSearchContext.js | 24 ++--- .../src/TimelineSearchInput.js | 2 +- .../src/content-views/utils/colors.js | 6 +- .../src/content-views/utils/text.js | 4 +- .../src/import-worker/index.js | 6 +- .../src/import-worker/preprocessData.js | 8 +- .../src/timelineCache.js | 12 +-- packages/react-devtools-timeline/src/types.js | 76 +++++++-------- .../src/utils/useSmartTooltip.js | 6 +- .../src/view-base/Surface.js | 4 +- .../src/view-base/geometry.js | 10 +- .../src/view-base/layouter.js | 2 +- .../src/view-base/resizable/ResizableView.js | 12 +-- .../src/view-base/useCanvasInteraction.js | 74 +++++++-------- .../src/view-base/utils/normalizeWheel.js | 4 +- .../src/view-base/utils/scrollState.js | 24 ++--- .../src/client/ReactDOMEventHandle.js | 4 +- .../src/client/ReactDOMHostConfig.js | 16 ++-- .../react-dom/src/client/ReactDOMSelect.js | 6 +- .../react-dom/src/client/ReactDOMTextarea.js | 6 +- .../src/client/inputValueTracking.js | 4 +- .../src/events/DOMPluginEventSystem.js | 8 +- .../src/events/ReactDOMEventReplaying.js | 8 +- .../src/events/ReactSyntheticEventType.js | 20 ++-- .../src/server/ReactDOMFizzServerBrowser.js | 8 +- .../src/server/ReactDOMFizzServerNode.js | 8 +- .../src/server/ReactDOMFizzStaticBrowser.js | 8 +- .../src/server/ReactDOMFizzStaticNode.js | 8 +- .../src/server/ReactDOMLegacyServerBrowser.js | 4 +- .../src/server/ReactDOMLegacyServerImpl.js | 4 +- .../src/server/ReactDOMLegacyServerNode.js | 4 +- .../server/ReactDOMLegacyServerNodeStream.js | 4 +- .../src/server/ReactDOMServerFormatConfig.js | 8 +- .../ReactDOMServerLegacyFormatConfig.js | 4 +- packages/react-dom/src/shared/DOMProperty.js | 4 +- .../react-dom/src/shared/ReactDOMTypes.js | 4 +- packages/react-fetch/src/ReactFetchBrowser.js | 12 +-- packages/react-fetch/src/ReactFetchNode.js | 16 ++-- packages/react-fs/src/ReactFilesystem.js | 26 +++--- .../src/dom/create-event-handle/Focus.js | 20 ++-- .../src/dom/create-event-handle/useEvent.js | 8 +- .../src/ReactFabricHostConfig.js | 24 ++--- .../src/ReactNativeHostConfig.js | 8 +- .../src/ReactNativeTypes.js | 60 ++++++------ .../Libraries/ReactPrivate/deepDiffer.js | 2 +- .../src/legacy-events/PluginModuleType.js | 4 +- .../legacy-events/ReactSyntheticEventType.js | 20 ++-- .../ResponderTouchHistoryStore.js | 4 +- .../server/ReactNativeServerFormatConfig.js | 4 +- .../src/ReactNoopServer.js | 12 +-- .../src/createReactNoop.js | 16 ++-- packages/react-pg/src/ReactPostgres.js | 12 +-- .../src/ReactCapturedValue.js | 4 +- .../src/ReactFiberCacheComponent.new.js | 12 +-- .../src/ReactFiberCacheComponent.old.js | 12 +-- .../src/ReactFiberClassUpdateQueue.new.js | 12 +-- .../src/ReactFiberClassUpdateQueue.old.js | 12 +-- .../src/ReactFiberConcurrentUpdates.new.js | 8 +- .../src/ReactFiberConcurrentUpdates.old.js | 8 +- .../src/ReactFiberHooks.new.js | 74 +++++++-------- .../src/ReactFiberHooks.old.js | 74 +++++++-------- .../src/ReactFiberHotReloading.new.js | 8 +- .../src/ReactFiberHotReloading.old.js | 8 +- .../src/ReactFiberOffscreenComponent.js | 16 ++-- .../src/ReactFiberReconciler.new.js | 4 +- .../src/ReactFiberReconciler.old.js | 4 +- .../src/ReactFiberRoot.new.js | 4 +- .../src/ReactFiberRoot.old.js | 4 +- .../src/ReactFiberStack.new.js | 2 +- .../src/ReactFiberStack.old.js | 2 +- .../src/ReactFiberSuspenseComponent.new.js | 12 +-- .../src/ReactFiberSuspenseComponent.old.js | 12 +-- .../ReactFiberTracingMarkerComponent.new.js | 26 +++--- .../ReactFiberTracingMarkerComponent.old.js | 26 +++--- .../src/ReactFiberTreeContext.new.js | 4 +- .../src/ReactFiberTreeContext.old.js | 4 +- .../src/ReactInternalTypes.js | 46 +++++----- .../src/ReactTestSelectors.js | 32 +++---- .../react-refresh/src/ReactFreshRuntime.js | 8 +- .../src/ReactDOMServerFB.js | 8 +- .../src/ReactFlightDOMRelayProtocol.js | 2 +- .../src/ReactFlightDOMRelayServer.js | 4 +- .../ReactFlightDOMRelayServerHostConfig.js | 4 +- .../src/ReactServerStreamConfigFB.js | 4 +- .../ReactFlightClientWebpackBundlerConfig.js | 12 +-- .../src/ReactFlightDOMClient.js | 4 +- .../src/ReactFlightDOMServerBrowser.js | 4 +- .../src/ReactFlightDOMServerNode.js | 8 +- .../ReactFlightServerWebpackBundlerConfig.js | 16 ++-- .../src/ReactFlightWebpackNodeLoader.js | 26 +++--- .../src/ReactFlightWebpackPlugin.js | 8 +- .../src/ReactFlightNativeRelayProtocol.js | 2 +- .../ReactFlightNativeRelayServerHostConfig.js | 4 +- .../src/ReactFizzClassComponent.js | 4 +- .../src/ReactFizzComponentStack.js | 12 +-- packages/react-server/src/ReactFizzHooks.js | 14 +-- .../react-server/src/ReactFizzNewContext.js | 4 +- packages/react-server/src/ReactFizzServer.js | 20 ++-- .../react-server/src/ReactFizzTreeContext.js | 4 +- .../react-server/src/ReactFlightNewContext.js | 4 +- .../react-server/src/ReactFlightServer.js | 14 +-- .../src/ReactTestHostConfig.js | 14 +-- .../src/ReactTestRenderer.js | 4 +- packages/react/src/ReactChildren.js | 4 +- packages/react/src/ReactCurrentBatchConfig.js | 4 +- packages/react/src/ReactHooks.js | 4 +- packages/react/src/ReactLazy.js | 20 ++-- packages/scheduler/src/SchedulerMinHeap.js | 4 +- .../scheduler/src/forks/SchedulerPostTask.js | 6 +- packages/shared/ReactElementType.js | 8 +- packages/shared/ReactTypes.js | 22 ++--- .../use-subscription/src/useSubscription.js | 4 +- scripts/flow/environment.js | 34 +++---- scripts/flow/react-native-host-hooks.js | 6 +- scripts/flow/react-relay-hooks.js | 2 +- .../ReactNativeViewConfigRegistry.js | 12 +-- 259 files changed, 1439 insertions(+), 1444 deletions(-) diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js index 5046b3f2bc9fe..9a90cc8a3ede7 100644 --- a/packages/react-cache/src/LRU.js +++ b/packages/react-cache/src/LRU.js @@ -16,12 +16,12 @@ const { unstable_IdlePriority: IdlePriority, } = Scheduler; -type Entry = {| +type Entry = { value: T, onDelete: () => mixed, previous: Entry, next: Entry, -|}; +}; export function createLRU(limit: number) { let LIMIT = limit; diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js index f8b33434b7c76..8781899dc2ae7 100644 --- a/packages/react-cache/src/ReactCacheOld.js +++ b/packages/react-cache/src/ReactCacheOld.js @@ -15,20 +15,20 @@ import {createLRU} from './LRU'; type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...}; -type PendingResult = {| +type PendingResult = { status: 0, value: Suspender, -|}; +}; -type ResolvedResult = {| +type ResolvedResult = { status: 1, value: V, -|}; +}; -type RejectedResult = {| +type RejectedResult = { status: 2, value: mixed, -|}; +}; type Result = PendingResult | ResolvedResult | RejectedResult; diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 584639921e510..ddc151654b769 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -34,7 +34,7 @@ export type JSONValue = | null | boolean | string - | {|+[key: string]: JSONValue|} + | {+[key: string]: JSONValue} | $ReadOnlyArray; const PENDING = 0; @@ -43,36 +43,36 @@ const RESOLVED_MODULE = 2; const INITIALIZED = 3; const ERRORED = 4; -type PendingChunk = {| +type PendingChunk = { _status: 0, _value: null | Array<() => mixed>, _response: Response, then(resolve: () => mixed): void, -|}; -type ResolvedModelChunk = {| +}; +type ResolvedModelChunk = { _status: 1, _value: UninitializedModel, _response: Response, then(resolve: () => mixed): void, -|}; -type ResolvedModuleChunk = {| +}; +type ResolvedModuleChunk = { _status: 2, _value: ModuleReference, _response: Response, then(resolve: () => mixed): void, -|}; -type InitializedChunk = {| +}; +type InitializedChunk = { _status: 3, _value: T, _response: Response, then(resolve: () => mixed): void, -|}; -type ErroredChunk = {| +}; +type ErroredChunk = { _status: 4, _value: Error, _response: Response, then(resolve: () => mixed): void, -|}; +}; type SomeChunk = | PendingChunk | ResolvedModelChunk @@ -338,7 +338,7 @@ export function parseModelString( export function parseModelTuple( response: Response, - value: {|+[key: string]: JSONValue|} | $ReadOnlyArray, + value: {+[key: string]: JSONValue} | $ReadOnlyArray, ): any { const tuple: [mixed, mixed, mixed, mixed] = (value: any); diff --git a/packages/react-client/src/ReactFlightClientHostConfigStream.js b/packages/react-client/src/ReactFlightClientHostConfigStream.js index d56e5d43128fc..2005e8a98a9ed 100644 --- a/packages/react-client/src/ReactFlightClientHostConfigStream.js +++ b/packages/react-client/src/ReactFlightClientHostConfigStream.js @@ -10,11 +10,11 @@ import type {ResponseBase} from './ReactFlightClient'; import type {StringDecoder} from './ReactFlightClientHostConfig'; -export type Response = ResponseBase & {| +export type Response = ResponseBase & { _partialRow: string, _fromJSON: (key: string, value: JSONValue) => any, _stringDecoder: StringDecoder, -|}; +}; export type UninitializedModel = string; diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 68305e4a9369f..2cb6e7fbdf386 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -51,10 +51,10 @@ type Dispatch = A => void; let primitiveStackCache: null | Map> = null; -type Hook = {| +type Hook = { memoizedState: any, next: Hook | null, -|}; +}; function getPrimitiveStackCache(): Map> { // This initializes a cache of all primitive hooks so that the top @@ -154,7 +154,7 @@ function useReducer( return [state, (action: A) => {}]; } -function useRef(initialValue: T): {|current: T|} { +function useRef(initialValue: T): {current: T} { const hook = nextHook(); const ref = hook !== null ? hook.memoizedState : {current: initialValue}; hookLog.push({ @@ -208,7 +208,7 @@ function useEffect( } function useImperativeHandle( - ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void, + ref: {current: T | null} | ((inst: T | null) => mixed) | null | void, create: () => T, inputs: Array | void | null, ): void { @@ -371,12 +371,12 @@ const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler); // Inspect -export type HookSource = {| +export type HookSource = { lineNumber: number | null, columnNumber: number | null, fileName: string | null, functionName: string | null, -|}; +}; export type HooksNode = { id: number | null, diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index ff69b709dab00..4b594acf6c2ed 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -284,14 +284,14 @@ function connectToSocket(socket: WebSocket) { }; } -type ServerOptions = {| +type ServerOptions = { key?: string, cert?: string, -|}; +}; -type LoggerOptions = {| +type LoggerOptions = { surface?: ?string, -|}; +}; function startServer( port?: number = 8097, diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js index 39e6cae3c2551..dba752e9ba300 100644 --- a/packages/react-devtools-extensions/flow-typed/jest.js +++ b/packages/react-devtools-extensions/flow-typed/jest.js @@ -206,7 +206,7 @@ type EnzymeMatchersType = { toIncludeText(text: string): void, toMatchElement( element: React$Element, - options?: {|ignoreProps?: boolean, verbose?: boolean|} + options?: {ignoreProps?: boolean, verbose?: boolean} ): void, toMatchSelector(selector: string): void, // 7.x @@ -1095,7 +1095,7 @@ type JestPrettyFormatPrint = any => string; // eslint-disable-next-line no-unused-vars type JestPrettyFormatStringOrNull = string | null; -type JestPrettyFormatOptions = {| +type JestPrettyFormatOptions = { callToJSON: boolean, edgeSpacing: string, escapeRegex: boolean, @@ -1107,14 +1107,14 @@ type JestPrettyFormatOptions = {| plugins: JestPrettyFormatPlugins, printFunctionName: boolean, spacing: string, - theme: {| + theme: { comment: string, content: string, prop: string, tag: string, value: string, - |}, -|}; + }, +}; type JestPrettyFormatPlugin = { print: ( diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js index c0c87871df117..061c447909e3d 100644 --- a/packages/react-devtools-inline/src/backend.js +++ b/packages/react-devtools-inline/src/backend.js @@ -78,9 +78,9 @@ export function activate( contentWindow: window, { bridge, - }: {| + }: { bridge?: BackendBridge, - |} = {}, + } = {}, ): void { if (bridge == null) { bridge = createBridge(contentWindow); diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js index 42c820126f285..b8dc2abe6adb7 100644 --- a/packages/react-devtools-inline/src/frontend.js +++ b/packages/react-devtools-inline/src/frontend.js @@ -17,11 +17,11 @@ import type {Wall} from 'react-devtools-shared/src/types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools'; -type Config = {| +type Config = { checkBridgeProtocolCompatibility?: boolean, supportsNativeInspection?: boolean, supportsProfiling?: boolean, -|}; +}; export function createStore(bridge: FrontendBridge, config?: Config): Store { return new Store(bridge, { @@ -62,10 +62,10 @@ export function initialize( { bridge, store, - }: {| + }: { bridge?: FrontendBridge, store?: Store, - |} = {}, + } = {}, ): React.AbstractComponent { if (bridge == null) { bridge = createBridge(contentWindow); diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js index 6ddb40f0a97e2..0998f860a99c4 100644 --- a/packages/react-devtools-shared/src/Logger.js +++ b/packages/react-devtools-shared/src/Logger.js @@ -10,57 +10,57 @@ import {enableLogger} from 'react-devtools-feature-flags'; export type LoggerEvent = - | {| + | { +event_name: 'loaded-dev-tools', - |} - | {| + } + | { +event_name: 'error', +error_message: string | null, +error_stack: string | null, +error_component_stack: string | null, - |} - | {| + } + | { +event_name: 'selected-components-tab', - |} - | {| + } + | { +event_name: 'selected-profiler-tab', - |} - | {| + } + | { +event_name: 'load-hook-names', +event_status: 'success' | 'error' | 'timeout' | 'unknown', +duration_ms: number, +inspected_element_display_name: string | null, +inspected_element_number_of_hooks: number | null, - |} - | {| + } + | { +event_name: 'select-element', - +metadata: {| + +metadata: { +source: string, - |}, - |} - | {| + }, + } + | { +event_name: 'inspect-element-button-clicked', - |} - | {| + } + | { +event_name: 'profiling-start', - +metadata: {| + +metadata: { +current_tab: string, - |}, - |} - | {| + }, + } + | { +event_name: 'profiler-tab-changed', - +metadata: {| + +metadata: { +tabId: string, - |}, - |} - | {| + }, + } + | { +event_name: 'settings-changed', +metadata: { +key: string, +value: any, ... }, - |}; + }; export type LogFunction = LoggerEvent => void | Promise; diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js index 1a84be03aa502..d3ce61cbd7472 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js @@ -202,10 +202,7 @@ describe('ProfilingCache', () => { const ModernContext = React.createContext(0); - class LegacyContextProvider extends React.Component< - any, - {|count: number|}, - > { + class LegacyContextProvider extends React.Component { static childContextTypes = { count: PropTypes.number, }; diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js index cf8d4aae4a717..67196274a68d4 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js @@ -61,7 +61,7 @@ describe('profiling charts', () => { describe('flamegraph chart', () => { // @reactVersion >= 16.9 it('should contain valid data', () => { - const Parent = (_: {||}) => { + const Parent = (_: {}) => { Scheduler.unstable_advanceTime(10); return ( @@ -211,7 +211,7 @@ describe('profiling charts', () => { describe('ranked chart', () => { // @reactVersion >= 16.9 it('should contain valid data', () => { - const Parent = (_: {||}) => { + const Parent = (_: {}) => { Scheduler.unstable_advanceTime(10); return ( diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index e9e30de830a1f..d49f3f3e1b8ea 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -51,7 +51,7 @@ describe('Store component filters', () => { // @reactVersion >= 16.0 it('should support filtering by element type', () => { - class ClassComponent extends React.Component<{|children: React$Node|}> { + class ClassComponent extends React.Component<{children: React$Node}> { render() { return
{this.props.children}
; } diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js index 6a7921489c597..fee2847f05e6d 100644 --- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js +++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js @@ -25,7 +25,7 @@ export default function setupNativeStyleEditor( ) { bridge.addListener( 'NativeStyleEditor_measure', - ({id, rendererID}: {|id: number, rendererID: RendererID|}) => { + ({id, rendererID}: {id: number, rendererID: RendererID}) => { measureStyle(agent, bridge, resolveNativeStyle, id, rendererID); }, ); @@ -38,13 +38,13 @@ export default function setupNativeStyleEditor( oldName, newName, value, - }: {| + }: { id: number, rendererID: RendererID, oldName: string, newName: string, value: string, - |}) => { + }) => { renameStyle(agent, id, rendererID, oldName, newName, value); setTimeout(() => measureStyle(agent, bridge, resolveNativeStyle, id, rendererID), @@ -59,12 +59,12 @@ export default function setupNativeStyleEditor( rendererID, name, value, - }: {| + }: { id: number, rendererID: number, name: string, value: string, - |}) => { + }) => { setStyle(agent, id, rendererID, name, value); setTimeout(() => measureStyle(agent, bridge, resolveNativeStyle, id, rendererID), diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js index f20d0d016d850..51ac03051d448 100644 --- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js +++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js @@ -7,14 +7,14 @@ * @flow */ -export type BoxStyle = $ReadOnly<{| +export type BoxStyle = $ReadOnly<{ bottom: number, left: number, right: number, top: number, -|}>; +}>; -export type Layout = {| +export type Layout = { x: number, y: number, width: number, @@ -23,12 +23,12 @@ export type Layout = {| top: number, margin: BoxStyle, padding: BoxStyle, -|}; +}; export type Style = Object; -export type StyleAndLayout = {| +export type StyleAndLayout = { id: number, style: Style | null, layout: Layout | null, -|}; +}; diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 222a883ce7619..0d0fb5e81d7f8 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -53,102 +53,102 @@ const debug = (methodName, ...args) => { } }; -type ElementAndRendererID = {| +type ElementAndRendererID = { id: number, rendererID: number, -|}; +}; -type StoreAsGlobalParams = {| +type StoreAsGlobalParams = { count: number, id: number, path: Array, rendererID: number, -|}; +}; -type CopyElementParams = {| +type CopyElementParams = { id: number, path: Array, rendererID: number, -|}; +}; -type InspectElementParams = {| +type InspectElementParams = { forceFullData: boolean, id: number, path: Array | null, rendererID: number, requestID: number, -|}; +}; -type OverrideHookParams = {| +type OverrideHookParams = { id: number, hookID: number, path: Array, rendererID: number, wasForwarded?: boolean, value: any, -|}; +}; -type SetInParams = {| +type SetInParams = { id: number, path: Array, rendererID: number, wasForwarded?: boolean, value: any, -|}; +}; type PathType = 'props' | 'hooks' | 'state' | 'context'; -type DeletePathParams = {| +type DeletePathParams = { type: PathType, hookID?: ?number, id: number, path: Array, rendererID: number, -|}; +}; -type RenamePathParams = {| +type RenamePathParams = { type: PathType, hookID?: ?number, id: number, oldPath: Array, newPath: Array, rendererID: number, -|}; +}; -type OverrideValueAtPathParams = {| +type OverrideValueAtPathParams = { type: PathType, hookID?: ?number, id: number, path: Array, rendererID: number, value: any, -|}; +}; -type OverrideErrorParams = {| +type OverrideErrorParams = { id: number, rendererID: number, forceError: boolean, -|}; +}; -type OverrideSuspenseParams = {| +type OverrideSuspenseParams = { id: number, rendererID: number, forceFallback: boolean, -|}; +}; -type PersistedSelection = {| +type PersistedSelection = { rendererID: number, path: Array, -|}; +}; -export default class Agent extends EventEmitter<{| +export default class Agent extends EventEmitter<{ hideNativeHighlight: [], showNativeHighlight: [NativeType], startInspectingNative: [], stopInspectingNative: [], shutdown: [], traceUpdates: [Set], -|}> { +}> { _bridge: BackendBridge; _isProfiling: boolean = false; _recordChangeDescriptions: boolean = false; @@ -254,7 +254,7 @@ export default class Agent extends EventEmitter<{| return this._rendererInterfaces; } - clearErrorsAndWarnings = ({rendererID}: {|rendererID: RendererID|}) => { + clearErrorsAndWarnings = ({rendererID}: {rendererID: RendererID}) => { const renderer = this._rendererInterfaces[rendererID]; if (renderer == null) { console.warn(`Invalid renderer id "${rendererID}"`); @@ -355,7 +355,7 @@ export default class Agent extends EventEmitter<{| this._bridge.send('bridgeProtocol', currentBridgeProtocol); }; - getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => { + getProfilingData = ({rendererID}: {rendererID: RendererID}) => { const renderer = this._rendererInterfaces[rendererID]; if (renderer == null) { console.warn(`Invalid renderer id "${rendererID}"`); @@ -676,13 +676,13 @@ export default class Agent extends EventEmitter<{| showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, browserTheme, - }: {| + }: { appendComponentStack: boolean, breakOnConsoleErrors: boolean, showInlineWarningsAndErrors: boolean, hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme, - |}) => { + }) => { // If the frontend preference has change, // or in the case of React Native- if the backend is just finding out the preference- // then reinstall the console overrides. diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 03c36c14dcf79..f5718d558f3ff 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -69,12 +69,12 @@ type OnErrorOrWarning = ( const injectedRenderers: Map< ReactRenderer, - {| + { currentDispatcherRef: CurrentDispatcherRef, getCurrentFiber: () => Fiber | null, onErrorOrWarning: ?OnErrorOrWarning, workTagMap: WorkTagMap, - |}, + }, > = new Map(); let targetConsole: Object = console; @@ -151,13 +151,13 @@ export function patch({ showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, browserTheme, -}: {| +}: { appendComponentStack: boolean, breakOnConsoleErrors: boolean, showInlineWarningsAndErrors: boolean, hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme, -|}): void { +}): void { // Settings may change after we've patched the console. // Using a shared ref allows the patch function to read the latest values. consoleSettingsRef.appendComponentStack = appendComponentStack; diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index 2110545d8a663..bd08fef3505af 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -93,11 +93,11 @@ export function setPerformanceMock_ONLY_FOR_TESTING( export type GetTimelineData = () => TimelineData | null; export type ToggleProfilingStatus = (value: boolean) => void; -type Response = {| +type Response = { getTimelineData: GetTimelineData, profilingHooks: DevToolsProfilingHooks, toggleProfilingStatus: ToggleProfilingStatus, -|}; +}; export function createProfilingHooks({ getDisplayNameForFiber, @@ -106,14 +106,14 @@ export function createProfilingHooks({ workTagMap, currentDispatcherRef, reactVersion, -}: {| +}: { getDisplayNameForFiber: (fiber: Fiber) => string | null, getIsProfiling: () => boolean, getLaneLabelMap?: () => Map | null, currentDispatcherRef?: CurrentDispatcherRef, workTagMap: WorkTagMap, reactVersion: string, -|}): Response { +}): Response { let currentBatchUID: BatchUID = 0; let currentReactComponentMeasure: ReactComponentMeasure | null = null; let currentReactMeasuresStack: Array = []; diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index a123d96262c79..7ef225dee1c3c 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -126,23 +126,23 @@ import type { type getDisplayNameForFiberType = (fiber: Fiber) => string | null; type getTypeSymbolType = (type: any) => symbol | number; -type ReactPriorityLevelsType = {| +type ReactPriorityLevelsType = { ImmediatePriority: number, UserBlockingPriority: number, NormalPriority: number, LowPriority: number, IdlePriority: number, NoPriority: number, -|}; +}; -type ReactTypeOfSideEffectType = {| +type ReactTypeOfSideEffectType = { DidCapture: number, NoFlags: number, PerformedWork: number, Placement: number, Incomplete: number, Hydrating: number, -|}; +}; function getFiberFlags(fiber: Fiber): number { // The name of this field changed from "effectTag" to "flags" @@ -157,14 +157,14 @@ const getCurrentTime = export function getInternalReactConstants( version: string, -): {| +): { getDisplayNameForFiber: getDisplayNameForFiberType, getTypeSymbol: getTypeSymbolType, ReactPriorityLevels: ReactPriorityLevelsType, ReactTypeOfSideEffect: ReactTypeOfSideEffectType, ReactTypeOfWork: WorkTagMap, StrictModeBits: number, -|} { +} { const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = { DidCapture: 0b10000000, NoFlags: 0b00, @@ -1595,10 +1595,10 @@ export function attach( type OperationsArray = Array; - type StringTableEntry = {| + type StringTableEntry = { encodedString: Array, id: number, - |}; + }; const pendingOperations: OperationsArray = []; const pendingRealUnmountedIDs: Array = []; @@ -3950,7 +3950,7 @@ export function attach( } } - type CommitProfilingData = {| + type CommitProfilingData = { changeDescriptions: Map | null, commitTime: number, durations: Array, @@ -3959,7 +3959,7 @@ export function attach( passiveEffectDuration: number | null, priorityLevel: string | null, updaters: Array | null, - |}; + }; type CommitProfilingMetadataMap = Map>; type DisplayNamesByRootID = Map; diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index be71a816d6327..1830edfef4055 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -26,7 +26,7 @@ export type WorkTag = number; export type WorkFlags = number; export type ExpirationTime = number; -export type WorkTagMap = {| +export type WorkTagMap = { CacheComponent: WorkTag, ClassComponent: WorkTag, ContextConsumer: WorkTag, @@ -55,22 +55,22 @@ export type WorkTagMap = {| SuspenseListComponent: WorkTag, TracingMarkerComponent: WorkTag, YieldComponent: WorkTag, -|}; +}; // TODO: If it's useful for the frontend to know which types of data an Element has // (e.g. props, state, context, hooks) then we could add a bitmask field for this // to keep the number of attributes small. -export type FiberData = {| +export type FiberData = { key: string | null, displayName: string | null, type: ElementType, -|}; +}; export type NativeType = Object; export type RendererID = number; type Dispatcher = any; -export type CurrentDispatcherRef = {|current: null | Dispatcher|}; +export type CurrentDispatcherRef = {current: null | Dispatcher}; export type GetDisplayNameForFiberID = ( id: number, @@ -158,16 +158,16 @@ export type ReactRenderer = { ... }; -export type ChangeDescription = {| +export type ChangeDescription = { context: Array | boolean | null, didHooksChange: boolean, isFirstMount: boolean, props: Array | null, state: Array | null, hooks?: Array | null, -|}; +}; -export type CommitDataBackend = {| +export type CommitDataBackend = { // Tuple of fiber ID and change description changeDescriptions: Array<[number, ChangeDescription]> | null, duration: number, @@ -182,48 +182,48 @@ export type CommitDataBackend = {| priorityLevel: string | null, timestamp: number, updaters: Array | null, -|}; +}; -export type ProfilingDataForRootBackend = {| +export type ProfilingDataForRootBackend = { commitData: Array, displayName: string, // Tuple of Fiber ID and base duration initialTreeBaseDurations: Array<[number, number]>, rootID: number, -|}; +}; // Profiling data collected by the renderer interface. // This information will be passed to the frontend and combined with info it collects. -export type ProfilingDataBackend = {| +export type ProfilingDataBackend = { dataForRoots: Array, rendererID: number, timelineData: TimelineDataExport | null, -|}; +}; -export type PathFrame = {| +export type PathFrame = { key: string | null, index: number, displayName: string | null, -|}; +}; -export type PathMatch = {| +export type PathMatch = { id: number, isFullMatch: boolean, -|}; +}; -export type SerializedElement = {| +export type SerializedElement = { displayName: string | null, id: number, key: number | string | null, type: ElementType, -|}; +}; -export type OwnersList = {| +export type OwnersList = { id: number, owners: Array | null, -|}; +}; -export type InspectedElement = {| +export type InspectedElement = { id: number, displayName: string | null, @@ -278,48 +278,48 @@ export type InspectedElement = {| // UI plugins/visualizations for the inspected element. plugins: Plugins, -|}; +}; export const InspectElementErrorType = 'error'; export const InspectElementFullDataType = 'full-data'; export const InspectElementNoChangeType = 'no-change'; export const InspectElementNotFoundType = 'not-found'; -export type InspectElementError = {| +export type InspectElementError = { id: number, responseID: number, type: 'error', errorType: 'user' | 'unknown-hook' | 'uncaught', message: string, stack?: string, -|}; +}; -export type InspectElementFullData = {| +export type InspectElementFullData = { id: number, responseID: number, type: 'full-data', value: InspectedElement, -|}; +}; -export type InspectElementHydratedPath = {| +export type InspectElementHydratedPath = { id: number, responseID: number, type: 'hydrated-path', path: Array, value: any, -|}; +}; -export type InspectElementNoChange = {| +export type InspectElementNoChange = { id: number, responseID: number, type: 'no-change', -|}; +}; -export type InspectElementNotFound = {| +export type InspectElementNotFound = { id: number, responseID: number, type: 'not-found', -|}; +}; export type InspectedElementPayload = | InspectElementError @@ -328,10 +328,10 @@ export type InspectedElementPayload = | InspectElementNoChange | InspectElementNotFound; -export type InstanceAndStyle = {| +export type InstanceAndStyle = { instance: Object | null, style: Object | null, -|}; +}; type Type = 'props' | 'hooks' | 'state' | 'context'; @@ -411,7 +411,7 @@ export type Handler = (data: any) => void; // Renderers use these APIs to report profiling data to DevTools at runtime. // They get passed from the DevTools backend to the reconciler during injection. -export type DevToolsProfilingHooks = {| +export type DevToolsProfilingHooks = { // Scheduling methods: markRenderScheduled: (lane: Lane) => void, markStateUpdateScheduled: (fiber: Fiber, lane: Lane) => void, @@ -449,7 +449,7 @@ export type DevToolsProfilingHooks = {| markComponentPassiveEffectMountStopped: () => void, markComponentPassiveEffectUnmountStarted: (fiber: Fiber) => void, markComponentPassiveEffectUnmountStopped: () => void, -|}; +}; export type DevToolsHook = { listeners: {[key: string]: Array, ...}, 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 b9bfae87a86d3..0b4dc5e94c2ed 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -12,7 +12,7 @@ import {getElementDimensions, getNestedBoundingClientRect} from '../utils'; import type {Rect} from '../utils'; import type Agent from 'react-devtools-shared/src/backend/agent'; -type Box = {|top: number, left: number, width: number, height: number|}; +type Box = {top: number, left: number, width: number, height: number}; const assign = Object.assign; diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js index 831b47385d8ea..4927d4a3cb221 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js +++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js @@ -30,12 +30,12 @@ const getCurrentTime = ? () => performance.now() : () => Date.now(); -export type Data = {| +export type Data = { count: number, expirationTime: number, lastMeasuredAt: number, rect: Rect | null, -|}; +}; const nodeToData: Map = new Map(); diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js index adf0c5e8b0911..efa56cfcaddf4 100644 --- a/packages/react-devtools-shared/src/backendAPI.js +++ b/packages/react-devtools-shared/src/backendAPI.js @@ -28,10 +28,10 @@ import type { export function clearErrorsAndWarnings({ bridge, store, -}: {| +}: { bridge: FrontendBridge, store: Store, -|}): void { +}): void { store.rootIDToRendererID.forEach(rendererID => { bridge.send('clearErrorsAndWarnings', {rendererID}); }); @@ -41,11 +41,11 @@ export function clearErrorsForElement({ bridge, id, rendererID, -}: {| +}: { bridge: FrontendBridge, id: number, rendererID: number, -|}): void { +}): void { bridge.send('clearErrorsForFiberID', { rendererID, id, @@ -56,11 +56,11 @@ export function clearWarningsForElement({ bridge, id, rendererID, -}: {| +}: { bridge: FrontendBridge, id: number, rendererID: number, -|}): void { +}): void { bridge.send('clearWarningsForFiberID', { rendererID, id, @@ -72,12 +72,12 @@ export function copyInspectedElementPath({ id, path, rendererID, -}: {| +}: { bridge: FrontendBridge, id: number, path: Array, rendererID: number, -|}): void { +}): void { bridge.send('copyElementPath', { id, path, @@ -91,13 +91,13 @@ export function inspectElement({ id, path, rendererID, -}: {| +}: { bridge: FrontendBridge, forceFullData: boolean, id: number, path: Array | null, rendererID: number, -|}): Promise { +}): Promise { const requestID = requestCounter++; const promise = getPromiseForRequestID( requestID, @@ -124,12 +124,12 @@ export function storeAsGlobal({ id, path, rendererID, -}: {| +}: { bridge: FrontendBridge, id: number, path: Array, rendererID: number, -|}): void { +}): void { bridge.send('storeAsGlobal', { count: storeAsGlobalCount++, id, diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 0e5f837ecbc78..fe6ba4407a924 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -24,7 +24,7 @@ const BATCH_DURATION = 100; // This message specifies the version of the DevTools protocol currently supported by the backend, // as well as the earliest NPM version (e.g. "4.13.0") that protocol is supported by on the frontend. // This enables an older frontend to display an upgrade message to users for a newer, unsupported backend. -export type BridgeProtocol = {| +export type BridgeProtocol = { // Version supported by the current frontend/backend. version: number, @@ -32,7 +32,7 @@ export type BridgeProtocol = {| // Note that 'maxNpmVersion' is only set when the version is bumped. minNpmVersion: string, maxNpmVersion: string | null, -|}; +}; // Bump protocol version whenever a backwards breaking change is made // in the messages sent between BackendBridge and FrontendBridge. @@ -73,121 +73,121 @@ export const BRIDGE_PROTOCOL: Array = [ export const currentBridgeProtocol: BridgeProtocol = BRIDGE_PROTOCOL[BRIDGE_PROTOCOL.length - 1]; -type ElementAndRendererID = {|id: number, rendererID: RendererID|}; +type ElementAndRendererID = {id: number, rendererID: RendererID}; -type Message = {| +type Message = { event: string, payload: any, -|}; +}; -type HighlightElementInDOM = {| +type HighlightElementInDOM = { ...ElementAndRendererID, displayName: string | null, hideAfterTimeout: boolean, openNativeElementsPanel: boolean, scrollIntoView: boolean, -|}; +}; -type OverrideValue = {| +type OverrideValue = { ...ElementAndRendererID, path: Array, wasForwarded?: boolean, value: any, -|}; +}; -type OverrideHookState = {| +type OverrideHookState = { ...OverrideValue, hookID: number, -|}; +}; type PathType = 'props' | 'hooks' | 'state' | 'context'; -type DeletePath = {| +type DeletePath = { ...ElementAndRendererID, type: PathType, hookID?: ?number, path: Array, -|}; +}; -type RenamePath = {| +type RenamePath = { ...ElementAndRendererID, type: PathType, hookID?: ?number, oldPath: Array, newPath: Array, -|}; +}; -type OverrideValueAtPath = {| +type OverrideValueAtPath = { ...ElementAndRendererID, type: PathType, hookID?: ?number, path: Array, value: any, -|}; +}; -type OverrideError = {| +type OverrideError = { ...ElementAndRendererID, forceError: boolean, -|}; +}; -type OverrideSuspense = {| +type OverrideSuspense = { ...ElementAndRendererID, forceFallback: boolean, -|}; +}; -type CopyElementPathParams = {| +type CopyElementPathParams = { ...ElementAndRendererID, path: Array, -|}; +}; -type ViewAttributeSourceParams = {| +type ViewAttributeSourceParams = { ...ElementAndRendererID, path: Array, -|}; +}; -type InspectElementParams = {| +type InspectElementParams = { ...ElementAndRendererID, forceFullData: boolean, path: Array | null, requestID: number, -|}; +}; -type StoreAsGlobalParams = {| +type StoreAsGlobalParams = { ...ElementAndRendererID, count: number, path: Array, -|}; +}; -type NativeStyleEditor_RenameAttributeParams = {| +type NativeStyleEditor_RenameAttributeParams = { ...ElementAndRendererID, oldName: string, newName: string, value: string, -|}; +}; -type NativeStyleEditor_SetValueParams = {| +type NativeStyleEditor_SetValueParams = { ...ElementAndRendererID, name: string, value: string, -|}; +}; -type UpdateConsolePatchSettingsParams = {| +type UpdateConsolePatchSettingsParams = { appendComponentStack: boolean, breakOnConsoleErrors: boolean, showInlineWarningsAndErrors: boolean, hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme, -|}; +}; -type SavedPreferencesParams = {| +type SavedPreferencesParams = { appendComponentStack: boolean, breakOnConsoleErrors: boolean, componentFilters: Array, showInlineWarningsAndErrors: boolean, hideConsoleLogsInStrictMode: boolean, -|}; +}; -export type BackendEvents = {| +export type BackendEvents = { backendVersion: [string], bridgeProtocol: [BridgeProtocol], extensionBackendInitialized: [], @@ -211,13 +211,13 @@ export type BackendEvents = {| // React Native style editor plug-in. isNativeStyleEditorSupported: [ - {|isSupported: boolean, validAttributes: ?$ReadOnlyArray|}, + {isSupported: boolean, validAttributes: ?$ReadOnlyArray}, ], NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload], -|}; +}; -type FrontendEvents = {| - clearErrorsAndWarnings: [{|rendererID: RendererID|}], +type FrontendEvents = { + clearErrorsAndWarnings: [{rendererID: RendererID}], clearErrorsForFiberID: [ElementAndRendererID], clearNativeElementHighlight: [], clearWarningsForFiberID: [ElementAndRendererID], @@ -226,7 +226,7 @@ type FrontendEvents = {| getBackendVersion: [], getBridgeProtocol: [], getOwnersList: [ElementAndRendererID], - getProfilingData: [{|rendererID: RendererID|}], + getProfilingData: [{rendererID: RendererID}], getProfilingStatus: [], highlightNativeElement: [HighlightElementInDOM], inspectElement: [InspectElementParams], @@ -270,15 +270,15 @@ type FrontendEvents = {| overrideHookState: [OverrideHookState], overrideProps: [OverrideValue], overrideState: [OverrideValue], -|}; +}; class Bridge< OutgoingEvents: Object, IncomingEvents: Object, -> extends EventEmitter<{| +> extends EventEmitter<{ ...IncomingEvents, ...OutgoingEvents, -|}> { +}> { _isShutdown: boolean = false; _messageQueue: Array = []; _timeoutID: TimeoutID | null = null; diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js index 90be1883612ab..e29a33bb32610 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js @@ -48,10 +48,10 @@ const HIDDEN_STATE = { pageY: 0, }; -type Props = {| +type Props = { children: (data: Object) => React$Node, id: string, -|}; +}; export default function ContextMenu({children, id}: Props) { const {hideMenu, registerMenu} = useContext( diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js index f56bad1110b85..df313307b15f8 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js @@ -15,11 +15,11 @@ import styles from './ContextMenuItem.css'; import type {RegistryContextType} from './Contexts'; -type Props = {| +type Props = { children: React$Node, onClick: () => void, title: string, -|}; +}; export default function ContextMenuItem({children, onClick, title}: Props) { const {hideMenu} = useContext(RegistryContext); diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js index e2caf6eefcaa6..89f823b132842 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js @@ -9,7 +9,7 @@ import {createContext} from 'react'; -export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void; +export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void; export type HideFn = () => void; export type OnChangeFn = boolean => void; @@ -38,13 +38,13 @@ function showMenu({ onChange, pageX, pageY, -}: {| +}: { data: Object, id: string, onChange?: OnChangeFn, pageX: number, pageY: number, -|}) { +}) { const showFn = idToShowFnMap.get(id); if (typeof showFn === 'function') { // Prevent open menus from being left hanging. @@ -75,11 +75,11 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) { }; } -export type RegistryContextType = {| +export type RegistryContextType = { hideMenu: typeof hideMenu, showMenu: typeof showMenu, registerMenu: typeof registerMenu, -|}; +}; export const RegistryContext = createContext({ hideMenu, diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js index 3493c55615706..1a457f0de2c14 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js @@ -18,12 +18,12 @@ export default function useContextMenu({ id, onChange, ref, -}: {| +}: { data: Object, id: string, onChange?: OnChangeFn, - ref: {|current: ElementRef<*> | null|}, -|}) { + ref: {current: ElementRef<*> | null}, +}) { const {showMenu} = useContext(RegistryContext); useEffect(() => { diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js index 1aa84d2da53f1..b74e958cefa77 100644 --- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js +++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js @@ -21,11 +21,11 @@ import type { SnapshotNode, } from './views/Profiler/types'; -export default class ProfilerStore extends EventEmitter<{| +export default class ProfilerStore extends EventEmitter<{ isProcessingData: [], isProfiling: [], profilingData: [], -|}> { +}> { _bridge: FrontendBridge; // Suspense cache for lazily calculating derived profiling data. diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js index 96e236b143d6c..6384db8d1c628 100644 --- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js +++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js @@ -36,10 +36,10 @@ export default class ProfilingCache { getCommitTree = ({ commitIndex, rootID, - }: {| + }: { commitIndex: number, rootID: number, - |}) => + }) => getCommitTree({ commitIndex, profilerStore: this._profilerStore, @@ -49,10 +49,10 @@ export default class ProfilingCache { getFiberCommits = ({ fiberID, rootID, - }: {| + }: { fiberID: number, rootID: number, - |}): Array => { + }): Array => { const cachedFiberCommits = this._fiberCommits.get(fiberID); if (cachedFiberCommits != null) { return cachedFiberCommits; @@ -75,11 +75,11 @@ export default class ProfilingCache { commitIndex, commitTree, rootID, - }: {| + }: { commitIndex: number, commitTree: CommitTree, rootID: number, - |}): FlamegraphChartData => + }): FlamegraphChartData => getFlamegraphChartData({ commitIndex, commitTree, @@ -91,11 +91,11 @@ export default class ProfilingCache { commitIndex, commitTree, rootID, - }: {| + }: { commitIndex: number, commitTree: CommitTree, rootID: number, - |}): RankedChartData => + }): RankedChartData => getRankedChartData({ commitIndex, commitTree, diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js index c98b0566d8819..acbbfff00b997 100644 --- a/packages/react-devtools-shared/src/devtools/cache.js +++ b/packages/react-devtools-shared/src/devtools/cache.js @@ -28,20 +28,20 @@ export type {Thenable}; type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...}; -type PendingResult = {| +type PendingResult = { status: 0, value: Suspender, -|}; +}; -type ResolvedResult = {| +type ResolvedResult = { status: 1, value: Value, -|}; +}; -type RejectedResult = {| +type RejectedResult = { status: 2, value: mixed, -|}; +}; type Result = PendingResult | ResolvedResult | RejectedResult; diff --git a/packages/react-devtools-shared/src/devtools/index.js b/packages/react-devtools-shared/src/devtools/index.js index a15999478f1d9..12d8327bfef4f 100644 --- a/packages/react-devtools-shared/src/devtools/index.js +++ b/packages/react-devtools-shared/src/devtools/index.js @@ -9,10 +9,10 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -type Shell = {| +type Shell = { connect: (callback: Function) => void, onReload: (reloadFn: Function) => void, -|}; +}; export function initDevTools(shell: Shell) { shell.connect((bridge: FrontendBridge) => { diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 56f1131205c11..4c9131c896785 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -62,9 +62,9 @@ const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY = const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY = 'React::DevTools::recordChangeDescriptions'; -type ErrorAndWarningTuples = Array<{|id: number, index: number|}>; +type ErrorAndWarningTuples = Array<{id: number, index: number}>; -type Config = {| +type Config = { checkBridgeProtocolCompatibility?: boolean, isProfiling?: boolean, supportsNativeInspection?: boolean, @@ -72,20 +72,20 @@ type Config = {| supportsReloadAndProfile?: boolean, supportsTimeline?: boolean, supportsTraceUpdates?: boolean, -|}; +}; -export type Capabilities = {| +export type Capabilities = { supportsBasicProfiling: boolean, hasOwnerMetadata: boolean, supportsStrictMode: boolean, supportsTimeline: boolean, -|}; +}; /** * The store is the single source of truth for updates from the backend. * ContextProviders can subscribe to the Store for specific things they want to provide. */ -export default class Store extends EventEmitter<{| +export default class Store extends EventEmitter<{ backendVersion: [], collapseNodesByDefault: [], componentFilters: [], @@ -99,7 +99,7 @@ export default class Store extends EventEmitter<{| supportsReloadAndProfile: [], unsupportedBridgeProtocolDetected: [], unsupportedRendererVersionDetected: [], -|}> { +}> { // If the backend version is new enough to report its (NPM) version, this is it. // This version may be displayed by the frontend for debugging purposes. _backendVersion: string | null = null; @@ -119,7 +119,7 @@ export default class Store extends EventEmitter<{| // Map of ID to number of recorded error and warning message IDs. _errorsAndWarnings: Map< number, - {|errorCount: number, warningCount: number|}, + {errorCount: number, warningCount: number}, > = new Map(); // At least one of the injected renderers contains (DEV only) owner metadata. @@ -553,7 +553,7 @@ export default class Store extends EventEmitter<{| } // Returns a tuple of [id, index] - getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> { + getElementsWithErrorsAndWarnings(): Array<{id: number, index: number}> { if (this._cachedErrorAndWarningTuples !== null) { return this._cachedErrorAndWarningTuples; } else { @@ -586,7 +586,7 @@ export default class Store extends EventEmitter<{| getErrorAndWarningCountForElementID( id: number, - ): {|errorCount: number, warningCount: number|} { + ): {errorCount: number, warningCount: number} { return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0}; } @@ -871,10 +871,10 @@ export default class Store extends EventEmitter<{| onBridgeNativeStyleEditorSupported = ({ isSupported, validAttributes, - }: {| + }: { isSupported: boolean, validAttributes: ?$ReadOnlyArray, - |}) => { + }) => { this._isNativeStyleEditorSupported = isSupported; this._nativeStyleEditorValidAttributes = validAttributes || null; diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js index b384018671d92..2d0e3aafb146e 100644 --- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js +++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js @@ -41,10 +41,10 @@ export type IconType = | 'view-dom' | 'view-source'; -type Props = {| +type Props = { className?: string, type: IconType, -|}; +}; export default function ButtonIcon({className = '', type}: Props) { let pathData = null; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js index 25352ee39a536..5b342f549030d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js @@ -13,12 +13,12 @@ import styles from './Badge.css'; import type {ElementType} from 'react-devtools-shared/src/types'; -type Props = {| +type Props = { className?: string, hocDisplayNames: Array | null, type: ElementType, children: React$Node, -|}; +}; export default function Badge({ className, 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 a43c4661b3f57..292d69e36afd5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js @@ -13,7 +13,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext'; import SearchInput from '../SearchInput'; -type Props = {||}; +type Props = {}; export default function ComponentSearchInput(props: Props) { const {searchIndex, searchResults, searchText} = useContext(TreeStateContext); 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 712afdd987287..81ab6296ddf6c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js @@ -41,18 +41,18 @@ type ResizeActionType = | 'ACTION_SET_HORIZONTAL_PERCENTAGE' | 'ACTION_SET_VERTICAL_PERCENTAGE'; -type ResizeAction = {| +type ResizeAction = { type: ResizeActionType, payload: any, -|}; +}; -type ResizeState = {| +type ResizeState = { horizontalPercentage: number, isResizing: boolean, verticalPercentage: number, -|}; +}; -function Components(_: {||}) { +function Components(_: {}) { const wrapperElementRef = useRef(null); const resizeElementRef = useRef(null); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js index a8859cd4adc2d..766411fa8ec5a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js @@ -18,7 +18,7 @@ type OverrideNameFn = ( newName: Array, ) => void; -type EditableNameProps = {| +type EditableNameProps = { allowEmpty?: boolean, allowWhiteSpace?: boolean, autoFocus?: boolean, @@ -27,7 +27,7 @@ type EditableNameProps = {| overrideName: OverrideNameFn, path: Array, type: Type, -|}; +}; export default function EditableName({ allowEmpty = false, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js index 82afe03c2ba46..6f33b2f0f6122 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js @@ -14,12 +14,12 @@ import {useEditableValue} from '../hooks'; type OverrideValueFn = (path: Array, value: any) => void; -type EditableValueProps = {| +type EditableValueProps = { className?: string, overrideValue: OverrideValueFn, path: Array, value: any, -|}; +}; export default function EditableValue({ className = '', 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 1dab6f3f7db70..6f21512fadd43 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -64,10 +64,10 @@ export default function Element({data, index, style}: Props) { }), [store, element], ); - const {errorCount, warningCount} = useSubscription<{| + const {errorCount, warningCount} = useSubscription<{ errorCount: number, warningCount: number, - |}>(errorsAndWarningsSubscription); + }>(errorsAndWarningsSubscription); const handleDoubleClick = () => { if (id !== null) { @@ -225,10 +225,10 @@ const swallowDoubleClick = event => { event.stopPropagation(); }; -type ExpandCollapseToggleProps = {| +type ExpandCollapseToggleProps = { element: ElementType, store: Store, -|}; +}; function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) { const {children, id, isCollapsed} = element; @@ -260,10 +260,10 @@ function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) { ); } -type DisplayNameProps = {| +type DisplayNameProps = { displayName: string | null, id: number, -|}; +}; function DisplayName({displayName, id}: DisplayNameProps) { const {searchIndex, searchResults, searchText} = useContext(TreeStateContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js index 1851c75e0391e..2cc19850d916a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js @@ -13,11 +13,11 @@ import ButtonIcon from '../ButtonIcon'; import styles from './ExpandCollapseToggle.css'; -type ExpandCollapseToggleProps = {| +type ExpandCollapseToggleProps = { disabled: boolean, isOpen: boolean, setIsOpen: Function, -|}; +}; export default function ExpandCollapseToggle({ disabled, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js index 10398305c9148..ac11356942ead 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js @@ -12,9 +12,9 @@ import styles from './HocBadges.css'; import type {Element} from './types'; -type Props = {| +type Props = { element: Element, -|}; +}; export default function HocBadges({element}: Props) { const {hocDisplayNames} = ((element: any): Element); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 9752f752f8dde..9f19dec3b3bd1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -28,7 +28,7 @@ import styles from './InspectedElement.css'; import type {InspectedElement} from './types'; -export type Props = {||}; +export type Props = {}; // TODO Make edits and deletes also use transition API! diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js index c02dc5bf9263a..02444890df26f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js @@ -47,13 +47,13 @@ type Path = Array; type InspectPathFunction = (path: Path) => void; export type ToggleParseHookNames = () => void; -type Context = {| +type Context = { hookNames: HookNames | null, inspectedElement: InspectedElement | null, inspectPaths: InspectPathFunction, parseHookNames: boolean, toggleParseHookNames: ToggleParseHookNames, -|}; +}; export const InspectedElementContext = createContext( ((null: any): Context), @@ -61,9 +61,9 @@ export const InspectedElementContext = createContext( const POLL_INTERVAL = 1000; -export type Props = {| +export type Props = { children: ReactNodeList, -|}; +}; export function InspectedElementContextController({children}: Props) { const {selectedElementID} = useContext(TreeStateContext); @@ -84,10 +84,10 @@ export function InspectedElementContextController({children}: Props) { // The transition that updates this causes the component to re-render and ask the cache->backend for the new path. // When a path is sent along with an "inspectElement" request, // the backend knows to send its dehydrated data even if the element hasn't updated since the last request. - const [state, setState] = useState<{| + const [state, setState] = useState<{ element: Element | null, path: Array | null, - |}>({ + }>({ element: null, path: null, }); 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 8dfe6310a3609..8091055e390c2 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js @@ -24,12 +24,12 @@ import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; -type Props = {| +type Props = { bridge: FrontendBridge, element: Element, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementContextTree({ bridge, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js index 76b7d96bf72f1..1b4208d44bca6 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js @@ -18,9 +18,9 @@ import {TreeStateContext} from './TreeContext'; import {clearCacheBecauseOfError} from '../../../inspectedElementCache'; import styles from './InspectedElementErrorBoundary.css'; -type WrapperProps = {| +type WrapperProps = { children: React$Node, -|}; +}; export default function InspectedElementErrorBoundaryWrapper({ children, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js index d45126c359f6f..0c338a3231a6b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js @@ -27,11 +27,11 @@ import { import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -type Props = {| +type Props = { bridge: FrontendBridge, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementErrorsAndWarningsTree({ bridge, @@ -115,7 +115,7 @@ export default function InspectedElementErrorsAndWarningsTree({ ); } -type TreeProps = {| +type TreeProps = { badgeClassName: string, actions: React$Node, className: string, @@ -124,7 +124,7 @@ type TreeProps = {| isTransitionPending: boolean, label: string, messageClassName: string, -|}; +}; function Tree({ badgeClassName, @@ -163,12 +163,12 @@ function Tree({ ); } -type ErrorOrWarningViewProps = {| +type ErrorOrWarningViewProps = { badgeClassName: string, className: string, count: number, message: string, -|}; +}; function ErrorOrWarningView({ className, 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 f00d9dd0eb504..ab9fbe633f8e7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js @@ -36,7 +36,7 @@ import type {HookNames} from 'react-devtools-shared/src/types'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; import type {ToggleParseHookNames} from './InspectedElementContext'; -type HooksTreeViewProps = {| +type HooksTreeViewProps = { bridge: FrontendBridge, element: Element, hookNames: HookNames | null, @@ -44,7 +44,7 @@ type HooksTreeViewProps = {| parseHookNames: boolean, store: Store, toggleParseHookNames: ToggleParseHookNames, -|}; +}; export function InspectedElementHooksTree({ bridge, @@ -121,14 +121,14 @@ export function InspectedElementHooksTree({ } } -type InnerHooksTreeViewProps = {| +type InnerHooksTreeViewProps = { element: Element, hookNames: HookNames | null, hooks: HooksTree, id: number, inspectedElement: InspectedElement, path: Array, -|}; +}; export function InnerHooksTreeView({ element, @@ -152,14 +152,14 @@ export function InnerHooksTreeView({ )); } -type HookViewProps = {| +type HookViewProps = { element: Element, hook: HooksNode, hookNames: HookNames | null, id: number, inspectedElement: InspectedElement, path: Array, -|}; +}; function HookView({ element, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js index eeff44d645ea8..6cebd996e48fb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js @@ -23,12 +23,12 @@ import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; -type Props = {| +type Props = { bridge: FrontendBridge, element: Element, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementPropsTree({ bridge, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js index a8658fa3df807..084fc3df70a16 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js @@ -20,12 +20,12 @@ import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; -type Props = {| +type Props = { bridge: FrontendBridge, element: Element, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementStateTree({ bridge, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js index 8045803fd0118..8cf20dbe86c94 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js @@ -18,12 +18,12 @@ import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; -type Props = {| +type Props = { bridge: FrontendBridge, element: Element, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementStyleXPlugin({ bridge, 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 0b0ce0ecac8a9..fdf91dca262e9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js @@ -17,11 +17,11 @@ import styles from './InspectedElementSharedStyles.css'; import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -type Props = {| +type Props = { bridge: FrontendBridge, inspectedElement: InspectedElement, store: Store, -|}; +}; export default function InspectedElementSuspenseToggle({ bridge, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js index 88b9ee63ec9f7..b1ffb6e9cb2c2 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js @@ -45,13 +45,13 @@ import type {ToggleParseHookNames} from './InspectedElementContext'; export type CopyPath = (path: Array) => void; export type InspectPath = (path: Array) => void; -type Props = {| +type Props = { element: Element, hookNames: HookNames | null, inspectedElement: InspectedElement, parseHookNames: boolean, toggleParseHookNames: ToggleParseHookNames, -|}; +}; export default function InspectedElementView({ element, @@ -259,10 +259,10 @@ function formatSourceForDisplay(fileName: string, lineNumber: string) { return `${nameOnly}:${lineNumber}`; } -type SourceProps = {| +type SourceProps = { fileName: string, lineNumber: string, -|}; +}; function Source({fileName, lineNumber}: SourceProps) { const handleCopy = () => copy(`${fileName}:${lineNumber}`); @@ -281,13 +281,13 @@ function Source({fileName, lineNumber}: SourceProps) { ); } -type OwnerViewProps = {| +type OwnerViewProps = { displayName: string, hocDisplayNames: Array | null, id: number, isInStore: boolean, type: ElementType, -|}; +}; function OwnerView({ displayName, 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 5e805baf1f7aa..e1aab1a481ca3 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js @@ -35,7 +35,7 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; type Type = 'props' | 'state' | 'context' | 'hooks'; -type KeyValueProps = {| +type KeyValueProps = { alphaSort: boolean, bridge: FrontendBridge, canDeletePaths: boolean, @@ -54,7 +54,7 @@ type KeyValueProps = {| pathRoot: Type, store: Store, value: any, -|}; +}; export default function KeyValue({ alphaSort, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js index eb3268cefcbb1..212b4640955b9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js @@ -10,9 +10,9 @@ import * as React from 'react'; import styles from './LoadingAnimation.css'; -type Props = {| +type Props = { className?: string, -|}; +}; export default function LoadingAnimation({className = ''}: Props) { return ( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js index da5530d4a39bd..a7f85e5429b0f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js @@ -12,10 +12,10 @@ import styles from './LayoutViewer.css'; import type {Layout} from './types'; -type Props = {| +type Props = { id: number, layout: Layout, -|}; +}; export default function LayoutViewer({id, layout}: Props) { const {height, margin, padding, y, width, x} = layout; 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 ae28dbde84549..6da945ff9397d 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 @@ -24,10 +24,10 @@ import {sanitizeForParse} from '../../../utils'; import type {Style} from './types'; -type Props = {| +type Props = { id: number, style: Style, -|}; +}; type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void; type ChangeValueFn = (name: string, value: any) => void; @@ -96,11 +96,11 @@ export default function StyleEditor({id, style}: Props) { ); } -type NewRowProps = {| +type NewRowProps = { changeAttribute: ChangeAttributeFn, changeValue: ChangeValueFn, validAttributes: $ReadOnlyArray | null, -|}; +}; function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) { const [key, setKey] = useState(0); @@ -141,7 +141,7 @@ function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) { ); } -type RowProps = {| +type RowProps = { attribute: string, attributePlaceholder?: string, changeAttribute: ChangeAttributeFn, @@ -149,7 +149,7 @@ type RowProps = {| validAttributes: $ReadOnlyArray | null, value: any, valuePlaceholder?: string, -|}; +}; function Row({ attribute, @@ -245,14 +245,14 @@ function Row({ ); } -type FieldProps = {| +type FieldProps = { className: string, onChange: (value: any) => void, onReset: () => void, onSubmit: () => void, placeholder?: string, value: any, -|}; +}; function Field({ className, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js index 1157dd4dad986..ae91fbb94e7db 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js @@ -37,18 +37,18 @@ import type { export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null; -type Context = {| +type Context = { getStyleAndLayout: GetStyleAndLayout, -|}; +}; const NativeStyleContext = createContext(((null: any): Context)); NativeStyleContext.displayName = 'NativeStyleContext'; type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void; -type InProgressRequest = {| +type InProgressRequest = { promise: Thenable, resolveFn: ResolveFn, -|}; +}; const inProgressRequests: WeakMap = new WeakMap(); const resource: Resource< @@ -75,9 +75,9 @@ const resource: Resource< {useWeakMap: true}, ); -type Props = {| +type Props = { children: React$Node, -|}; +}; function NativeStyleContextController({children}: Props) { const bridge = useContext(BridgeContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js index 521a0642cac90..71a4abac99d01 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js @@ -16,7 +16,7 @@ import LayoutViewer from './LayoutViewer'; import StyleEditor from './StyleEditor'; import {TreeStateContext} from '../TreeContext'; -type Props = {||}; +type Props = {}; export default function NativeStyleEditorWrapper(_: Props) { const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js index 8a24e808a1e4f..58b922a940e98 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js @@ -14,7 +14,7 @@ import type { export type Layout = LayoutBackend; export type Style = StyleBackend; -export type StyleAndLayout = {| +export type StyleAndLayout = { layout: LayoutBackend | null, style: StyleBackend | null, -|}; +}; 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 cf931e5fea454..d341d5e0a868b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js @@ -18,7 +18,7 @@ import styles from './NewArrayValue.css'; import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -type Props = {| +type Props = { bridge: FrontendBridge, depth: number, hidden: boolean, @@ -28,7 +28,7 @@ type Props = {| path: Array, store: Store, type: 'props' | 'context' | 'hooks' | 'state', -|}; +}; export default function NewArrayValue({ bridge, 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 a5591f0876cb1..f986ad2e3de6c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js @@ -18,7 +18,7 @@ import styles from './NewKeyValue.css'; import type {InspectedElement} from './types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -type Props = {| +type Props = { bridge: FrontendBridge, depth: number, hidden: boolean, @@ -27,7 +27,7 @@ type Props = {| path: Array, store: Store, type: 'props' | 'state' | 'hooks' | 'context', -|}; +}; export default function NewKeyValue({ bridge, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js index 83e9b37708b0d..cbd0497f544ee 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -27,10 +27,10 @@ const OwnersListContext = createContext(((null: any): Context)); OwnersListContext.displayName = 'OwnersListContext'; type ResolveFn = (ownersList: Array | null) => void; -type InProgressRequest = {| +type InProgressRequest = { promise: Thenable>, resolveFn: ResolveFn, -|}; +}; const inProgressRequests: WeakMap = new WeakMap(); const resource: Resource< @@ -57,9 +57,9 @@ const resource: Resource< {useWeakMap: true}, ); -type Props = {| +type Props = { children: React$Node, -|}; +}; function OwnersListContextController({children}: Props) { const bridge = useContext(BridgeContext); 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 cc9c43fd775ff..379807a595a96 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js @@ -38,23 +38,23 @@ import styles from './OwnersStack.css'; type SelectOwner = (owner: SerializedElement | null) => void; -type ACTION_UPDATE_OWNER_ID = {| +type ACTION_UPDATE_OWNER_ID = { type: 'UPDATE_OWNER_ID', ownerID: number | null, owners: Array, -|}; -type ACTION_UPDATE_SELECTED_INDEX = {| +}; +type ACTION_UPDATE_SELECTED_INDEX = { type: 'UPDATE_SELECTED_INDEX', selectedIndex: number, -|}; +}; type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX; -type State = {| +type State = { ownerID: number | null, owners: Array, selectedIndex: number, -|}; +}; function dialogReducer(state, action) { switch (action.type) { @@ -282,11 +282,11 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) { ); } -type BackToOwnerButtonProps = {| +type BackToOwnerButtonProps = { owners: Array, selectedIndex: number, selectOwner: SelectOwner, -|}; +}; function BackToOwnerButton({ owners, selectedIndex, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js index 1d86d59a3762e..8721a618fd947 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js @@ -17,12 +17,12 @@ import {useSubscription} from '../hooks'; import styles from './SelectedTreeHighlight.css'; -type Data = {| +type Data = { startIndex: number, stopIndex: number, -|}; +}; -export default function SelectedTreeHighlight(_: {||}) { +export default function SelectedTreeHighlight(_: {}) { const {lineHeight} = useContext(SettingsContext); const store = useContext(StoreContext); const treeFocused = useContext(TreeFocusedContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js index 2ac3333d59aeb..76e816f24201a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js @@ -41,15 +41,15 @@ import {logEvent} from 'react-devtools-shared/src/Logger'; // Never indent more than this number of pixels (even if we have the room). const DEFAULT_INDENTATION_SIZE = 12; -export type ItemData = {| +export type ItemData = { numElements: number, isNavigatingWithKeyboard: boolean, lastScrolledIDRef: {current: number | null, ...}, onElementMouseEnter: (id: number) => void, treeFocused: boolean, -|}; +}; -type Props = {||}; +type Props = {}; export default function Tree(props: Props) { const dispatch = useContext(TreeDispatcherContext); @@ -473,8 +473,8 @@ export default function Tree(props: Props) { function updateIndentationSizeVar( innerDiv: HTMLDivElement, cachedChildWidths: WeakMap, - indentationSizeRef: {|current: number|}, - prevListWidthRef: {|current: number|}, + indentationSizeRef: {current: number}, + prevListWidthRef: {current: number}, ): void { const list = ((innerDiv.parentElement: any): HTMLDivElement); const listWidth = list.clientWidth; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js index 0252ac350fd99..1103cc0f6c830 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -42,7 +42,7 @@ import Store from '../../store'; import type {Element} from './types'; -export type StateContext = {| +export type StateContext = { // Tree numElements: number, ownerSubtreeLeafElementID: number | null, @@ -60,70 +60,70 @@ export type StateContext = {| // Inspection element panel inspectedElementID: number | null, -|}; +}; -type ACTION_GO_TO_NEXT_SEARCH_RESULT = {| +type ACTION_GO_TO_NEXT_SEARCH_RESULT = { type: 'GO_TO_NEXT_SEARCH_RESULT', -|}; -type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {| +}; +type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = { type: 'GO_TO_PREVIOUS_SEARCH_RESULT', -|}; -type ACTION_HANDLE_STORE_MUTATION = {| +}; +type ACTION_HANDLE_STORE_MUTATION = { type: 'HANDLE_STORE_MUTATION', payload: [Array, Map], -|}; -type ACTION_RESET_OWNER_STACK = {| +}; +type ACTION_RESET_OWNER_STACK = { type: 'RESET_OWNER_STACK', -|}; -type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = { type: 'SELECT_CHILD_ELEMENT_IN_TREE', -|}; -type ACTION_SELECT_ELEMENT_AT_INDEX = {| +}; +type ACTION_SELECT_ELEMENT_AT_INDEX = { type: 'SELECT_ELEMENT_AT_INDEX', payload: number | null, -|}; -type ACTION_SELECT_ELEMENT_BY_ID = {| +}; +type ACTION_SELECT_ELEMENT_BY_ID = { type: 'SELECT_ELEMENT_BY_ID', payload: number | null, -|}; -type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = { type: 'SELECT_NEXT_ELEMENT_IN_TREE', -|}; -type ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {| +}; +type ACTION_SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = { type: 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE', -|}; -type ACTION_SELECT_NEXT_SIBLING_IN_TREE = {| +}; +type ACTION_SELECT_NEXT_SIBLING_IN_TREE = { type: 'SELECT_NEXT_SIBLING_IN_TREE', -|}; -type ACTION_SELECT_OWNER = {| +}; +type ACTION_SELECT_OWNER = { type: 'SELECT_OWNER', payload: number, -|}; -type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = { type: 'SELECT_PARENT_ELEMENT_IN_TREE', -|}; -type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = { type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE', -|}; -type ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = {| +}; +type ACTION_SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE = { type: 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE', -|}; -type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {| +}; +type ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = { type: 'SELECT_PREVIOUS_SIBLING_IN_TREE', -|}; -type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE = { type: 'SELECT_OWNER_LIST_NEXT_ELEMENT_IN_TREE', -|}; -type ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = {| +}; +type ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = { type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE', -|}; -type ACTION_SET_SEARCH_TEXT = {| +}; +type ACTION_SET_SEARCH_TEXT = { type: 'SET_SEARCH_TEXT', payload: string, -|}; -type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {| +}; +type ACTION_UPDATE_INSPECTED_ELEMENT_ID = { type: 'UPDATE_INSPECTED_ELEMENT_ID', -|}; +}; type Action = | ACTION_GO_TO_NEXT_SEARCH_RESULT @@ -158,7 +158,7 @@ const TreeDispatcherContext = createContext( ); TreeDispatcherContext.displayName = 'TreeDispatcherContext'; -type State = {| +type State = { // Tree numElements: number, ownerSubtreeLeafElementID: number | null, @@ -176,7 +176,7 @@ type State = {| // Inspection element panel inspectedElementID: number | null, -|}; +}; function reduceTreeState(store: Store, state: State, action: Action): State { let { @@ -817,7 +817,7 @@ function reduceSuspenseState( return state; } -type Props = {| +type Props = { children: React$Node, // Used for automated testing @@ -825,7 +825,7 @@ type Props = {| defaultOwnerID?: ?number, defaultSelectedElementID?: ?number, defaultSelectedElementIndex?: ?number, -|}; +}; // TODO Remove TreeContextController wrapper element once global Context.write API exists. function TreeContextController({ diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js index 3dc061c354567..10d20f4a2afd0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js @@ -14,10 +14,10 @@ import type { ViewElementSource, } from 'react-devtools-shared/src/devtools/views/DevTools'; -export type Context = {| +export type Context = { canViewElementSourceFunction: CanViewElementSource | null, viewElementSourceFunction: ViewElementSource | null, -|}; +}; const ViewElementSourceContext = createContext(((null: any): Context)); ViewElementSourceContext.displayName = 'ViewElementSourceContext'; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js index 39d6ccc470874..8ea733440ea65 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js @@ -11,9 +11,9 @@ import {createContext} from 'react'; import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools'; -export type Context = {| +export type Context = { viewUrlSourceFunction: ViewUrlSource | null, -|}; +}; const ViewSourceContext = createContext(((null: any): Context)); ViewSourceContext.displayName = 'ViewSourceContext'; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js index c6789fa1e9ec1..2d1c7e22ea101 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/types.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js @@ -18,7 +18,7 @@ import type {ElementType, Plugins} from 'react-devtools-shared/src/types'; // Some of its information (e.g. id, type, displayName) come from the backend. // Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes. // Elements are updated on a push basis– meaning the backend pushes updates to the frontend when needed. -export type Element = {| +export type Element = { id: number, parentID: number, children: Array, @@ -46,20 +46,20 @@ export type Element = {| // This element is not in a StrictMode compliant subtree. // Only true for React versions supporting StrictMode. isStrictModeNonCompliant: boolean, -|}; +}; -export type SerializedElement = {| +export type SerializedElement = { displayName: string | null, id: number, key: number | string | null, hocDisplayNames: Array | null, type: ElementType, -|}; +}; -export type OwnersList = {| +export type OwnersList = { id: number, owners: Array | null, -|}; +}; export type InspectedElementResponseType = | 'error' @@ -68,7 +68,7 @@ export type InspectedElementResponseType = | 'no-change' | 'not-found'; -export type InspectedElement = {| +export type InspectedElement = { id: number, // Does the current renderer support editable hooks and function props? @@ -121,11 +121,11 @@ export type InspectedElement = {| // UI plugins/visualizations for the inspected element. plugins: Plugins, -|}; +}; // TODO: Add profiling type -export type DehydratedData = {| +export type DehydratedData = { cleaned: Array>, data: | string @@ -135,4 +135,4 @@ export type DehydratedData = {| | Array | {[key: string]: string | Dehydrated | Unserializable, ...}, unserializable: Array>, -|}; +}; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index a78261e9fc301..c29febb62884e 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -67,7 +67,7 @@ export type CanViewElementSource = ( inspectedElement: InspectedElement, ) => boolean; -export type Props = {| +export type Props = { bridge: FrontendBridge, browserTheme?: BrowserTheme, canViewElementSourceFunction?: ?CanViewElementSource, @@ -105,7 +105,7 @@ export type Props = {| fetchFileWithCaching?: ?FetchFileWithCaching, // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration. hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction, -|}; +}; const componentsTab = { id: ('components': TabID), diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js index c4511ba0312bd..c0d2f45a3b723 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js @@ -10,13 +10,13 @@ import * as React from 'react'; import styles from './shared.css'; -type Props = {| +type Props = { callStack: string | null, children: React$Node, info: React$Node | null, componentStack: string | null, errorMessage: string, -|}; +}; export default function CaughtErrorView({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js index d207fcfe4f736..84077b3fa6b8f 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js @@ -22,14 +22,14 @@ import UserError from 'react-devtools-shared/src/errors/UserError'; import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError'; import {logEvent} from 'react-devtools-shared/src/Logger'; -type Props = {| +type Props = { children: React$Node, canDismiss?: boolean, onBeforeDismissCallback?: () => void, store?: Store, -|}; +}; -type State = {| +type State = { callStack: string | null, canDismiss: boolean, componentStack: string | null, @@ -39,7 +39,7 @@ type State = {| isTimeout: boolean, isUserError: boolean, isUnknownHookError: boolean, -|}; +}; const InitialState: State = { callStack: null, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js index 7443707496aa8..f15276d50160d 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js @@ -12,13 +12,13 @@ import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import styles from './shared.css'; -type Props = {| +type Props = { callStack: string | null, children: React$Node, componentStack: string | null, dismissError: Function | null, errorMessage: string | null, -|}; +}; export default function ErrorView({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js index 26417c35c44be..4cf631928a987 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js @@ -21,11 +21,11 @@ const LABELS = [ // This must match the filename in ".github/ISSUE_TEMPLATE/" const TEMPLATE = 'devtools_bug_report.yml'; -type Props = {| +type Props = { callStack: string | null, componentStack: string | null, errorMessage: string | null, -|}; +}; export default function ReportNewIssue({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js index f44e166b3a57f..820b2076714d6 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js @@ -13,11 +13,11 @@ import UpdateExistingIssue from './UpdateExistingIssue'; import ReportNewIssue from './ReportNewIssue'; import WorkplaceGroup from './WorkplaceGroup'; -type Props = {| +type Props = { callStack: string | null, componentStack: string | null, errorMessage: string | null, -|}; +}; export default function SuspendingErrorView({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js index 45c64312be137..36cfa3a79267a 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js @@ -12,13 +12,13 @@ import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import styles from './shared.css'; -type Props = {| +type Props = { callStack: string | null, children: React$Node, componentStack: string | null, dismissError: Function, errorMessage: string | null, -|}; +}; export default function TimeoutView({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js index 5a04718bec6d2..db7675d5bc5c0 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js @@ -10,12 +10,12 @@ import * as React from 'react'; import styles from './shared.css'; -type Props = {| +type Props = { callStack: string | null, children: React$Node, componentStack: string | null, errorMessage: string | null, -|}; +}; export default function UnsupportedBridgeOperationView({ callStack, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js index ad1139d935a2b..8a17808a6ce09 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js @@ -15,9 +15,9 @@ import styles from './shared.css'; export default function UpdateExistingIssue({ gitHubIssue, -}: {| +}: { gitHubIssue: GitHubIssue, -|}) { +}) { const {title, url} = gitHubIssue; return (
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js index 047c0788c3493..025ada950cecd 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js @@ -19,20 +19,20 @@ const Pending = 0; const Resolved = 1; const Rejected = 2; -type PendingRecord = {| +type PendingRecord = { status: 0, value: Wakeable, -|}; +}; -type ResolvedRecord = {| +type ResolvedRecord = { status: 1, value: T, -|}; +}; -type RejectedRecord = {| +type RejectedRecord = { status: 2, value: null, -|}; +}; type Record = PendingRecord | ResolvedRecord | RejectedRecord; diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js index 714919effa810..bd9cd96b6017c 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js @@ -7,10 +7,10 @@ * @flow */ -export type GitHubIssue = {| +export type GitHubIssue = { title: string, url: string, -|}; +}; const GITHUB_ISSUES_API = 'https://api.github.com/search/issues'; diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js index bcf59773d06a5..fb39a9fe0bb37 100644 --- a/packages/react-devtools-shared/src/devtools/views/Icon.js +++ b/packages/react-devtools-shared/src/devtools/views/Icon.js @@ -28,11 +28,11 @@ export type IconType = | 'strict-mode-non-compliant' | 'warning'; -type Props = {| +type Props = { className?: string, title?: string, type: IconType, -|}; +}; export default function Icon({className = '', title = '', type}: Props) { let pathData = null; diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index 5c4acc58cfa40..5ba2390e79d4b 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -23,37 +23,37 @@ import styles from './ModalDialog.css'; type ID = any; -type DIALOG_ACTION_HIDE = {| +type DIALOG_ACTION_HIDE = { type: 'HIDE', id: ID, -|}; -type DIALOG_ACTION_SHOW = {| +}; +type DIALOG_ACTION_SHOW = { type: 'SHOW', canBeDismissed?: boolean, content: React$Node, id: ID, title?: React$Node | null, -|}; +}; type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW; type Dispatch = (action: Action) => void; -type Dialog = {| +type Dialog = { canBeDismissed: boolean, content: React$Node | null, id: ID, title: React$Node | null, -|}; +}; -type State = {| +type State = { dialogs: Array, -|}; +}; -type ModalDialogContextType = {| +type ModalDialogContextType = { ...State, dispatch: Dispatch, -|}; +}; const ModalDialogContext = createContext( ((null: any): ModalDialogContextType), @@ -83,9 +83,9 @@ function dialogReducer(state, action) { } } -type Props = {| +type Props = { children: React$Node, -|}; +}; function ModalDialogContextController({children}: Props) { const [state, dispatch] = useReducer(dialogReducer, { @@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) { ); } -function ModalDialog(_: {||}) { +function ModalDialog(_: {}) { const {dialogs, dispatch} = useContext(ModalDialogContext); if (dialogs.length === 0) { @@ -136,13 +136,13 @@ function ModalDialogImpl({ dispatch, id, title, -}: {| +}: { canBeDismissed: boolean, content: React$Node | null, dispatch: Dispatch, id: ID, title: React$Node | null, -|}) { +}) { const dismissModal = useCallback(() => { if (canBeDismissed) { dispatch({type: 'HIDE', id}); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js index 82c58e86da460..e25efabe1654b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js @@ -11,7 +11,7 @@ import * as React from 'react'; import styles from './ChartNode.css'; -type Props = {| +type Props = { color: string, height: number, isDimmed?: boolean, @@ -25,7 +25,7 @@ type Props = {| width: number, x: number, y: number, -|}; +}; const minWidthToDisplay = 35; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js index 99289ff392f31..e13606deeb051 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js @@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo'; import type {ChartData, ChartNode} from './FlamegraphChartBuilder'; import type {CommitTree} from './types'; -export type ItemData = {| +export type ItemData = { chartData: ChartData, onElementMouseEnter: (fiberData: TooltipFiberData) => void, onElementMouseLeave: () => void, @@ -36,9 +36,9 @@ export type ItemData = {| selectedChartNodeIndex: number, selectFiber: (id: number | null, name: string | null) => void, width: number, -|}; +}; -export default function CommitFlamegraphAutoSizer(_: {||}) { +export default function CommitFlamegraphAutoSizer(_: {}) { const {profilerStore} = useContext(StoreContext); const {rootID, selectedCommitIndex, selectFiber} = useContext( ProfilerContext, @@ -90,12 +90,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) { } } -type Props = {| +type Props = { chartData: ChartData, commitTree: CommitTree, height: number, width: number, -|}; +}; function CommitFlamegraph({chartData, commitTree, height, width}: Props) { const [ diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js index 9cc394cc799f0..c533392b16195 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js @@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo'; import type {ChartData} from './RankedChartBuilder'; import type {CommitTree} from './types'; -export type ItemData = {| +export type ItemData = { chartData: ChartData, onElementMouseEnter: (fiberData: TooltipFiberData) => void, onElementMouseLeave: () => void, @@ -36,9 +36,9 @@ export type ItemData = {| selectedFiberIndex: number, selectFiber: (id: number | null, name: string | null) => void, width: number, -|}; +}; -export default function CommitRankedAutoSizer(_: {||}) { +export default function CommitRankedAutoSizer(_: {}) { const {profilerStore} = useContext(StoreContext); const {rootID, selectedCommitIndex, selectFiber} = useContext( ProfilerContext, @@ -88,12 +88,12 @@ export default function CommitRankedAutoSizer(_: {||}) { } } -type Props = {| +type Props = { chartData: ChartData, commitTree: CommitTree, height: number, width: number, -|}; +}; function CommitRanked({chartData, commitTree, height, width}: Props) { const [ diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js index 537f226f2d69b..5dc425c33974d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -45,11 +45,11 @@ export function getCommitTree({ commitIndex, profilerStore, rootID, -}: {| +}: { commitIndex: number, profilerStore: ProfilerStore, rootID: number, -|}): CommitTree { +}): CommitTree { if (!rootToCommitTreeMap.has(rootID)) { rootToCommitTreeMap.set(rootID, []); } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js index 7c7c9f08ddfbc..32ccac9659e42 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js @@ -12,7 +12,7 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore'; import type {CommitTree} from './types'; -export type ChartNode = {| +export type ChartNode = { actualDuration: number, didRender: boolean, id: number, @@ -21,16 +21,16 @@ export type ChartNode = {| offset: number, selfDuration: number, treeBaseDuration: number, -|}; +}; -export type ChartData = {| +export type ChartData = { baseDuration: number, depth: number, idToDepthMap: Map, maxSelfDuration: number, renderPathNodes: Set, rows: Array>, -|}; +}; const cachedChartData: Map = new Map(); @@ -39,12 +39,12 @@ export function getChartData({ commitTree, profilerStore, rootID, -}: {| +}: { commitIndex: number, commitTree: CommitTree, profilerStore: ProfilerStore, rootID: number, -|}): ChartData { +}): ChartData { const commitDatum = profilerStore.getCommitData(rootID, commitIndex); const {fiberActualDurations, fiberSelfDurations} = commitDatum; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js index cc3989c7b4a89..b7529c1bbe5dc 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js @@ -18,14 +18,14 @@ import styles from './HoveredFiberInfo.css'; import type {ChartNode} from './FlamegraphChartBuilder'; -export type TooltipFiberData = {| +export type TooltipFiberData = { id: number, name: string, -|}; +}; -export type Props = {| +export type Props = { fiberData: ChartNode, -|}; +}; export default function HoveredFiberInfo({fiberData}: Props) { const {profilerStore} = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js index 8396232a1de50..fcad5d814682f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js @@ -11,7 +11,7 @@ import * as React from 'react'; import styles from './NoCommitData.css'; -export default function NoCommitData(_: {||}) { +export default function NoCommitData(_: {}) { return (
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js index 0d7e23f2e388e..97b34809d7f9b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js @@ -38,7 +38,7 @@ import {enableProfilerComponentTree} from 'react-devtools-feature-flags'; import styles from './Profiler.css'; -function Profiler(_: {||}) { +function Profiler(_: {}) { const { didRecordCommits, isProcessingData, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index 5ae29122a413c..c7e69f5ba23b8 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types'; export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline'; -export type Context = {| +export type Context = { // Which tab is selected in the Profiler UI? selectedTabID: TabID, selectTab(id: TabID): void, @@ -65,22 +65,22 @@ export type Context = {| selectedFiberID: number | null, selectedFiberName: string | null, selectFiber: (id: number | null, name: string | null) => void, -|}; +}; const ProfilerContext = createContext(((null: any): Context)); ProfilerContext.displayName = 'ProfilerContext'; -type StoreProfilingState = {| +type StoreProfilingState = { didRecordCommits: boolean, isProcessingData: boolean, isProfiling: boolean, profilingData: ProfilingDataFrontend | null, supportsProfiling: boolean, -|}; +}; -type Props = {| +type Props = { children: React$Node, -|}; +}; function ProfilerContextController({children}: Props) { const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js index e3f6c178a5b03..635cf00b28675 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js @@ -16,17 +16,17 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore'; import type {CommitTree} from './types'; -export type ChartNode = {| +export type ChartNode = { id: number, label: string, name: string, value: number, -|}; +}; -export type ChartData = {| +export type ChartData = { maxValue: number, nodes: Array, -|}; +}; const cachedChartData: Map = new Map(); @@ -35,12 +35,12 @@ export function getChartData({ commitTree, profilerStore, rootID, -}: {| +}: { commitIndex: number, commitTree: CommitTree, profilerStore: ProfilerStore, rootID: number, -|}): ChartData { +}): ChartData { const commitDatum = profilerStore.getCommitData(rootID, commitIndex); const {fiberActualDurations, fiberSelfDurations} = commitDatum; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js index 4c6aa5cf7d440..c1f03ed1317dd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js @@ -15,9 +15,9 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RecordToggle.css'; -export type Props = {| +export type Props = { disabled?: boolean, -|}; +}; export default function RecordToggle({disabled}: Props) { const {isProfiling, startProfiling, stopProfiling} = useContext( diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js index 6d7443698a1b8..c10abd9834458 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js @@ -14,16 +14,16 @@ import ButtonIcon from '../ButtonIcon'; import {BridgeContext, StoreContext} from '../context'; import {useSubscription} from '../hooks'; -type SubscriptionData = {| +type SubscriptionData = { recordChangeDescriptions: boolean, supportsReloadAndProfile: boolean, -|}; +}; export default function ReloadAndProfileButton({ disabled, -}: {| +}: { disabled: boolean, -|}) { +}) { const bridge = useContext(BridgeContext); const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js index 4506847e74504..fe15ac8d63258 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js @@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RootSelector.css'; -export default function RootSelector(_: {||}) { +export default function RootSelector(_: {}) { const {profilingData, rootID, setRootID} = useContext(ProfilerContext); const options = []; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js index 6619fb7c78397..284d442f84641 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js @@ -17,7 +17,7 @@ import {getCommitTree} from './CommitTreeBuilder'; import styles from './SidebarCommitInfo.css'; -export type Props = {||}; +export type Props = {}; export default function SidebarCommitInfo(_: Props) { const {selectedCommitIndex, rootID} = useContext(ProfilerContext); 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 18bd77443eb9c..26b11a8e30c12 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js @@ -24,11 +24,11 @@ import {copy} from 'clipboard-js'; import styles from './SidebarEventInfo.css'; -export type Props = {||}; +export type Props = {}; -type SchedulingEventProps = {| +type SchedulingEventProps = { eventInfo: SchedulingEvent, -|}; +}; function SchedulingEventInfo({eventInfo}: SchedulingEventProps) { const {viewUrlSourceFunction} = useContext(ViewSourceContext); 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 df6e6da1693f8..c6505ce7a1082 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js @@ -18,7 +18,7 @@ import ButtonIcon from '../ButtonIcon'; import styles from './SidebarSelectedFiberInfo.css'; -export type Props = {||}; +export type Props = {}; export default function SidebarSelectedFiberInfo(_: Props) { const {profilerStore} = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js index 56f62e01c5730..76cd52e53a0bd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js @@ -20,7 +20,7 @@ import Tooltip from './Tooltip'; import styles from './SnapshotCommitList.css'; -export type ItemData = {| +export type ItemData = { commitTimes: Array, filteredCommitIndices: Array, maxDuration: number, @@ -30,9 +30,9 @@ export type ItemData = {| setHoveredCommitIndex: (index: number) => void, startCommitDrag: (newDragState: DragState) => void, totalDurations: Array, -|}; +}; -type Props = {| +type Props = { commitData: CommitDataFrontend, commitTimes: Array, filteredCommitIndices: Array, @@ -40,7 +40,7 @@ type Props = {| selectedFilteredCommitIndex: number | null, selectCommitIndex: (index: number) => void, totalDurations: Array, -|}; +}; export default function SnapshotCommitList({ commitData, @@ -70,7 +70,7 @@ export default function SnapshotCommitList({ ); } -type ListProps = {| +type ListProps = { commitData: CommitDataFrontend, commitTimes: Array, height: number, @@ -80,13 +80,13 @@ type ListProps = {| selectCommitIndex: (index: number) => void, totalDurations: Array, width: number, -|}; +}; -type DragState = {| +type DragState = { commitIndex: number, left: number, sizeIncrement: number, -|}; +}; function List({ commitData, 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 8459d8571be0f..1d4fd41d798a7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -18,7 +18,7 @@ import {StoreContext} from '../context'; import styles from './SnapshotSelector.css'; -export type Props = {||}; +export type Props = {}; export default function SnapshotSelector(_: Props) { const { diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js index d35ff86d5895c..bec2920f14f7e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js @@ -16,10 +16,10 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './Updaters.css'; import {ElementTypeRoot} from '../../../types'; -export type Props = {| +export type Props = { commitTree: CommitTree, updaters: Array, -|}; +}; export default function Updaters({commitTree, updaters}: Props) { const {selectFiber} = useContext(ProfilerContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js index 7a2f9e5bf4f0c..064dde43662e4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js @@ -33,9 +33,9 @@ function hookIndicesToString(indices: Array): string { } } -type Props = {| +type Props = { fiberID: number, -|}; +}; export default function WhatChanged({fiberID}: Props) { const {profilerStore} = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js index f495aa360d160..a496319b1e941 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js @@ -14,7 +14,7 @@ import type { TimelineDataExport, } from 'react-devtools-timeline/src/types'; -export type CommitTreeNode = {| +export type CommitTreeNode = { id: number, children: Array, displayName: string | null, @@ -23,32 +23,32 @@ export type CommitTreeNode = {| parentID: number, treeBaseDuration: number, type: ElementType, -|}; +}; -export type CommitTree = {| +export type CommitTree = { nodes: Map, rootID: number, -|}; +}; -export type SnapshotNode = {| +export type SnapshotNode = { id: number, children: Array, displayName: string | null, hocDisplayNames: Array | null, key: number | string | null, type: ElementType, -|}; +}; -export type ChangeDescription = {| +export type ChangeDescription = { context: Array | boolean | null, didHooksChange: boolean, isFirstMount: boolean, props: Array | null, state: Array | null, hooks?: Array | null, -|}; +}; -export type CommitDataFrontend = {| +export type CommitDataFrontend = { // Map of Fiber (ID) to a description of what changed in this commit. changeDescriptions: Map | null, @@ -79,9 +79,9 @@ export type CommitDataFrontend = {| // Fiber(s) responsible for scheduling this update. updaters: Array | null, -|}; +}; -export type ProfilingDataForRootFrontend = {| +export type ProfilingDataForRootFrontend = { // Timing, duration, and other metadata about each commit. commitData: Array, @@ -103,10 +103,10 @@ export type ProfilingDataForRootFrontend = {| // Map of fiber id to node when the Profiling session was started. // This info can be used along with commitOperations to reconstruct the tree for any commit. snapshots: Map, -|}; +}; // Combination of profiling data collected by the renderer interface (backend) and Store (frontend). -export type ProfilingDataFrontend = {| +export type ProfilingDataFrontend = { // Legacy profiling data is per renderer + root. dataForRoots: Map, @@ -117,9 +117,9 @@ export type ProfilingDataFrontend = {| // e.g. DevTools should not try to sync selection between Components and Profiler tabs, // even if there are Fibers with the same IDs. imported: boolean, -|}; +}; -export type CommitDataExport = {| +export type CommitDataExport = { changeDescriptions: Array<[number, ChangeDescription]> | null, duration: number, effectDuration: number | null, @@ -131,9 +131,9 @@ export type CommitDataExport = {| priorityLevel: string | null, timestamp: number, updaters: Array | null, -|}; +}; -export type ProfilingDataForRootExport = {| +export type ProfilingDataForRootExport = { commitData: Array, displayName: string, // Tuple of Fiber ID and base duration @@ -141,10 +141,10 @@ export type ProfilingDataForRootExport = {| operations: Array>, rootID: number, snapshots: Array<[number, SnapshotNode]>, -|}; +}; // Serializable version of ProfilingDataFrontend data. -export type ProfilingDataExport = {| +export type ProfilingDataExport = { version: 5, // Legacy profiling data is per renderer + root. @@ -153,4 +153,4 @@ export type ProfilingDataExport = {| // Timeline data is per rederer. // Note that old exported profiles won't contain this key. timelineData?: Array, -|}; +}; diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js index 8f9cfc15c24a7..a473d450f910b 100644 --- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js +++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js @@ -11,9 +11,9 @@ import * as React from 'react'; import styles from './ReactLogo.css'; -type Props = {| +type Props = { className?: string, -|}; +}; export default function ReactLogo({className}: Props) { return ( diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js index d2214f59728e7..7fc620cb8026b 100644 --- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js +++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js @@ -15,7 +15,7 @@ import Icon from './Icon'; import styles from './SearchInput.css'; -type Props = {| +type Props = { goToNextResult: () => void, goToPreviousResult: () => void, placeholder: string, @@ -24,7 +24,7 @@ type Props = {| searchResultsCount: number, searchText: string, testName?: ?string, -|}; +}; export default function SearchInput({ goToNextResult, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 83c3b2a612963..9df49e68ffd2a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -51,7 +51,7 @@ import type { RegExpComponentFilter, } from 'react-devtools-shared/src/types'; -export default function ComponentsSettings(_: {||}) { +export default function ComponentsSettings(_: {}) { const store = useContext(StoreContext); const {parseHookNames, setParseHookNames} = useContext(SettingsContext); @@ -417,10 +417,10 @@ export default function ComponentsSettings(_: {||}) { ); } -type ToggleIconProps = {| +type ToggleIconProps = { isEnabled: boolean, isValid: boolean, -|}; +}; function ToggleIcon({isEnabled, isValid}: ToggleIconProps) { let className; if (isValid) { diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js index de05978ec3ba0..64df0f6586788 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js @@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext'; import styles from './SettingsShared.css'; -export default function DebuggingSettings(_: {||}) { +export default function DebuggingSettings(_: {}) { const { appendComponentStack, breakOnConsoleErrors, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js index a781f99eb05c5..71fc7ab29196f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js @@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null { return `${CHANGE_LOG_URL}#${versionAnchor}`; } -export default function GeneralSettings(_: {||}) { +export default function GeneralSettings(_: {}) { const { displayDensity, setDisplayDensity, @@ -113,7 +113,7 @@ export default function GeneralSettings(_: {||}) { ); } -function Version({label, version}: {|label: string, version: ?string|}) { +function Version({label, version}: {label: string, version: ?string}) { const changelogLink = useMemo(() => { return getChangeLogUrl(version); }, [version]); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js index 7a2c8ede453d7..cf0c237e6efb9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js @@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler import styles from './SettingsShared.css'; -export default function ProfilerSettings(_: {||}) { +export default function ProfilerSettings(_: {}) { const { isCommitFilterEnabled, minCommitDuration, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index 8eda55d13dbdc..82c62fc96c790 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -35,7 +35,7 @@ import type {BrowserTheme} from '../DevTools'; export type DisplayDensity = 'comfortable' | 'compact'; export type Theme = 'auto' | 'light' | 'dark'; -type Context = {| +type Context = { displayDensity: DisplayDensity, setDisplayDensity(value: DisplayDensity): void, @@ -65,7 +65,7 @@ type Context = {| traceUpdatesEnabled: boolean, setTraceUpdatesEnabled: (value: boolean) => void, -|}; +}; const SettingsContext = createContext(((null: any): Context)); SettingsContext.displayName = 'SettingsContext'; @@ -88,12 +88,12 @@ function useLocalStorageWithLog( type DocumentElements = Array; -type Props = {| +type Props = { browserTheme: BrowserTheme, children: React$Node, componentsPortalContainer?: Element, profilerPortalContainer?: Element, -|}; +}; function SettingsContextController({ browserTheme, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js index 29d138f1c95fb..6a6730a9f3091 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js @@ -28,7 +28,7 @@ import styles from './SettingsModal.css'; type TabID = 'general' | 'components' | 'profiler'; -export default function SettingsModal(_: {||}) { +export default function SettingsModal(_: {}) { const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext); const store = useContext(StoreContext); const {profilerStore} = store; @@ -57,7 +57,7 @@ export default function SettingsModal(_: {||}) { return ; } -function SettingsModalImpl(_: {||}) { +function SettingsModalImpl(_: {}) { const {setIsModalShowing} = useContext(SettingsModalContext); const dismissModal = useCallback(() => setIsModalShowing(false), [ setIsModalShowing, diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js index d3b500cee872b..9821f25c05ca8 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js @@ -22,7 +22,7 @@ type Context = { const SettingsModalContext = createContext(((null: any): Context)); SettingsModalContext.displayName = 'SettingsModalContext'; -function SettingsModalContextController({children}: {|children: React$Node|}) { +function SettingsModalContextController({children}: {children: React$Node}) { const [isModalShowing, setIsModalShowing] = useState(false); const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [ diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js index 5c9f3f61bc728..391c1c9714db7 100644 --- a/packages/react-devtools-shared/src/devtools/views/TabBar.js +++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js @@ -16,21 +16,21 @@ import Tooltip from './Components/reach-ui/tooltip'; import type {IconType} from './Icon'; -type TabInfo = {| +type TabInfo = { icon: IconType, id: string, label: string, title?: string, -|}; +}; -export type Props = {| +export type Props = { currentTab: any, disabled?: boolean, id: string, selectTab: (tabID: any) => void, tabs: Array, type: 'navigation' | 'profiler' | 'settings', -|}; +}; export default function TabBar({ currentTab, diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js index a353b4c6eec66..7a6deba50100e 100644 --- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js +++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js @@ -10,7 +10,7 @@ import * as React from 'react'; import useThemeStyles from './useThemeStyles'; -export default function ThemeProvider({children}: {|children: React$Node|}) { +export default function ThemeProvider({children}: {children: React$Node}) { const themeStyle = useThemeStyles(); const style = React.useMemo(() => { diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js index 05f41c6211e75..07062e905d3bb 100644 --- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js @@ -24,7 +24,7 @@ const INSTRUCTIONS_FB_URL = 'https://fb.me/devtools-unsupported-bridge-protocol'; const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog'; -export default function UnsupportedBridgeProtocolDialog(_: {||}) { +export default function UnsupportedBridgeProtocolDialog(_: {}) { const {dialogs, dispatch} = useContext(ModalDialogContext); const store = useContext(StoreContext); @@ -66,9 +66,9 @@ export default function UnsupportedBridgeProtocolDialog(_: {||}) { function DialogContent({ unsupportedBridgeProtocol, -}: {| +}: { unsupportedBridgeProtocol: BridgeProtocol, -|}) { +}) { const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol; let instructions; diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js index 31da80c0584ee..0cd383430bd7a 100644 --- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js @@ -18,7 +18,7 @@ import styles from './UnsupportedVersionDialog.css'; type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown'; -export default function UnsupportedVersionDialog(_: {||}) { +export default function UnsupportedVersionDialog(_: {}) { const {dispatch} = useContext(ModalDialogContext); const store = useContext(StoreContext); const [state, setState] = useState('dialog-not-shown'); @@ -54,7 +54,7 @@ export default function UnsupportedVersionDialog(_: {||}) { return null; } -function DialogContent(_: {||}) { +function DialogContent(_: {}) { return (
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js index 4bc539d8975cd..85f3cb5efdb77 100644 --- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js +++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js @@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog'; import styles from './WarnIfLegacyBackendDetected.css'; -export default function WarnIfLegacyBackendDetected(_: {||}) { +export default function WarnIfLegacyBackendDetected(_: {}) { const bridge = useContext(BridgeContext); const {dispatch} = useContext(ModalDialogContext); @@ -75,7 +75,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) { return null; } -function InvalidBackendDetected(_: {||}) { +function InvalidBackendDetected(_: {}) { return (

Either upgrade React or install React DevTools v3:

diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js index 169811b7b901b..6f8f8ae4965e5 100644 --- a/packages/react-devtools-shared/src/devtools/views/context.js +++ b/packages/react-devtools-shared/src/devtools/views/context.js @@ -21,10 +21,10 @@ BridgeContext.displayName = 'BridgeContext'; export const StoreContext = createContext(((null: any): Store)); StoreContext.displayName = 'StoreContext'; -export type ContextMenuContextType = {| +export type ContextMenuContextType = { isEnabledForInspectedElement: boolean, viewAttributeSourceFunction: ViewAttributeSource | null, -|}; +}; export const ContextMenuContext = createContext({ isEnabledForInspectedElement: false, @@ -32,14 +32,14 @@ export const ContextMenuContext = createContext({ }); ContextMenuContext.displayName = 'ContextMenuContext'; -export type OptionsContextType = {| +export type OptionsContextType = { readOnly: boolean, hideSettings: boolean, hideToggleErrorAction: boolean, hideToggleSuspenseAction: boolean, hideLogAction: boolean, hideViewSourceAction: boolean, -|}; +}; export const OptionsContext = createContext({ readOnly: false, diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index a4f51b461ca64..60a2fe8dcb410 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -23,25 +23,25 @@ import { import {StoreContext, BridgeContext} from './context'; import {sanitizeForParse, smartParse, smartStringify} from '../utils'; -type ACTION_RESET = {| +type ACTION_RESET = { type: 'RESET', externalValue: any, -|}; -type ACTION_UPDATE = {| +}; +type ACTION_UPDATE = { type: 'UPDATE', editableValue: any, externalValue: any, -|}; +}; type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE; type UseEditableValueDispatch = (action: UseEditableValueAction) => void; -type UseEditableValueState = {| +type UseEditableValueState = { editableValue: any, externalValue: any, hasPendingChanges: boolean, isValid: boolean, parsedValue: any, -|}; +}; function useEditableValueReducer(state, action) { switch (action.type) { @@ -271,10 +271,10 @@ export function useModalDismissSignal( export function useSubscription({ getCurrentValue, subscribe, -}: {| +}: { getCurrentValue: () => Value, subscribe: (callback: Function) => () => void, -|}): Value { +}): Value { const [state, setState] = useState(() => ({ getCurrentValue, subscribe, diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js index b31d9602c6b81..3e6c2f262837a 100644 --- a/packages/react-devtools-shared/src/dynamicImportCache.js +++ b/packages/react-devtools-shared/src/dynamicImportCache.js @@ -17,20 +17,20 @@ const Pending = 0; const Resolved = 1; const Rejected = 2; -type PendingRecord = {| +type PendingRecord = { status: 0, value: Wakeable, -|}; +}; -type ResolvedRecord = {| +type ResolvedRecord = { status: 1, value: T, -|}; +}; -type RejectedRecord = {| +type RejectedRecord = { status: 2, value: null, -|}; +}; type Record = PendingRecord | ResolvedRecord | RejectedRecord; diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 4ed128ba9df93..29cdea1e2b0b7 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -224,10 +224,10 @@ export function installHook(target: any): DevToolsHook | null { function patchConsoleForInitialRenderInStrictMode({ hideConsoleLogsInStrictMode, browserTheme, - }: {| + }: { hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme, - |}) { + }) { const overrideConsoleMethods = [ 'error', 'group', diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js index c992f64cf97b2..fa288522f3c16 100644 --- a/packages/react-devtools-shared/src/hookNamesCache.js +++ b/packages/react-devtools-shared/src/hookNamesCache.js @@ -27,20 +27,20 @@ const Pending = 0; const Resolved = 1; const Rejected = 2; -type PendingRecord = {| +type PendingRecord = { status: 0, value: Wakeable, -|}; +}; -type ResolvedRecord = {| +type ResolvedRecord = { status: 1, value: T, -|}; +}; -type RejectedRecord = {| +type RejectedRecord = { status: 2, value: null, -|}; +}; type Record = PendingRecord | ResolvedRecord | RejectedRecord; diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js index 53c0e8c0a57a6..3bb955005ba8a 100644 --- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js +++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js @@ -16,21 +16,21 @@ import type { MixedSourceMap, } from './SourceMapTypes'; -type SearchPosition = {| +type SearchPosition = { columnNumber: number, lineNumber: number, -|}; +}; -type ResultPosition = {| +type ResultPosition = { column: number, line: number, sourceContent: string, sourceURL: string, -|}; +}; -export type SourceMapConsumerType = {| +export type SourceMapConsumerType = { originalPositionFor: SearchPosition => ResultPosition, -|}; +}; type Mappings = Array>>; @@ -138,14 +138,14 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) { }: any): SourceMapConsumerType); } -type Section = {| +type Section = { +generatedColumn: number, +generatedLine: number, +map: MixedSourceMap, // Lazily parsed only when/as the section is needed. sourceMapConsumer: SourceMapConsumerType | null, -|}; +}; function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) { let lastOffset = { diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js index 4882afba9a9fb..acf9a2c1d70e4 100644 --- a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js +++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js @@ -83,10 +83,10 @@ export class SourceMapMetadataConsumer { line, column, source, - }: {| + }: { ...Position, +source: ?string, - |}): ?string { + }): ?string { if (source == null) { return null; } diff --git a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js index 744cc7d309251..721dd4ca0651a 100644 --- a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js +++ b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js @@ -15,7 +15,7 @@ export type ReactSourcesArray = $ReadOnlyArray; export type FBSourceMetadata = [?{...}, ?ReactSourceMetadata]; export type FBSourcesArray = $ReadOnlyArray; -export type BasicSourceMap = {| +export type BasicSourceMap = { +file?: string, +mappings: string, +names: Array, @@ -25,7 +25,7 @@ export type BasicSourceMap = {| +version: number, +x_facebook_sources?: FBSourcesArray, +x_react_sources?: ReactSourcesArray, -|}; +}; export type IndexSourceMapSection = { map: IndexSourceMap | BasicSourceMap, @@ -37,7 +37,7 @@ export type IndexSourceMapSection = { ... }; -export type IndexSourceMap = {| +export type IndexSourceMap = { +file?: string, +mappings?: void, // avoids SourceMap being a disjoint union +sourcesContent?: void, @@ -45,6 +45,6 @@ export type IndexSourceMap = {| +version: number, +x_facebook_sources?: FBSourcesArray, +x_react_sources?: ReactSourcesArray, -|}; +}; export type MixedSourceMap = IndexSourceMap | BasicSourceMap; diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js index 8d3c5e2fa2b0f..2fe1aa2137749 100644 --- a/packages/react-devtools-shared/src/hooks/astUtils.js +++ b/packages/react-devtools-shared/src/hooks/astUtils.js @@ -13,16 +13,16 @@ import {File} from '@babel/types'; import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks'; -export type Position = {| +export type Position = { line: number, column: number, -|}; +}; -export type SourceFileASTWithHookDetails = {| +export type SourceFileASTWithHookDetails = { sourceFileAST: File, line: number, source: string, -|}; +}; export const NO_HOOK_NAME = ''; @@ -356,7 +356,7 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] { */ export function getHookNamesMappingFromAST( sourceAST: File, -): $ReadOnlyArray<{|name: string, start: Position|}> { +): $ReadOnlyArray<{name: string, start: Position}> { const hookStack = []; const hookNames = []; const pushFrame = (name: string, node: Node) => { diff --git a/packages/react-devtools-shared/src/hooks/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js index d57bbb6063854..fb6fea95c6669 100644 --- a/packages/react-devtools-shared/src/hooks/generateHookMap.js +++ b/packages/react-devtools-shared/src/hooks/generateHookMap.js @@ -11,15 +11,15 @@ import {getHookNamesMappingFromAST} from './astUtils'; import {encode, decode} from 'sourcemap-codec'; import {File} from '@babel/types'; -export type HookMap = {| +export type HookMap = { names: $ReadOnlyArray, mappings: HookMapMappings, -|}; +}; -export type EncodedHookMap = {| +export type EncodedHookMap = { names: $ReadOnlyArray, mappings: string, -|}; +}; // See generateHookMap below for more details on formatting export type HookMapEntry = [ diff --git a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js index c65c5fb5a8024..89264c493858b 100644 --- a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js +++ b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js @@ -91,7 +91,7 @@ function binSearch( location: Position, items: T[], index: number, - ) => {|index: number | null, direction: number|}, + ) => {index: number | null, direction: number}, ): T | null { let count = items.length; let index = 0; @@ -141,7 +141,7 @@ function compareLinePositions( location: Position, mappings: HookMapMappings, index: number, -): {|index: number | null, direction: number|} { +): {index: number | null, direction: number} { const startIndex = index; const start = mappings[startIndex]; if (start == null) { @@ -200,7 +200,7 @@ function compareColumnPositions( location: Position, line: HookMapLine, index: number, -): {|index: number | null, direction: number|} { +): {index: number | null, direction: number} { const startIndex = index; const start = line[index]; if (start == null) { diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js index 640e916a09ff1..3e08302c157b8 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js @@ -68,7 +68,7 @@ const FETCH_OPTIONS = {cache: 'force-cache'}; const MAX_SOURCE_LENGTH = 100_000_000; -export type HookSourceAndMetadata = {| +export type HookSourceAndMetadata = { // Generated by react-debug-tools. hookSource: HookSource, @@ -86,7 +86,7 @@ export type HookSourceAndMetadata = {| // External URL of source map. // Sources without source maps (or with inline source maps) won't have this. sourceMapURL: string | null, -|}; +}; export type LocationKeyToHookSourceAndMetadata = Map< string, diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js index 7eada16a7d9e0..ba3c1e096b67b 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -33,7 +33,7 @@ import type {HookNames, LRUCache} from 'react-devtools-shared/src/types'; type AST = mixed; -type HookParsedMetadata = {| +type HookParsedMetadata = { // API for consuming metadfata present in extended source map. metadataConsumer: SourceMapMetadataConsumer | null, @@ -55,24 +55,24 @@ type HookParsedMetadata = {| // Alternate APIs from source-map for parsing source maps (if detected). sourceMapConsumer: SourceMapConsumerType | null, -|}; +}; type LocationKeyToHookParsedMetadata = Map; -type CachedRuntimeCodeMetadata = {| +type CachedRuntimeCodeMetadata = { metadataConsumer: SourceMapMetadataConsumer | null, sourceMapConsumer: SourceMapConsumerType | null, -|}; +}; const runtimeURLToMetadataCache: LRUCache< string, CachedRuntimeCodeMetadata, > = new LRU({max: 50}); -type CachedSourceCodeMetadata = {| +type CachedSourceCodeMetadata = { originalSourceAST: AST, originalSourceCode: string, -|}; +}; const originalURLToMetadataCache: LRUCache< string, diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js index 770b168e4b11f..bb35c4cf3488a 100644 --- a/packages/react-devtools-shared/src/hydration.js +++ b/packages/react-devtools-shared/src/hydration.js @@ -30,7 +30,7 @@ export const meta = { unserializable: Symbol('unserializable'), }; -export type Dehydrated = {| +export type Dehydrated = { inspectable: boolean, name: string | null, preview_long: string | null, @@ -38,7 +38,7 @@ export type Dehydrated = {| readonly?: boolean, size?: number, type: string, -|}; +}; // Typed arrays and other complex iteratable objects (e.g. Map, Set, ImmutableJS) need special handling. // These objects can't be serialized without losing type information, diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js index b1f8204058480..4ecb98ffab5ea 100644 --- a/packages/react-devtools-shared/src/inspectedElementCache.js +++ b/packages/react-devtools-shared/src/inspectedElementCache.js @@ -26,20 +26,20 @@ const Pending = 0; const Resolved = 1; const Rejected = 2; -type PendingRecord = {| +type PendingRecord = { status: 0, value: Wakeable, -|}; +}; -type ResolvedRecord = {| +type ResolvedRecord = { status: 1, value: T, -|}; +}; -type RejectedRecord = {| +type RejectedRecord = { status: 2, value: Error | string, -|}; +}; type Record = PendingRecord | ResolvedRecord | RejectedRecord; @@ -168,12 +168,12 @@ export function checkForUpdate({ element, refresh, store, -}: {| +}: { bridge: FrontendBridge, element: Element, refresh: RefreshFunction, store: Store, -|}): void { +}): void { const {id} = element; const rendererID = store.getRendererIDForElement(id); if (rendererID != null) { diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js index bb687bf98d7ac..96021dd2ae25e 100644 --- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js +++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js @@ -58,12 +58,12 @@ export function inspectElement({ element, path, rendererID, -}: {| +}: { bridge: FrontendBridge, element: Element, path: Path | null, rendererID: number, -|}): Promise { +}): Promise { const {id} = element; // This could indicate that the DevTools UI has been closed and reopened. diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js index fffe07bad7c90..4b044cf086119 100644 --- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js +++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js @@ -15,9 +15,9 @@ import {enableLogger} from 'react-devtools-feature-flags'; let loggingIFrame = null; let missedEvents = []; -type LoggerContext = {| +type LoggerContext = { page_url: ?string, -|}; +}; export function registerDevToolsEventLogger( surface: string, diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js index ca0943ac9234d..30bf480027daf 100644 --- a/packages/react-devtools-shared/src/types.js +++ b/packages/react-devtools-shared/src/types.js @@ -7,11 +7,11 @@ * @flow */ -export type Wall = {| +export type Wall = { // `listen` returns the "unlisten" function. listen: (fn: Function) => Function, send: (event: string, payload: any, transferable?: Array) => void, -|}; +}; // WARNING // The values below are referenced by ComponentFilters (which are saved via localStorage). @@ -52,26 +52,26 @@ export type ComponentFilterType = 1 | 2 | 3 | 4; // Hide all elements of types in this Set. // We hide host components only by default. -export type ElementTypeComponentFilter = {| +export type ElementTypeComponentFilter = { isEnabled: boolean, type: 1, value: ElementType, -|}; +}; // Hide all elements with displayNames or paths matching one or more of the RegExps in this Set. // Path filters are only used when elements include debug source location. -export type RegExpComponentFilter = {| +export type RegExpComponentFilter = { isEnabled: boolean, isValid: boolean, type: 2 | 3, value: string, -|}; +}; -export type BooleanComponentFilter = {| +export type BooleanComponentFilter = { isEnabled: boolean, isValid: boolean, type: 4, -|}; +}; export type ComponentFilter = | BooleanComponentFilter @@ -85,21 +85,21 @@ export type HookName = string | null; export type HookSourceLocationKey = string; export type HookNames = Map; -export type LRUCache = {| +export type LRUCache = { del: (key: K) => void, get: (key: K) => V, has: (key: K) => boolean, reset: () => void, set: (key: K, value: V) => void, -|}; +}; -export type StyleXPlugin = {| +export type StyleXPlugin = { sources: Array, resolvedStyles: Object, -|}; +}; -export type Plugins = {| +export type Plugins = { stylex: StyleXPlugin | null, -|}; +}; export const StrictMode = 1; diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index 306ac73b91a7c..ca7bd18010b26 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -32,7 +32,7 @@ function reducer(state, action) { } } -type StatefulFunctionProps = {|name: string|}; +type StatefulFunctionProps = {name: string}; function StatefulFunction({name}: StatefulFunctionProps) { const [count, updateCount] = useState(0); @@ -68,8 +68,8 @@ function StatefulFunction({name}: StatefulFunctionProps) { const BoolContext = createContext(true); BoolContext.displayName = 'BoolContext'; -type Props = {|name: string, toggle: boolean|}; -type State = {|cities: Array, state: string|}; +type Props = {name: string, toggle: boolean}; +type State = {cities: Array, state: string}; class StatefulClass extends Component { static contextType = BoolContext; @@ -102,7 +102,7 @@ class StatefulClass extends Component { const MemoizedStatefulClass = memo(StatefulClass); const MemoizedStatefulFunction = memo(StatefulFunction); -const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>( +const ForwardRef = forwardRef<{name: string}, HTMLUListElement>( ({name}, ref) => { const [count, updateCount] = useState(0); const debouncedCount = useDebounce(count, 1000); diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js index 47dbb3f6abb03..a1b784b6e5a10 100644 --- a/packages/react-devtools-shell/src/app/ToDoList/List.js +++ b/packages/react-devtools-shell/src/app/ToDoList/List.js @@ -12,13 +12,13 @@ import {Fragment, useCallback, useState} from 'react'; import ListItem from './ListItem'; import styles from './List.css'; -export type Item = {| +export type Item = { id: number, isComplete: boolean, text: string, -|}; +}; -type Props = {||}; +type Props = {}; export default function List(props: Props) { const [newItemText, setNewItemText] = useState(''); diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js index 5d816f652c830..a382f639a1b20 100644 --- a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js +++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js @@ -13,11 +13,11 @@ import styles from './ListItem.css'; import type {Item} from './List'; -type Props = {| +type Props = { item: Item, removeItem: (item: Item) => void, toggleItem: (item: Item) => void, -|}; +}; function ListItem({item, removeItem, toggleItem}: Props) { const handleDelete = useCallback(() => { diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js index 273b67bed1709..3853f5cb4d634 100644 --- a/packages/react-devtools-timeline/src/CanvasPage.js +++ b/packages/react-devtools-timeline/src/CanvasPage.js @@ -69,10 +69,10 @@ import styles from './CanvasPage.css'; const CONTEXT_MENU_ID = 'canvas'; -type Props = {| +type Props = { profilerData: TimelineData, viewState: ViewState, -|}; +}; function CanvasPage({profilerData, viewState}: Props) { return ( @@ -80,7 +80,7 @@ function CanvasPage({profilerData, viewState}: Props) { className={styles.CanvasPage} style={{backgroundColor: COLORS.BACKGROUND}}> - {({height, width}: {|height: number, width: number|}) => ( + {({height, width}: {height: number, width: number}) => ( { +}) => { const {componentName, duration, timestamp, type, warning} = componentMeasure; let label = componentName; @@ -182,9 +182,9 @@ const TooltipReactComponentMeasure = ({ const TooltipFlamechartNode = ({ stackFrame, -}: {| +}: { stackFrame: FlamechartStackFrame, -|}) => { +}) => { const {name, timestamp, duration, locationLine, locationColumn} = stackFrame; return (
@@ -207,7 +207,7 @@ const TooltipFlamechartNode = ({ ); }; -const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => { +const TooltipNativeEvent = ({nativeEvent}: {nativeEvent: NativeEvent}) => { const {duration, timestamp, type, warning} = nativeEvent; return ( @@ -234,9 +234,9 @@ const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => { const TooltipNetworkMeasure = ({ networkMeasure, -}: {| +}: { networkMeasure: NetworkMeasure, -|}) => { +}) => { const { finishTimestamp, lastReceivedDataTimestamp, @@ -269,10 +269,10 @@ const TooltipNetworkMeasure = ({ const TooltipSchedulingEvent = ({ data, schedulingEvent, -}: {| +}: { data: TimelineData, schedulingEvent: SchedulingEvent, -|}) => { +}) => { const label = getSchedulingEventLabel(schedulingEvent); if (!label) { if (__DEV__) { @@ -335,11 +335,11 @@ const TooltipSnapshot = ({ height, snapshot, width, -}: {| +}: { height: number, snapshot: Snapshot, width: number, -|}) => { +}) => { const aspectRatio = snapshot.width / snapshot.height; // Zoomed in view should not be any bigger than the DevTools viewport. @@ -365,9 +365,9 @@ const TooltipSnapshot = ({ const TooltipSuspenseEvent = ({ suspenseEvent, -}: {| +}: { suspenseEvent: SuspenseEvent, -|}) => { +}) => { const { componentName, duration, @@ -424,10 +424,10 @@ const TooltipSuspenseEvent = ({ const TooltipReactMeasure = ({ data, measure, -}: {| +}: { data: TimelineData, measure: ReactMeasure, -|}) => { +}) => { const label = getReactMeasureLabel(measure.type); if (!label) { if (__DEV__) { @@ -471,7 +471,7 @@ const TooltipReactMeasure = ({ ); }; -const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => { +const TooltipUserTimingMark = ({mark}: {mark: UserTimingMark}) => { const {name, timestamp} = mark; return (
@@ -485,7 +485,7 @@ const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => { ); }; -const TooltipThrownError = ({thrownError}: {|thrownError: ThrownError|}) => { +const TooltipThrownError = ({thrownError}: {thrownError: ThrownError}) => { const {componentName, message, phase, timestamp} = thrownError; const label = `threw an error during ${phase}`; return ( diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js index bfd2a35f733e7..c4c8a1fa855c0 100644 --- a/packages/react-devtools-timeline/src/Timeline.js +++ b/packages/react-devtools-timeline/src/Timeline.js @@ -32,7 +32,7 @@ import {TimelineSearchContextController} from './TimelineSearchContext'; import styles from './Timeline.css'; -export function Timeline(_: {||}) { +export function Timeline(_: {}) { const { file, inMemoryTimelineData, @@ -143,11 +143,11 @@ const FileLoader = ({ file, onFileSelect, viewState, -}: {| +}: { file: File | null, onFileSelect: (file: File) => void, viewState: ViewState, -|}) => { +}) => { if (file === null) { return null; } diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js index c753fe1c28d6b..3032e55947721 100644 --- a/packages/react-devtools-timeline/src/TimelineContext.js +++ b/packages/react-devtools-timeline/src/TimelineContext.js @@ -27,7 +27,7 @@ import type { } from './types'; import type {RefObject} from 'shared/ReactTypes'; -export type Context = {| +export type Context = { file: File | null, inMemoryTimelineData: Array | null, isTimelineSupported: boolean, @@ -36,14 +36,14 @@ export type Context = {| viewState: ViewState, selectEvent: ReactEventInfo => void, selectedEvent: ReactEventInfo, -|}; +}; const TimelineContext = createContext(((null: any): Context)); TimelineContext.displayName = 'TimelineContext'; -type Props = {| +type Props = { children: React$Node, -|}; +}; function TimelineContextController({children}: Props) { const searchInputContainerRef = useRef(null); diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js index c545f83888e91..2535b723b4a11 100644 --- a/packages/react-devtools-timeline/src/TimelineSearchContext.js +++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js @@ -12,24 +12,24 @@ import {createContext, useMemo, useReducer} from 'react'; import type {ReactComponentMeasure, TimelineData, ViewState} from './types'; -type State = {| +type State = { profilerData: TimelineData, searchIndex: number, searchRegExp: RegExp | null, searchResults: Array, searchText: string, -|}; +}; -type ACTION_GO_TO_NEXT_SEARCH_RESULT = {| +type ACTION_GO_TO_NEXT_SEARCH_RESULT = { type: 'GO_TO_NEXT_SEARCH_RESULT', -|}; -type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {| +}; +type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = { type: 'GO_TO_PREVIOUS_SEARCH_RESULT', -|}; -type ACTION_SET_SEARCH_TEXT = {| +}; +type ACTION_SET_SEARCH_TEXT = { type: 'SET_SEARCH_TEXT', payload: string, -|}; +}; type Action = | ACTION_GO_TO_NEXT_SEARCH_RESULT @@ -111,7 +111,7 @@ function reducer(state: State, action: Action): State { }; } -export type Context = {| +export type Context = { profilerData: TimelineData, // Search state @@ -120,16 +120,16 @@ export type Context = {| searchRegExp: null, searchResults: Array, searchText: string, -|}; +}; const TimelineSearchContext = createContext(((null: any): Context)); TimelineSearchContext.displayName = 'TimelineSearchContext'; -type Props = {| +type Props = { children: React$Node, profilerData: TimelineData, viewState: ViewState, -|}; +}; function TimelineSearchContextController({ children, diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js index 5a4515d1b826c..68fd3eaf33e6a 100644 --- a/packages/react-devtools-timeline/src/TimelineSearchInput.js +++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js @@ -14,7 +14,7 @@ import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput'; import {TimelineContext} from './TimelineContext'; import {TimelineSearchContext} from './TimelineSearchContext'; -type Props = {||}; +type Props = {}; export default function TimelineSearchInput(props: Props) { const {searchInputContainerRef} = useContext(TimelineContext); diff --git a/packages/react-devtools-timeline/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js index a1ad49b5888f2..539ec54759f64 100644 --- a/packages/react-devtools-timeline/src/content-views/utils/colors.js +++ b/packages/react-devtools-timeline/src/content-views/utils/colors.js @@ -7,10 +7,10 @@ * @flow */ -type ColorSpace = number | {|min: number, max: number, count?: number|}; +type ColorSpace = number | {min: number, max: number, count?: number}; // Docstrings from https://www.w3schools.com/css/css_colors_hsl.asp -type HslaColor = $ReadOnly<{| +type HslaColor = $ReadOnly<{ /** Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. */ h: number, /** Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. */ @@ -19,7 +19,7 @@ type HslaColor = $ReadOnly<{| l: number, /** Alpha is a percentage, 0% is fully transparent, and 100 is not transparent at all. */ a: number, -|}>; +}>; export function hslaColorToString({h, s, l, a}: HslaColor): string { return `hsl(${h}deg ${s}% ${l}% / ${a})`; diff --git a/packages/react-devtools-timeline/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js index 9351d1685ff7a..146ba344c1b2a 100644 --- a/packages/react-devtools-timeline/src/content-views/utils/text.js +++ b/packages/react-devtools-timeline/src/content-views/utils/text.js @@ -62,11 +62,11 @@ export function trimText( return longestValidText; } -type TextConfig = {| +type TextConfig = { fillStyle?: string, fontSize?: number, textAlign?: 'left' | 'center', -|}; +}; export function drawText( text: string, diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js index 636a20ed5f7b6..ef9a239c6dbdf 100644 --- a/packages/react-devtools-timeline/src/import-worker/index.js +++ b/packages/react-devtools-timeline/src/import-worker/index.js @@ -22,9 +22,9 @@ const workerizedImportFile: ImportFileModule = window.Worker : importFileModule; export type ImportWorkerOutputData = - | {|status: 'SUCCESS', processedData: TimelineData|} - | {|status: 'INVALID_PROFILE_ERROR', error: Error|} - | {|status: 'UNEXPECTED_ERROR', error: Error|}; + | {status: 'SUCCESS', processedData: TimelineData} + | {status: 'INVALID_PROFILE_ERROR', error: Error} + | {status: 'UNEXPECTED_ERROR', error: Error}; export type importFileFunction = (file: File) => ImportWorkerOutputData; diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js index 110b4e8923fb2..d41bde0267c71 100644 --- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js +++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js @@ -38,15 +38,15 @@ import InvalidProfileError from './InvalidProfileError'; import {getBatchRange} from '../utils/getBatchRange'; import ErrorStackParser from 'error-stack-parser'; -type MeasureStackElement = {| +type MeasureStackElement = { type: ReactMeasureType, depth: number, measure: ReactMeasure, startTime: Milliseconds, stopTime?: Milliseconds, -|}; +}; -type ProcessorState = {| +type ProcessorState = { asyncProcessingPromises: Promise[], batchUID: BatchUID, currentReactComponentMeasure: ReactComponentMeasure | null, @@ -64,7 +64,7 @@ type ProcessorState = {| requestIdToNetworkMeasureMap: Map, uidCounter: BatchUID, unresolvedSuspenseEvents: Map, -|}; +}; const NATIVE_EVENT_DURATION_THRESHOLD = 20; const NESTED_UPDATE_DURATION_THRESHOLD = 20; diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js index 0616f70008640..d2418d76151c5 100644 --- a/packages/react-devtools-timeline/src/timelineCache.js +++ b/packages/react-devtools-timeline/src/timelineCache.js @@ -16,20 +16,20 @@ const Pending = 0; const Resolved = 1; const Rejected = 2; -type PendingRecord = {| +type PendingRecord = { status: 0, value: Wakeable, -|}; +}; -type ResolvedRecord = {| +type ResolvedRecord = { status: 1, value: T, -|}; +}; -type RejectedRecord = {| +type RejectedRecord = { status: 2, value: Error, -|}; +}; type Record = PendingRecord | ResolvedRecord | RejectedRecord; diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js index 429f0a2d210d6..daf764ad151e1 100644 --- a/packages/react-devtools-timeline/src/types.js +++ b/packages/react-devtools-timeline/src/types.js @@ -17,51 +17,51 @@ export type Return = Return_<*, T>; // Project types -export type ErrorStackFrame = {| +export type ErrorStackFrame = { fileName: string, lineNumber: number, columnNumber: number, -|}; +}; export type Milliseconds = number; export type ReactLane = number; -export type NativeEvent = {| +export type NativeEvent = { +depth: number, +duration: Milliseconds, +timestamp: Milliseconds, +type: string, warning: string | null, -|}; +}; -type BaseReactEvent = {| +type BaseReactEvent = { +componentName?: string, +timestamp: Milliseconds, warning: string | null, -|}; +}; -type BaseReactScheduleEvent = {| +type BaseReactScheduleEvent = { ...BaseReactEvent, +lanes: ReactLane[], -|}; -export type ReactScheduleRenderEvent = {| +}; +export type ReactScheduleRenderEvent = { ...BaseReactScheduleEvent, +type: 'schedule-render', -|}; -export type ReactScheduleStateUpdateEvent = {| +}; +export type ReactScheduleStateUpdateEvent = { ...BaseReactScheduleEvent, +componentStack?: string, +type: 'schedule-state-update', -|}; -export type ReactScheduleForceUpdateEvent = {| +}; +export type ReactScheduleForceUpdateEvent = { ...BaseReactScheduleEvent, +type: 'schedule-force-update', -|}; +}; export type Phase = 'mount' | 'update'; -export type SuspenseEvent = {| +export type SuspenseEvent = { ...BaseReactEvent, depth: number, duration: number | null, @@ -70,15 +70,15 @@ export type SuspenseEvent = {| promiseName: string | null, resolution: 'rejected' | 'resolved' | 'unresolved', +type: 'suspense', -|}; +}; -export type ThrownError = {| +export type ThrownError = { +componentName?: string, +message: string, +phase: Phase, +timestamp: Milliseconds, +type: 'thrown-error', -|}; +}; export type SchedulingEvent = | ReactScheduleRenderEvent @@ -97,16 +97,16 @@ export type ReactMeasureType = export type BatchUID = number; -export type ReactMeasure = {| +export type ReactMeasure = { +type: ReactMeasureType, +lanes: ReactLane[], +timestamp: Milliseconds, +duration: Milliseconds, +batchUID: BatchUID, +depth: number, -|}; +}; -export type NetworkMeasure = {| +export type NetworkMeasure = { +depth: number, finishTimestamp: Milliseconds, firstReceivedDataTimestamp: Milliseconds, @@ -117,7 +117,7 @@ export type NetworkMeasure = {| requestMethod: string, sendRequestTimestamp: Milliseconds, url: string, -|}; +}; export type ReactComponentMeasureType = | 'render' @@ -126,38 +126,38 @@ export type ReactComponentMeasureType = | 'passive-effect-mount' | 'passive-effect-unmount'; -export type ReactComponentMeasure = {| +export type ReactComponentMeasure = { +componentName: string, duration: Milliseconds, +timestamp: Milliseconds, +type: ReactComponentMeasureType, warning: string | null, -|}; +}; /** * A flamechart stack frame belonging to a stack trace. */ -export type FlamechartStackFrame = {| +export type FlamechartStackFrame = { name: string, timestamp: Milliseconds, duration: Milliseconds, scriptUrl?: string, locationLine?: number, locationColumn?: number, -|}; +}; -export type UserTimingMark = {| +export type UserTimingMark = { name: string, timestamp: Milliseconds, -|}; +}; -export type Snapshot = {| +export type Snapshot = { height: number, image: Image | null, +imageSource: string, +timestamp: Milliseconds, width: number, -|}; +}; /** * A "layer" of stack frames in the profiler UI, i.e. all stack frames of the @@ -177,7 +177,7 @@ export type SearchRegExpStateChangeCallback = ( // Imperative view state that corresponds to profiler data. // This state lives outside of React's lifecycle // and should be erased/reset whenever new profiler data is loaded. -export type ViewState = {| +export type ViewState = { horizontalScrollState: ScrollState, onHorizontalScrollStateChange: ( callback: HorizontalScrollStateChangeCallback, @@ -189,7 +189,7 @@ export type ViewState = {| updateHorizontalScrollState: (scrollState: ScrollState) => void, updateSearchRegExpState: (searchRegExp: RegExp | null) => void, viewToMutableViewStateMap: Map, -|}; +}; export type InternalModuleSourceToRanges = Map< string, @@ -198,7 +198,7 @@ export type InternalModuleSourceToRanges = Map< export type LaneToLabelMap = Map; -export type TimelineData = {| +export type TimelineData = { batchUIDToMeasuresMap: Map, componentMeasures: ReactComponentMeasure[], duration: number, @@ -216,9 +216,9 @@ export type TimelineData = {| startTime: number, suspenseEvents: SuspenseEvent[], thrownErrors: ThrownError[], -|}; +}; -export type TimelineDataExport = {| +export type TimelineDataExport = { batchUIDToMeasuresKeyValueArray: Array<[BatchUID, ReactMeasure[]]>, componentMeasures: ReactComponentMeasure[], duration: number, @@ -238,9 +238,9 @@ export type TimelineDataExport = {| startTime: number, suspenseEvents: SuspenseEvent[], thrownErrors: ThrownError[], -|}; +}; -export type ReactEventInfo = {| +export type ReactEventInfo = { componentMeasure: ReactComponentMeasure | null, flamechartStackFrame: FlamechartStackFrame | null, measure: ReactMeasure | null, @@ -251,4 +251,4 @@ export type ReactEventInfo = {| snapshot: Snapshot | null, thrownError: ThrownError | null, userTimingMark: UserTimingMark | null, -|}; +}; diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js index 2a36396b8fabc..f2559364f55fa 100644 --- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js +++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js @@ -16,11 +16,11 @@ export default function useSmartTooltip({ canvasRef, mouseX, mouseY, -}: {| - canvasRef: {|current: HTMLCanvasElement | null|}, +}: { + canvasRef: {current: HTMLCanvasElement | null}, mouseX: number, mouseY: number, -|}) { +}) { const ref = useRef(null); // HACK: Browser extension reports window.innerHeight of 0, diff --git a/packages/react-devtools-timeline/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js index 48cebd9cf1b6a..04157cbd5485e 100644 --- a/packages/react-devtools-timeline/src/view-base/Surface.js +++ b/packages/react-devtools-timeline/src/view-base/Surface.js @@ -16,10 +16,10 @@ import {View} from './View'; import {zeroPoint} from './geometry'; import {DPR} from '../content-views/constants'; -export type ViewRefs = {| +export type ViewRefs = { activeView: View | null, hoveredView: View | null, -|}; +}; // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ function configureRetinaCanvas(canvas, height, width) { diff --git a/packages/react-devtools-timeline/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js index 054d8c3e75feb..ba731dc0c6b5f 100644 --- a/packages/react-devtools-timeline/src/view-base/geometry.js +++ b/packages/react-devtools-timeline/src/view-base/geometry.js @@ -7,9 +7,9 @@ * @flow */ -export type Point = $ReadOnly<{|x: number, y: number|}>; -export type Size = $ReadOnly<{|width: number, height: number|}>; -export type IntrinsicSize = {| +export type Point = $ReadOnly<{x: number, y: number}>; +export type Size = $ReadOnly<{width: number, height: number}>; +export type IntrinsicSize = { ...Size, // If content is this height or less, hide the scrollbar entirely, @@ -18,8 +18,8 @@ export type IntrinsicSize = {| // The initial height should be the height of the content, or this, whichever is less. maxInitialHeight?: number, -|}; -export type Rect = $ReadOnly<{|origin: Point, size: Size|}>; +}; +export type Rect = $ReadOnly<{origin: Point, size: Size}>; /** * Alternative representation of `Rect`. diff --git a/packages/react-devtools-timeline/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js index 8f6341270e065..2021d69c1732d 100644 --- a/packages/react-devtools-timeline/src/view-base/layouter.js +++ b/packages/react-devtools-timeline/src/view-base/layouter.js @@ -10,7 +10,7 @@ import type {Rect} from './geometry'; import type {View} from './View'; -export type LayoutInfo = {|view: View, frame: Rect|}; +export type LayoutInfo = {view: View, frame: Rect}; export type Layout = LayoutInfo[]; /** diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js index 36b8f201e4706..6af75bb0587a9 100644 --- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js +++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js @@ -26,17 +26,17 @@ import {rectContainsPoint} from '../geometry'; import {noopLayout} from '../layouter'; import {clamp} from '../utils/clamp'; -type ResizingState = $ReadOnly<{| +type ResizingState = $ReadOnly<{ /** Distance between top of resize bar and mouseY */ cursorOffsetInBarFrame: number, /** Mouse's vertical coordinates relative to canvas */ mouseY: number, -|}>; +}>; -type LayoutState = {| +type LayoutState = { /** Resize bar's vertical position relative to resize view's frame.origin.y */ barOffsetY: number, -|}; +}; const RESIZE_BAR_HEIGHT = 8; const RESIZE_BAR_WITH_LABEL_HEIGHT = 16; @@ -47,7 +47,7 @@ const HIDDEN_RECT = { }; export class ResizableView extends View { - _canvasRef: {|current: HTMLCanvasElement | null|}; + _canvasRef: {current: HTMLCanvasElement | null}; _layoutState: LayoutState; _mutableViewStateKey: string; _resizeBar: ResizeBarView; @@ -60,7 +60,7 @@ export class ResizableView extends View { frame: Rect, subview: View, viewState: ViewState, - canvasRef: {|current: HTMLCanvasElement | null|}, + canvasRef: {current: HTMLCanvasElement | null}, label: string, ) { super(surface, frame, noopLayout); diff --git a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js index f22d8d7211f9b..367569e65a6ab 100644 --- a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js +++ b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js @@ -13,73 +13,73 @@ import type {Point} from './geometry'; import {useEffect, useRef} from 'react'; import {normalizeWheel} from './utils/normalizeWheel'; -export type ClickInteraction = {| +export type ClickInteraction = { type: 'click', - payload: {| + payload: { event: MouseEvent, location: Point, - |}, -|}; -export type DoubleClickInteraction = {| + }, +}; +export type DoubleClickInteraction = { type: 'double-click', - payload: {| + payload: { event: MouseEvent, location: Point, - |}, -|}; -export type MouseDownInteraction = {| + }, +}; +export type MouseDownInteraction = { type: 'mousedown', - payload: {| + payload: { event: MouseEvent, location: Point, - |}, -|}; -export type MouseMoveInteraction = {| + }, +}; +export type MouseMoveInteraction = { type: 'mousemove', - payload: {| + payload: { event: MouseEvent, location: Point, - |}, -|}; -export type MouseUpInteraction = {| + }, +}; +export type MouseUpInteraction = { type: 'mouseup', - payload: {| + payload: { event: MouseEvent, location: Point, - |}, -|}; -export type WheelPlainInteraction = {| + }, +}; +export type WheelPlainInteraction = { type: 'wheel-plain', - payload: {| + payload: { event: WheelEvent, location: Point, delta: NormalizedWheelDelta, - |}, -|}; -export type WheelWithShiftInteraction = {| + }, +}; +export type WheelWithShiftInteraction = { type: 'wheel-shift', - payload: {| + payload: { event: WheelEvent, location: Point, delta: NormalizedWheelDelta, - |}, -|}; -export type WheelWithControlInteraction = {| + }, +}; +export type WheelWithControlInteraction = { type: 'wheel-control', - payload: {| + payload: { event: WheelEvent, location: Point, delta: NormalizedWheelDelta, - |}, -|}; -export type WheelWithMetaInteraction = {| + }, +}; +export type WheelWithMetaInteraction = { type: 'wheel-meta', - payload: {| + payload: { event: WheelEvent, location: Point, delta: NormalizedWheelDelta, - |}, -|}; + }, +}; export type Interaction = | ClickInteraction @@ -112,7 +112,7 @@ function cacheFirstGetCanvasBoundingRect( } export function useCanvasInteraction( - canvasRef: {|current: HTMLCanvasElement | null|}, + canvasRef: {current: HTMLCanvasElement | null}, interactor: (interaction: Interaction) => void, ) { const isMouseDownRef = useRef(false); diff --git a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js index 89de907562d1a..82fe9ec35c0ee 100644 --- a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js +++ b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js @@ -9,10 +9,10 @@ // Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/main/src/vendor_upstream/dom/normalizeWheel.js -export type NormalizedWheelDelta = {| +export type NormalizedWheelDelta = { deltaX: number, deltaY: number, -|}; +}; // Reasonable defaults const LINE_HEIGHT = 40; diff --git a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js index 8089c81e31928..5c59682952bc2 100644 --- a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js +++ b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js @@ -18,10 +18,10 @@ import {clamp} from './clamp'; * |<-------------------length------------------->| * ``` */ -export type ScrollState = {| +export type ScrollState = { offset: number, length: number, -|}; +}; function clampOffset(state: ScrollState, containerLength: number): ScrollState { return { @@ -35,12 +35,12 @@ function clampLength({ minContentLength, maxContentLength, containerLength, -}: {| +}: { state: ScrollState, minContentLength: number, maxContentLength: number, containerLength: number, -|}): ScrollState { +}): ScrollState { return { offset: state.offset, length: clamp( @@ -62,12 +62,12 @@ export function clampState({ minContentLength, maxContentLength, containerLength, -}: {| +}: { state: ScrollState, minContentLength: number, maxContentLength: number, containerLength: number, -|}): ScrollState { +}): ScrollState { return clampOffset( clampLength({ state, @@ -83,11 +83,11 @@ export function translateState({ state, delta, containerLength, -}: {| +}: { state: ScrollState, delta: number, containerLength: number, -|}): ScrollState { +}): ScrollState { return clampOffset( { offset: state.offset + delta, @@ -119,7 +119,7 @@ export function zoomState({ minContentLength, maxContentLength, containerLength, -}: {| +}: { state: ScrollState, multiplier: number, fixedPoint: number, @@ -127,7 +127,7 @@ export function zoomState({ minContentLength: number, maxContentLength: number, containerLength: number, -|}): ScrollState { +}): ScrollState { // Length and offset must be computed separately, so that if the length is // clamped the offset will still be correct (unless it gets clamped too). @@ -164,7 +164,7 @@ export function moveStateToRange({ minContentLength, maxContentLength, containerLength, -}: {| +}: { state: ScrollState, rangeStart: number, rangeEnd: number, @@ -173,7 +173,7 @@ export function moveStateToRange({ minContentLength: number, maxContentLength: number, containerLength: number, -|}): ScrollState { +}): ScrollState { // Length and offset must be computed separately, so that if the length is // clamped the offset will still be correct (unless it gets clamped too). diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js index 0fd0cd1599780..6ec1b6f2ee62e 100644 --- a/packages/react-dom/src/client/ReactDOMEventHandle.js +++ b/packages/react-dom/src/client/ReactDOMEventHandle.js @@ -29,9 +29,9 @@ import { enableCreateEventHandleAPI, } from 'shared/ReactFeatureFlags'; -type EventHandleOptions = {| +type EventHandleOptions = { capture?: boolean, -|}; +}; function isValidEventTarget(target: EventTarget | ReactScopeInstance): boolean { return typeof (target: Object).addEventListener === 'function'; diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 11f527ad583df..4510efe2b892c 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -126,12 +126,12 @@ export type UpdatePayload = Array; export type ChildSet = void; // Unused export type TimeoutHandle = TimeoutID; export type NoTimeout = -1; -export type RendererInspectionConfig = $ReadOnly<{||}>; +export type RendererInspectionConfig = $ReadOnly<{}>; -type SelectionInformation = {| +type SelectionInformation = { focusedElem: null | HTMLElement, selectionRange: mixed, -|}; +}; const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; @@ -733,7 +733,7 @@ export function isSuspenseInstanceFallback(instance: SuspenseInstance) { export function getSuspenseInstanceFallbackErrorDetails( instance: SuspenseInstance, -): {|digest: ?string, message?: string, stack?: string|} { +): {digest: ?string, message?: string, stack?: string} { const dataset = instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset; let digest, message, stack; @@ -1320,20 +1320,20 @@ export function setFocusIfFocusable(node: Instance): boolean { return didFocus; } -type RectRatio = {| +type RectRatio = { ratio: number, rect: BoundingRect, -|}; +}; export function setupIntersectionObserver( targets: Array, callback: ObserveVisibleRectsCallback, options?: IntersectionObserverOptions, -): {| +): { disconnect: () => void, observe: (instance: Instance) => void, unobserve: (instance: Instance) => void, -|} { +} { const rectRatioCache: Map = new Map(); targets.forEach(target => { rectRatioCache.set(target, { diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js index ece9275e4b37e..57f53b5206a82 100644 --- a/packages/react-dom/src/client/ReactDOMSelect.js +++ b/packages/react-dom/src/client/ReactDOMSelect.js @@ -21,9 +21,9 @@ if (__DEV__) { didWarnValueDefaultValue = false; } -type SelectWithWrapperState = HTMLSelectElement & {| - _wrapperState: {|wasMultiple: boolean|}, -|}; +type SelectWithWrapperState = HTMLSelectElement & { + _wrapperState: {wasMultiple: boolean}, +}; function getDeclarationErrorAddendum() { const ownerName = getCurrentFiberOwnerNameInDevOrNull(); diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js index 6834b16e4e97c..065f76d16c12d 100644 --- a/packages/react-dom/src/client/ReactDOMTextarea.js +++ b/packages/react-dom/src/client/ReactDOMTextarea.js @@ -17,9 +17,9 @@ import {disableTextareaChildren} from 'shared/ReactFeatureFlags'; let didWarnValDefaultVal = false; -type TextAreaWithWrapperState = HTMLTextAreaElement & {| - _wrapperState: {|initialValue: ToStringValue|}, -|}; +type TextAreaWithWrapperState = HTMLTextAreaElement & { + _wrapperState: {initialValue: ToStringValue}, +}; /** * Implements a