@samitouri / QOS-React-2 / commits / 34ce57ae75

[Flare] Refine flow type annotations (#15950)

Dominic Gannaway committed Jun 21, 2019 at 12:32 UTC 34ce57ae751e0952fd12ab532a3e5694445897ea
22 files changed +147 -158
packages/react-dom/src/client/ReactDOMHostConfig.js
+7 -6
@@ -45,8 +45,10 @@ import {
45 import dangerousStyleValue from '../shared/dangerousStyleValue';
46
47 import type {DOMContainer} from './ReactDOM';
48 -import type {ReactEventComponentInstance} from 'shared/ReactTypes';
49 -import type {ReactDOMEventResponder} from 'shared/ReactDOMTypes';
48 +import type {
49 + ReactDOMEventResponder,
50 + ReactDOMEventComponentInstance,
51 +} from 'shared/ReactDOMTypes';
52 import {
53 mountEventResponder,
54 unmountEventResponder,
@@ -102,7 +104,6 @@ export type UpdatePayload = Array<mixed>;
104 export type ChildSet = void; // Unused
105 export type TimeoutHandle = TimeoutID;
106 export type NoTimeout = -1;
105 -export type EventResponder = ReactDOMEventResponder;
107
108 import {
109 enableSuspenseServerRenderer,
@@ -900,7 +901,7 @@ export function didNotFindHydratableSuspenseInstance(
901 }
902
903 export function mountEventComponent(
903 - eventComponentInstance: ReactEventComponentInstance,
904 + eventComponentInstance: ReactDOMEventComponentInstance,
905 ): void {
906 if (enableEventAPI) {
907 const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
@@ -926,13 +927,13 @@ export function mountEventComponent(
927 }
928
929 export function updateEventComponent(
929 - eventComponentInstance: ReactEventComponentInstance,
930 + eventComponentInstance: ReactDOMEventComponentInstance,
931 ): void {
932 // NO-OP, why might use this in the future
933 }
934
935 export function unmountEventComponent(
935 - eventComponentInstance: ReactEventComponentInstance,
936 + eventComponentInstance: ReactDOMEventComponentInstance,
937 ): void {
938 if (enableEventAPI) {
939 // TODO stop listening to targetEventTypes
packages/react-dom/src/events/DOMEventResponderSystem.js
+33 -34
@@ -18,12 +18,10 @@ import {
18 HostComponent,
19 FunctionComponent,
20 } from 'shared/ReactWorkTags';
21 -import type {
22 - ReactEventComponentInstance,
23 - EventPriority,
24 -} from 'shared/ReactTypes';
21 +import type {EventPriority} from 'shared/ReactTypes';
22 import type {
23 ReactDOMEventResponder,
24 + ReactDOMEventComponentInstance,
25 ReactDOMEventResponderEventType,
26 ReactDOMResponderContext,
27 ReactDOMResponderEvent,
@@ -86,7 +84,7 @@ type ResponderTimeout = {|
84 |};
85
86 type ResponderTimer = {|
89 - instance: ReactEventComponentInstance,
87 + instance: ReactDOMEventComponentInstance,
88 func: () => void,
89 id: number,
90 timeStamp: number,
@@ -95,13 +93,13 @@ type ResponderTimer = {|
93 const activeTimeouts: Map<number, ResponderTimeout> = new Map();
94 const rootEventTypesToEventComponentInstances: Map<
95 DOMTopLevelEventType | string,
98 - Set<ReactEventComponentInstance>,
96 + Set<ReactDOMEventComponentInstance>,
97 > = new Map();
98 const targetEventTypeCached: Map<
99 Array<ReactDOMEventResponderEventType>,
100 Set<string>,
101 > = new Map();
104 -const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
102 +const ownershipChangeListeners: Set<ReactDOMEventComponentInstance> = new Set();
103 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
104 const eventListeners:
105 | WeakMap
@@ -115,7 +113,7 @@ let continueLocalPropagation = false;
113
114 let currentTimeStamp = 0;
115 let currentTimers = new Map();
118 -let currentInstance: null | ReactEventComponentInstance = null;
116 +let currentInstance: null | ReactDOMEventComponentInstance = null;
117 let currentEventQueue: null | EventQueue = null;
118 let currentTimerIDCounter = 0;
119 let currentDocument: null | Document = null;
@@ -215,7 +213,7 @@ const eventResponderContext: ReactDOMResponderContext = {
213 validateResponderContext();
214 if (target != null) {
215 let fiber = getClosestInstanceFromNode(target);
218 - const currentFiber = ((currentInstance: any): ReactEventComponentInstance)
216 + const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance)
217 .currentFiber;
218
219 while (fiber !== null) {
@@ -233,12 +231,12 @@ const eventResponderContext: ReactDOMResponderContext = {
231 },
232 isTargetWithinEventResponderScope(target: Element | Document): boolean {
233 validateResponderContext();
236 - const componentInstance = ((currentInstance: any): ReactEventComponentInstance);
234 + const componentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
235 const responder = componentInstance.responder;
236
237 if (target != null) {
238 let fiber = getClosestInstanceFromNode(target);
241 - const currentFiber = ((currentInstance: any): ReactEventComponentInstance)
239 + const currentFiber = ((currentInstance: any): ReactDOMEventComponentInstance)
240 .currentFiber;
241 while (fiber !== null) {
242 if (fiber.tag === EventComponent) {
@@ -284,7 +282,7 @@ const eventResponderContext: ReactDOMResponderContext = {
282 listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
283 for (let i = 0; i < rootEventTypes.length; i++) {
284 const rootEventType = rootEventTypes[i];
287 - const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
285 + const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
286 registerRootEventType(rootEventType, eventComponentInstance);
287 }
288 },
@@ -315,14 +313,14 @@ const eventResponderContext: ReactDOMResponderContext = {
313 let rootEventComponents = rootEventTypesToEventComponentInstances.get(
314 listeningName,
315 );
318 - let rootEventTypesSet = ((currentInstance: any): ReactEventComponentInstance)
316 + let rootEventTypesSet = ((currentInstance: any): ReactDOMEventComponentInstance)
317 .rootEventTypes;
318 if (rootEventTypesSet !== null) {
319 rootEventTypesSet.delete(listeningName);
320 }
321 if (rootEventComponents !== undefined) {
322 rootEventComponents.delete(
325 - ((currentInstance: any): ReactEventComponentInstance),
323 + ((currentInstance: any): ReactDOMEventComponentInstance),
324 );
325 }
326 }
@@ -343,7 +341,7 @@ const eventResponderContext: ReactDOMResponderContext = {
341 releaseOwnership(): boolean {
342 validateResponderContext();
343 return releaseOwnershipForEventComponentInstance(
346 - ((currentInstance: any): ReactEventComponentInstance),
344 + ((currentInstance: any): ReactDOMEventComponentInstance),
345 );
346 },
347 setTimeout(func: () => void, delay): number {
@@ -366,7 +364,7 @@ const eventResponderContext: ReactDOMResponderContext = {
364 currentTimers.set(delay, timeout);
365 }
366 timeout.timers.set(timerId, {
369 - instance: ((currentInstance: any): ReactEventComponentInstance),
367 + instance: ((currentInstance: any): ReactDOMEventComponentInstance),
368 func,
369 id: timerId,
370 timeStamp: currentTimeStamp,
@@ -389,7 +387,7 @@ const eventResponderContext: ReactDOMResponderContext = {
387 getFocusableElementsInScope(): Array<HTMLElement> {
388 validateResponderContext();
389 const focusableElements = [];
392 - const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
390 + const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
391 const child = ((eventComponentInstance.currentFiber: any): Fiber).child;
392
393 if (child !== null) {
@@ -404,7 +402,7 @@ const eventResponderContext: ReactDOMResponderContext = {
402 const target = event.target;
403 let fiber = getClosestInstanceFromNode(target);
404 let hostComponent = target;
407 - const currentResponder = ((currentInstance: any): ReactEventComponentInstance)
405 + const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance)
406 .responder;
407
408 while (fiber !== null) {
@@ -433,7 +431,7 @@ const eventResponderContext: ReactDOMResponderContext = {
431 ): boolean {
432 validateResponderContext();
433 let fiber = getClosestInstanceFromNode(target);
436 - const currentResponder = ((currentInstance: any): ReactEventComponentInstance)
434 + const currentResponder = ((currentInstance: any): ReactDOMEventComponentInstance)
435 .responder;
436
437 while (fiber !== null) {
@@ -490,7 +488,7 @@ function getActiveDocument(): Document {
488 }
489
490 function releaseOwnershipForEventComponentInstance(
493 - eventComponentInstance: ReactEventComponentInstance,
491 + eventComponentInstance: ReactDOMEventComponentInstance,
492 ): boolean {
493 if (globalOwner === eventComponentInstance) {
494 globalOwner = null;
@@ -679,8 +677,8 @@ function getDOMTargetEventTypesSet(
677
678 function storeTargetEventResponderInstance(
679 listeningName: string,
682 - eventComponentInstance: ReactEventComponentInstance,
683 - eventResponderInstances: Array<ReactEventComponentInstance>,
680 + eventComponentInstance: ReactDOMEventComponentInstance,
681 + eventResponderInstances: Array<ReactDOMEventComponentInstance>,
682 eventComponentResponders: null | Set<ReactDOMEventResponder>,
683 ): void {
684 const responder = eventComponentInstance.responder;
@@ -700,7 +698,7 @@ function storeTargetEventResponderInstance(
698 function getTargetEventResponderInstances(
699 listeningName: string,
700 targetFiber: null | Fiber,
703 -): Array<ReactEventComponentInstance> {
701 +): Array<ReactDOMEventComponentInstance> {
702 // We use this to know if we should check add hooks. If there are
703 // no event targets, then we don't add the hook forms.
704 const eventComponentResponders = new Set();
@@ -743,7 +741,7 @@ function getTargetEventResponderInstances(
741
742 function getRootEventResponderInstances(
743 listeningName: string,
746 -): Array<ReactEventComponentInstance> {
744 +): Array<ReactDOMEventComponentInstance> {
745 const eventResponderInstances = [];
746 const rootEventInstances = rootEventTypesToEventComponentInstances.get(
747 listeningName,
@@ -760,7 +758,7 @@ function getRootEventResponderInstances(
758 }
759
760 function shouldSkipEventComponent(
763 - eventResponderInstance: ReactEventComponentInstance,
761 + eventResponderInstance: ReactDOMEventComponentInstance,
762 responder: ReactDOMEventResponder,
763 propagatedEventResponders: null | Set<ReactDOMEventResponder>,
764 localPropagation: boolean,
@@ -841,7 +839,7 @@ function traverseAndHandleEventResponderInstances(
839 if (
840 shouldSkipEventComponent(
841 targetEventResponderInstance,
844 - responder,
842 + ((responder: any): ReactDOMEventResponder),
843 propagatedEventResponders,
844 localPropagation,
845 )
@@ -874,7 +872,7 @@ function traverseAndHandleEventResponderInstances(
872 if (
873 shouldSkipEventComponent(
874 targetEventResponderInstance,
877 - responder,
875 + ((responder: any): ReactDOMEventResponder),
876 propagatedEventResponders,
877 localPropagation,
878 )
@@ -933,7 +931,8 @@ function triggerOwnershipListeners(): void {
931 const instance = listeningInstances[i];
932 const {props, responder, state} = instance;
933 currentInstance = instance;
936 - const onOwnershipChange = responder.onOwnershipChange;
934 + const onOwnershipChange = ((responder: any): ReactDOMEventResponder)
935 + .onOwnershipChange;
936 if (onOwnershipChange !== undefined) {
937 onOwnershipChange(eventResponderContext, props, state);
938 }
@@ -944,9 +943,9 @@ function triggerOwnershipListeners(): void {
943 }
944
945 export function mountEventResponder(
947 - eventComponentInstance: ReactEventComponentInstance,
946 + eventComponentInstance: ReactDOMEventComponentInstance,
947 ) {
949 - const responder = eventComponentInstance.responder;
948 + const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder);
949 if (responder.onOwnershipChange !== undefined) {
950 ownershipChangeListeners.add(eventComponentInstance);
951 }
@@ -966,9 +965,9 @@ export function mountEventResponder(
965 }
966
967 export function unmountEventResponder(
969 - eventComponentInstance: ReactEventComponentInstance,
968 + eventComponentInstance: ReactDOMEventComponentInstance,
969 ): void {
971 - const responder = eventComponentInstance.responder;
970 + const responder = ((eventComponentInstance.responder: any): ReactDOMEventResponder);
971 const onUnmount = responder.onUnmount;
972 if (onUnmount !== undefined) {
973 let {props, state} = eventComponentInstance;
@@ -1054,7 +1053,7 @@ export function dispatchEventForResponderEventSystem(
1053 }
1054
1055 export function addRootEventTypesForComponentInstance(
1057 - eventComponentInstance: ReactEventComponentInstance,
1056 + eventComponentInstance: ReactDOMEventComponentInstance,
1057 rootEventTypes: Array<ReactDOMEventResponderEventType>,
1058 ): void {
1059 for (let i = 0; i < rootEventTypes.length; i++) {
@@ -1065,7 +1064,7 @@ export function addRootEventTypesForComponentInstance(
1064
1065 function registerRootEventType(
1066 rootEventType: ReactDOMEventResponderEventType,
1068 - eventComponentInstance: ReactEventComponentInstance,
1067 + eventComponentInstance: ReactDOMEventComponentInstance,
1068 ): void {
1069 let name = rootEventType;
1070 let passive = true;
packages/react-events/src/Drag.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 } from 'shared/ReactDOMTypes';
@@ -84,7 +85,7 @@ function dispatchDragEvent(
85 context.dispatchEvent(syntheticEvent, listener, eventPriority);
86 }
87
87 -const DragResponder = {
88 +const DragResponder: ReactDOMEventResponder = {
89 displayName: 'Drag',
90 targetEventTypes,
91 createInitialState(): DragState {
packages/react-events/src/Focus.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 PointerType,
@@ -216,7 +217,7 @@ function handleRootPointerEvent(
217
218 let isGlobalFocusVisible = true;
219
219 -const FocusResponder = {
220 +const FocusResponder: ReactDOMEventResponder = {
221 displayName: 'Focus',
222 targetEventTypes,
223 rootEventTypes,
packages/react-events/src/FocusScope.js
+2 -1
@@ -7,6 +7,7 @@
7 * @flow
8 */
9 import type {
10 + ReactDOMEventResponder,
11 ReactDOMResponderEvent,
12 ReactDOMResponderContext,
13 } from 'shared/ReactDOMTypes';
@@ -45,7 +46,7 @@ function getFirstFocusableElement(
46 }
47 }
48
48 -const FocusScopeResponder = {
49 +const FocusScopeResponder: ReactDOMEventResponder = {
50 displayName: 'FocusScope',
51 targetEventTypes,
52 rootEventTypes,
packages/react-events/src/Hover.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 } from 'shared/ReactDOMTypes';
@@ -273,7 +274,7 @@ function isEmulatedMouseEvent(event, state) {
274 );
275 }
276
276 -const HoverResponder = {
277 +const HoverResponder: ReactDOMEventResponder = {
278 displayName: 'Hover',
279 targetEventTypes,
280 createInitialState() {
packages/react-events/src/Press.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 PointerType,
@@ -622,7 +623,7 @@ function updateIsPressWithinResponderRegion(
623 state.isPressWithinResponderRegion = isPressWithinResponderRegion;
624 }
625
625 -const PressResponder = {
626 +const PressResponder: ReactDOMEventResponder = {
627 displayName: 'Press',
628 targetEventTypes,
629 createInitialState(): PressState {
packages/react-events/src/Scroll.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 PointerType,
@@ -116,7 +117,7 @@ function dispatchEvent(
117 context.dispatchEvent(syntheticEvent, listener, eventPriority);
118 }
119
119 -const ScrollResponder = {
120 +const ScrollResponder: ReactDOMEventResponder = {
121 displayName: 'Scroll',
122 targetEventTypes,
123 createInitialState() {
packages/react-events/src/Swipe.js
+2 -1
@@ -8,6 +8,7 @@
8 */
9
10 import type {
11 + ReactDOMEventResponder,
12 ReactDOMResponderEvent,
13 ReactDOMResponderContext,
14 } from 'shared/ReactDOMTypes';
@@ -88,7 +89,7 @@ type SwipeState = {
89 y: number,
90 };
91
91 -const SwipeResponder = {
92 +const SwipeResponder: ReactDOMEventResponder = {
93 displayName: 'Scroll',
94 targetEventTypes,
95 createInitialState(): SwipeState {
packages/react-native-renderer/src/ReactFabricHostConfig.js
+3 -3
@@ -436,19 +436,19 @@ export function replaceContainerChildren(
436 ): void {}
437
438 export function mountEventComponent(
439 - eventComponentInstance: ReactEventComponentInstance,
439 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
440 ) {
441 throw new Error('Not yet implemented.');
442 }
443
444 export function updateEventComponent(
445 - eventComponentInstance: ReactEventComponentInstance,
445 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
446 ) {
447 throw new Error('Not yet implemented.');
448 }
449
450 export function unmountEventComponent(
451 - eventComponentInstance: ReactEventComponentInstance,
451 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
452 ): void {
453 throw new Error('Not yet implemented.');
454 }
packages/react-native-renderer/src/ReactNativeHostConfig.js
+3 -3
@@ -497,19 +497,19 @@ export function unhideTextInstance(
497 }
498
499 export function mountEventComponent(
500 - eventComponentInstance: ReactEventComponentInstance,
500 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
501 ) {
502 throw new Error('Not yet implemented.');
503 }
504
505 export function updateEventComponent(
506 - eventComponentInstance: ReactEventComponentInstance,
506 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
507 ) {
508 throw new Error('Not yet implemented.');
509 }
510
511 export function unmountEventComponent(
512 - eventComponentInstance: ReactEventComponentInstance,
512 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
513 ): void {
514 throw new Error('Not yet implemented.');
515 }
packages/react-reconciler/src/ReactFiber.js
+2 -2
@@ -106,7 +106,7 @@ if (__DEV__) {
106 export type Dependencies = {
107 expirationTime: ExpirationTime,
108 firstContext: ContextDependency<mixed> | null,
109 - events: Array<ReactEventComponentInstance> | null,
109 + events: Array<ReactEventComponentInstance<any, any, any>> | null,
110 };
111
112 // A Fiber is work on a Component that needs to be done or was done. There can
@@ -682,7 +682,7 @@ export function createFiberFromFragment(
682 }
683
684 export function createFiberFromEventComponent(
685 - eventComponent: ReactEventComponent,
685 + eventComponent: ReactEventComponent<any>,
686 pendingProps: any,
687 mode: TypeOfMode,
688 expirationTime: ExpirationTime,
packages/react-reconciler/src/ReactFiberCompleteWork.js
+6 -2
@@ -1013,7 +1013,11 @@ function completeWork(
1013 popHostContext(workInProgress);
1014 const rootContainerInstance = getRootHostContainer();
1015 const responder = workInProgress.type.responder;
1016 - let eventComponentInstance: ReactEventComponentInstance | null =
1016 + let eventComponentInstance: ReactEventComponentInstance<
1017 + any,
1018 + any,
1019 + any,
1020 + > | null =
1021 workInProgress.stateNode;
1022
1023 if (eventComponentInstance === null) {
@@ -1036,7 +1040,7 @@ function completeWork(
1040 newProps,
1041 responder,
1042 rootContainerInstance,
1039 - responderState,
1043 + responderState || {},
1044 true,
1045 );
1046 markUpdate(workInProgress);
packages/react-reconciler/src/ReactFiberEvents.js
+13 -11
@@ -8,8 +8,10 @@
8 */
9
10 import type {Fiber, Dependencies} from './ReactFiber';
11 -import type {ReactEventComponentInstance} from 'shared/ReactTypes';
12 -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
11 +import type {
12 + ReactEventResponder,
13 + ReactEventComponentInstance,
14 +} from 'shared/ReactTypes';
15
16 import {
17 HostComponent,
@@ -29,9 +31,9 @@ export function prepareToReadEventComponents(workInProgress: Fiber): void {
31 currentEventComponentInstanceIndex = 0;
32 }
33
32 -export function updateEventComponentInstance(
33 - responder: EventResponder,
34 - props: null | Object,
34 +export function updateEventComponentInstance<T, E, C>(
35 + responder: ReactEventResponder<T, E, C>,
36 + props: Object,
37 ): void {
38 invariant(
39 responder.allowEventHooks,
@@ -64,7 +66,7 @@ export function updateEventComponentInstance(
66 props,
67 responder,
68 null,
67 - responderState,
69 + responderState || {},
70 false,
71 );
72 events.push(eventComponentInstance);
@@ -77,14 +79,14 @@ export function updateEventComponentInstance(
79 }
80 }
81
80 -export function createEventComponentInstance(
82 +export function createEventComponentInstance<T, E, C>(
83 currentFiber: Fiber,
82 - props: null | Object,
83 - responder: EventResponder,
84 + props: Object,
85 + responder: ReactEventResponder<T, E, C>,
86 rootInstance: mixed,
85 - state: null | Object,
87 + state: Object,
88 localPropagation: boolean,
87 -): ReactEventComponentInstance {
89 +): ReactEventComponentInstance<T, E, C> {
90 return {
91 currentFiber,
92 localPropagation,
packages/react-reconciler/src/ReactFiberHooks.js
+10 -8
@@ -7,13 +7,12 @@
7 * @flow
8 */
9
10 -import type {ReactContext} from 'shared/ReactTypes';
10 +import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes';
11 import type {SideEffectTag} from 'shared/ReactSideEffectTags';
12 import type {Fiber} from './ReactFiber';
13 import type {ExpirationTime} from './ReactFiberExpirationTime';
14 import type {HookEffectTag} from './ReactHookEffectTags';
15 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
16 -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
16
17 import ReactSharedInternals from 'shared/ReactSharedInternals';
18
@@ -83,7 +82,10 @@ export type Dispatcher = {
82 deps: Array<mixed> | void | null,
83 ): void,
84 useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
86 - useEvent(responder: EventResponder, props: null | Object): void,
85 + useEvent<T, E, C>(
86 + responder: ReactEventResponder<T, E, C>,
87 + props: Object,
88 + ): void,
89 };
90
91 type Update<S, A> = {
@@ -1397,7 +1399,7 @@ if (__DEV__) {
1399 mountHookTypesDev();
1400 return mountDebugValue(value, formatterFn);
1401 },
1400 - useEvent(responder, props) {
1402 + useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
1403 currentHookNameInDev = 'useEvent';
1404 mountHookTypesDev();
1405 updateEventComponentInstance(responder, props);
@@ -1499,7 +1501,7 @@ if (__DEV__) {
1501 updateHookTypesDev();
1502 return mountDebugValue(value, formatterFn);
1503 },
1502 - useEvent(responder, props) {
1504 + useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
1505 currentHookNameInDev = 'useEvent';
1506 updateHookTypesDev();
1507 updateEventComponentInstance(responder, props);
@@ -1601,7 +1603,7 @@ if (__DEV__) {
1603 updateHookTypesDev();
1604 return updateDebugValue(value, formatterFn);
1605 },
1604 - useEvent(responder, props) {
1606 + useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
1607 currentHookNameInDev = 'useEvent';
1608 updateHookTypesDev();
1609 updateEventComponentInstance(responder, props);
@@ -1714,7 +1716,7 @@ if (__DEV__) {
1716 mountHookTypesDev();
1717 return mountDebugValue(value, formatterFn);
1718 },
1717 - useEvent(responder, props) {
1719 + useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
1720 currentHookNameInDev = 'useEvent';
1721 warnInvalidHookAccess();
1722 mountHookTypesDev();
@@ -1828,7 +1830,7 @@ if (__DEV__) {
1830 updateHookTypesDev();
1831 return updateDebugValue(value, formatterFn);
1832 },
1831 - useEvent(responder, props) {
1833 + useEvent<T, E, C>(responder: ReactEventResponder<T, E, C>, props) {
1834 currentHookNameInDev = 'useEvent';
1835 warnInvalidHookAccess();
1836 updateHookTypesDev();
packages/react-test-renderer/src/ReactTestHostConfig.js
+3 -3
@@ -329,19 +329,19 @@ export function unhideTextInstance(
329 }
330
331 export function mountEventComponent(
332 - eventComponentInstance: ReactEventComponentInstance,
332 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
333 ): void {
334 // noop
335 }
336
337 export function updateEventComponent(
338 - eventComponentInstance: ReactEventComponentInstance,
338 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
339 ): void {
340 // noop
341 }
342
343 export function unmountEventComponent(
344 - eventComponentInstance: ReactEventComponentInstance,
344 + eventComponentInstance: ReactEventComponentInstance<any, any, any>,
345 ): void {
346 // noop
347 }
packages/react/src/ReactHooks.js
+8 -4
@@ -7,8 +7,7 @@
7 * @flow
8 */
9
10 -import type {ReactContext} from 'shared/ReactTypes';
11 -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
10 +import type {ReactEventResponder, ReactContext} from 'shared/ReactTypes';
11 import invariant from 'shared/invariant';
12 import warning from 'shared/warning';
13
@@ -137,7 +136,12 @@ export function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
136 }
137 }
138
140 -export function useEvent(responder: EventResponder, props: null | Object) {
139 +export const emptyObject = {};
140 +
141 +export function useEvent<T, E, C>(
142 + responder: ReactEventResponder<T, E, C>,
143 + props: null | Object,
144 +) {
145 const dispatcher = resolveDispatcher();
142 - return dispatcher.useEvent(responder, props);
146 + return dispatcher.useEvent(responder, props || emptyObject);
147 }
packages/shared/ReactDOMTypes.js
+16 -42
@@ -7,7 +7,11 @@
7 * @flow
8 */
9
10 -import type {EventPriority} from 'shared/ReactTypes';
10 +import type {
11 + ReactEventResponder,
12 + ReactEventComponentInstance,
13 + EventPriority,
14 +} from 'shared/ReactTypes';
15
16 type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
17
@@ -33,47 +37,17 @@ export type ReactDOMResponderEvent = {
37 type: string,
38 };
39
36 -export type ReactDOMEventResponder = {
37 - displayName: string,
38 - targetEventTypes?: Array<ReactDOMEventResponderEventType>,
39 - rootEventTypes?: Array<ReactDOMEventResponderEventType>,
40 - createInitialState?: (props: null | Object) => Object,
41 - allowMultipleHostChildren: boolean,
42 - allowEventHooks: boolean,
43 - onEvent?: (
44 - event: ReactDOMResponderEvent,
45 - context: ReactDOMResponderContext,
46 - props: null | Object,
47 - state: null | Object,
48 - ) => void,
49 - onEventCapture?: (
50 - event: ReactDOMResponderEvent,
51 - context: ReactDOMResponderContext,
52 - props: null | Object,
53 - state: null | Object,
54 - ) => void,
55 - onRootEvent?: (
56 - event: ReactDOMResponderEvent,
57 - context: ReactDOMResponderContext,
58 - props: null | Object,
59 - state: null | Object,
60 - ) => void,
61 - onMount?: (
62 - context: ReactDOMResponderContext,
63 - props: null | Object,
64 - state: null | Object,
65 - ) => void,
66 - onUnmount?: (
67 - context: ReactDOMResponderContext,
68 - props: null | Object,
69 - state: null | Object,
70 - ) => void,
71 - onOwnershipChange?: (
72 - context: ReactDOMResponderContext,
73 - props: null | Object,
74 - state: null | Object,
75 - ) => void,
76 -};
40 +export type ReactDOMEventResponder = ReactEventResponder<
41 + ReactDOMEventResponderEventType,
42 + ReactDOMResponderEvent,
43 + ReactDOMResponderContext,
44 +>;
45 +
46 +export type ReactDOMEventComponentInstance = ReactEventComponentInstance<
47 + ReactDOMEventResponderEventType,
48 + ReactDOMResponderEvent,
49 + ReactDOMResponderContext,
50 +>;
51
52 export type ReactDOMResponderContext = {
53 dispatchEvent: (
packages/shared/ReactTypes.js
+22 -11
@@ -7,9 +7,6 @@
7 * @flow
8 */
9
10 -// NOTE: this line is changed in the RN build, see: copyRNShims in packaging.js
11 -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
12 -
10 export type ReactNode =
11 | React$Element<any>
12 | ReactPortal
@@ -17,7 +14,7 @@ export type ReactNode =
14 | ReactFragment
15 | ReactProvider<any>
16 | ReactConsumer<any>
20 - | ReactEventComponent
17 + | ReactEventComponent<any, any, any>
18 | ReactEventTarget;
19
20 export type ReactEmpty = null | void | boolean;
@@ -84,20 +81,34 @@ export type RefObject = {|
81 current: any,
82 |};
83
87 -export type ReactEventComponentInstance = {|
84 +export type ReactEventComponentInstance<T, E, C> = {|
85 currentFiber: mixed,
86 localPropagation: boolean,
90 - props: null | Object,
91 - responder: EventResponder,
87 + props: Object,
88 + responder: ReactEventResponder<T, E, C>,
89 rootEventTypes: null | Set<string>,
90 rootInstance: null | mixed,
94 - state: null | Object,
91 + state: Object,
92 |};
93
97 -export type ReactEventComponent = {|
94 +export type ReactEventResponder<T, E, C> = {
95 + displayName: string,
96 + targetEventTypes?: Array<T>,
97 + rootEventTypes?: Array<T>,
98 + createInitialState?: (props: Object) => Object,
99 + allowMultipleHostChildren: boolean,
100 + allowEventHooks: boolean,
101 + onEvent?: (event: E, context: C, props: Object, state: Object) => void,
102 + onEventCapture?: (event: E, context: C, props: Object, state: Object) => void,
103 + onRootEvent?: (event: E, context: C, props: Object, state: Object) => void,
104 + onMount?: (context: C, props: Object, state: Object) => void,
105 + onUnmount?: (context: C, props: Object, state: Object) => void,
106 + onOwnershipChange?: (context: C, props: Object, state: Object) => void,
107 +};
108 +
109 +export type ReactEventComponent<T, E, C> = {|
110 $$typeof: Symbol | number,
99 - props: null | Object,
100 - responder: EventResponder,
111 + responder: ReactEventResponder<T, E, C>,
112 |};
113
114 export type ReactEventTarget = {|
packages/shared/createEventComponent.js
+4 -6
@@ -6,8 +6,7 @@
6 * @flow
7 */
8
9 -import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
10 -import type {ReactEventComponent} from 'shared/ReactTypes';
9 +import type {ReactEventResponder, ReactEventComponent} from 'shared/ReactTypes';
10 import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
11
12 let hasBadMapPolyfill;
@@ -29,9 +28,9 @@ if (__DEV__) {
28 }
29 }
30
32 -export default function createEventComponent(
33 - responder: EventResponder,
34 -): ReactEventComponent {
31 +export default function createEventComponent<T, E, C>(
32 + responder: ReactEventResponder<T, E, C>,
33 +): ReactEventComponent<T, E, C> {
34 // We use responder as a Map key later on. When we have a bad
35 // polyfill, then we can't use it as a key as the polyfill tries
36 // to add a property to the object.
@@ -40,7 +39,6 @@ export default function createEventComponent(
39 }
40 const eventComponent = {
41 $$typeof: REACT_EVENT_COMPONENT_TYPE,
43 - props: null,
42 responder: responder,
43 };
44 if (__DEV__) {
packages/shared/getComponentName.js
+2 -3
@@ -27,7 +27,7 @@ import {
27 REACT_EVENT_TARGET_TOUCH_HIT,
28 } from 'shared/ReactSymbols';
29 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
30 -import type {ReactEventComponent, ReactEventTarget} from 'shared/ReactTypes';
30 +import type {ReactEventTarget} from 'shared/ReactTypes';
31
32 import {enableEventAPI} from './ReactFeatureFlags';
33
@@ -97,8 +97,7 @@ function getComponentName(type: mixed): string | null {
97 }
98 case REACT_EVENT_COMPONENT_TYPE: {
99 if (enableEventAPI) {
100 - const eventComponent = ((type: any): ReactEventComponent);
101 - return eventComponent.responder.displayName;
100 + return (type: any).responder.displayName;
101 }
102 break;
103 }
scripts/rollup/packaging.js
+1 -13
@@ -1,12 +1,6 @@
1 'use strict';
2
3 -const {
4 - existsSync,
5 - readdirSync,
6 - unlinkSync,
7 - readFileSync,
8 - writeFileSync,
9 -} = require('fs');
3 +const {existsSync, readdirSync, unlinkSync} = require('fs');
4 const Bundles = require('./bundles');
5 const {
6 asyncCopyTo,
@@ -103,12 +97,6 @@ async function copyRNShims() {
97 'build/react-native/shims/ReactNativeTypes.js'
98 ),
99 ]);
106 - // Modify the EventResponder type in ReactTypes
107 - const reactTypesSource = readFileSync(reactTypesBuildTarget, 'utf8');
108 - const original = `import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';`;
109 - const changeTo = `import type {ReactNativeEventResponder as EventResponder} from './ReactNativeTypes';`;
110 - const modifiedSource = reactTypesSource.replace(original, changeTo);
111 - writeFileSync(reactTypesBuildTarget, modifiedSource);
100 }
101
102 async function copyAllShims() {