From 4c69d412a9af56f1bac8f570e16ae8bcca725374 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Mar 2020 10:52:41 -0800 Subject: [PATCH 1/5] Added missing @flow pragma to React.js --- packages/react/src/React.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 3fd7304f99398..7524e779596e6 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -3,6 +3,8 @@ * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. + * + * @flow */ import ReactVersion from 'shared/ReactVersion'; From 09baabcf7afd8fb4d33d389929199044fe3853a6 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Mar 2020 10:52:55 -0800 Subject: [PATCH 2/5] Fixed useContext() return type definition --- packages/react/src/ReactHooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js index c725b0e7c54e0..8df2eeb326110 100644 --- a/packages/react/src/ReactHooks.js +++ b/packages/react/src/ReactHooks.js @@ -37,7 +37,7 @@ function resolveDispatcher() { export function useContext( Context: ReactContext, unstable_observedBits: number | boolean | void, -) { +): T { const dispatcher = resolveDispatcher(); if (__DEV__) { if (unstable_observedBits !== undefined) { From 757c6f84341156f1f060811e16e96950cf76c50d Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Mar 2020 10:53:12 -0800 Subject: [PATCH 3/5] Fixed previously masked Flow errors in DevTools and react-interactions packages --- .../__tests__/inspectedElementContext-test.js | 4 +- .../src/devtools/ContextMenu/ContextMenu.js | 82 +++++++++++-------- .../devtools/ContextMenu/ContextMenuItem.js | 4 +- .../src/devtools/ContextMenu/Contexts.js | 13 ++- .../devtools/ContextMenu/useContextMenu.js | 11 +-- .../devtools/views/Components/Components.js | 44 +++++----- .../devtools/views/Components/EditableName.js | 2 +- .../devtools/views/Components/HooksTree.js | 2 +- .../Components/InspectedElementContext.js | 8 +- .../Components/NativeStyleEditor/context.js | 11 ++- .../views/Components/OwnersListContext.js | 2 +- .../devtools/views/Components/OwnersStack.js | 2 +- .../views/Components/SelectedElement.js | 9 +- .../devtools/views/Components/TreeContext.js | 4 +- .../Components/ViewElementSourceContext.js | 2 +- .../src/devtools/views/ModalDialog.js | 4 +- .../views/Profiler/CommitFlamegraph.js | 4 +- .../devtools/views/Profiler/CommitRanked.js | 4 +- .../views/Profiler/ProfilerContext.js | 7 +- .../Profiler/ProfilingImportExportButtons.js | 6 +- .../views/Settings/SettingsContext.js | 2 +- .../views/Settings/SettingsModalContext.js | 2 +- .../src/devtools/views/context.js | 8 +- .../src/devtools/views/hooks.js | 3 +- .../src/app/EditableProps/index.js | 2 +- .../src/app/ElementTypes/index.js | 2 +- .../src/app/InspectableElements/Contexts.js | 18 ++-- .../src/app/SuspenseTree/index.js | 2 +- .../events/src/dom/ContextMenu.js | 10 +-- .../events/src/dom/Focus.js | 20 ++--- .../events/src/dom/Hover.js | 10 +-- .../events/src/dom/Input.js | 10 +-- .../events/src/dom/Keyboard.js | 10 +-- .../events/src/dom/PressLegacy.js | 10 +-- .../react-interactions/events/src/dom/Tap.js | 12 +-- 35 files changed, 194 insertions(+), 152 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js index 07ee71fc69de3..9ec9acbca4d58 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js @@ -148,7 +148,7 @@ describe('InspectedElementContext', () => { // Modern Context API const BoolContext = React.createContext(contextData.bool); - BoolContext.displayName = 'BoolContext'; + (BoolContext: any).displayName = 'BoolContext'; class ModernContextType extends React.Component { static contextType = BoolContext; @@ -158,7 +158,7 @@ describe('InspectedElementContext', () => { } const ModernContext = React.createContext(); - ModernContext.displayName = 'ModernContext'; + (ModernContext: any).displayName = 'ModernContext'; const container = document.createElement('div'); await utils.actAsync(() => diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js index 467a6eaa15ea5..a3742787da981 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js @@ -14,6 +14,8 @@ import {RegistryContext} from './Contexts'; import styles from './ContextMenu.css'; +import type {RegistryContextType} from './Contexts'; + function respositionToFit(element: HTMLElement, pageX: number, pageY: number) { const ownerWindow = element.ownerDocument.defaultView; if (element !== null) { @@ -52,7 +54,7 @@ type Props = {| |}; export default function ContextMenu({children, id}: Props) { - const {registerMenu} = useContext(RegistryContext); + const {registerMenu} = useContext(RegistryContext); const [state, setState] = useState(HIDDEN_STATE); @@ -61,12 +63,15 @@ export default function ContextMenu({children, id}: Props) { const menuRef = useRef(null); useEffect(() => { - const ownerDocument = bodyAccessorRef.current.ownerDocument; - containerRef.current = ownerDocument.createElement('div'); - ownerDocument.body.appendChild(containerRef.current); - return () => { - ownerDocument.body.removeChild(containerRef.current); - }; + const element = bodyAccessorRef.current; + if (element !== null) { + const ownerDocument = element.ownerDocument; + containerRef.current = ownerDocument.createElement('div'); + ownerDocument.body.appendChild(containerRef.current); + return () => { + ownerDocument.body.removeChild(containerRef.current); + }; + } }, []); useEffect(() => { @@ -82,45 +87,52 @@ export default function ContextMenu({children, id}: Props) { return; } - const menu = menuRef.current; + const menu = ((menuRef.current: any): HTMLElement); + const container = containerRef.current; + if (container !== null) { + const hideUnlessContains = event => { + if (!menu.contains(event.target)) { + setState(HIDDEN_STATE); + } + }; - const hideUnlessContains = event => { - if (!menu.contains(event.target)) { + const hide = event => { setState(HIDDEN_STATE); - } - }; + }; - const hide = event => { - setState(HIDDEN_STATE); - }; + const ownerDocument = container.ownerDocument; + ownerDocument.addEventListener('mousedown', hideUnlessContains); + ownerDocument.addEventListener('touchstart', hideUnlessContains); + ownerDocument.addEventListener('keydown', hideUnlessContains); - const ownerDocument = containerRef.current.ownerDocument; - ownerDocument.addEventListener('mousedown', hideUnlessContains); - ownerDocument.addEventListener('touchstart', hideUnlessContains); - ownerDocument.addEventListener('keydown', hideUnlessContains); + const ownerWindow = ownerDocument.defaultView; + ownerWindow.addEventListener('resize', hide); - const ownerWindow = ownerDocument.defaultView; - ownerWindow.addEventListener('resize', hide); + respositionToFit(menu, state.pageX, state.pageY); - respositionToFit(menu, state.pageX, state.pageY); + return () => { + ownerDocument.removeEventListener('mousedown', hideUnlessContains); + ownerDocument.removeEventListener('touchstart', hideUnlessContains); + ownerDocument.removeEventListener('keydown', hideUnlessContains); - return () => { - ownerDocument.removeEventListener('mousedown', hideUnlessContains); - ownerDocument.removeEventListener('touchstart', hideUnlessContains); - ownerDocument.removeEventListener('keydown', hideUnlessContains); - - ownerWindow.removeEventListener('resize', hide); - }; + ownerWindow.removeEventListener('resize', hide); + }; + } }, [state]); if (!state.isVisible) { return
; } else { - return createPortal( -
- {children(state.data)} -
, - containerRef.current, - ); + const container = containerRef.current; + if (container !== null) { + return createPortal( +
+ {children(state.data)} +
, + container, + ); + } else { + return null; + } } } diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js index 1b8ebb7cdcb75..f56bad1110b85 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js @@ -13,6 +13,8 @@ import {RegistryContext} from './Contexts'; import styles from './ContextMenuItem.css'; +import type {RegistryContextType} from './Contexts'; + type Props = {| children: React$Node, onClick: () => void, @@ -20,7 +22,7 @@ type Props = {| |}; export default function ContextMenuItem({children, onClick, title}: Props) { - const {hideMenu} = useContext(RegistryContext); + const {hideMenu} = useContext(RegistryContext); const handleClick = event => { onClick(); diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js index 9cf99a3d6adaf..0d2e55106c89f 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js @@ -55,7 +55,18 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) { }; } -export const RegistryContext = createContext({ +export type RegistryContextType = {| + hideMenu: () => void, + showMenu: ({| + data: Object, + id: string, + pageX: number, + pageY: number, + |}) => void, + registerMenu: (string, ShowFn, HideFn) => Function, +|}; + +export const RegistryContext = createContext({ hideMenu, showMenu, registerMenu, diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js index 3829a4377ee34..1c713bae73dd5 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js @@ -10,6 +10,7 @@ import {useContext, useEffect} from 'react'; import {RegistryContext} from './Contexts'; +import type {RegistryContextType} from './Contexts'; import type {ElementRef} from 'react'; export default function useContextMenu({ @@ -21,7 +22,7 @@ export default function useContextMenu({ id: string, ref: {current: ElementRef<'div'> | null}, |}) { - const {showMenu} = useContext(RegistryContext); + const {showMenu} = useContext(RegistryContext); useEffect(() => { if (ref.current !== null) { @@ -30,11 +31,11 @@ export default function useContextMenu({ event.stopPropagation(); const pageX = - event.pageX || - (event.touches && ((event: any): TouchEvent).touches[0].pageX); + (event: any).pageX || + (event.touches && (event: any).touches[0].pageX); const pageY = - event.pageY || - (event.touches && ((event: any): TouchEvent).touches[0].pageY); + (event: any).pageY || + (event.touches && (event: any).touches[0].pageY); showMenu({data, id, pageX, pageY}); }; 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 9e666548b6dd3..23d4888bf7a61 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js @@ -32,11 +32,30 @@ import {NativeStyleContextController} from './NativeStyleEditor/context'; import styles from './Components.css'; +type Orientation = 'horizontal' | 'vertical'; + +type ResizeActionType = + | 'ACTION_SET_DID_MOUNT' + | 'ACTION_SET_IS_RESIZING' + | 'ACTION_SET_HORIZONTAL_PERCENTAGE' + | 'ACTION_SET_VERTICAL_PERCENTAGE'; + +type ResizeAction = {| + type: ResizeActionType, + payload: any, +|}; + +type ResizeState = {| + horizontalPercentage: number, + isResizing: boolean, + verticalPercentage: number, +|}; + function Components(_: {||}) { - const wrapperElementRef = useRef(null); - const resizeElementRef = useRef(null); + const wrapperElementRef = useRef(null); + const resizeElementRef = useRef(null); - const [state, dispatch] = useReducer( + const [state, dispatch] = useReducer( resizeReducer, null, initResizeState, @@ -171,25 +190,6 @@ const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer'; const VERTICAL_MODE_MAX_WIDTH = 600; const MINIMUM_SIZE = 50; -type Orientation = 'horizontal' | 'vertical'; - -type ResizeActionType = - | 'ACTION_SET_DID_MOUNT' - | 'ACTION_SET_IS_RESIZING' - | 'ACTION_SET_HORIZONTAL_PERCENTAGE' - | 'ACTION_SET_VERTICAL_PERCENTAGE'; - -type ResizeAction = {| - type: ResizeActionType, - payload: any, -|}; - -type ResizeState = {| - horizontalPercentage: number, - isResizing: boolean, - verticalPercentage: number, -|}; - function initResizeState(): ResizeState { let horizontalPercentage = 0.65; let verticalPercentage = 0.5; 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 e73f725407839..318596b644a9c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js @@ -12,7 +12,7 @@ import {useCallback, useState} from 'react'; import AutoSizeInput from './NativeStyleEditor/AutoSizeInput'; import styles from './EditableName.css'; -type OverrideNameFn = (path: Array, value: any) => void; +type OverrideNameFn = (name: string, value: any) => void; type EditableNameProps = {| autoFocus?: boolean, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js index 1c710c5e7c859..f055d207e9066 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js @@ -241,7 +241,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) { } else { let overrideValueFn = null; // TODO Maybe read editable value from debug hook? - if (canEditHooks && isStateEditable) { + if (canEditHooks && isStateEditable && hookID !== null) { overrideValueFn = ( absolutePath: Array, newValue: any, 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 5d3ae1f74f201..acdd5f6df40a3 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js @@ -51,15 +51,17 @@ export type GetInspectedElement = ( id: number, ) => InspectedElementFrontend | null; -type Context = {| +export type InspectedElementContextType = {| copyInspectedElementPath: CopyInspectedElementPath, getInspectedElementPath: GetInspectedElementPath, getInspectedElement: GetInspectedElement, storeAsGlobal: StoreAsGlobal, |}; -const InspectedElementContext = createContext(((null: any): Context)); -InspectedElementContext.displayName = 'InspectedElementContext'; +const InspectedElementContext = createContext( + ((null: any): InspectedElementContextType), +); +(InspectedElementContext: any).displayName = 'InspectedElementContext'; type ResolveFn = (inspectedElement: InspectedElementFrontend) => void; type InProgressRequest = {| 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 52e22fe23c974..0093f3f13179a 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 @@ -24,6 +24,9 @@ import { } from 'react-devtools-shared/src/devtools/views/context'; import {TreeStateContext} from '../TreeContext'; +import type {StateContext} from '../TreeContext'; +import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; +import type Store from 'react-devtools-shared/src/devtools/store'; import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types'; import type {StyleAndLayout as StyleAndLayoutFrontend} from './types'; import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types'; @@ -39,7 +42,7 @@ type Context = {| |}; const NativeStyleContext = createContext(((null: any): Context)); -NativeStyleContext.displayName = 'NativeStyleContext'; +(NativeStyleContext: any).displayName = 'NativeStyleContext'; type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void; type InProgressRequest = {| @@ -77,8 +80,8 @@ type Props = {| |}; function NativeStyleContextController({children}: Props) { - const bridge = useContext(BridgeContext); - const store = useContext(StoreContext); + const bridge = useContext(BridgeContext); + const store = useContext(StoreContext); const getStyleAndLayout = useCallback( (id: number) => { @@ -95,7 +98,7 @@ function NativeStyleContextController({children}: Props) { // It's very important that this context consumes selectedElementID and not NativeStyleID. // Otherwise the effect that sends the "inspect" message across the bridge- // would itself be blocked by the same render that suspends (waiting for the data). - const {selectedElementID} = useContext(TreeStateContext); + const {selectedElementID} = useContext(TreeStateContext); const [ currentStyleAndLayout, 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 493ee8d966122..abf0867e1933e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -24,7 +24,7 @@ import type {Resource, Thenable} from '../../cache'; type Context = (id: number) => Array | null; const OwnersListContext = createContext(((null: any): Context)); -OwnersListContext.displayName = 'OwnersListContext'; +(OwnersListContext: any).displayName = 'OwnersListContext'; type ResolveFn = (ownersList: Array | null) => void; type InProgressRequest = {| 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 6be2a699991e8..609a77b001e6a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js @@ -77,7 +77,7 @@ export default function OwnerStack() { const {ownerID} = useContext(TreeStateContext); const treeDispatch = useContext(TreeDispatcherContext); - const [state, dispatch] = useReducer(dialogReducer, { + const [state, dispatch] = useReducer(dialogReducer, { ownerID: null, owners: [], selectedIndex: 0, diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js index 563cd6f6374fe..f65b8e0a777e5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js @@ -37,9 +37,11 @@ import { import styles from './SelectedElement.css'; +import type {ContextMenuContextType} from '../context'; import type { CopyInspectedElementPath, GetInspectedElementPath, + InspectedElementContextType, StoreAsGlobal, } from './InspectedElementContext'; import type {Element, InspectedElement} from './types'; @@ -62,8 +64,7 @@ export default function SelectedElement(_: Props) { getInspectedElementPath, getInspectedElement, storeAsGlobal, - viewInspectedElementPath, - } = useContext(InspectedElementContext); + } = useContext(InspectedElementContext); const element = inspectedElementID !== null @@ -244,7 +245,6 @@ export default function SelectedElement(_: Props) { getInspectedElementPath={getInspectedElementPath} inspectedElement={inspectedElement} storeAsGlobal={storeAsGlobal} - viewInspectedElementPath={viewInspectedElementPath} /> )}
@@ -270,7 +270,6 @@ function InspectedElementView({ getInspectedElementPath, inspectedElement, storeAsGlobal, - viewInspectedElementPath, }: InspectedElementViewProps) { const {id, type} = element; const { @@ -293,7 +292,7 @@ function InspectedElementView({ const { isEnabledForInspectedElement, viewAttributeSourceFunction, - } = useContext(ContextMenuContext); + } = useContext(ContextMenuContext); const inspectContextPath = useCallback( (path: Array) => { 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 8d23660dbcdb6..7847fbc2db74d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -130,12 +130,12 @@ export type DispatcherContext = (action: Action) => void; const TreeStateContext = createContext( ((null: any): StateContext), ); -TreeStateContext.displayName = 'TreeStateContext'; +(TreeStateContext: any).displayName = 'TreeStateContext'; const TreeDispatcherContext = createContext( ((null: any): DispatcherContext), ); -TreeDispatcherContext.displayName = 'TreeDispatcherContext'; +(TreeDispatcherContext: any).displayName = 'TreeDispatcherContext'; type State = {| // Tree 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..ba9c33d604730 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js @@ -20,6 +20,6 @@ export type Context = {| |}; const ViewElementSourceContext = createContext(((null: any): Context)); -ViewElementSourceContext.displayName = 'ViewElementSourceContext'; +(ViewElementSourceContext: any).displayName = 'ViewElementSourceContext'; export default ViewElementSourceContext; diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index 014a317049d01..ab8ec90f5cb5a 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -50,7 +50,7 @@ type ModalDialogContextType = {| const ModalDialogContext = createContext( ((null: any): ModalDialogContextType), ); -ModalDialogContext.displayName = 'ModalDialogContext'; +(ModalDialogContext: any).displayName = 'ModalDialogContext'; function dialogReducer(state, action) { switch (action.type) { @@ -78,7 +78,7 @@ type Props = {| |}; function ModalDialogContextController({children}: Props) { - const [state, dispatch] = useReducer(dialogReducer, { + const [state, dispatch] = useReducer(dialogReducer, { canBeDismissed: true, content: null, isVisible: false, 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 f86573037e12c..77afddbf040ee 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js @@ -96,7 +96,9 @@ type Props = {| |}; function CommitFlamegraph({chartData, commitTree, height, width}: Props) { - const [hoveredFiberData, hoverFiber] = useState(null); + const [hoveredFiberData, hoverFiber] = useState( + null, + ); const {lineHeight} = useContext(SettingsContext); const {selectFiber, selectedFiberID} = useContext(ProfilerContext); 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 e20692fd4df94..996433dffc282 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js @@ -94,7 +94,9 @@ type Props = {| |}; function CommitRanked({chartData, commitTree, height, width}: Props) { - const [hoveredFiberData, hoverFiber] = useState(null); + const [hoveredFiberData, hoverFiber] = useState( + null, + ); const {lineHeight} = useContext(SettingsContext); const {selectedFiberID, selectFiber} = useContext(ProfilerContext); 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 71b82267b8372..5e148c52a6cc4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -71,7 +71,7 @@ export type Context = {| |}; const ProfilerContext = createContext(((null: any): Context)); -ProfilerContext.displayName = 'ProfilerContext'; +(ProfilerContext: any).displayName = 'ProfilerContext'; type StoreProfilingState = {| didRecordCommits: boolean, @@ -124,7 +124,10 @@ function ProfilerContextController({children}: Props) { supportsProfiling, } = useSubscription(subscription); - const [prevProfilingData, setPrevProfilingData] = useState(); + const [ + prevProfilingData, + setPrevProfilingData, + ] = useState(null); const [rootID, setRootID] = useState(null); if (prevProfilingData !== profilingData) { diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js index 8d7112b31e226..7f14438aaa6ec 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js @@ -39,7 +39,9 @@ export default function ProfilingImportExportButtons() { return; } - if (profilingData !== null && downloadRef.current !== null) { + const anchorElement = downloadRef.current; + + if (profilingData !== null && anchorElement !== null) { const profilingDataExport = prepareProfilingDataExport(profilingData); const date = new Date(); const dateString = date @@ -55,7 +57,7 @@ export default function ProfilingImportExportButtons() { }) .replace(/:/g, '-'); downloadFile( - downloadRef.current, + anchorElement, `profiling-data.${dateString}.${timeString}.json`, JSON.stringify(profilingDataExport, null, 2), ); 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 3bafda92f74fd..ed56eb249c234 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -48,7 +48,7 @@ type Context = {| |}; const SettingsContext = createContext(((null: any): Context)); -SettingsContext.displayName = 'SettingsContext'; +(SettingsContext: any).displayName = 'SettingsContext'; type DocumentElements = Array; 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..d3a2564942da8 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js @@ -20,7 +20,7 @@ type Context = { }; const SettingsModalContext = createContext(((null: any): Context)); -SettingsModalContext.displayName = 'SettingsModalContext'; +(SettingsModalContext: any).displayName = 'SettingsModalContext'; function SettingsModalContextController({children}: {|children: React$Node|}) { const [isModalShowing, setIsModalShowing] = useState(false); diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js index fcc59935d4551..4b9c753e514e0 100644 --- a/packages/react-devtools-shared/src/devtools/views/context.js +++ b/packages/react-devtools-shared/src/devtools/views/context.js @@ -16,18 +16,18 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; export const BridgeContext = createContext( ((null: any): FrontendBridge), ); -BridgeContext.displayName = 'BridgeContext'; +(BridgeContext: any).displayName = 'BridgeContext'; export const StoreContext = createContext(((null: any): Store)); -StoreContext.displayName = 'StoreContext'; +(StoreContext: any).displayName = 'StoreContext'; export type ContextMenuContextType = {| isEnabledForInspectedElement: boolean, - viewAttributeSourceFunction?: ?ViewAttributeSource, + viewAttributeSourceFunction: ViewAttributeSource | null, |}; export const ContextMenuContext = createContext({ isEnabledForInspectedElement: false, viewAttributeSourceFunction: null, }); -ContextMenuContext.displayName = 'ContextMenuContext'; +(ContextMenuContext: any).displayName = 'ContextMenuContext'; diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index a8fb43dd61a12..cace5451df589 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -78,6 +78,7 @@ export function useEditableValue( externalValue: any, ): [UseEditableValueState, UseEditableValueDispatch] { const [state, dispatch] = useReducer< + UseEditableValueState, UseEditableValueState, UseEditableValueAction, >(useEditableValueReducer, { @@ -158,7 +159,7 @@ export function useLocalStorage( } }, [initialValue, key]); - const [storedValue, setStoredValue] = useState(getValueFromLocalStorage); + const [storedValue, setStoredValue] = useState(getValueFromLocalStorage); const setValue = useCallback( value => { diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index 306ac73b91a7c..29afa9e295823 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -66,7 +66,7 @@ function StatefulFunction({name}: StatefulFunctionProps) { } const BoolContext = createContext(true); -BoolContext.displayName = 'BoolContext'; +(BoolContext: any).displayName = 'BoolContext'; type Props = {|name: string, toggle: boolean|}; type State = {|cities: Array, state: string|}; diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js index 3b2c97dae5036..29d735450720d 100644 --- a/packages/react-devtools-shell/src/app/ElementTypes/index.js +++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js @@ -22,7 +22,7 @@ import { } from 'react'; const Context = createContext('abc'); -Context.displayName = 'ExampleContext'; +(Context: any).displayName = 'ExampleContext'; class ClassComponent extends Component { render() { diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js index 030e995e356c4..e5efb3cd376ca 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js @@ -66,23 +66,23 @@ class LegacyContextConsumer extends Component { } const ModernContext = createContext(); -ModernContext.displayName = 'ModernContext'; +(ModernContext: any).displayName = 'ModernContext'; const ArrayContext = createContext(contextData.array); -ArrayContext.displayName = 'ArrayContext'; +(ArrayContext: any).displayName = 'ArrayContext'; const BoolContext = createContext(contextData.bool); -BoolContext.displayName = 'BoolContext'; +(BoolContext: any).displayName = 'BoolContext'; const FuncContext = createContext(contextData.func); -FuncContext.displayName = 'FuncContext'; +(FuncContext: any).displayName = 'FuncContext'; const NumberContext = createContext(contextData.number); -NumberContext.displayName = 'NumberContext'; +(NumberContext: any).displayName = 'NumberContext'; const StringContext = createContext(contextData.string); -StringContext.displayName = 'StringContext'; +(StringContext: any).displayName = 'StringContext'; const SymbolContext = createContext(contextData.symbol); -SymbolContext.displayName = 'SymbolContext'; +(SymbolContext: any).displayName = 'SymbolContext'; const NullContext = createContext(null); -NullContext.displayName = 'NullContext'; +(NullContext: any).displayName = 'NullContext'; const UndefinedContext = createContext(undefined); -UndefinedContext.displayName = 'UndefinedContext'; +(UndefinedContext: any).displayName = 'UndefinedContext'; class ModernContextType extends Component { static contextType = ModernContext; diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js index 73701922d2250..0044485b8bd1e 100644 --- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js +++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js @@ -128,7 +128,7 @@ function SuspenseListTest() { } function LoadLater() { - const [loadChild, setLoadChild] = useState(0); + const [loadChild, setLoadChild] = useState(false); return ( ('ContextMenu', contextMenuImpl); export function useContextMenu( props: ContextMenuProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(ContextMenuResponder, props); } diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js index 5b4e184915280..57719e8d69cec 100644 --- a/packages/react-interactions/events/src/dom/Focus.js +++ b/packages/react-interactions/events/src/dom/Focus.js @@ -494,14 +494,14 @@ const focusResponderImpl = { }, }; -export const FocusResponder = React.DEPRECATED_createResponder( - 'Focus', - focusResponderImpl, -); +export const FocusResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Focus', focusResponderImpl); export function useFocus( props: FocusProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(FocusResponder, props); } @@ -680,13 +680,13 @@ const focusWithinResponderImpl = { }, }; -export const FocusWithinResponder = React.DEPRECATED_createResponder( - 'FocusWithin', - focusWithinResponderImpl, -); +export const FocusWithinResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('FocusWithin', focusWithinResponderImpl); export function useFocusWithin( props: FocusWithinProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(FocusWithinResponder, props); } diff --git a/packages/react-interactions/events/src/dom/Hover.js b/packages/react-interactions/events/src/dom/Hover.js index 73c18714c9211..8613f25983e4f 100644 --- a/packages/react-interactions/events/src/dom/Hover.js +++ b/packages/react-interactions/events/src/dom/Hover.js @@ -378,13 +378,13 @@ const hoverResponderFallbackImpl = { onUnmount: unmountResponder, }; -export const HoverResponder = React.DEPRECATED_createResponder( - 'Hover', - hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl, -); +export const HoverResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Hover', hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl); export function useHover( props: HoverProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(HoverResponder, props); } diff --git a/packages/react-interactions/events/src/dom/Input.js b/packages/react-interactions/events/src/dom/Input.js index f7f40546d4ff3..30d35d88bf0b5 100644 --- a/packages/react-interactions/events/src/dom/Input.js +++ b/packages/react-interactions/events/src/dom/Input.js @@ -212,13 +212,13 @@ const inputResponderImpl = { }, }; -export const InputResponder = React.DEPRECATED_createResponder( - 'Input', - inputResponderImpl, -); +export const InputResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Input', inputResponderImpl); export function useInput( props: InputResponderProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(InputResponder, props); } diff --git a/packages/react-interactions/events/src/dom/Keyboard.js b/packages/react-interactions/events/src/dom/Keyboard.js index fa3575849cd3e..2d2c947f29f8c 100644 --- a/packages/react-interactions/events/src/dom/Keyboard.js +++ b/packages/react-interactions/events/src/dom/Keyboard.js @@ -229,13 +229,13 @@ const keyboardResponderImpl = { }, }; -export const KeyboardResponder = React.DEPRECATED_createResponder( - 'Keyboard', - keyboardResponderImpl, -); +export const KeyboardResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Keyboard', keyboardResponderImpl); export function useKeyboard( props: KeyboardProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(KeyboardResponder, props); } diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js index c9791ce3d7b4f..8f0c27fff02f6 100644 --- a/packages/react-interactions/events/src/dom/PressLegacy.js +++ b/packages/react-interactions/events/src/dom/PressLegacy.js @@ -903,13 +903,13 @@ const pressResponderImpl = { }, }; -export const PressResponder = React.DEPRECATED_createResponder( - 'Press', - pressResponderImpl, -); +export const PressResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Press', pressResponderImpl); export function usePress( props: PressProps, -): ReactEventResponderListener { +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(PressResponder, props); } diff --git a/packages/react-interactions/events/src/dom/Tap.js b/packages/react-interactions/events/src/dom/Tap.js index 9d81531099f8a..28cf806f88343 100644 --- a/packages/react-interactions/events/src/dom/Tap.js +++ b/packages/react-interactions/events/src/dom/Tap.js @@ -721,11 +721,13 @@ const responderImpl = { }, }; -export const TapResponder = React.DEPRECATED_createResponder( - 'Tap', - responderImpl, -); +export const TapResponder = React.DEPRECATED_createResponder< + ReactDOMResponderEvent, + ReactDOMResponderContext, +>('Tap', responderImpl); -export function useTap(props: TapProps): ReactEventResponderListener { +export function useTap( + props: TapProps, +): ?ReactEventResponderListener { return React.DEPRECATED_useResponder(TapResponder, props); } From 24f5ac693b90964263a82d5583a27092bd9983e4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Mar 2020 11:03:17 -0800 Subject: [PATCH 4/5] Added displayName to internal Context Flow type --- .../__tests__/inspectedElementContext-test.js | 4 ++-- .../Components/InspectedElementContext.js | 2 +- .../Components/NativeStyleEditor/context.js | 2 +- .../views/Components/OwnersListContext.js | 2 +- .../devtools/views/Components/TreeContext.js | 4 ++-- .../Components/ViewElementSourceContext.js | 2 +- .../src/devtools/views/ModalDialog.js | 2 +- .../devtools/views/Profiler/ProfilerContext.js | 2 +- .../devtools/views/Settings/SettingsContext.js | 2 +- .../views/Settings/SettingsModalContext.js | 2 +- .../src/devtools/views/context.js | 6 +++--- .../src/app/EditableProps/index.js | 2 +- .../src/app/ElementTypes/index.js | 2 +- .../src/app/InspectableElements/Contexts.js | 18 +++++++++--------- packages/shared/ReactTypes.js | 3 +++ 15 files changed, 29 insertions(+), 26 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js index 9ec9acbca4d58..07ee71fc69de3 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js @@ -148,7 +148,7 @@ describe('InspectedElementContext', () => { // Modern Context API const BoolContext = React.createContext(contextData.bool); - (BoolContext: any).displayName = 'BoolContext'; + BoolContext.displayName = 'BoolContext'; class ModernContextType extends React.Component { static contextType = BoolContext; @@ -158,7 +158,7 @@ describe('InspectedElementContext', () => { } const ModernContext = React.createContext(); - (ModernContext: any).displayName = 'ModernContext'; + ModernContext.displayName = 'ModernContext'; const container = document.createElement('div'); await utils.actAsync(() => 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 acdd5f6df40a3..454d574a79ece 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js @@ -61,7 +61,7 @@ export type InspectedElementContextType = {| const InspectedElementContext = createContext( ((null: any): InspectedElementContextType), ); -(InspectedElementContext: any).displayName = 'InspectedElementContext'; +InspectedElementContext.displayName = 'InspectedElementContext'; type ResolveFn = (inspectedElement: InspectedElementFrontend) => void; type InProgressRequest = {| 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 0093f3f13179a..029909f3134d1 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 @@ -42,7 +42,7 @@ type Context = {| |}; const NativeStyleContext = createContext(((null: any): Context)); -(NativeStyleContext: any).displayName = 'NativeStyleContext'; +NativeStyleContext.displayName = 'NativeStyleContext'; type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void; type InProgressRequest = {| 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 abf0867e1933e..493ee8d966122 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -24,7 +24,7 @@ import type {Resource, Thenable} from '../../cache'; type Context = (id: number) => Array | null; const OwnersListContext = createContext(((null: any): Context)); -(OwnersListContext: any).displayName = 'OwnersListContext'; +OwnersListContext.displayName = 'OwnersListContext'; type ResolveFn = (ownersList: Array | null) => void; type InProgressRequest = {| 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 7847fbc2db74d..8d23660dbcdb6 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -130,12 +130,12 @@ export type DispatcherContext = (action: Action) => void; const TreeStateContext = createContext( ((null: any): StateContext), ); -(TreeStateContext: any).displayName = 'TreeStateContext'; +TreeStateContext.displayName = 'TreeStateContext'; const TreeDispatcherContext = createContext( ((null: any): DispatcherContext), ); -(TreeDispatcherContext: any).displayName = 'TreeDispatcherContext'; +TreeDispatcherContext.displayName = 'TreeDispatcherContext'; type State = {| // Tree 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 ba9c33d604730..3dc061c354567 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js @@ -20,6 +20,6 @@ export type Context = {| |}; const ViewElementSourceContext = createContext(((null: any): Context)); -(ViewElementSourceContext: any).displayName = 'ViewElementSourceContext'; +ViewElementSourceContext.displayName = 'ViewElementSourceContext'; export default ViewElementSourceContext; diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js index ab8ec90f5cb5a..770c106d8c871 100644 --- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js @@ -50,7 +50,7 @@ type ModalDialogContextType = {| const ModalDialogContext = createContext( ((null: any): ModalDialogContextType), ); -(ModalDialogContext: any).displayName = 'ModalDialogContext'; +ModalDialogContext.displayName = 'ModalDialogContext'; function dialogReducer(state, action) { switch (action.type) { 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 5e148c52a6cc4..f9e0460220a10 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -71,7 +71,7 @@ export type Context = {| |}; const ProfilerContext = createContext(((null: any): Context)); -(ProfilerContext: any).displayName = 'ProfilerContext'; +ProfilerContext.displayName = 'ProfilerContext'; type StoreProfilingState = {| didRecordCommits: boolean, 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 ed56eb249c234..3bafda92f74fd 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -48,7 +48,7 @@ type Context = {| |}; const SettingsContext = createContext(((null: any): Context)); -(SettingsContext: any).displayName = 'SettingsContext'; +SettingsContext.displayName = 'SettingsContext'; type DocumentElements = Array; 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 d3a2564942da8..d3b500cee872b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js @@ -20,7 +20,7 @@ type Context = { }; const SettingsModalContext = createContext(((null: any): Context)); -(SettingsModalContext: any).displayName = 'SettingsModalContext'; +SettingsModalContext.displayName = 'SettingsModalContext'; function SettingsModalContextController({children}: {|children: React$Node|}) { const [isModalShowing, setIsModalShowing] = useState(false); diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js index 4b9c753e514e0..a26d704cd28a6 100644 --- a/packages/react-devtools-shared/src/devtools/views/context.js +++ b/packages/react-devtools-shared/src/devtools/views/context.js @@ -16,10 +16,10 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; export const BridgeContext = createContext( ((null: any): FrontendBridge), ); -(BridgeContext: any).displayName = 'BridgeContext'; +BridgeContext.displayName = 'BridgeContext'; export const StoreContext = createContext(((null: any): Store)); -(StoreContext: any).displayName = 'StoreContext'; +StoreContext.displayName = 'StoreContext'; export type ContextMenuContextType = {| isEnabledForInspectedElement: boolean, @@ -30,4 +30,4 @@ export const ContextMenuContext = createContext({ isEnabledForInspectedElement: false, viewAttributeSourceFunction: null, }); -(ContextMenuContext: any).displayName = 'ContextMenuContext'; +ContextMenuContext.displayName = 'ContextMenuContext'; diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js index 29afa9e295823..306ac73b91a7c 100644 --- a/packages/react-devtools-shell/src/app/EditableProps/index.js +++ b/packages/react-devtools-shell/src/app/EditableProps/index.js @@ -66,7 +66,7 @@ function StatefulFunction({name}: StatefulFunctionProps) { } const BoolContext = createContext(true); -(BoolContext: any).displayName = 'BoolContext'; +BoolContext.displayName = 'BoolContext'; type Props = {|name: string, toggle: boolean|}; type State = {|cities: Array, state: string|}; diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js index 29d735450720d..3b2c97dae5036 100644 --- a/packages/react-devtools-shell/src/app/ElementTypes/index.js +++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js @@ -22,7 +22,7 @@ import { } from 'react'; const Context = createContext('abc'); -(Context: any).displayName = 'ExampleContext'; +Context.displayName = 'ExampleContext'; class ClassComponent extends Component { render() { diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js index e5efb3cd376ca..030e995e356c4 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js @@ -66,23 +66,23 @@ class LegacyContextConsumer extends Component { } const ModernContext = createContext(); -(ModernContext: any).displayName = 'ModernContext'; +ModernContext.displayName = 'ModernContext'; const ArrayContext = createContext(contextData.array); -(ArrayContext: any).displayName = 'ArrayContext'; +ArrayContext.displayName = 'ArrayContext'; const BoolContext = createContext(contextData.bool); -(BoolContext: any).displayName = 'BoolContext'; +BoolContext.displayName = 'BoolContext'; const FuncContext = createContext(contextData.func); -(FuncContext: any).displayName = 'FuncContext'; +FuncContext.displayName = 'FuncContext'; const NumberContext = createContext(contextData.number); -(NumberContext: any).displayName = 'NumberContext'; +NumberContext.displayName = 'NumberContext'; const StringContext = createContext(contextData.string); -(StringContext: any).displayName = 'StringContext'; +StringContext.displayName = 'StringContext'; const SymbolContext = createContext(contextData.symbol); -(SymbolContext: any).displayName = 'SymbolContext'; +SymbolContext.displayName = 'SymbolContext'; const NullContext = createContext(null); -(NullContext: any).displayName = 'NullContext'; +NullContext.displayName = 'NullContext'; const UndefinedContext = createContext(undefined); -(UndefinedContext: any).displayName = 'UndefinedContext'; +UndefinedContext.displayName = 'UndefinedContext'; class ModernContextType extends Component { static contextType = ModernContext; diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 74c255577dbd7..2b87427cba8fc 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -66,6 +66,9 @@ export type ReactContext = { // DEV only _currentRenderer?: Object | null, _currentRenderer2?: Object | null, + // This value may be added by application code + // to improve DEV tooling display names + displayName?: string, ... }; From 0c34969c3359b7220084d36fcfc04feaf3d1557c Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Mar 2020 11:19:38 -0800 Subject: [PATCH 5/5] Removed Flow generic annotations for createResponder This seems to cause a parsing error. (Not sure why.) The API is deprecated anyway so I'm being lazy for now and just adding a . --- .../events/src/dom/ContextMenu.js | 9 +++++---- .../react-interactions/events/src/dom/Focus.js | 18 ++++++++++-------- .../react-interactions/events/src/dom/Hover.js | 9 +++++---- .../react-interactions/events/src/dom/Input.js | 9 +++++---- .../events/src/dom/Keyboard.js | 9 +++++---- .../events/src/dom/PressLegacy.js | 9 +++++---- .../react-interactions/events/src/dom/Tap.js | 9 +++++---- 7 files changed, 40 insertions(+), 32 deletions(-) diff --git a/packages/react-interactions/events/src/dom/ContextMenu.js b/packages/react-interactions/events/src/dom/ContextMenu.js index 9268c354c8dc2..8cccb992d4075 100644 --- a/packages/react-interactions/events/src/dom/ContextMenu.js +++ b/packages/react-interactions/events/src/dom/ContextMenu.js @@ -113,10 +113,11 @@ const contextMenuImpl = { }, }; -export const ContextMenuResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('ContextMenu', contextMenuImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const ContextMenuResponder = React.DEPRECATED_createResponder( + 'ContextMenu', + contextMenuImpl, +); export function useContextMenu( props: ContextMenuProps, diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js index 57719e8d69cec..17a9b72d6bc89 100644 --- a/packages/react-interactions/events/src/dom/Focus.js +++ b/packages/react-interactions/events/src/dom/Focus.js @@ -494,10 +494,11 @@ const focusResponderImpl = { }, }; -export const FocusResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Focus', focusResponderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const FocusResponder = React.DEPRECATED_createResponder( + 'Focus', + focusResponderImpl, +); export function useFocus( props: FocusProps, @@ -680,10 +681,11 @@ const focusWithinResponderImpl = { }, }; -export const FocusWithinResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('FocusWithin', focusWithinResponderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const FocusWithinResponder = React.DEPRECATED_createResponder( + 'FocusWithin', + focusWithinResponderImpl, +); export function useFocusWithin( props: FocusWithinProps, diff --git a/packages/react-interactions/events/src/dom/Hover.js b/packages/react-interactions/events/src/dom/Hover.js index 8613f25983e4f..c7db1d1bb7754 100644 --- a/packages/react-interactions/events/src/dom/Hover.js +++ b/packages/react-interactions/events/src/dom/Hover.js @@ -378,10 +378,11 @@ const hoverResponderFallbackImpl = { onUnmount: unmountResponder, }; -export const HoverResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Hover', hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const HoverResponder = React.DEPRECATED_createResponder( + 'Hover', + hasPointerEvents ? hoverResponderImpl : hoverResponderFallbackImpl, +); export function useHover( props: HoverProps, diff --git a/packages/react-interactions/events/src/dom/Input.js b/packages/react-interactions/events/src/dom/Input.js index 30d35d88bf0b5..dbe0e98dae927 100644 --- a/packages/react-interactions/events/src/dom/Input.js +++ b/packages/react-interactions/events/src/dom/Input.js @@ -212,10 +212,11 @@ const inputResponderImpl = { }, }; -export const InputResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Input', inputResponderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const InputResponder = React.DEPRECATED_createResponder( + 'Input', + inputResponderImpl, +); export function useInput( props: InputResponderProps, diff --git a/packages/react-interactions/events/src/dom/Keyboard.js b/packages/react-interactions/events/src/dom/Keyboard.js index 2d2c947f29f8c..4e8a23ded61ab 100644 --- a/packages/react-interactions/events/src/dom/Keyboard.js +++ b/packages/react-interactions/events/src/dom/Keyboard.js @@ -229,10 +229,11 @@ const keyboardResponderImpl = { }, }; -export const KeyboardResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Keyboard', keyboardResponderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const KeyboardResponder = React.DEPRECATED_createResponder( + 'Keyboard', + keyboardResponderImpl, +); export function useKeyboard( props: KeyboardProps, diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js index 8f0c27fff02f6..d869eace7535b 100644 --- a/packages/react-interactions/events/src/dom/PressLegacy.js +++ b/packages/react-interactions/events/src/dom/PressLegacy.js @@ -903,10 +903,11 @@ const pressResponderImpl = { }, }; -export const PressResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Press', pressResponderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const PressResponder = React.DEPRECATED_createResponder( + 'Press', + pressResponderImpl, +); export function usePress( props: PressProps, diff --git a/packages/react-interactions/events/src/dom/Tap.js b/packages/react-interactions/events/src/dom/Tap.js index 28cf806f88343..e633a71cbd0c5 100644 --- a/packages/react-interactions/events/src/dom/Tap.js +++ b/packages/react-interactions/events/src/dom/Tap.js @@ -721,10 +721,11 @@ const responderImpl = { }, }; -export const TapResponder = React.DEPRECATED_createResponder< - ReactDOMResponderEvent, - ReactDOMResponderContext, ->('Tap', responderImpl); +// $FlowFixMe Can't add generic types without causing a parsing/syntax errors +export const TapResponder = React.DEPRECATED_createResponder( + 'Tap', + responderImpl, +); export function useTap( props: TapProps,