From 34ce57ae751e0952fd12ab532a3e5694445897ea Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Fri, 21 Jun 2019 12:32:43 +0100 Subject: [PATCH] [Flare] Refine flow type annotations (#15950) --- .../src/client/ReactDOMHostConfig.js | 13 ++-- .../src/events/DOMEventResponderSystem.js | 67 +++++++++---------- packages/react-events/src/Drag.js | 3 +- packages/react-events/src/Focus.js | 3 +- packages/react-events/src/FocusScope.js | 3 +- packages/react-events/src/Hover.js | 3 +- packages/react-events/src/Press.js | 3 +- packages/react-events/src/Scroll.js | 3 +- packages/react-events/src/Swipe.js | 3 +- .../src/ReactFabricHostConfig.js | 6 +- .../src/ReactNativeHostConfig.js | 6 +- packages/react-reconciler/src/ReactFiber.js | 4 +- .../src/ReactFiberCompleteWork.js | 8 ++- .../react-reconciler/src/ReactFiberEvents.js | 24 ++++--- .../react-reconciler/src/ReactFiberHooks.js | 18 ++--- .../src/ReactTestHostConfig.js | 6 +- packages/react/src/ReactHooks.js | 12 ++-- packages/shared/ReactDOMTypes.js | 58 +++++----------- packages/shared/ReactTypes.js | 33 ++++++--- packages/shared/createEventComponent.js | 10 ++- packages/shared/getComponentName.js | 5 +- scripts/rollup/packaging.js | 14 +--- 22 files changed, 147 insertions(+), 158 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 33fb2281c2..39e22e88b6 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -45,8 +45,10 @@ import { import dangerousStyleValue from '../shared/dangerousStyleValue'; import type {DOMContainer} from './ReactDOM'; -import type {ReactEventComponentInstance} from 'shared/ReactTypes'; -import type {ReactDOMEventResponder} from 'shared/ReactDOMTypes'; +import type { + ReactDOMEventResponder, + ReactDOMEventComponentInstance, +} from 'shared/ReactDOMTypes'; import { mountEventResponder, unmountEventResponder, @@ -102,7 +104,6 @@ export type UpdatePayload = Array; export type ChildSet = void; // Unused export type TimeoutHandle = TimeoutID; export type NoTimeout = -1; -export type EventResponder = ReactDOMEventResponder; import { enableSuspenseServerRenderer, @@ -900,7 +901,7 @@ export function didNotFindHydratableSuspenseInstance( } export function mountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): void { if (enableEventAPI) { const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container); @@ -926,13 +927,13 @@ export function mountEventComponent( } export function updateEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): void { // NO-OP, why might use this in the future } export function unmountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): void { if (enableEventAPI) { // TODO stop listening to targetEventTypes diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js index a6b8706f49..9436f58573 100644 --- a/packages/react-dom/src/events/DOMEventResponderSystem.js +++ b/packages/react-dom/src/events/DOMEventResponderSystem.js @@ -18,12 +18,10 @@ import { HostComponent, FunctionComponent, } from 'shared/ReactWorkTags'; -import type { - ReactEventComponentInstance, - EventPriority, -} from 'shared/ReactTypes'; +import type {EventPriority} from 'shared/ReactTypes'; import type { ReactDOMEventResponder, + ReactDOMEventComponentInstance, ReactDOMEventResponderEventType, ReactDOMResponderContext, ReactDOMResponderEvent, @@ -86,7 +84,7 @@ type ResponderTimeout = {| |}; type ResponderTimer = {| - instance: ReactEventComponentInstance, + instance: ReactDOMEventComponentInstance, func: () => void, id: number, timeStamp: number, @@ -95,13 +93,13 @@ type ResponderTimer = {| const activeTimeouts: Map = new Map(); const rootEventTypesToEventComponentInstances: Map< DOMTopLevelEventType | string, - Set, + Set, > = new Map(); const targetEventTypeCached: Map< Array, Set, > = new Map(); -const ownershipChangeListeners: Set = new Set(); +const ownershipChangeListeners: Set = new Set(); const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; const eventListeners: | WeakMap @@ -115,7 +113,7 @@ let continueLocalPropagation = false; let currentTimeStamp = 0; let currentTimers = new Map(); -let currentInstance: null | ReactEventComponentInstance = null; +let currentInstance: null | ReactDOMEventComponentInstance = null; let currentEventQueue: null | EventQueue = null; let currentTimerIDCounter = 0; let currentDocument: null | Document = null; @@ -215,7 +213,7 @@ const eventResponderContext: ReactDOMResponderContext = { validateResponderContext(); if (target != null) { let fiber = getClosestInstanceFromNode(target); - const currentFiber = ((currentInstance: any): ReactEventComponentInstance) + const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance) .currentFiber; while (fiber !== null) { @@ -233,12 +231,12 @@ const eventResponderContext: ReactDOMResponderContext = { }, isTargetWithinEventResponderScope(target: Element | Document): boolean { validateResponderContext(); - const componentInstance = ((currentInstance: any): ReactEventComponentInstance); + const componentInstance = ((currentInstance: any): ReactDOMEventComponentInstance); const responder = componentInstance.responder; if (target != null) { let fiber = getClosestInstanceFromNode(target); - const currentFiber = ((currentInstance: any): ReactEventComponentInstance) + const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance) .currentFiber; while (fiber !== null) { if (fiber.tag === EventComponent) { @@ -284,7 +282,7 @@ const eventResponderContext: ReactDOMResponderContext = { listenToResponderEventTypesImpl(rootEventTypes, activeDocument); for (let i = 0; i < rootEventTypes.length; i++) { const rootEventType = rootEventTypes[i]; - const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance); + const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance); registerRootEventType(rootEventType, eventComponentInstance); } }, @@ -315,14 +313,14 @@ const eventResponderContext: ReactDOMResponderContext = { let rootEventComponents = rootEventTypesToEventComponentInstances.get( listeningName, ); - let rootEventTypesSet = ((currentInstance: any): ReactEventComponentInstance) + let rootEventTypesSet = ((currentInstance: any): ReactDOMEventComponentInstance) .rootEventTypes; if (rootEventTypesSet !== null) { rootEventTypesSet.delete(listeningName); } if (rootEventComponents !== undefined) { rootEventComponents.delete( - ((currentInstance: any): ReactEventComponentInstance), + ((currentInstance: any): ReactDOMEventComponentInstance), ); } } @@ -343,7 +341,7 @@ const eventResponderContext: ReactDOMResponderContext = { releaseOwnership(): boolean { validateResponderContext(); return releaseOwnershipForEventComponentInstance( - ((currentInstance: any): ReactEventComponentInstance), + ((currentInstance: any): ReactDOMEventComponentInstance), ); }, setTimeout(func: () => void, delay): number { @@ -366,7 +364,7 @@ const eventResponderContext: ReactDOMResponderContext = { currentTimers.set(delay, timeout); } timeout.timers.set(timerId, { - instance: ((currentInstance: any): ReactEventComponentInstance), + instance: ((currentInstance: any): ReactDOMEventComponentInstance), func, id: timerId, timeStamp: currentTimeStamp, @@ -389,7 +387,7 @@ const eventResponderContext: ReactDOMResponderContext = { getFocusableElementsInScope(): Array { validateResponderContext(); const focusableElements = []; - const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance); + const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance); const child = ((eventComponentInstance.currentFiber: any): Fiber).child; if (child !== null) { @@ -404,7 +402,7 @@ const eventResponderContext: ReactDOMResponderContext = { const target = event.target; let fiber = getClosestInstanceFromNode(target); let hostComponent = target; - const currentResponder = ((currentInstance: any): ReactEventComponentInstance) + const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance) .responder; while (fiber !== null) { @@ -433,7 +431,7 @@ const eventResponderContext: ReactDOMResponderContext = { ): boolean { validateResponderContext(); let fiber = getClosestInstanceFromNode(target); - const currentResponder = ((currentInstance: any): ReactEventComponentInstance) + const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance) .responder; while (fiber !== null) { @@ -490,7 +488,7 @@ function getActiveDocument(): Document { } function releaseOwnershipForEventComponentInstance( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): boolean { if (globalOwner === eventComponentInstance) { globalOwner = null; @@ -679,8 +677,8 @@ function getDOMTargetEventTypesSet( function storeTargetEventResponderInstance( listeningName: string, - eventComponentInstance: ReactEventComponentInstance, - eventResponderInstances: Array, + eventComponentInstance: ReactDOMEventComponentInstance, + eventResponderInstances: Array, eventComponentResponders: null | Set, ): void { const responder = eventComponentInstance.responder; @@ -700,7 +698,7 @@ function storeTargetEventResponderInstance( function getTargetEventResponderInstances( listeningName: string, targetFiber: null | Fiber, -): Array { +): Array { // We use this to know if we should check add hooks. If there are // no event targets, then we don't add the hook forms. const eventComponentResponders = new Set(); @@ -743,7 +741,7 @@ function getTargetEventResponderInstances( function getRootEventResponderInstances( listeningName: string, -): Array { +): Array { const eventResponderInstances = []; const rootEventInstances = rootEventTypesToEventComponentInstances.get( listeningName, @@ -760,7 +758,7 @@ function getRootEventResponderInstances( } function shouldSkipEventComponent( - eventResponderInstance: ReactEventComponentInstance, + eventResponderInstance: ReactDOMEventComponentInstance, responder: ReactDOMEventResponder, propagatedEventResponders: null | Set, localPropagation: boolean, @@ -841,7 +839,7 @@ function traverseAndHandleEventResponderInstances( if ( shouldSkipEventComponent( targetEventResponderInstance, - responder, + ((responder: any): ReactDOMEventResponder), propagatedEventResponders, localPropagation, ) @@ -874,7 +872,7 @@ function traverseAndHandleEventResponderInstances( if ( shouldSkipEventComponent( targetEventResponderInstance, - responder, + ((responder: any): ReactDOMEventResponder), propagatedEventResponders, localPropagation, ) @@ -933,7 +931,8 @@ function triggerOwnershipListeners(): void { const instance = listeningInstances[i]; const {props, responder, state} = instance; currentInstance = instance; - const onOwnershipChange = responder.onOwnershipChange; + const onOwnershipChange = ((responder: any): ReactDOMEventResponder) + .onOwnershipChange; if (onOwnershipChange !== undefined) { onOwnershipChange(eventResponderContext, props, state); } @@ -944,9 +943,9 @@ function triggerOwnershipListeners(): void { } export function mountEventResponder( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ) { - const responder = eventComponentInstance.responder; + const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder); if (responder.onOwnershipChange !== undefined) { ownershipChangeListeners.add(eventComponentInstance); } @@ -966,9 +965,9 @@ export function mountEventResponder( } export function unmountEventResponder( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): void { - const responder = eventComponentInstance.responder; + const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder); const onUnmount = responder.onUnmount; if (onUnmount !== undefined) { let {props, state} = eventComponentInstance; @@ -1054,7 +1053,7 @@ export function dispatchEventForResponderEventSystem( } export function addRootEventTypesForComponentInstance( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, rootEventTypes: Array, ): void { for (let i = 0; i < rootEventTypes.length; i++) { @@ -1065,7 +1064,7 @@ export function addRootEventTypesForComponentInstance( function registerRootEventType( rootEventType: ReactDOMEventResponderEventType, - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactDOMEventComponentInstance, ): void { let name = rootEventType; let passive = true; diff --git a/packages/react-events/src/Drag.js b/packages/react-events/src/Drag.js index ebe489b279..4f1bcbf6da 100644 --- a/packages/react-events/src/Drag.js +++ b/packages/react-events/src/Drag.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, } from 'shared/ReactDOMTypes'; @@ -84,7 +85,7 @@ function dispatchDragEvent( context.dispatchEvent(syntheticEvent, listener, eventPriority); } -const DragResponder = { +const DragResponder: ReactDOMEventResponder = { displayName: 'Drag', targetEventTypes, createInitialState(): DragState { diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js index 6f80e48221..0a41e66ed7 100644 --- a/packages/react-events/src/Focus.js +++ b/packages/react-events/src/Focus.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, PointerType, @@ -216,7 +217,7 @@ function handleRootPointerEvent( let isGlobalFocusVisible = true; -const FocusResponder = { +const FocusResponder: ReactDOMEventResponder = { displayName: 'Focus', targetEventTypes, rootEventTypes, diff --git a/packages/react-events/src/FocusScope.js b/packages/react-events/src/FocusScope.js index 2f6cf4cb25..43a2a05f86 100644 --- a/packages/react-events/src/FocusScope.js +++ b/packages/react-events/src/FocusScope.js @@ -7,6 +7,7 @@ * @flow */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, } from 'shared/ReactDOMTypes'; @@ -45,7 +46,7 @@ function getFirstFocusableElement( } } -const FocusScopeResponder = { +const FocusScopeResponder: ReactDOMEventResponder = { displayName: 'FocusScope', targetEventTypes, rootEventTypes, diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js index 23df751240..11b89382ae 100644 --- a/packages/react-events/src/Hover.js +++ b/packages/react-events/src/Hover.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, } from 'shared/ReactDOMTypes'; @@ -273,7 +274,7 @@ function isEmulatedMouseEvent(event, state) { ); } -const HoverResponder = { +const HoverResponder: ReactDOMEventResponder = { displayName: 'Hover', targetEventTypes, createInitialState() { diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js index 0b120519da..9e07109b52 100644 --- a/packages/react-events/src/Press.js +++ b/packages/react-events/src/Press.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, PointerType, @@ -622,7 +623,7 @@ function updateIsPressWithinResponderRegion( state.isPressWithinResponderRegion = isPressWithinResponderRegion; } -const PressResponder = { +const PressResponder: ReactDOMEventResponder = { displayName: 'Press', targetEventTypes, createInitialState(): PressState { diff --git a/packages/react-events/src/Scroll.js b/packages/react-events/src/Scroll.js index d66f976703..8fb6fa4f45 100644 --- a/packages/react-events/src/Scroll.js +++ b/packages/react-events/src/Scroll.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, PointerType, @@ -116,7 +117,7 @@ function dispatchEvent( context.dispatchEvent(syntheticEvent, listener, eventPriority); } -const ScrollResponder = { +const ScrollResponder: ReactDOMEventResponder = { displayName: 'Scroll', targetEventTypes, createInitialState() { diff --git a/packages/react-events/src/Swipe.js b/packages/react-events/src/Swipe.js index 509cffd324..88d15aff88 100644 --- a/packages/react-events/src/Swipe.js +++ b/packages/react-events/src/Swipe.js @@ -8,6 +8,7 @@ */ import type { + ReactDOMEventResponder, ReactDOMResponderEvent, ReactDOMResponderContext, } from 'shared/ReactDOMTypes'; @@ -88,7 +89,7 @@ type SwipeState = { y: number, }; -const SwipeResponder = { +const SwipeResponder: ReactDOMEventResponder = { displayName: 'Scroll', targetEventTypes, createInitialState(): SwipeState { diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 99b60bb4d6..6611f8dbbb 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -436,19 +436,19 @@ export function replaceContainerChildren( ): void {} export function mountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ) { throw new Error('Not yet implemented.'); } export function updateEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ) { throw new Error('Not yet implemented.'); } export function unmountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ): void { throw new Error('Not yet implemented.'); } diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 9f9a6a941a..d03914170c 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js @@ -497,19 +497,19 @@ export function unhideTextInstance( } export function mountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ) { throw new Error('Not yet implemented.'); } export function updateEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ) { throw new Error('Not yet implemented.'); } export function unmountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ): void { throw new Error('Not yet implemented.'); } diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js index 12ff5ee55e..78f0f38d7e 100644 --- a/packages/react-reconciler/src/ReactFiber.js +++ b/packages/react-reconciler/src/ReactFiber.js @@ -106,7 +106,7 @@ if (__DEV__) { export type Dependencies = { expirationTime: ExpirationTime, firstContext: ContextDependency | null, - events: Array | null, + events: Array> | null, }; // A Fiber is work on a Component that needs to be done or was done. There can @@ -682,7 +682,7 @@ export function createFiberFromFragment( } export function createFiberFromEventComponent( - eventComponent: ReactEventComponent, + eventComponent: ReactEventComponent, pendingProps: any, mode: TypeOfMode, expirationTime: ExpirationTime, diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js index 4b2699d38c..5f7cef164b 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js @@ -1013,7 +1013,11 @@ function completeWork( popHostContext(workInProgress); const rootContainerInstance = getRootHostContainer(); const responder = workInProgress.type.responder; - let eventComponentInstance: ReactEventComponentInstance | null = + let eventComponentInstance: ReactEventComponentInstance< + any, + any, + any, + > | null = workInProgress.stateNode; if (eventComponentInstance === null) { @@ -1036,7 +1040,7 @@ function completeWork( newProps, responder, rootContainerInstance, - responderState, + responderState || {}, true, ); markUpdate(workInProgress); diff --git a/packages/react-reconciler/src/ReactFiberEvents.js b/packages/react-reconciler/src/ReactFiberEvents.js index 2c9a9bdef9..c9c35f0477 100644 --- a/packages/react-reconciler/src/ReactFiberEvents.js +++ b/packages/react-reconciler/src/ReactFiberEvents.js @@ -8,8 +8,10 @@ */ import type {Fiber, Dependencies} from './ReactFiber'; -import type {ReactEventComponentInstance} from 'shared/ReactTypes'; -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig'; +import type { + ReactEventResponder, + ReactEventComponentInstance, +} from 'shared/ReactTypes'; import { HostComponent, @@ -29,9 +31,9 @@ export function prepareToReadEventComponents(workInProgress: Fiber): void { currentEventComponentInstanceIndex = 0; } -export function updateEventComponentInstance( - responder: EventResponder, - props: null | Object, +export function updateEventComponentInstance( + responder: ReactEventResponder, + props: Object, ): void { invariant( responder.allowEventHooks, @@ -64,7 +66,7 @@ export function updateEventComponentInstance( props, responder, null, - responderState, + responderState || {}, false, ); events.push(eventComponentInstance); @@ -77,14 +79,14 @@ export function updateEventComponentInstance( } } -export function createEventComponentInstance( +export function createEventComponentInstance( currentFiber: Fiber, - props: null | Object, - responder: EventResponder, + props: Object, + responder: ReactEventResponder, rootInstance: mixed, - state: null | Object, + state: Object, localPropagation: boolean, -): ReactEventComponentInstance { +): ReactEventComponentInstance { return { currentFiber, localPropagation, diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 1a74bda0f5..7f9372bdc7 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -7,13 +7,12 @@ * @flow */ -import type {ReactContext} from 'shared/ReactTypes'; +import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes'; import type {SideEffectTag} from 'shared/ReactSideEffectTags'; import type {Fiber} from './ReactFiber'; import type {ExpirationTime} from './ReactFiberExpirationTime'; import type {HookEffectTag} from './ReactHookEffectTags'; import type {SuspenseConfig} from './ReactFiberSuspenseConfig'; -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig'; import ReactSharedInternals from 'shared/ReactSharedInternals'; @@ -83,7 +82,10 @@ export type Dispatcher = { deps: Array | void | null, ): void, useDebugValue(value: T, formatterFn: ?(value: T) => mixed): void, - useEvent(responder: EventResponder, props: null | Object): void, + useEvent( + responder: ReactEventResponder, + props: Object, + ): void, }; type Update = { @@ -1397,7 +1399,7 @@ if (__DEV__) { mountHookTypesDev(); return mountDebugValue(value, formatterFn); }, - useEvent(responder, props) { + useEvent(responder: ReactEventResponder, props) { currentHookNameInDev = 'useEvent'; mountHookTypesDev(); updateEventComponentInstance(responder, props); @@ -1499,7 +1501,7 @@ if (__DEV__) { updateHookTypesDev(); return mountDebugValue(value, formatterFn); }, - useEvent(responder, props) { + useEvent(responder: ReactEventResponder, props) { currentHookNameInDev = 'useEvent'; updateHookTypesDev(); updateEventComponentInstance(responder, props); @@ -1601,7 +1603,7 @@ if (__DEV__) { updateHookTypesDev(); return updateDebugValue(value, formatterFn); }, - useEvent(responder, props) { + useEvent(responder: ReactEventResponder, props) { currentHookNameInDev = 'useEvent'; updateHookTypesDev(); updateEventComponentInstance(responder, props); @@ -1714,7 +1716,7 @@ if (__DEV__) { mountHookTypesDev(); return mountDebugValue(value, formatterFn); }, - useEvent(responder, props) { + useEvent(responder: ReactEventResponder, props) { currentHookNameInDev = 'useEvent'; warnInvalidHookAccess(); mountHookTypesDev(); @@ -1828,7 +1830,7 @@ if (__DEV__) { updateHookTypesDev(); return updateDebugValue(value, formatterFn); }, - useEvent(responder, props) { + useEvent(responder: ReactEventResponder, props) { currentHookNameInDev = 'useEvent'; warnInvalidHookAccess(); updateHookTypesDev(); diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js index ea1b86bcbb..cf2ce070e5 100644 --- a/packages/react-test-renderer/src/ReactTestHostConfig.js +++ b/packages/react-test-renderer/src/ReactTestHostConfig.js @@ -329,19 +329,19 @@ export function unhideTextInstance( } export function mountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ): void { // noop } export function updateEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ): void { // noop } export function unmountEventComponent( - eventComponentInstance: ReactEventComponentInstance, + eventComponentInstance: ReactEventComponentInstance, ): void { // noop } diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js index 3227dda3f1..55da95160a 100644 --- a/packages/react/src/ReactHooks.js +++ b/packages/react/src/ReactHooks.js @@ -7,8 +7,7 @@ * @flow */ -import type {ReactContext} from 'shared/ReactTypes'; -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig'; +import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes'; import invariant from 'shared/invariant'; import warning from 'shared/warning'; @@ -137,7 +136,12 @@ export function useDebugValue(value: any, formatterFn: ?(value: any) => any) { } } -export function useEvent(responder: EventResponder, props: null | Object) { +export const emptyObject = {}; + +export function useEvent( + responder: ReactEventResponder, + props: null | Object, +) { const dispatcher = resolveDispatcher(); - return dispatcher.useEvent(responder, props); + return dispatcher.useEvent(responder, props || emptyObject); } diff --git a/packages/shared/ReactDOMTypes.js b/packages/shared/ReactDOMTypes.js index e2383f6ad7..d5612c5503 100644 --- a/packages/shared/ReactDOMTypes.js +++ b/packages/shared/ReactDOMTypes.js @@ -7,7 +7,11 @@ * @flow */ -import type {EventPriority} from 'shared/ReactTypes'; +import type { + ReactEventResponder, + ReactEventComponentInstance, + EventPriority, +} from 'shared/ReactTypes'; type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch; @@ -33,47 +37,17 @@ export type ReactDOMResponderEvent = { type: string, }; -export type ReactDOMEventResponder = { - displayName: string, - targetEventTypes?: Array, - rootEventTypes?: Array, - createInitialState?: (props: null | Object) => Object, - allowMultipleHostChildren: boolean, - allowEventHooks: boolean, - onEvent?: ( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, - onEventCapture?: ( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, - onRootEvent?: ( - event: ReactDOMResponderEvent, - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, - onMount?: ( - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, - onUnmount?: ( - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, - onOwnershipChange?: ( - context: ReactDOMResponderContext, - props: null | Object, - state: null | Object, - ) => void, -}; +export type ReactDOMEventResponder = ReactEventResponder< + ReactDOMEventResponderEventType, + ReactDOMResponderEvent, + ReactDOMResponderContext, +>; + +export type ReactDOMEventComponentInstance = ReactEventComponentInstance< + ReactDOMEventResponderEventType, + ReactDOMResponderEvent, + ReactDOMResponderContext, +>; export type ReactDOMResponderContext = { dispatchEvent: ( diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 5242226053..f74111ab0e 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -7,9 +7,6 @@ * @flow */ -// NOTE: this line is changed in the RN build, see: copyRNShims in packaging.js -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig'; - export type ReactNode = | React$Element | ReactPortal @@ -17,7 +14,7 @@ export type ReactNode = | ReactFragment | ReactProvider | ReactConsumer - | ReactEventComponent + | ReactEventComponent | ReactEventTarget; export type ReactEmpty = null | void | boolean; @@ -84,20 +81,34 @@ export type RefObject = {| current: any, |}; -export type ReactEventComponentInstance = {| +export type ReactEventComponentInstance = {| currentFiber: mixed, localPropagation: boolean, - props: null | Object, - responder: EventResponder, + props: Object, + responder: ReactEventResponder, rootEventTypes: null | Set, rootInstance: null | mixed, - state: null | Object, + state: Object, |}; -export type ReactEventComponent = {| +export type ReactEventResponder = { + displayName: string, + targetEventTypes?: Array, + rootEventTypes?: Array, + createInitialState?: (props: Object) => Object, + allowMultipleHostChildren: boolean, + allowEventHooks: boolean, + onEvent?: (event: E, context: C, props: Object, state: Object) => void, + onEventCapture?: (event: E, context: C, props: Object, state: Object) => void, + onRootEvent?: (event: E, context: C, props: Object, state: Object) => void, + onMount?: (context: C, props: Object, state: Object) => void, + onUnmount?: (context: C, props: Object, state: Object) => void, + onOwnershipChange?: (context: C, props: Object, state: Object) => void, +}; + +export type ReactEventComponent = {| $$typeof: Symbol | number, - props: null | Object, - responder: EventResponder, + responder: ReactEventResponder, |}; export type ReactEventTarget = {| diff --git a/packages/shared/createEventComponent.js b/packages/shared/createEventComponent.js index 9398e39fe1..faea980806 100644 --- a/packages/shared/createEventComponent.js +++ b/packages/shared/createEventComponent.js @@ -6,8 +6,7 @@ * @flow */ -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig'; -import type {ReactEventComponent} from 'shared/ReactTypes'; +import type {ReactEventResponder, ReactEventComponent} from 'shared/ReactTypes'; import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols'; let hasBadMapPolyfill; @@ -29,9 +28,9 @@ if (__DEV__) { } } -export default function createEventComponent( - responder: EventResponder, -): ReactEventComponent { +export default function createEventComponent( + responder: ReactEventResponder, +): ReactEventComponent { // We use responder as a Map key later on. When we have a bad // polyfill, then we can't use it as a key as the polyfill tries // to add a property to the object. @@ -40,7 +39,6 @@ export default function createEventComponent( } const eventComponent = { $$typeof: REACT_EVENT_COMPONENT_TYPE, - props: null, responder: responder, }; if (__DEV__) { diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js index 1727f43cc6..573dbdc2ea 100644 --- a/packages/shared/getComponentName.js +++ b/packages/shared/getComponentName.js @@ -27,7 +27,7 @@ import { REACT_EVENT_TARGET_TOUCH_HIT, } from 'shared/ReactSymbols'; import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent'; -import type {ReactEventComponent, ReactEventTarget} from 'shared/ReactTypes'; +import type {ReactEventTarget} from 'shared/ReactTypes'; import {enableEventAPI} from './ReactFeatureFlags'; @@ -97,8 +97,7 @@ function getComponentName(type: mixed): string | null { } case REACT_EVENT_COMPONENT_TYPE: { if (enableEventAPI) { - const eventComponent = ((type: any): ReactEventComponent); - return eventComponent.responder.displayName; + return (type: any).responder.displayName; } break; } diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js index e3dda6955c..840e290f23 100644 --- a/scripts/rollup/packaging.js +++ b/scripts/rollup/packaging.js @@ -1,12 +1,6 @@ 'use strict'; -const { - existsSync, - readdirSync, - unlinkSync, - readFileSync, - writeFileSync, -} = require('fs'); +const {existsSync, readdirSync, unlinkSync} = require('fs'); const Bundles = require('./bundles'); const { asyncCopyTo, @@ -103,12 +97,6 @@ async function copyRNShims() { 'build/react-native/shims/ReactNativeTypes.js' ), ]); - // Modify the EventResponder type in ReactTypes - const reactTypesSource = readFileSync(reactTypesBuildTarget, 'utf8'); - const original = `import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';`; - const changeTo = `import type {ReactNativeEventResponder as EventResponder} from './ReactNativeTypes';`; - const modifiedSource = reactTypesSource.replace(original, changeTo); - writeFileSync(reactTypesBuildTarget, modifiedSource); } async function copyAllShims() {