diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 53ec5aa6fe..b4fa2dd61b 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/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); diff --git a/packages/react-events/README.md b/packages/react-events/README.md index 4d0694f2e2..d7da96a7b7 100644 --- a/packages/react-events/README.md +++ b/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 diff --git a/packages/react-events/package.json b/packages/react-events/package.json index cb367a2f8c..083eef77ff 100644 --- a/packages/react-events/package.json +++ b/packages/react-events/package.json @@ -35,9 +35,12 @@ "dependencies": { "loose-envify": "^1.1.0" }, + "peerDependencies": { + "react": "^16.0.0" + }, "browserify": { "transform": [ "loose-envify" ] } -} \ No newline at end of file +} diff --git a/packages/react-events/src/Drag.js b/packages/react-events/src/Drag.js index c6c8633476..bbc9fa7627 100644 --- a/packages/react-events/src/Drag.js +++ b/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'); diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js index 033a91f4bf..1984b8e0d0 100644 --- a/packages/react-events/src/Focus.js +++ b/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'); diff --git a/packages/react-events/src/FocusScope.js b/packages/react-events/src/FocusScope.js index 05493f1252..9d7224f0a4 100644 --- a/packages/react-events/src/FocusScope.js +++ b/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', +); diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js index f454601b69..1e0e1d2ca6 100644 --- a/packages/react-events/src/Hover.js +++ b/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'); diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js index dc7f10c865..588be56433 100644 --- a/packages/react-events/src/Press.js +++ b/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'); diff --git a/packages/react-events/src/Swipe.js b/packages/react-events/src/Swipe.js index a44b70efc9..6a9595754c 100644 --- a/packages/react-events/src/Swipe.js +++ b/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'); diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 0a96310a11..a5a0411fd0 100644 --- a/packages/react/src/React.js +++ b/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; diff --git a/packages/react/src/ReactCreateEventComponent.js b/packages/react/src/ReactCreateEventComponent.js new file mode 100644 index 0000000000..70bd83e989 --- /dev/null +++ b/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; + } +} diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index b838b1fd75..5e2d7d9dfa 100644 --- a/scripts/rollup/bundles.js +++ b/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'], }, ];