{"body":"* Remove warning for event targets being direct children of event component\r\n\r\n* Addressed feedback and added more test coverage + warnings","commit":{"subject":"Experimental event API: loosen EventTarget constraints and warnings (#15292)","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2019-04-02T19:49:28+01:00","authorName":"Dominic Gannaway","shortRevision":"6a1e6b2f78","revision":"6a1e6b2f78da3a56aa497902951c6e9ce654eafc"},"files":[{"path":"packages\/react-art\/src\/ReactARTHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js","status":"A"},{"path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js","status":"M"},{"path":"packages\/react-noop-renderer\/src\/createReactNoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHostContext.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.js","status":"M"},{"path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js","status":"M"},{"path":"packages\/shared\/getElementFromTouchHitTarget.js","status":"D"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex caf2d5da18..3476934165 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -340,7 +340,11 @@ export function getChildHostContext() {\n return NO_CONTEXT;\n }\n \n-export function getChildHostContextForEvent() {\n+export function getChildHostContextForEventComponent() {\n+ return NO_CONTEXT;\n+}\n+\n+export function getChildHostContextForEventTarget() {\n return NO_CONTEXT;\n }\n \n@@ -446,6 +450,7 @@ export function handleEventComponent(\n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ) {\n \/\/ TODO: add handleEventTarget implementation\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 14e80522b1..ef96ee8f94 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -45,12 +45,7 @@ import dangerousStyleValue from '..\/shared\/dangerousStyleValue';\n \n import type {DOMContainer} from '.\/ReactDOM';\n import type {ReactEventResponder} from 'shared\/ReactTypes';\n-import {\n- REACT_EVENT_COMPONENT_TYPE,\n- REACT_EVENT_TARGET_TYPE,\n- REACT_EVENT_TARGET_TOUCH_HIT,\n-} from 'shared\/ReactSymbols';\n-import getElementFromTouchHitTarget from 'shared\/getElementFromTouchHitTarget';\n+import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared\/ReactSymbols';\n \n export type Type = string;\n export type Props = {\n@@ -75,6 +70,7 @@ type HostContextDev = {\n eventData: null | {|\n isEventComponent?: boolean,\n isEventTarget?: boolean,\n+ eventTargetType?: null | Symbol | number,\n |},\n };\n type HostContextProd = string;\n@@ -180,36 +176,46 @@ export function getChildHostContext(\n return getChildNamespace(parentNamespace, type);\n }\n \n-export function getChildHostContextForEvent(\n+export function getChildHostContextForEventComponent(\n parentHostContext: HostContext,\n- type: Symbol | number,\n ): HostContext {\n if (__DEV__) {\n const parentHostContextDev = ((parentHostContext: any): HostContextDev);\n const {namespace, ancestorInfo} = parentHostContextDev;\n- let eventData = null;\n+ warning(\n+ parentHostContextDev.eventData === null ||\n+ !parentHostContextDev.eventData.isEventTarget,\n+ 'validateDOMNesting: React event targets must not have event components as children.',\n+ );\n+ const eventData = {\n+ isEventComponent: true,\n+ isEventTarget: false,\n+ eventTargetType: null,\n+ };\n+ return {namespace, ancestorInfo, eventData};\n+ }\n+ return parentHostContext;\n+}\n \n- if (type === REACT_EVENT_COMPONENT_TYPE) {\n- warning(\n- parentHostContextDev.eventData === null ||\n- !parentHostContextDev.eventData.isEventTarget,\n- 'validateDOMNesting: React event targets must not have event components as children.',\n- );\n- eventData = {\n- isEventComponent: true,\n- isEventTarget: false,\n- };\n- } else if (type === REACT_EVENT_TARGET_TYPE) {\n- warning(\n- parentHostContextDev.eventData !== null &&\n- parentHostContextDev.eventData.isEventComponent,\n- 'validateDOMNesting: React event targets must be direct children of event components.',\n- );\n- eventData = {\n- isEventComponent: false,\n- isEventTarget: true,\n- };\n- }\n+export function getChildHostContextForEventTarget(\n+ parentHostContext: HostContext,\n+ type: Symbol | number,\n+): HostContext {\n+ if (__DEV__) {\n+ const parentHostContextDev = ((parentHostContext: any): HostContextDev);\n+ const {namespace, ancestorInfo} = parentHostContextDev;\n+ warning(\n+ parentHostContextDev.eventData === null ||\n+ !parentHostContextDev.eventData.isEventComponent ||\n+ type !== REACT_EVENT_TARGET_TOUCH_HIT,\n+ 'validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n+ );\n+ const eventData = {\n+ isEventComponent: false,\n+ isEventTarget: true,\n+ eventTargetType: type,\n+ };\n return {namespace, ancestorInfo, eventData};\n }\n return parentHostContext;\n@@ -243,6 +249,16 @@ export function createInstance(\n if (__DEV__) {\n \/\/ TODO: take namespace into account when validating.\n const hostContextDev = ((hostContext: any): HostContextDev);\n+ if (enableEventAPI) {\n+ const eventData = hostContextDev.eventData;\n+ if (eventData !== null) {\n+ warning(\n+ !eventData.isEventTarget ||\n+ eventData.eventTargetType !== REACT_EVENT_TARGET_TOUCH_HIT,\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+ }\n+ }\n validateDOMNesting(type, null, hostContextDev.ancestorInfo);\n if (\n typeof props.children === 'string' ||\n@@ -349,6 +365,12 @@ export function createTextInstance(\n if (enableEventAPI) {\n const eventData = hostContextDev.eventData;\n if (eventData !== null) {\n+ warning(\n+ eventData === null ||\n+ !eventData.isEventTarget ||\n+ eventData.eventTargetType !== REACT_EVENT_TARGET_TOUCH_HIT,\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n warning(\n !eventData.isEventComponent,\n 'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n@@ -356,7 +378,8 @@ export function createTextInstance(\n text,\n );\n warning(\n- !eventData.isEventTarget,\n+ !eventData.isEventTarget ||\n+ eventData.eventTargetType === REACT_EVENT_TARGET_TOUCH_HIT,\n 'validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"%s\" in an element.',\n text,\n@@ -879,25 +902,13 @@ export function handleEventComponent(\n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ): void {\n if (enableEventAPI) {\n \/\/ Touch target hit slop handling\n if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ Validates that there is a single element\n- const element = getElementFromTouchHitTarget(internalInstanceHandle);\n- if (element !== null) {\n- \/\/ We update the event target state node to be that of the element.\n- \/\/ We can then diff this entry to determine if we need to add the\n- \/\/ hit slop element, or change the dimensions of the hit slop.\n- const lastElement = internalInstanceHandle.stateNode;\n- if (lastElement !== element) {\n- internalInstanceHandle.stateNode = element;\n- \/\/ TODO: Create the hit slop element and attach it to the element\n- } else {\n- \/\/ TODO: Diff the left, top, right, bottom props\n- }\n- }\n+ \/\/ TODO\n }\n }\n }\ndiff --git a\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js b\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js\nnew file mode 100644\nindex 0000000000..e47f7f3cb4\n--- \/dev\/null\n+++ b\/packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js\n@@ -0,0 +1,322 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactNoop;\n+let Scheduler;\n+let ReactFeatureFlags;\n+let EventComponent;\n+let ReactTestRenderer;\n+let ReactDOM;\n+let ReactSymbols;\n+let ReactEvents;\n+let TouchHitTarget;\n+\n+const noOpResponder = {\n+ targetEventTypes: [],\n+ handleEvent() {},\n+};\n+\n+function createReactEventComponent() {\n+ return {\n+ $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,\n+ props: null,\n+ responder: noOpResponder,\n+ };\n+}\n+\n+function init() {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.enableEventAPI = true;\n+ React = require('react');\n+ Scheduler = require('scheduler');\n+ ReactSymbols = require('shared\/ReactSymbols');\n+ ReactEvents = require('react-events');\n+}\n+\n+function initNoopRenderer() {\n+ init();\n+ ReactNoop = require('react-noop-renderer');\n+}\n+\n+function initTestRenderer() {\n+ init();\n+ ReactTestRenderer = require('react-test-renderer');\n+}\n+\n+function initReactDOM() {\n+ init();\n+ ReactDOM = require('react-dom');\n+}\n+\n+describe('TouchHitTarget', () => {\n+ describe('NoopRenderer', () => {\n+ beforeEach(() => {\n+ initNoopRenderer();\n+ EventComponent = createReactEventComponent();\n+ TouchHitTarget = ReactEvents.TouchHitTarget;\n+ });\n+\n+ it('should not warn when a TouchHitTarget is used correctly', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(

);\n+ });\n+\n+ it('should warn when a TouchHitTarget has children', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ Child 1<\/span>\n+ <\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ expect(() => {\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ const Test2 = () => (\n+ \n+

\n+ Child 1<\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ expect(() => {\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ \/\/ Should render without warnings\n+ const Test3 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(

);\n+ });\n+\n+ it('should warn when a TouchHitTarget is a direct child of an event component', () => {\n+ const Test = () => (\n+ \n+ \n+ <\/EventComponent>\n+ );\n+\n+ expect(() => {\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n+ );\n+ });\n+ });\n+\n+ describe('TestRenderer', () => {\n+ beforeEach(() => {\n+ initTestRenderer();\n+ EventComponent = createReactEventComponent();\n+ TouchHitTarget = ReactEvents.TouchHitTarget;\n+ });\n+\n+ it('should not warn when a TouchHitTarget is used correctly', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const root = ReactTestRenderer.create(null);\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(

);\n+ });\n+\n+ it('should warn when a TouchHitTarget has children', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ Child 1<\/span>\n+ <\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const root = ReactTestRenderer.create(null);\n+ expect(() => {\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ const Test2 = () => (\n+ \n+

\n+ Child 1<\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ expect(() => {\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ \/\/ Should render without warnings\n+ const Test3 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(

);\n+ });\n+\n+ it('should warn when a TouchHitTarget is a direct child of an event component', () => {\n+ const Test = () => (\n+ \n+ \n+ <\/EventComponent>\n+ );\n+\n+ const root = ReactTestRenderer.create(null);\n+ expect(() => {\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n+ );\n+ });\n+ });\n+\n+ describe('ReactDOM', () => {\n+ beforeEach(() => {\n+ initReactDOM();\n+ EventComponent = createReactEventComponent();\n+ TouchHitTarget = ReactEvents.TouchHitTarget;\n+ });\n+\n+ it('should not warn when a TouchHitTarget is used correctly', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

<\/div>');\n+ });\n+\n+ it('should warn when a TouchHitTarget has children', () => {\n+ const Test = () => (\n+ \n+

\n+ \n+ Child 1<\/span>\n+ <\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ expect(() => {\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ const Test2 = () => (\n+ \n+

\n+ Child 1<\/TouchHitTarget>\n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ expect(() => {\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: must not have any children.',\n+ );\n+\n+ \/\/ Should render without warnings\n+ const Test3 = () => (\n+ \n+

\n+ \n+ <\/div>\n+ <\/EventComponent>\n+ );\n+\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

<\/div>');\n+ });\n+\n+ it('should warn when a TouchHitTarget is a direct child of an event component', () => {\n+ const Test = () => (\n+ \n+ \n+ <\/EventComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ expect(() => {\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ }).toWarnDev(\n+ 'Warning: validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n+ );\n+ });\n+ });\n+});\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex bc67306230..c2ccde544c 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -283,11 +283,18 @@ export function getChildHostContext(\n }\n }\n \n-export function getChildHostContextForEvent(\n+export function getChildHostContextForEventComponent(\n+ parentHostContext: HostContext,\n+) {\n+ \/\/ TODO: add getChildHostContextForEventComponent implementation\n+ return parentHostContext;\n+}\n+\n+export function getChildHostContextForEventTarget(\n parentHostContext: HostContext,\n type: Symbol | number,\n ) {\n- \/\/ TODO: add getChildHostContextForEvent implementation\n+ \/\/ TODO: add getChildHostContextForEventTarget implementation\n return parentHostContext;\n }\n \n@@ -438,6 +445,7 @@ export function handleEventComponent(\n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ) {\n \/\/ TODO: add handleEventTarget implementation\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex 27044ef54d..f4b24a1c39 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -206,11 +206,18 @@ export function getChildHostContext(\n }\n }\n \n-export function getChildHostContextForEvent(\n+export function getChildHostContextForEventComponent(\n+ parentHostContext: HostContext,\n+) {\n+ \/\/ TODO: add getChildHostContextForEventComponent implementation\n+ return parentHostContext;\n+}\n+\n+export function getChildHostContextForEventTarget(\n parentHostContext: HostContext,\n type: Symbol | number,\n ) {\n- \/\/ TODO: add getChildHostContextForEvent implementation\n+ \/\/ TODO: add getChildHostContextForEventTarget implementation\n return parentHostContext;\n }\n \n@@ -497,6 +504,7 @@ export function handleEventComponent(\n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ) {\n \/\/ TODO: add handleEventTarget implementation\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 585406898e..8976372bf6 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -24,13 +24,10 @@ import expect from 'expect';\n import {\n REACT_FRAGMENT_TYPE,\n REACT_ELEMENT_TYPE,\n- REACT_EVENT_COMPONENT_TYPE,\n- REACT_EVENT_TARGET_TYPE,\n REACT_EVENT_TARGET_TOUCH_HIT,\n } from 'shared\/ReactSymbols';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n import warning from 'shared\/warning';\n-import getElementFromTouchHitTarget from 'shared\/getElementFromTouchHitTarget';\n \n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n \n@@ -66,6 +63,7 @@ const NO_CONTEXT = {};\n const UPPERCASE_CONTEXT = {};\n const EVENT_COMPONENT_CONTEXT = {};\n const EVENT_TARGET_CONTEXT = {};\n+const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};\n const UPDATE_SIGNAL = {};\n if (__DEV__) {\n Object.freeze(NO_CONTEXT);\n@@ -262,24 +260,32 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n return NO_CONTEXT;\n },\n \n- getChildHostContextForEvent(\n+ getChildHostContextForEventComponent(parentHostContext: HostContext) {\n+ if (__DEV__ && enableEventAPI) {\n+ warning(\n+ parentHostContext !== EVENT_TARGET_CONTEXT &&\n+ parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: React event targets must not have event components as children.',\n+ );\n+ return EVENT_COMPONENT_CONTEXT;\n+ }\n+ return parentHostContext;\n+ },\n+\n+ getChildHostContextForEventTarget(\n parentHostContext: HostContext,\n type: Symbol | number,\n ) {\n if (__DEV__ && enableEventAPI) {\n- if (type === REACT_EVENT_COMPONENT_TYPE) {\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n warning(\n- parentHostContext !== EVENT_TARGET_CONTEXT,\n- 'validateDOMNesting: React event targets must not have event components as children.',\n+ parentHostContext !== EVENT_COMPONENT_CONTEXT,\n+ 'validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n );\n- return EVENT_COMPONENT_CONTEXT;\n- } else if (type === REACT_EVENT_TARGET_TYPE) {\n- warning(\n- parentHostContext === EVENT_COMPONENT_CONTEXT,\n- 'validateDOMNesting: React event targets must be direct children of event components.',\n- );\n- return EVENT_TARGET_CONTEXT;\n+ return EVENT_TOUCH_HIT_TARGET_CONTEXT;\n }\n+ return EVENT_TARGET_CONTEXT;\n }\n return parentHostContext;\n },\n@@ -294,6 +300,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n rootContainerInstance: Container,\n hostContext: HostContext,\n ): Instance {\n+ if (__DEV__ && enableEventAPI) {\n+ warning(\n+ hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: must not have any children.',\n+ );\n+ }\n if (type === 'errorInCompletePhase') {\n throw new Error('Error in host config.');\n }\n@@ -368,6 +380,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n internalInstanceHandle: Object,\n ): TextInstance {\n if (__DEV__ && enableEventAPI) {\n+ warning(\n+ hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: must not have any children.',\n+ );\n warning(\n hostContext !== EVENT_COMPONENT_CONTEXT,\n 'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n@@ -419,11 +435,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ) {\n if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ Validates that there is a single element\n- getElementFromTouchHitTarget(internalInstanceHandle);\n+ \/\/ TODO\n }\n },\n };\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex a2eea421d4..e5ac3a605a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -99,7 +99,8 @@ import type {SuspenseInstance} from '.\/ReactFiberHostConfig';\n import {\n pushHostContext,\n pushHostContainer,\n- pushHostContextForEvent,\n+ pushHostContextForEventComponent,\n+ pushHostContextForEventTarget,\n } from '.\/ReactFiberHostContext';\n import {\n pushProvider,\n@@ -1960,7 +1961,7 @@ function updateEventComponent(current, workInProgress, renderExpirationTime) {\n nextChildren,\n renderExpirationTime,\n );\n- pushHostContextForEvent(workInProgress);\n+ pushHostContextForEventComponent(workInProgress);\n return workInProgress.child;\n }\n \n@@ -1974,7 +1975,7 @@ function updateEventTarget(current, workInProgress, renderExpirationTime) {\n nextChildren,\n renderExpirationTime,\n );\n- pushHostContextForEvent(workInProgress);\n+ pushHostContextForEventTarget(workInProgress);\n return workInProgress.child;\n }\n \n@@ -2116,9 +2117,13 @@ function beginWork(\n break;\n }\n case EventComponent:\n+ if (enableEventAPI) {\n+ pushHostContextForEventComponent(workInProgress);\n+ }\n+ break;\n case EventTarget: {\n if (enableEventAPI) {\n- pushHostContextForEvent(workInProgress);\n+ pushHostContextForEventTarget(workInProgress);\n }\n break;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex 1a0fd30232..abd125d3ac 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -784,7 +784,19 @@ function completeWork(\n if (enableEventAPI) {\n popHostContext(workInProgress);\n const type = workInProgress.type.type;\n- handleEventTarget(type, newProps, workInProgress);\n+ let node = workInProgress.return;\n+ let parentHostInstance = null;\n+ \/\/ Traverse up the fiber tree till we find a host component fiber\n+ while (node !== null) {\n+ if (node.tag === HostComponent) {\n+ parentHostInstance = node.stateNode;\n+ break;\n+ }\n+ node = node.return;\n+ }\n+ if (parentHostInstance !== null) {\n+ handleEventTarget(type, newProps, parentHostInstance, workInProgress);\n+ }\n }\n break;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHostContext.js b\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\nindex 54598c6eed..18171896f0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\n@@ -16,7 +16,8 @@ import invariant from 'shared\/invariant';\n import {\n getChildHostContext,\n getRootHostContext,\n- getChildHostContextForEvent,\n+ getChildHostContextForEventComponent,\n+ getChildHostContextForEventTarget,\n } from '.\/ReactFiberHostConfig';\n import {createCursor, push, pop} from '.\/ReactFiberStack';\n \n@@ -96,10 +97,28 @@ function pushHostContext(fiber: Fiber): void {\n push(contextStackCursor, nextContext, fiber);\n }\n \n-function pushHostContextForEvent(fiber: Fiber): void {\n+function pushHostContextForEventComponent(fiber: Fiber): void {\n const context: HostContext = requiredContext(contextStackCursor.current);\n- const eventTypeof = fiber.type.$$typeof;\n- const nextContext = getChildHostContextForEvent(context, eventTypeof);\n+ const nextContext = getChildHostContextForEventComponent(context);\n+\n+ \/\/ Don't push this Fiber's context unless it's unique.\n+ if (context === nextContext) {\n+ return;\n+ }\n+\n+ \/\/ Track the context and the Fiber that provided it.\n+ \/\/ This enables us to pop only Fibers that provide unique contexts.\n+ push(contextFiberStackCursor, fiber, fiber);\n+ push(contextStackCursor, nextContext, fiber);\n+}\n+\n+function pushHostContextForEventTarget(fiber: Fiber): void {\n+ const context: HostContext = requiredContext(contextStackCursor.current);\n+ const eventTargetType = fiber.type.type;\n+ const nextContext = getChildHostContextForEventTarget(\n+ context,\n+ eventTargetType,\n+ );\n \n \/\/ Don't push this Fiber's context unless it's unique.\n if (context === nextContext) {\n@@ -130,5 +149,6 @@ export {\n popHostContext,\n pushHostContainer,\n pushHostContext,\n- pushHostContextForEvent,\n+ pushHostContextForEventComponent,\n+ pushHostContextForEventTarget,\n };\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\nindex 9a697379d3..25162397b0 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n@@ -19,7 +19,7 @@ let ReactDOM;\n let ReactDOMServer;\n let ReactTestUtils;\n let EventTarget;\n-let ReactEvents;\n+let ReactSymbols;\n \n const noOpResponder = {\n targetEventTypes: [],\n@@ -28,19 +28,26 @@ const noOpResponder = {\n \n function createReactEventComponent() {\n return {\n- $$typeof: Symbol.for('react.event_component'),\n+ $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,\n props: null,\n responder: noOpResponder,\n };\n }\n \n+function createReactEventTarget() {\n+ return {\n+ $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,\n+ type: Symbol.for('react.event_target.test'),\n+ };\n+}\n+\n function init() {\n jest.resetModules();\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableEventAPI = true;\n React = require('react');\n Scheduler = require('scheduler');\n- ReactEvents = require('react-events');\n+ ReactSymbols = require('shared\/ReactSymbols');\n }\n \n function initNoopRenderer() {\n@@ -71,7 +78,7 @@ describe('ReactFiberEvents', () => {\n beforeEach(() => {\n initNoopRenderer();\n EventComponent = createReactEventComponent();\n- EventTarget = ReactEvents.TouchHitTarget;\n+ EventTarget = createReactEventTarget();\n });\n \n it('should render a simple event component with a single child', () => {\n@@ -139,11 +146,10 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n+ );\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -159,32 +165,13 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n ReactNoop.render();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n- });\n-\n- it('should warn when an event target has more than one child', () => {\n- const Test = () => (\n- \n- \n- Child 1<\/span>\n- Child 2<\/span>\n- <\/EventTarget>\n- <\/EventComponent>\n- );\n-\n- expect(() => {\n- ReactNoop.render();\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: must only have a single DOM element as a child. Found many children.',\n );\n });\n \n- it('should warn if an event target is not a direct child of an event component', () => {\n+ it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n@@ -195,11 +182,12 @@ describe('ReactFiberEvents', () => {\n <\/EventComponent>\n );\n \n- expect(() => {\n- ReactNoop.render();\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must be direct children of event components.',\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(\n+

\n+ Child 1<\/span>\n+ <\/div>,\n );\n });\n \n@@ -319,7 +307,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return null;\n+ return 'Text!';\n }\n \n return (\n@@ -351,7 +339,8 @@ describe('ReactFiberEvents', () => {\n });\n expect(Scheduler).toFlushWithoutYielding();\n }).toWarnDev(\n- 'Warning: must have a single DOM element as a child. Found no children.',\n+ 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Wrap the child text \"Text!\" in an element.',\n );\n });\n \n@@ -409,7 +398,7 @@ describe('ReactFiberEvents', () => {\n beforeEach(() => {\n initTestRenderer();\n EventComponent = createReactEventComponent();\n- EventTarget = ReactEvents.TouchHitTarget;\n+ EventTarget = createReactEventTarget();\n });\n \n it('should render a simple event component with a single child', () => {\n@@ -494,11 +483,10 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n+ );\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -515,44 +503,13 @@ describe('ReactFiberEvents', () => {\n expect(() => {\n root.update();\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n- });\n-\n- it('should warn when an event target has more than one child', () => {\n- const Test = () => (\n- \n- \n- Child 1<\/span>\n- Child 2<\/span>\n- <\/EventTarget>\n- <\/EventComponent>\n- );\n-\n- const root = ReactTestRenderer.create(null);\n- expect(() => {\n- root.update();\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: must only have a single DOM element as a child. Found many children.',\n- );\n- \/\/ This should not fire a warning, as this is now valid.\n- const Test2 = () => (\n- \n- \n- Child 1<\/span>\n- <\/EventTarget>\n- <\/EventComponent>\n );\n- root.update();\n- expect(Scheduler).toFlushWithoutYielding();\n- expect(root).toMatchRenderedOutput(Child 1<\/span>);\n });\n \n- it('should warn if an event target is not a direct child of an event component', () => {\n+ it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n@@ -564,11 +521,12 @@ describe('ReactFiberEvents', () => {\n );\n \n const root = ReactTestRenderer.create(null);\n- expect(() => {\n- root.update();\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must be direct children of event components.',\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(\n+

\n+ Child 1<\/span>\n+ <\/div>,\n );\n });\n \n@@ -690,7 +648,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return null;\n+ return 'Text!';\n }\n \n return (\n@@ -722,7 +680,8 @@ describe('ReactFiberEvents', () => {\n _updateCounter(counter => counter + 1);\n });\n }).toWarnDev(\n- 'Warning: must have a single DOM element as a child. Found no children.',\n+ 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Wrap the child text \"Text!\" in an element.',\n );\n });\n \n@@ -781,7 +740,7 @@ describe('ReactFiberEvents', () => {\n beforeEach(() => {\n initReactDOM();\n EventComponent = createReactEventComponent();\n- EventTarget = ReactEvents.TouchHitTarget;\n+ EventTarget = createReactEventTarget();\n });\n \n it('should render a simple event component with a single child', () => {\n@@ -865,11 +824,10 @@ describe('ReactFiberEvents', () => {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n+ );\n });\n \n it('should warn when an event target has a direct text child #2', () => {\n@@ -886,44 +844,13 @@ describe('ReactFiberEvents', () => {\n const container = document.createElement('div');\n ReactDOM.render(, container);\n expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev([\n+ }).toWarnDev(\n 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n 'Wrap the child text \"Hello world\" in an element.',\n- 'Warning: must have a single DOM element as a child. Found no children.',\n- ]);\n- });\n-\n- it('should warn when an event target has more than one child', () => {\n- const Test = () => (\n- \n- \n- Child 1<\/span>\n- Child 2<\/span>\n- <\/EventTarget>\n- <\/EventComponent>\n );\n-\n- const container = document.createElement('div');\n- expect(() => {\n- ReactDOM.render(, container);\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: must only have a single DOM element as a child. Found many children.',\n- );\n- \/\/ This should not fire a warning, as this is now valid.\n- const Test2 = () => (\n- \n- \n- Child 1<\/span>\n- <\/EventTarget>\n- <\/EventComponent>\n- );\n- ReactDOM.render(, container);\n- expect(Scheduler).toFlushWithoutYielding();\n- expect(container.innerHTML).toBe('Child 1<\/span>');\n });\n \n- it('should warn if an event target is not a direct child of an event component', () => {\n+ it('should not warn if an event target is not a direct child of an event component', () => {\n const Test = () => (\n \n

\n@@ -934,13 +861,10 @@ describe('ReactFiberEvents', () => {\n <\/EventComponent>\n );\n \n- expect(() => {\n- const container = document.createElement('div');\n- ReactDOM.render(, container);\n- expect(Scheduler).toFlushWithoutYielding();\n- }).toWarnDev(\n- 'Warning: validateDOMNesting: React event targets must be direct children of event components.',\n- );\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

Child 1<\/span><\/div>');\n });\n \n it('should warn if an event target has an event component as a child', () => {\n@@ -1052,7 +976,7 @@ describe('ReactFiberEvents', () => {\n _updateCounter = updateCounter;\n \n if (counter === 1) {\n- return null;\n+ return 'Text!';\n }\n \n return (\n@@ -1080,7 +1004,8 @@ describe('ReactFiberEvents', () => {\n });\n expect(Scheduler).toFlushWithoutYielding();\n }).toWarnDev(\n- 'Warning: must have a single DOM element as a child. Found no children.',\n+ 'Warning: validateDOMNesting: React event targets cannot have text DOM nodes as children. ' +\n+ 'Wrap the child text \"Text!\" in an element.',\n );\n });\n \n@@ -1134,7 +1059,7 @@ describe('ReactFiberEvents', () => {\n beforeEach(() => {\n initReactDOMServer();\n EventComponent = createReactEventComponent();\n- EventTarget = ReactEvents.TouchHitTarget;\n+ EventTarget = createReactEventTarget();\n });\n \n it('should render a simple event component with a single child', () => {\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.js\nindex 4efb059a28..8ffa524bd9 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.js\n@@ -31,7 +31,10 @@ describe('ReactFiberHostContext', () => {\n getChildHostContext: function() {\n return null;\n },\n- getChildHostContextForEvent: function() {\n+ getChildHostContextForEventComponent: function() {\n+ return null;\n+ },\n+ getChildHostContextForEventTarget: function() {\n return null;\n },\n shouldSetTextContent: function() {\ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\nindex 0926eb8cfb..d1f38c65d2 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n@@ -41,8 +41,10 @@ export opaque type NoTimeout = mixed; \/\/ eslint-disable-line no-undef\n export const getPublicInstance = $$$hostConfig.getPublicInstance;\n export const getRootHostContext = $$$hostConfig.getRootHostContext;\n export const getChildHostContext = $$$hostConfig.getChildHostContext;\n-export const getChildHostContextForEvent =\n- $$$hostConfig.getChildHostContextForEvent;\n+export const getChildHostContextForEventComponent =\n+ $$$hostConfig.getChildHostContextForEventComponent;\n+export const getChildHostContextForEventTarget =\n+ $$$hostConfig.getChildHostContextForEventTarget;\n export const prepareForCommit = $$$hostConfig.prepareForCommit;\n export const resetAfterCommit = $$$hostConfig.resetAfterCommit;\n export const createInstance = $$$hostConfig.createInstance;\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\nindex a5ac30273b..8020282394 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n@@ -10,12 +10,7 @@\n import warning from 'shared\/warning';\n \n import type {ReactEventResponder} from 'shared\/ReactTypes';\n-import {\n- REACT_EVENT_COMPONENT_TYPE,\n- REACT_EVENT_TARGET_TYPE,\n- REACT_EVENT_TARGET_TOUCH_HIT,\n-} from 'shared\/ReactSymbols';\n-import getElementFromTouchHitTarget from 'shared\/getElementFromTouchHitTarget';\n+import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared\/ReactSymbols';\n \n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n \n@@ -52,6 +47,7 @@ export * from 'shared\/HostConfigWithNoHydration';\n \n const EVENT_COMPONENT_CONTEXT = {};\n const EVENT_TARGET_CONTEXT = {};\n+const EVENT_TOUCH_HIT_TARGET_CONTEXT = {};\n const NO_CONTEXT = {};\n const UPDATE_SIGNAL = {};\n if (__DEV__) {\n@@ -127,24 +123,34 @@ export function getChildHostContext(\n return NO_CONTEXT;\n }\n \n-export function getChildHostContextForEvent(\n+export function getChildHostContextForEventComponent(\n+ parentHostContext: HostContext,\n+): HostContext {\n+ if (__DEV__ && enableEventAPI) {\n+ warning(\n+ parentHostContext !== EVENT_TARGET_CONTEXT &&\n+ parentHostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: React event targets must not have event components as children.',\n+ );\n+ return EVENT_COMPONENT_CONTEXT;\n+ }\n+ return NO_CONTEXT;\n+}\n+\n+export function getChildHostContextForEventTarget(\n parentHostContext: HostContext,\n type: Symbol | number,\n ): HostContext {\n if (__DEV__ && enableEventAPI) {\n- if (type === REACT_EVENT_COMPONENT_TYPE) {\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n warning(\n- parentHostContext !== EVENT_TARGET_CONTEXT,\n- 'validateDOMNesting: React event targets must not have event components as children.',\n+ parentHostContext !== EVENT_COMPONENT_CONTEXT,\n+ 'validateDOMNesting: cannot not be a direct child of an event component. ' +\n+ 'Ensure is a direct child of a DOM element.',\n );\n- return EVENT_COMPONENT_CONTEXT;\n- } else if (type === REACT_EVENT_TARGET_TYPE) {\n- warning(\n- parentHostContext === EVENT_COMPONENT_CONTEXT,\n- 'validateDOMNesting: React event targets must be direct children of event components.',\n- );\n- return EVENT_TARGET_CONTEXT;\n+ return EVENT_TOUCH_HIT_TARGET_CONTEXT;\n }\n+ return EVENT_TARGET_CONTEXT;\n }\n return NO_CONTEXT;\n }\n@@ -164,6 +170,12 @@ export function createInstance(\n hostContext: Object,\n internalInstanceHandle: Object,\n ): Instance {\n+ if (__DEV__ && enableEventAPI) {\n+ warning(\n+ hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: must not have any children.',\n+ );\n+ }\n return {\n type,\n props,\n@@ -221,6 +233,10 @@ export function createTextInstance(\n internalInstanceHandle: Object,\n ): TextInstance {\n if (__DEV__ && enableEventAPI) {\n+ warning(\n+ hostContext !== EVENT_TOUCH_HIT_TARGET_CONTEXT,\n+ 'validateDOMNesting: must not have any children.',\n+ );\n warning(\n hostContext !== EVENT_COMPONENT_CONTEXT,\n 'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +\n@@ -320,10 +336,10 @@ export function handleEventComponent(\n export function handleEventTarget(\n type: Symbol | number,\n props: Props,\n+ parentInstance: Container,\n internalInstanceHandle: Object,\n ) {\n if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ Validates that there is a single element\n- getElementFromTouchHitTarget(internalInstanceHandle);\n+ \/\/ TODO\n }\n }\ndiff --git a\/packages\/shared\/getElementFromTouchHitTarget.js b\/packages\/shared\/getElementFromTouchHitTarget.js\ndeleted file mode 100644\nindex dea4fd7f31..0000000000\n--- a\/packages\/shared\/getElementFromTouchHitTarget.js\n+++ \/dev\/null\n@@ -1,85 +0,0 @@\n-\/**\n- * Copyright (c) Facebook, Inc. and its affiliates.\n- *\n- * This source code is licensed under the MIT license found in the\n- * LICENSE file in the root directory of this source tree.\n- *\n- * @flow\n- *\/\n-\n-import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n-\n-import {HostComponent} from 'shared\/ReactWorkTags';\n-import warning from 'shared\/warning';\n-\n-type HostContext = Object;\n-\n-type TextInstance =\n- | Text\n- | {|\n- text: string,\n- id: number,\n- hidden: boolean,\n- context: HostContext,\n- |};\n-\n-type Instance =\n- | Element\n- | {|\n- type: string,\n- id: number,\n- children: Array,\n- text: string | null,\n- prop: any,\n- hidden: boolean,\n- context: HostContext,\n- |};\n-\n-export default function getElementFromTouchHitTarget(\n- targetFiber: Fiber,\n-): null | Instance {\n- \/\/ Traverse through child fibers and find the first host components\n- let node = targetFiber.child;\n- let hostComponent = null;\n-\n- while (node !== null) {\n- if (node.tag === HostComponent) {\n- if (__DEV__) {\n- if (hostComponent === null) {\n- hostComponent = node.stateNode;\n- } else {\n- warning(\n- false,\n- ' must only have a single DOM element as a child. ' +\n- 'Found many children.',\n- );\n- }\n- while (node !== null) {\n- if (node === targetFiber) {\n- return hostComponent;\n- } else if (node.sibling !== null) {\n- node = node.sibling;\n- break;\n- }\n- node = node.return;\n- }\n- } else {\n- return node.stateNode;\n- }\n- } else if (node.child !== null) {\n- node = node.child;\n- } else if (node.sibling !== null) {\n- node = node.sibling;\n- } else {\n- break;\n- }\n- }\n- if (__DEV__) {\n- warning(\n- hostComponent !== null,\n- ' must have a single DOM element as a child. ' +\n- 'Found no children.',\n- );\n- }\n- return hostComponent;\n-}\n","parents":["f243deab8286b9c51f44e47926c1ba0ccb53449a"]}

dillon1000/react

Files changed