[Flare] Redesign core event system (#16163)

facebook · Jul 23, 2019 · 5098891 · 5098891
1 parent 19354db
commit 5098891
Show file tree

Hide file tree

Showing 59 changed files with 3,418 additions and 4,039 deletions.
diff --git a/packages/events/ReactGenericBatching.js b/packages/events/ReactGenericBatching.js
@@ -59,15 +59,15 @@ export function batchedUpdates(fn, bookkeeping) {
   }
 }
 
-export function batchedEventUpdates(fn, bookkeeping) {
+export function batchedEventUpdates(fn, a, b) {
   if (isInsideEventHandler) {
     // If we are currently inside another batch, we need to wait until it
     // fully completes before restoring state.
-    return fn(bookkeeping);
+    return fn(a, b);
   }
   isInsideEventHandler = true;
   try {
-    return batchedEventUpdatesImpl(fn, bookkeeping);
+    return batchedEventUpdatesImpl(fn, a, b);
   } finally {
     isInsideEventHandler = false;
     finishEventHandler();

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
@@ -10,7 +10,10 @@ import Mode from 'art/modes/current';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
-import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {
+  ReactEventResponder,
+  ReactEventResponderInstance,
+} from 'shared/ReactTypes';
 
 const pooledTransform = new Transform();
 
@@ -329,10 +332,6 @@ export function getChildHostContext() {
   return NO_CONTEXT;
 }
 
-export function getChildHostContextForEventComponent() {
-  return NO_CONTEXT;
-}
-
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
@@ -427,20 +426,19 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance<any, any>,
-) {
-  throw new Error('Not yet implemented.');
-}
-
-export function updateEventComponent(
-  eventComponentInstance: ReactEventComponentInstance<any, any>,
+export function mountResponderInstance(
+  responder: ReactEventResponder<any, any>,
+  responderInstance: ReactEventResponderInstance<any, any>,
+  props: Object,
+  state: Object,
+  instance: Object,
+  rootContainerInstance: Object,
 ) {
   throw new Error('Not yet implemented.');
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactEventComponentInstance<any, any>,
+export function unmountResponderInstance(
+  responderInstance: ReactEventResponderInstance<any, any>,
 ): void {
   throw new Error('Not yet implemented.');
 }

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -215,7 +215,7 @@ function useMemo<T>(
   return value;
 }
 
-function useEvent() {
+function useListener() {
   throw new Error('TODO: not yet implemented');
 }
 
@@ -231,7 +231,7 @@ const Dispatcher: DispatcherType = {
   useReducer,
   useRef,
   useState,
-  useEvent,
+  useListener,
 };
 
 // Inspect

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -98,6 +98,7 @@ const AUTOFOCUS = 'autoFocus';
 const CHILDREN = 'children';
 const STYLE = 'style';
 const HTML = '__html';
+const RESPONDERS = 'responders';
 
 const {html: HTML_NAMESPACE} = Namespaces;
 
@@ -340,6 +341,7 @@ function setInitialDOMProperties(
         setTextContent(domElement, '' + nextProp);
       }
     } else if (
+      (enableFlareAPI && propKey === RESPONDERS) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -696,6 +698,7 @@ export function diffProperties(
     } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {
       // Noop. This is handled by the clear text mechanism.
     } else if (
+      (enableFlareAPI && propKey === RESPONDERS) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -787,6 +790,7 @@ export function diffProperties(
         (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
       }
     } else if (
+      (enableFlareAPI && propKey === RESPONDERS) ||
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
@@ -1041,6 +1045,7 @@ export function diffHydratedProperties(
       if (suppressHydrationWarning) {
         // Don't bother comparing. We're ignoring all these warnings.
       } else if (
+        (enableFlareAPI && propKey === RESPONDERS) ||
         propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
         propKey === SUPPRESS_HYDRATION_WARNING ||
         // Controlled attributes are not validated

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -44,11 +44,11 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 import type {DOMContainer} from './ReactDOM';
 import type {
   ReactDOMEventResponder,
-  ReactDOMEventComponentInstance,
+  ReactDOMEventResponderInstance,
   ReactDOMFundamentalComponentInstance,
 } from 'shared/ReactDOMTypes';
 import {
-  addRootEventTypesForComponentInstance,
+  addRootEventTypesForResponderInstance,
   mountEventResponder,
   unmountEventResponder,
 } from '../events/DOMEventResponderSystem';
@@ -90,9 +90,6 @@ export type PublicInstance = Element | Text;
 type HostContextDev = {
   namespace: string,
   ancestorInfo: mixed,
-  eventData: null | {|
-    isEventComponent?: boolean,
-  |},
 };
 type HostContextProd = string;
 export type HostContext = HostContextDev | HostContextProd;
@@ -106,7 +103,6 @@ import {
   enableFlareAPI,
   enableFundamentalAPI,
 } from 'shared/ReactFeatureFlags';
-import warning from 'shared/warning';
 
 let SUPPRESS_HYDRATION_WARNING;
 if (__DEV__) {
@@ -164,7 +160,7 @@ export function getRootHostContext(
   if (__DEV__) {
     const validatedTag = type.toLowerCase();
     const ancestorInfo = updatedAncestorInfo(null, validatedTag);
-    return {namespace, ancestorInfo, eventData: null};
+    return {namespace, ancestorInfo};
   }
   return namespace;
 }
@@ -181,26 +177,12 @@ export function getChildHostContext(
       parentHostContextDev.ancestorInfo,
       type,
     );
-    return {namespace, ancestorInfo, eventData: null};
+    return {namespace, ancestorInfo};
   }
   const parentNamespace = ((parentHostContext: any): HostContextProd);
   return getChildNamespace(parentNamespace, type);
 }
 
-export function getChildHostContextForEventComponent(
-  parentHostContext: HostContext,
-): HostContext {
-  if (__DEV__) {
-    const parentHostContextDev = ((parentHostContext: any): HostContextDev);
-    const {namespace, ancestorInfo} = parentHostContextDev;
-    const eventData = {
-      isEventComponent: true,
-    };
-    return {namespace, ancestorInfo, eventData};
-  }
-  return parentHostContext;
-}
-
 export function getPublicInstance(instance: Instance): * {
   return instance;
 }
@@ -332,17 +314,6 @@ export function createTextInstance(
   if (__DEV__) {
     const hostContextDev = ((hostContext: any): HostContextDev);
     validateDOMNesting(null, text, hostContextDev.ancestorInfo);
-    if (enableFlareAPI) {
-      const eventData = hostContextDev.eventData;
-      if (eventData !== null) {
-        warning(
-          !eventData.isEventComponent,
-          'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-            'Wrap the child text "%s" in an element.',
-          text,
-        );
-      }
-    }
   }
   const textNode: TextInstance = createTextNode(text, rootContainerInstance);
   precacheFiberNode(internalInstanceHandle, textNode);
@@ -844,44 +815,43 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
-export function mountEventComponent(
-  eventComponentInstance: ReactDOMEventComponentInstance,
-): void {
-  if (enableFlareAPI) {
-    const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
-    const doc = rootContainerInstance.ownerDocument;
-    const documentBody = doc.body || doc;
-    const responder = eventComponentInstance.responder;
-    const {
-      rootEventTypes,
-      targetEventTypes,
-    } = ((responder: any): ReactDOMEventResponder);
-    if (targetEventTypes !== undefined) {
-      listenToEventResponderEventTypes(targetEventTypes, documentBody);
-    }
-    if (rootEventTypes !== undefined) {
-      addRootEventTypesForComponentInstance(
-        eventComponentInstance,
-        rootEventTypes,
-      );
-      listenToEventResponderEventTypes(rootEventTypes, documentBody);
-    }
-    mountEventResponder(eventComponentInstance);
-  }
-}
-
-export function updateEventComponent(
-  eventComponentInstance: ReactDOMEventComponentInstance,
-): void {
-  // NO-OP, why might use this in the future
+export function mountResponderInstance(
+  responder: ReactDOMEventResponder,
+  responderInstance: ReactDOMEventResponderInstance,
+  responderProps: Object,
+  responderState: Object,
+  instance: Instance,
+  rootContainerInstance: Container,
+): ReactDOMEventResponderInstance {
+  // Listen to events
+  const doc = rootContainerInstance.ownerDocument;
+  const documentBody = doc.body || doc;
+  const {
+    rootEventTypes,
+    targetEventTypes,
+  } = ((responder: any): ReactDOMEventResponder);
+  if (targetEventTypes !== null) {
+    listenToEventResponderEventTypes(targetEventTypes, documentBody);
+  }
+  if (rootEventTypes !== null) {
+    addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
+    listenToEventResponderEventTypes(rootEventTypes, documentBody);
+  }
+  mountEventResponder(
+    responder,
+    responderInstance,
+    responderProps,
+    responderState,
+  );
+  return responderInstance;
 }
 
-export function unmountEventComponent(
-  eventComponentInstance: ReactDOMEventComponentInstance,
+export function unmountResponderInstance(
+  responderInstance: ReactDOMEventResponderInstance,
 ): void {
   if (enableFlareAPI) {
     // TODO stop listening to targetEventTypes
-    unmountEventResponder(eventComponentInstance);
+    unmountEventResponder(responderInstance);
   }
 }