{"parents":["01bce8c24843b02a0082edb55d3cd4763e7a956d"],"commit":{"subject":"[Native] Add FeatureFlag to dispatch events with instance targets (#17323)","authorEmail":"github@eli-white.com","revision":"2c6ea0b3ffffd1a110845327262ecea59ee48dab","authorName":"Eli White","shortRevision":"2c6ea0b3ff","authoredAt":"2019-11-11T11:35:29-08:00"},"body":"* [Native] Add FeatureFlag to dispatch events with instance targets\r\n\r\n* Prettier","patch":"diff --git a\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js b\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\nindex cdc00c4da5..52d5136c0c 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\n@@ -18,7 +18,10 @@ import {registrationNameModules} from 'legacy-events\/EventPluginRegistry';\n import {batchedUpdates} from 'legacy-events\/ReactGenericBatching';\n \n import type {AnyNativeEvent} from 'legacy-events\/PluginModuleType';\n-import {enableFlareAPI} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableFlareAPI,\n+ enableNativeTargetAsInstance,\n+} from 'shared\/ReactFeatureFlags';\n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n import {dispatchEventForResponderEventSystem} from '.\/ReactFabricEventResponderSystem';\n \n@@ -30,6 +33,7 @@ export function dispatchEvent(\n nativeEvent: AnyNativeEvent,\n ) {\n const targetFiber = (target: null | Fiber);\n+\n if (enableFlareAPI) {\n \/\/ React Flare event system\n dispatchEventForResponderEventSystem(\n@@ -38,13 +42,25 @@ export function dispatchEvent(\n (nativeEvent: any),\n );\n }\n+\n+ let eventTarget;\n+ if (enableNativeTargetAsInstance) {\n+ if (targetFiber == null) {\n+ eventTarget = null;\n+ } else {\n+ eventTarget = targetFiber.stateNode.canonical;\n+ }\n+ } else {\n+ eventTarget = nativeEvent.target;\n+ }\n+\n batchedUpdates(function() {\n \/\/ Heritage plugin event system\n runExtractedPluginEventsInBatch(\n topLevelType,\n targetFiber,\n nativeEvent,\n- nativeEvent.target,\n+ eventTarget,\n PLUGIN_EVENT_SYSTEM,\n );\n });\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js b\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\nindex 072d5106a2..3bb9fee82c 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\n@@ -15,6 +15,7 @@ import {\n import {registrationNameModules} from 'legacy-events\/EventPluginRegistry';\n import {batchedUpdates} from 'legacy-events\/ReactGenericBatching';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n+import {enableNativeTargetAsInstance} from 'shared\/ReactFeatureFlags';\n \n import {getInstanceFromNode} from '.\/ReactNativeComponentTree';\n \n@@ -98,12 +99,24 @@ function _receiveRootNodeIDEvent(\n ) {\n const nativeEvent = nativeEventParam || EMPTY_NATIVE_EVENT;\n const inst = getInstanceFromNode(rootNodeID);\n+\n+ let target;\n+ if (enableNativeTargetAsInstance) {\n+ if (inst == null) {\n+ target = null;\n+ } else {\n+ target = inst.stateNode;\n+ }\n+ } else {\n+ target = nativeEvent.target;\n+ }\n+\n batchedUpdates(function() {\n runExtractedPluginEventsInBatch(\n topLevelType,\n inst,\n nativeEvent,\n- nativeEvent.target,\n+ target,\n PLUGIN_EVENT_SYSTEM,\n );\n });\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\nindex 5a502edd67..207f2d0afe 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js\n@@ -12,6 +12,7 @@\n \n let React;\n let ReactFabric;\n+let ReactFeatureFlags;\n let createReactClass;\n let createReactNativeComponentClass;\n let UIManager;\n@@ -38,6 +39,7 @@ describe('ReactFabric', () => {\n React = require('react');\n StrictMode = React.StrictMode;\n ReactFabric = require('react-native-renderer\/fabric');\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n UIManager = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n .UIManager;\n createReactClass = require('create-react-class\/factory')(\n@@ -779,6 +781,198 @@ describe('ReactFabric', () => {\n expect(touchStart2).toBeCalled();\n });\n \n+ it('dispatches event with target as reactTag', () => {\n+ ReactFeatureFlags.enableNativeTargetAsInstance = false;\n+\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {\n+ id: true,\n+ },\n+ uiViewClassName: 'RCTView',\n+ directEventTypes: {\n+ topTouchStart: {\n+ registrationName: 'onTouchStart',\n+ },\n+ topTouchEnd: {\n+ registrationName: 'onTouchEnd',\n+ },\n+ },\n+ }));\n+\n+ function getViewById(id) {\n+ const [\n+ reactTag,\n+ ,\n+ ,\n+ ,\n+ instanceHandle,\n+ ] = nativeFabricUIManager.createNode.mock.calls.find(\n+ args => args[3] && args[3].id === id,\n+ );\n+\n+ return {reactTag, instanceHandle};\n+ }\n+\n+ const ref1 = React.createRef();\n+ const ref2 = React.createRef();\n+\n+ ReactFabric.render(\n+ \n+ {\n+ expect(ref1.current).not.toBeNull();\n+ expect(ReactFabric.findNodeHandle(ref1.current)).toEqual(\n+ event.target,\n+ );\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ {\n+ expect(ref2.current).not.toBeNull();\n+ expect(ReactFabric.findNodeHandle(ref2.current)).toEqual(\n+ event.target,\n+ );\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ <\/View>,\n+ 1,\n+ );\n+\n+ let [\n+ dispatchEvent,\n+ ] = nativeFabricUIManager.registerEventHandler.mock.calls[0];\n+\n+ dispatchEvent(getViewById('one').instanceHandle, 'topTouchStart', {\n+ target: getViewById('one').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+ dispatchEvent(getViewById('one').instanceHandle, 'topTouchEnd', {\n+ target: getViewById('one').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ dispatchEvent(getViewById('two').instanceHandle, 'topTouchStart', {\n+ target: getViewById('two').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ dispatchEvent(getViewById('two').instanceHandle, 'topTouchEnd', {\n+ target: getViewById('two').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ expect.assertions(4);\n+ });\n+\n+ it('dispatches event with target as instance', () => {\n+ ReactFeatureFlags.enableNativeTargetAsInstance = true;\n+\n+ const View = createReactNativeComponentClass('RCTView', () => ({\n+ validAttributes: {\n+ id: true,\n+ },\n+ uiViewClassName: 'RCTView',\n+ directEventTypes: {\n+ topTouchStart: {\n+ registrationName: 'onTouchStart',\n+ },\n+ topTouchEnd: {\n+ registrationName: 'onTouchEnd',\n+ },\n+ },\n+ }));\n+\n+ function getViewById(id) {\n+ const [\n+ reactTag,\n+ ,\n+ ,\n+ ,\n+ instanceHandle,\n+ ] = nativeFabricUIManager.createNode.mock.calls.find(\n+ args => args[3] && args[3].id === id,\n+ );\n+\n+ return {reactTag, instanceHandle};\n+ }\n+\n+ const ref1 = React.createRef();\n+ const ref2 = React.createRef();\n+\n+ ReactFabric.render(\n+ \n+ {\n+ expect(ref1.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref1.current).toBe(event.target);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ {\n+ expect(ref2.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref2.current).toBe(event.target);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ <\/View>,\n+ 1,\n+ );\n+\n+ let [\n+ dispatchEvent,\n+ ] = nativeFabricUIManager.registerEventHandler.mock.calls[0];\n+\n+ dispatchEvent(getViewById('one').instanceHandle, 'topTouchStart', {\n+ target: getViewById('one').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+ dispatchEvent(getViewById('one').instanceHandle, 'topTouchEnd', {\n+ target: getViewById('one').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ dispatchEvent(getViewById('two').instanceHandle, 'topTouchStart', {\n+ target: getViewById('two').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ dispatchEvent(getViewById('two').instanceHandle, 'topTouchEnd', {\n+ target: getViewById('two').reactTag,\n+ identifier: 17,\n+ touches: [],\n+ changedTouches: [],\n+ });\n+\n+ expect.assertions(4);\n+ });\n+\n it('findHostInstance_DEPRECATED should warn if used to find a host component inside StrictMode', () => {\n const View = createReactNativeComponentClass('RCTView', () => ({\n validAttributes: {foo: true},\ndiff --git a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\nindex 31b913129d..064da92758 100644\n--- a\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js\n@@ -14,6 +14,7 @@ let PropTypes;\n let RCTEventEmitter;\n let React;\n let ReactNative;\n+let ReactFeatureFlags;\n let ResponderEventPlugin;\n let UIManager;\n let createReactNativeComponentClass;\n@@ -68,6 +69,7 @@ beforeEach(() => {\n .RCTEventEmitter;\n React = require('react');\n ReactNative = require('react-native-renderer');\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ResponderEventPlugin = require('legacy-events\/ResponderEventPlugin').default;\n UIManager = require('react-native\/Libraries\/ReactPrivate\/ReactNativePrivateInterface')\n .UIManager;\n@@ -456,3 +458,141 @@ it('handles events without target', () => {\n 'two responder end',\n ]);\n });\n+\n+it('dispatches event with target as reactTag', () => {\n+ ReactFeatureFlags.enableNativeTargetAsInstance = false;\n+ const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];\n+\n+ const View = fakeRequireNativeComponent('View', {id: true});\n+\n+ function getViewById(id) {\n+ return UIManager.createView.mock.calls.find(\n+ args => args[3] && args[3].id === id,\n+ )[0];\n+ }\n+\n+ const ref1 = React.createRef();\n+ const ref2 = React.createRef();\n+\n+ ReactNative.render(\n+ \n+ {\n+ expect(ref1.current).not.toBeNull();\n+ expect(ReactNative.findNodeHandle(ref1.current)).toEqual(\n+ event.target,\n+ );\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ {\n+ expect(ref2.current).not.toBeNull();\n+ expect(ReactNative.findNodeHandle(ref2.current)).toEqual(\n+ event.target,\n+ );\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ <\/View>,\n+ 1,\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchStart',\n+ [{target: getViewById('one'), identifier: 17}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchEnd',\n+ [{target: getViewById('one'), identifier: 17}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchStart',\n+ [{target: getViewById('two'), identifier: 18}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchEnd',\n+ [{target: getViewById('two'), identifier: 18}],\n+ [0],\n+ );\n+\n+ expect.assertions(4);\n+});\n+\n+it('dispatches event with target as instance', () => {\n+ ReactFeatureFlags.enableNativeTargetAsInstance = true;\n+ const EventEmitter = RCTEventEmitter.register.mock.calls[0][0];\n+\n+ const View = fakeRequireNativeComponent('View', {id: true});\n+\n+ function getViewById(id) {\n+ return UIManager.createView.mock.calls.find(\n+ args => args[3] && args[3].id === id,\n+ )[0];\n+ }\n+\n+ const ref1 = React.createRef();\n+ const ref2 = React.createRef();\n+\n+ ReactNative.render(\n+ \n+ {\n+ expect(ref1.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref1.current).toBe(event.target);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ {\n+ expect(ref2.current).not.toBeNull();\n+ \/\/ Check for referential equality\n+ expect(ref2.current).toBe(event.target);\n+ }}\n+ onStartShouldSetResponder={() => true}\n+ \/>\n+ <\/View>,\n+ 1,\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchStart',\n+ [{target: getViewById('one'), identifier: 17}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchEnd',\n+ [{target: getViewById('one'), identifier: 17}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchStart',\n+ [{target: getViewById('two'), identifier: 18}],\n+ [0],\n+ );\n+\n+ EventEmitter.receiveTouches(\n+ 'topTouchEnd',\n+ [{target: getViewById('two'), identifier: 18}],\n+ [0],\n+ );\n+\n+ expect.assertions(4);\n+});\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex b74aa2c30f..fc30d6f9a3 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -89,3 +89,6 @@ export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n \n export const enableTrustedTypesIntegration = false;\n+\n+\/\/ Flag to turn event.target and event.currentTarget in ReactNative from a reactTag to a component instance\n+export const enableNativeTargetAsInstance = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 88f15f0115..4eb32dbaaf 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -13,7 +13,9 @@ import typeof * as FeatureFlagsType from 'shared\/ReactFeatureFlags';\n import typeof * as FeatureFlagsShimType from '.\/ReactFeatureFlags.native-fb';\n \n \/\/ Uncomment to re-export dynamic flags from the fbsource version.\n-\/\/ export const {} = require('..\/shims\/ReactFeatureFlags');\n+export const {\n+ enableNativeTargetAsInstance,\n+} = require('..\/shims\/ReactFeatureFlags');\n \n \/\/ The rest of the flags are static for better dead code elimination.\n export const enableUserTimingAPI = __DEV__;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 5c264ca405..1006296f65 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -37,6 +37,7 @@ export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n+export const enableNativeTargetAsInstance = false;\n \n \/\/ Only used in www builds.\n export function addUserTimingListener() {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\nindex 55f62f3390..ab0a07ee9d 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n@@ -37,6 +37,7 @@ export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n+export const enableNativeTargetAsInstance = false;\n \n \/\/ Only used in www builds.\n export function addUserTimingListener() {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex bf83c976aa..1d5049ffff 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -37,6 +37,7 @@ export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n+export const enableNativeTargetAsInstance = false;\n \n \/\/ Only used in www builds.\n export function addUserTimingListener() {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 930a2077d8..20d16e23ab 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -35,6 +35,7 @@ export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n+export const enableNativeTargetAsInstance = false;\n \n \/\/ Only used in www builds.\n export function addUserTimingListener() {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex b672259c20..ba025eefd3 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -85,6 +85,8 @@ export const enableSuspenseCallback = true;\n \n export const flushSuspenseFallbacksInTests = true;\n \n+export const enableNativeTargetAsInstance = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n \/\/ eslint-disable-next-line no-unused-vars\n type Check<_X, Y: _X, X: Y = _X> = null;\ndiff --git a\/scripts\/flow\/react-native-host-hooks.js b\/scripts\/flow\/react-native-host-hooks.js\nindex 460f6170cd..a0aaa4ebc5 100644\n--- a\/scripts\/flow\/react-native-host-hooks.js\n+++ b\/scripts\/flow\/react-native-host-hooks.js\n@@ -181,4 +181,5 @@ declare module 'RTManager' {\n \/\/ shims\/ReactFeatureFlags is generated by the packaging script\n declare module '..\/shims\/ReactFeatureFlags' {\n declare export var debugRenderPhaseSideEffects: boolean;\n+ declare export var enableNativeTargetAsInstance: boolean;\n }\ndiff --git a\/scripts\/rollup\/shims\/react-native\/ReactFeatureFlags.js b\/scripts\/rollup\/shims\/react-native\/ReactFeatureFlags.js\nindex 86feb9c022..b52380c760 100644\n--- a\/scripts\/rollup\/shims\/react-native\/ReactFeatureFlags.js\n+++ b\/scripts\/rollup\/shims\/react-native\/ReactFeatureFlags.js\n@@ -12,6 +12,7 @@\n \n const ReactFeatureFlags = {\n debugRenderPhaseSideEffects: false,\n+ enableNativeTargetAsInstance: false,\n };\n \n module.exports = ReactFeatureFlags;\n","files":[{"path":"packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactFabric-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/__tests__\/ReactNativeEvents-test.internal.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.persistent.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"},{"path":"scripts\/flow\/react-native-host-hooks.js","status":"M"},{"path":"scripts\/rollup\/shims\/react-native\/ReactFeatureFlags.js","status":"M"}]}

dillon1000/react

Files changed