Add React.unstable_createEventComponent (#15580)
API for creating event components from event responders.
Nicolas Gallagher committed
May 7, 2019 at 12:36 UTC
89d8d1435ffc61fd5201636a84c53806130ef4b8
12 files changed
+75
-59
packages/react-dom/src/client/ReactDOMHostConfig.js
-3
@@ -899,9 +899,6 @@ export function mountEventComponent(
899
const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
900
const rootElement = rootContainerInstance.ownerDocument;
901
const responder = eventComponentInstance.responder;
902
- if (__DEV__) {
903
- Object.freeze(responder);
904
- }
902
const {rootEventTypes, targetEventTypes} = responder;
903
if (targetEventTypes !== undefined) {
904
listenToEventResponderEventTypes(targetEventTypes, rootElement);
packages/react-events/README.md
+4
-7
@@ -12,16 +12,13 @@ can be found [here](./docs).
12
13
## EventComponent
14
15
-An Event Component is defined by a module that exports an object of the
16
-following type:
15
+An Event Component is defined using `React.unstable_createEventComponent`:
16
17
```js
19
-type EventComponent = {|
20
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
21
- displayName?: string,
22
- props: null | Object,
18
+const EventComponent = React.unstable_createEventComponent(
19
responder: EventResponder,
24
-|};
20
+ displayName: string
21
+);
22
```
23
24
## EventResponder
packages/react-events/package.json
+4
-1
@@ -35,9 +35,12 @@
35
"dependencies": {
36
"loose-envify": "^1.1.0"
37
},
38
+ "peerDependencies": {
39
+ "react": "^16.0.0"
40
+ },
41
"browserify": {
42
"transform": [
43
"loose-envify"
44
]
45
}
43
-}
\ No newline at end of file
46
+}
packages/react-events/src/Drag.js
+3
-7
@@ -11,7 +11,8 @@ import type {
11
ReactResponderEvent,
12
ReactResponderContext,
13
} from 'shared/ReactTypes';
14
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
14
+
15
+import React from 'react';
16
17
const targetEventTypes = ['pointerdown'];
18
const rootEventTypes = [
@@ -244,9 +245,4 @@ const DragResponder = {
245
},
246
};
247
247
-export default {
248
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
249
- displayName: 'Drag',
250
- props: null,
251
- responder: DragResponder,
252
-};
248
+export default React.unstable_createEventComponent(DragResponder, 'Drag');
packages/react-events/src/Focus.js
+3
-7
@@ -11,7 +11,8 @@ import type {
11
ReactResponderEvent,
12
ReactResponderContext,
13
} from 'shared/ReactTypes';
14
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
14
+
15
+import React from 'react';
16
import {getEventCurrentTarget} from './utils.js';
17
18
type FocusProps = {
@@ -260,9 +261,4 @@ const FocusResponder = {
261
},
262
};
263
263
-export default {
264
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
265
- displayName: 'Focus',
266
- props: null,
267
- responder: FocusResponder,
268
-};
264
+export default React.unstable_createEventComponent(FocusResponder, 'Focus');
packages/react-events/src/FocusScope.js
+6
-7
@@ -11,7 +11,8 @@ import type {
11
ReactResponderEvent,
12
ReactResponderContext,
13
} from 'shared/ReactTypes';
14
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
14
+
15
+import React from 'react';
16
17
type FocusScopeProps = {
18
autoFocus: Boolean,
@@ -179,9 +180,7 @@ const FocusScopeResponder = {
180
},
181
};
182
182
-export default {
183
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
184
- displayName: 'FocusScope',
185
- props: null,
186
- responder: FocusScopeResponder,
187
-};
183
+export default React.unstable_createEventComponent(
184
+ FocusScopeResponder,
185
+ 'FocusScope',
186
+);
packages/react-events/src/Hover.js
+3
-7
@@ -11,7 +11,8 @@ import type {
11
ReactResponderEvent,
12
ReactResponderContext,
13
} from 'shared/ReactTypes';
14
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
14
+
15
+import React from 'react';
16
import {
17
getEventPointerType,
18
getEventCurrentTarget,
@@ -361,9 +362,4 @@ const HoverResponder = {
362
},
363
};
364
364
-export default {
365
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
366
- displayName: 'Hover',
367
- props: null,
368
- responder: HoverResponder,
369
-};
365
+export default React.unstable_createEventComponent(HoverResponder, 'Hover');
packages/react-events/src/Press.js
+4
-7
@@ -12,7 +12,9 @@ import type {
12
ReactResponderContext,
13
ReactResponderDispatchEventOptions,
14
} from 'shared/ReactTypes';
15
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
15
+
16
+import React from 'react';
17
+
18
import {
19
getEventPointerType,
20
getEventCurrentTarget,
@@ -740,9 +742,4 @@ const PressResponder = {
742
},
743
};
744
743
-export default {
744
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
745
- displayName: 'Press',
746
- props: null,
747
- responder: PressResponder,
748
-};
745
+export default React.unstable_createEventComponent(PressResponder, 'Press');
packages/react-events/src/Swipe.js
+3
-7
@@ -11,7 +11,8 @@ import type {
11
ReactResponderEvent,
12
ReactResponderContext,
13
} from 'shared/ReactTypes';
14
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
14
+
15
+import React from 'react';
16
17
const targetEventTypes = ['pointerdown'];
18
const rootEventTypes = [
@@ -254,9 +255,4 @@ const SwipeResponder = {
255
},
256
};
257
257
-export default {
258
- $$typeof: REACT_EVENT_COMPONENT_TYPE,
259
- displayName: 'Swipe',
260
- props: null,
261
- responder: SwipeResponder,
262
-};
258
+export default React.unstable_createEventComponent(SwipeResponder, 'Swipe');
packages/react/src/React.js
+6
@@ -15,6 +15,7 @@ import {
15
} from 'shared/ReactSymbols';
16
17
import {Component, PureComponent} from './ReactBaseClasses';
18
+import {createEventComponent} from './ReactCreateEventComponent';
19
import {createRef} from './ReactCreateRef';
20
import {forEach, map, count, toArray, only} from './ReactChildren';
21
import {
@@ -51,6 +52,7 @@ import {
52
import ReactSharedInternals from './ReactSharedInternals';
53
import {error, warn} from './withComponentStack';
54
import {
55
+ enableEventAPI,
56
enableStableConcurrentModeAPIs,
57
enableJSXTransformAPI,
58
} from 'shared/ReactFeatureFlags';
@@ -109,6 +111,10 @@ const React = {
111
// don't modify the React object to avoid deopts.
112
// Also let's not expose their names in stable builds.
113
114
+if (enableEventAPI) {
115
+ React.unstable_createEventComponent = createEventComponent;
116
+}
117
+
118
if (enableStableConcurrentModeAPIs) {
119
React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
120
React.unstable_ConcurrentMode = undefined;
packages/react/src/ReactCreateEventComponent.js
new
+33
@@ -0,0 +1,33 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ * @flow
7
+ */
8
+
9
+import type {ReactEventComponent, ReactEventResponder} from 'shared/ReactTypes';
10
+import {enableEventAPI} from 'shared/ReactFeatureFlags';
11
+
12
+import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
13
+
14
+export function createEventComponent(
15
+ responder: ReactEventResponder,
16
+ displayName: string,
17
+): ?ReactEventComponent {
18
+ if (enableEventAPI) {
19
+ if (__DEV__) {
20
+ Object.freeze(responder);
21
+ }
22
+ const eventComponent = {
23
+ $$typeof: REACT_EVENT_COMPONENT_TYPE,
24
+ displayName: displayName,
25
+ props: null,
26
+ responder: responder,
27
+ };
28
+ if (__DEV__) {
29
+ Object.freeze(eventComponent);
30
+ }
31
+ return eventComponent;
32
+ }
33
+}
scripts/rollup/bundles.js
+6
-6
@@ -489,7 +489,7 @@ const bundles = [
489
moduleType: NON_FIBER_RENDERER,
490
entry: 'react-events/press',
491
global: 'ReactEventsPress',
492
- externals: [],
492
+ externals: ['react'],
493
},
494
495
{
@@ -504,7 +504,7 @@ const bundles = [
504
moduleType: NON_FIBER_RENDERER,
505
entry: 'react-events/hover',
506
global: 'ReactEventsHover',
507
- externals: [],
507
+ externals: ['react'],
508
},
509
510
{
@@ -519,7 +519,7 @@ const bundles = [
519
moduleType: NON_FIBER_RENDERER,
520
entry: 'react-events/focus',
521
global: 'ReactEventsFocus',
522
- externals: [],
522
+ externals: ['react'],
523
},
524
525
{
@@ -534,7 +534,7 @@ const bundles = [
534
moduleType: NON_FIBER_RENDERER,
535
entry: 'react-events/focus-scope',
536
global: 'ReactEventsFocusScope',
537
- externals: [],
537
+ externals: ['react'],
538
},
539
540
{
@@ -549,7 +549,7 @@ const bundles = [
549
moduleType: NON_FIBER_RENDERER,
550
entry: 'react-events/swipe',
551
global: 'ReactEventsSwipe',
552
- externals: [],
552
+ externals: ['react'],
553
},
554
555
{
@@ -564,7 +564,7 @@ const bundles = [
564
moduleType: NON_FIBER_RENDERER,
565
entry: 'react-events/drag',
566
global: 'ReactEventsDrag',
567
- externals: [],
567
+ externals: ['react'],
568
},
569
];
570