[Flare] Move unstable_createEventComponent to ReactDOM (#15890)

Author: trueadm

packages/react-dom/src/client/ReactDOM.js

@@ -42,6 +42,7 @@ import {
 } from 'react-reconciler/inline.dom';
 import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
+import createEventComponent from 'shared/createEventComponent';
 import {setBatchingImplementation} from 'events/ReactGenericBatching';
 import {
   setRestoreImplementation,
@@ -63,7 +64,10 @@ import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import lowPriorityWarning from 'shared/lowPriorityWarning';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
+import {
+  enableStableConcurrentModeAPIs,
+  enableEventAPI,
+} from 'shared/ReactFeatureFlags';
 
 import {
   getInstanceFromNode,
@@ -877,6 +881,10 @@ if (enableStableConcurrentModeAPIs) {
   ReactDOM.createSyncRoot = createSyncRoot;
 }
 
+if (enableEventAPI) {
+  ReactDOM.unstable_createEventComponent = createEventComponent;
+}
+
 const foundDevTools = injectIntoDevTools({
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: __DEV__ ? 1 : 0,

packages/react-dom/src/client/ReactDOMComponent.js

@@ -13,7 +13,7 @@ import {registrationNameModules} from 'events/EventPluginRegistry';
 import warning from 'shared/warning';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import type {ReactEventResponderEventType} from 'shared/ReactTypes';
+import type {ReactDOMEventResponderEventType} from 'shared/ReactDOMTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {
   setListenToResponderEventTypes,
@@ -1287,7 +1287,7 @@ export function restoreControlledState(
 }
 
 export function listenToEventResponderEventTypes(
-  eventTypes: Array<ReactEventResponderEventType>,
+  eventTypes: Array<ReactDOMEventResponderEventType>,
   element: Element | Document,
 ): void {
   if (enableEventAPI) {

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -46,6 +46,7 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
 import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {ReactDOMEventResponder} from 'shared/ReactDOMTypes';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -101,6 +102,7 @@ export type UpdatePayload = Array<mixed>;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = ReactDOMEventResponder;
 
 import {
   enableSuspenseServerRenderer,
@@ -905,7 +907,10 @@ export function mountEventComponent(
     const doc = rootContainerInstance.ownerDocument;
     const documentBody = doc.body || doc;
     const responder = eventComponentInstance.responder;
-    const {rootEventTypes, targetEventTypes} = responder;
+    const {
+      rootEventTypes,
+      targetEventTypes,
+    } = ((responder: any): ReactDOMEventResponder);
     if (targetEventTypes !== undefined) {
       listenToEventResponderEventTypes(targetEventTypes, documentBody);
     }

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -18,13 +18,15 @@ import {
   HostComponent,
 } from 'shared/ReactWorkTags';
 import type {
-  ReactEventResponder,
-  ReactEventResponderEventType,
   ReactEventComponentInstance,
-  ReactResponderContext,
-  ReactResponderEvent,
   EventPriority,
 } from 'shared/ReactTypes';
+import type {
+  ReactDOMEventResponder,
+  ReactDOMEventResponderEventType,
+  ReactDOMResponderContext,
+  ReactDOMResponderEvent,
+} from 'shared/ReactDOMTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {
   batchedEventUpdates,
@@ -95,7 +97,7 @@ const rootEventTypesToEventComponentInstances: Map<
   Set<ReactEventComponentInstance>,
 > = new Map();
 const targetEventTypeCached: Map<
-  Array<ReactEventResponderEventType>,
+  Array<ReactDOMEventResponderEventType>,
   Set<string>,
 > = new Map();
 const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
@@ -116,7 +118,7 @@ let currentInstance: null | ReactEventComponentInstance = null;
 let currentEventQueue: null | EventQueue = null;
 let currentTimerIDCounter = 0;
 
-const eventResponderContext: ReactResponderContext = {
+const eventResponderContext: ReactDOMResponderContext = {
   dispatchEvent(
     possibleEventObject: Object,
     listener: ($Shape<PartialEventObject>) => void,
@@ -186,7 +188,7 @@ const eventResponderContext: ReactResponderContext = {
     eventListeners.set(eventObject, listener);
     eventQueue.events.push(eventObject);
   },
-  isEventWithinTouchHitTarget(event: ReactResponderEvent): boolean {
+  isEventWithinTouchHitTarget(event: ReactDOMResponderEvent): boolean {
     validateResponderContext();
     const target = event.target;
     const nativeEvent = event.nativeEvent;
@@ -254,7 +256,9 @@ const eventResponderContext: ReactResponderContext = {
     }
     return false;
   },
-  addRootEventTypes(rootEventTypes: Array<ReactEventResponderEventType>): void {
+  addRootEventTypes(
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
+  ): void {
     validateResponderContext();
     const activeDocument = getActiveDocument();
     listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
@@ -265,7 +269,7 @@ const eventResponderContext: ReactResponderContext = {
     }
   },
   removeRootEventTypes(
-    rootEventTypes: Array<ReactEventResponderEventType>,
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
   ): void {
     validateResponderContext();
     for (let i = 0; i < rootEventTypes.length; i++) {
@@ -375,7 +379,7 @@ const eventResponderContext: ReactResponderContext = {
   },
   getActiveDocument,
   objectAssign: Object.assign,
-  getEventCurrentTarget(event: ReactResponderEvent): Element {
+  getEventCurrentTarget(event: ReactDOMResponderEvent): Element {
     validateResponderContext();
     const target = event.target;
     let fiber = getClosestInstanceFromNode(target);
@@ -531,13 +535,13 @@ function processTimers(
   }
 }
 
-function createResponderEvent(
+function createDOMResponderEvent(
   topLevelType: string,
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: Element | Document,
   passive: boolean,
   passiveSupported: boolean,
-): ReactResponderEvent {
+): ReactDOMResponderEvent {
   const {pointerType} = (nativeEvent: any);
   let eventPointerType = '';
   let pointerId = null;
@@ -589,7 +593,7 @@ function processEvents(events: Array<EventObjectType>): void {
   }
 }
 
-export function processEventQueue(): void {
+function processEventQueue(): void {
   const {events, eventPriority} = ((currentEventQueue: any): EventQueue);
 
   if (events.length === 0) {
@@ -622,8 +626,8 @@ export function processEventQueue(): void {
   }
 }
 
-function getTargetEventTypesSet(
-  eventTypes: Array<ReactEventResponderEventType>,
+function getDOMTargetEventTypesSet(
+  eventTypes: Array<ReactDOMEventResponderEventType>,
 ): Set<string> {
   let cachedSet = targetEventTypeCached.get(eventTypes);
 
@@ -669,7 +673,7 @@ function getTargetEventResponderInstances(
       const targetEventTypes = responder.targetEventTypes;
       // Validate the target event type exists on the responder
       if (targetEventTypes !== undefined) {
-        const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);
+        const targetEventTypesSet = getDOMTargetEventTypesSet(targetEventTypes);
         if (targetEventTypesSet.has(listeningName)) {
           eventResponderInstances.push(eventComponentInstance);
         }
@@ -700,8 +704,8 @@ function getRootEventResponderInstances(
 
 function shouldSkipEventComponent(
   eventResponderInstance: ReactEventComponentInstance,
-  responder: ReactEventResponder,
-  propagatedEventResponders: null | Set<ReactEventResponder>,
+  responder: ReactDOMEventResponder,
+  propagatedEventResponders: null | Set<ReactDOMEventResponder>,
 ): boolean {
   if (propagatedEventResponders !== null) {
     if (propagatedEventResponders.has(responder)) {
@@ -716,9 +720,9 @@ function shouldSkipEventComponent(
 }
 
 function checkForLocalPropagationContinuation(
-  responder: ReactEventResponder,
-  propagatedEventResponders: Set<ReactEventResponder>,
-) {
+  responder: ReactDOMEventResponder,
+  propagatedEventResponders: Set<ReactDOMEventResponder>,
+): void {
   if (continueLocalPropagation === true) {
     propagatedEventResponders.delete(responder);
     continueLocalPropagation = false;
@@ -748,14 +752,14 @@ function traverseAndHandleEventResponderInstances(
     listeningName,
     targetFiber,
   );
-  const responderEvent = createResponderEvent(
+  const responderEvent = createDOMResponderEvent(
     ((topLevelType: any): string),
     nativeEvent,
     ((nativeEventTarget: any): Element | Document),
     isPassiveEvent,
     isPassiveSupported,
   );
-  const propagatedEventResponders: Set<ReactEventResponder> = new Set();
+  const propagatedEventResponders: Set<ReactDOMEventResponder> = new Set();
   let length = targetEventResponderInstances.length;
   let i;
 
@@ -964,7 +968,7 @@ export function dispatchEventForResponderEventSystem(
 
 export function addRootEventTypesForComponentInstance(
   eventComponentInstance: ReactEventComponentInstance,
-  rootEventTypes: Array<ReactEventResponderEventType>,
+  rootEventTypes: Array<ReactDOMEventResponderEventType>,
 ): void {
   for (let i = 0; i < rootEventTypes.length; i++) {
     const rootEventType = rootEventTypes[i];
@@ -973,7 +977,7 @@ export function addRootEventTypesForComponentInstance(
 }
 
 function registerRootEventType(
-  rootEventType: ReactEventResponderEventType,
+  rootEventType: ReactDOMEventResponderEventType,
   eventComponentInstance: ReactEventComponentInstance,
 ): void {
   let name = rootEventType;
@@ -1013,9 +1017,7 @@ function registerRootEventType(
     name,
   );
   rootEventTypesSet.add(listeningName);
-  rootEventComponentInstances.add(
-    ((eventComponentInstance: any): ReactEventComponentInstance),
-  );
+  rootEventComponentInstances.add(eventComponentInstance);
 }
 
 export function generateListeningKey(

packages/react-events/src/Drag.js

@@ -8,12 +8,12 @@
  */
 
 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-  EventPriority,
-} from 'shared/ReactTypes';
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+import type {EventPriority} from 'shared/ReactTypes';
 
-import React from 'react';
+import ReactDOM from 'react-dom';
 import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
 
 const targetEventTypes = ['pointerdown'];
@@ -58,7 +58,7 @@ type DragEvent = {|
 |};
 
 function createDragEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
   type: DragEventType,
   target: Element | Document,
   eventData?: EventData,
@@ -72,7 +72,7 @@ function createDragEvent(
 }
 
 function dispatchDragEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
   name: DragEventType,
   listener: DragEvent => void,
   state: DragState,
@@ -99,8 +99,8 @@ const DragResponder = {
   },
   allowMultipleHostChildren: false,
   onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
     props: Object,
     state: DragState,
   ): void {
@@ -142,8 +142,8 @@ const DragResponder = {
     }
   },
   onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
     props: Object,
     state: DragState,
   ): void {
@@ -259,4 +259,4 @@ const DragResponder = {
   },
 };
 
-export default React.unstable_createEventComponent(DragResponder, 'Drag');
+export default ReactDOM.unstable_createEventComponent(DragResponder, 'Drag');