Add React.unstable_createEventComponent (#15580)

API for creating event components from event responders.

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

@@ -899,9 +899,6 @@ export function mountEventComponent(
     const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
     const rootElement = rootContainerInstance.ownerDocument;
     const responder = eventComponentInstance.responder;
-    if (__DEV__) {
-      Object.freeze(responder);
-    }
     const {rootEventTypes, targetEventTypes} = responder;
     if (targetEventTypes !== undefined) {
       listenToEventResponderEventTypes(targetEventTypes, rootElement);

packages/react-events/README.md

@@ -12,16 +12,13 @@ can be found [here](./docs).
 
 ## EventComponent
 
-An Event Component is defined by a module that exports an object of the
-following type:
+An Event Component is defined using `React.unstable_createEventComponent`:
 
 ```js
-type EventComponent = {|
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName?: string,
-  props: null | Object,
+const EventComponent = React.unstable_createEventComponent(
   responder: EventResponder,
-|};
+  displayName: string
+);
 ```
 
 ## EventResponder

packages/react-events/package.json

@@ -35,9 +35,12 @@
   "dependencies": {
     "loose-envify": "^1.1.0"
   },
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
   "browserify": {
     "transform": [
       "loose-envify"
     ]
   }
-}
+}

packages/react-events/src/Drag.js

@@ -11,7 +11,8 @@ import type {
   ReactResponderEvent,
   ReactResponderContext,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
 
 const targetEventTypes = ['pointerdown'];
 const rootEventTypes = [
@@ -244,9 +245,4 @@ const DragResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'Drag',
-  props: null,
-  responder: DragResponder,
-};
+export default React.unstable_createEventComponent(DragResponder, 'Drag');

packages/react-events/src/Focus.js

@@ -11,7 +11,8 @@ import type {
   ReactResponderEvent,
   ReactResponderContext,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
 import {getEventCurrentTarget} from './utils.js';
 
 type FocusProps = {
@@ -260,9 +261,4 @@ const FocusResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'Focus',
-  props: null,
-  responder: FocusResponder,
-};
+export default React.unstable_createEventComponent(FocusResponder, 'Focus');

packages/react-events/src/FocusScope.js

@@ -11,7 +11,8 @@ import type {
   ReactResponderEvent,
   ReactResponderContext,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
 
 type FocusScopeProps = {
   autoFocus: Boolean,
@@ -179,9 +180,7 @@ const FocusScopeResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'FocusScope',
-  props: null,
-  responder: FocusScopeResponder,
-};
+export default React.unstable_createEventComponent(
+  FocusScopeResponder,
+  'FocusScope',
+);

packages/react-events/src/Hover.js

@@ -11,7 +11,8 @@ import type {
   ReactResponderEvent,
   ReactResponderContext,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
 import {
   getEventPointerType,
   getEventCurrentTarget,
@@ -361,9 +362,4 @@ const HoverResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'Hover',
-  props: null,
-  responder: HoverResponder,
-};
+export default React.unstable_createEventComponent(HoverResponder, 'Hover');

packages/react-events/src/Press.js

@@ -12,7 +12,9 @@ import type {
   ReactResponderContext,
   ReactResponderDispatchEventOptions,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
+
 import {
   getEventPointerType,
   getEventCurrentTarget,
@@ -740,9 +742,4 @@ const PressResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'Press',
-  props: null,
-  responder: PressResponder,
-};
+export default React.unstable_createEventComponent(PressResponder, 'Press');

packages/react-events/src/Swipe.js

@@ -11,7 +11,8 @@ import type {
   ReactResponderEvent,
   ReactResponderContext,
 } from 'shared/ReactTypes';
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+import React from 'react';
 
 const targetEventTypes = ['pointerdown'];
 const rootEventTypes = [
@@ -254,9 +255,4 @@ const SwipeResponder = {
   },
 };
 
-export default {
-  $$typeof: REACT_EVENT_COMPONENT_TYPE,
-  displayName: 'Swipe',
-  props: null,
-  responder: SwipeResponder,
-};
+export default React.unstable_createEventComponent(SwipeResponder, 'Swipe');

packages/react/src/React.js

@@ -15,6 +15,7 @@ import {
 } from 'shared/ReactSymbols';
 
 import {Component, PureComponent} from './ReactBaseClasses';
+import {createEventComponent} from './ReactCreateEventComponent';
 import {createRef} from './ReactCreateRef';
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import {
@@ -51,6 +52,7 @@ import {
 import ReactSharedInternals from './ReactSharedInternals';
 import {error, warn} from './withComponentStack';
 import {
+  enableEventAPI,
   enableStableConcurrentModeAPIs,
   enableJSXTransformAPI,
 } from 'shared/ReactFeatureFlags';
@@ -109,6 +111,10 @@ const React = {
 // don't modify the React object to avoid deopts.
 // Also let's not expose their names in stable builds.
 
+if (enableEventAPI) {
+  React.unstable_createEventComponent = createEventComponent;
+}
+
 if (enableStableConcurrentModeAPIs) {
   React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
   React.unstable_ConcurrentMode = undefined;

packages/react/src/ReactCreateEventComponent.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @flow
+ */
+
+import type {ReactEventComponent, ReactEventResponder} from 'shared/ReactTypes';
+import {enableEventAPI} from 'shared/ReactFeatureFlags';
+
+import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+
+export function createEventComponent(
+  responder: ReactEventResponder,
+  displayName: string,
+): ?ReactEventComponent {
+  if (enableEventAPI) {
+    if (__DEV__) {
+      Object.freeze(responder);
+    }
+    const eventComponent = {
+      $$typeof: REACT_EVENT_COMPONENT_TYPE,
+      displayName: displayName,
+      props: null,
+      responder: responder,
+    };
+    if (__DEV__) {
+      Object.freeze(eventComponent);
+    }
+    return eventComponent;
+  }
+}

scripts/rollup/bundles.js

@@ -489,7 +489,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/press',
     global: 'ReactEventsPress',
-    externals: [],
+    externals: ['react'],
   },
 
   {
@@ -504,7 +504,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/hover',
     global: 'ReactEventsHover',
-    externals: [],
+    externals: ['react'],
   },
 
   {
@@ -519,7 +519,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/focus',
     global: 'ReactEventsFocus',
-    externals: [],
+    externals: ['react'],
   },
 
   {
@@ -534,7 +534,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/focus-scope',
     global: 'ReactEventsFocusScope',
-    externals: [],
+    externals: ['react'],
   },
 
   {
@@ -549,7 +549,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/swipe',
     global: 'ReactEventsSwipe',
-    externals: [],
+    externals: ['react'],
   },
 
   {
@@ -564,7 +564,7 @@ const bundles = [
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-events/drag',
     global: 'ReactEventsDrag',
-    externals: [],
+    externals: ['react'],
   },
 ];