{"parents":["6d20556c78df6904254b8438bb588f7722ea602f"],"patch":"diff --git a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\nindex a2d0339a2e..dfd128ac2e 100644\n--- a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n+++ b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n@@ -148,6 +148,13 @@ function getInstanceFromNode(node) {\n * DOM node.\n *\/\n function getNodeFromInstance(inst) {\n+ \/\/ Without this first invariant, passing a non-DOM-component triggers the next\n+ \/\/ invariant for a missing parent, which is super confusing.\n+ invariant(\n+ inst._nativeNode !== undefined,\n+ 'getNodeFromInstance: Invalid argument.'\n+ );\n+\n if (inst._nativeNode) {\n return inst._nativeNode;\n }\ndiff --git a\/src\/renderers\/dom\/client\/ReactDOMTreeTraversal.js b\/src\/renderers\/dom\/client\/ReactDOMTreeTraversal.js\nnew file mode 100644\nindex 0000000000..40025f2f26\n--- \/dev\/null\n+++ b\/src\/renderers\/dom\/client\/ReactDOMTreeTraversal.js\n@@ -0,0 +1,83 @@\n+\/**\n+ * Copyright 2015, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactDOMTreeTraversal\n+ *\/\n+\n+'use strict';\n+\n+var invariant = require('invariant');\n+\n+\/**\n+ * Return the lowest common ancestor of A and B, or null if they are in\n+ * different trees.\n+ *\/\n+function getLowestCommonAncestor(instA, instB) {\n+ invariant('_nativeNode' in instA, 'getNodeFromInstance: Invalid argument.');\n+ invariant('_nativeNode' in instB, 'getNodeFromInstance: Invalid argument.');\n+\n+ var depthA = 0;\n+ for (var tempA = instA; tempA; tempA = tempA._nativeParent) {\n+ depthA++;\n+ }\n+ var depthB = 0;\n+ for (var tempB = instB; tempB; tempB = tempB._nativeParent) {\n+ depthB++;\n+ }\n+\n+ \/\/ If A is deeper, crawl up.\n+ while (depthA - depthB > 0) {\n+ instA = instA._nativeParent;\n+ depthA--;\n+ }\n+\n+ \/\/ If B is deeper, crawl up.\n+ while (depthB - depthA > 0) {\n+ instB = instB._nativeParent;\n+ depthB--;\n+ }\n+\n+ \/\/ Walk in lockstep until we find a match.\n+ var depth = depthA;\n+ while (depth--) {\n+ if (instA === instB) {\n+ return instA;\n+ }\n+ instA = instA._nativeParent;\n+ instB = instB._nativeParent;\n+ }\n+ return null;\n+}\n+\n+\/**\n+ * Return if A is an ancestor of B.\n+ *\/\n+function isAncestor(instA, instB) {\n+ invariant('_nativeNode' in instA, 'isAncestor: Invalid argument.');\n+ invariant('_nativeNode' in instB, 'isAncestor: Invalid argument.');\n+\n+ while (instB) {\n+ if (instB === instA) {\n+ return true;\n+ }\n+ instB = instB._nativeParent;\n+ }\n+ return false;\n+}\n+\n+function getParentInstance(inst) {\n+ invariant('_nativeNode' in inst, 'getParentInstance: Invalid argument.');\n+\n+ return inst._nativeParent;\n+}\n+\n+module.exports = {\n+ isAncestor: isAncestor,\n+ getLowestCommonAncestor: getLowestCommonAncestor,\n+ getParentInstance: getParentInstance,\n+};\ndiff --git a\/src\/renderers\/dom\/client\/ReactEventListener.js b\/src\/renderers\/dom\/client\/ReactEventListener.js\nindex 422b0ee650..307e5debad 100644\n--- a\/src\/renderers\/dom\/client\/ReactEventListener.js\n+++ b\/src\/renderers\/dom\/client\/ReactEventListener.js\n@@ -15,32 +15,28 @@\n var EventListener = require('EventListener');\n var ExecutionEnvironment = require('ExecutionEnvironment');\n var PooledClass = require('PooledClass');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n-var ReactMount = require('ReactMount');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n \n var assign = require('Object.assign');\n var getEventTarget = require('getEventTarget');\n var getUnboundedScrollPosition = require('getUnboundedScrollPosition');\n \n-var DOCUMENT_FRAGMENT_NODE_TYPE = 11;\n-\n \/**\n- * Finds the parent React component of `node`.\n- *\n- * @param {*} node\n- * @return {?DOMEventTarget} Parent container, or `null` if the specified node\n- * is not nested.\n+ * Find the deepest React component completely containing the root of the\n+ * passed-in instance (for use when entire React trees are nested within each\n+ * other). If React trees are not nested, returns null.\n *\/\n-function findParent(node) {\n+function findParent(inst) {\n \/\/ TODO: It may be a good idea to cache this to prevent unnecessary DOM\n \/\/ traversal, but caching is difficult to do correctly without using a\n \/\/ mutation observer to listen for all DOM changes.\n- var nodeID = ReactMount.getID(node);\n- var rootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID);\n- var container = ReactMount.findReactContainerForID(rootID);\n- var parent = ReactMount.getFirstReactDOM(container);\n- return parent;\n+ while (inst._nativeParent) {\n+ inst = inst._nativeParent;\n+ }\n+ var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);\n+ var container = rootNode.parentNode;\n+ return ReactDOMComponentTree.getClosestInstanceFromNode(container);\n }\n \n \/\/ Used to store ancestor hierarchy in top level callback\n@@ -62,91 +58,26 @@ PooledClass.addPoolingTo(\n );\n \n function handleTopLevelImpl(bookKeeping) {\n- \/\/ TODO: Re-enable event.path handling\n- \/\/\n- \/\/ if (bookKeeping.nativeEvent.path && bookKeeping.nativeEvent.path.length > 1) {\n- \/\/ \/\/ New browsers have a path attribute on native events\n- \/\/ handleTopLevelWithPath(bookKeeping);\n- \/\/ } else {\n- \/\/ \/\/ Legacy browsers don't have a path attribute on native events\n- \/\/ handleTopLevelWithoutPath(bookKeeping);\n- \/\/ }\n-\n- void handleTopLevelWithPath; \/\/ temporarily unused\n- handleTopLevelWithoutPath(bookKeeping);\n-}\n-\n-\/\/ Legacy browsers don't have a path attribute on native events\n-function handleTopLevelWithoutPath(bookKeeping) {\n- var topLevelTarget = ReactMount.getFirstReactDOM(\n- getEventTarget(bookKeeping.nativeEvent)\n- ) || window;\n+ var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);\n+ var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(\n+ nativeEventTarget\n+ );\n \n \/\/ Loop through the hierarchy, in case there's any nested components.\n \/\/ It's important that we build the array of ancestors before calling any\n \/\/ event handlers, because event handlers can modify the DOM, leading to\n \/\/ inconsistencies with ReactMount's node cache. See #1105.\n- var ancestor = topLevelTarget;\n- while (ancestor) {\n+ var ancestor = targetInst;\n+ do {\n bookKeeping.ancestors.push(ancestor);\n- ancestor = findParent(ancestor);\n- }\n+ ancestor = ancestor && findParent(ancestor);\n+ } while (ancestor);\n \n for (var i = 0; i < bookKeeping.ancestors.length; i++) {\n- topLevelTarget = bookKeeping.ancestors[i];\n- var topLevelTargetID = ReactMount.getID(topLevelTarget) || '';\n- ReactEventListener._handleTopLevel(\n- bookKeeping.topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- bookKeeping.nativeEvent,\n- getEventTarget(bookKeeping.nativeEvent)\n- );\n- }\n-}\n-\n-\/\/ New browsers have a path attribute on native events\n-function handleTopLevelWithPath(bookKeeping) {\n- var path = bookKeeping.nativeEvent.path;\n- var currentNativeTarget = path[0];\n- var eventsFired = 0;\n- for (var i = 0; i < path.length; i++) {\n- var currentPathElement = path[i];\n- if (currentPathElement.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE) {\n- currentNativeTarget = path[i + 1];\n- }\n- \/\/ TODO: slow\n- var reactParent = ReactMount.getFirstReactDOM(currentPathElement);\n- if (reactParent === currentPathElement) {\n- var currentPathElementID = ReactMount.getID(currentPathElement);\n- var newRootID = ReactInstanceHandles.getReactRootIDFromNodeID(\n- currentPathElementID\n- );\n- bookKeeping.ancestors.push(currentPathElement);\n-\n- var topLevelTargetID = ReactMount.getID(currentPathElement) || '';\n- eventsFired++;\n- ReactEventListener._handleTopLevel(\n- bookKeeping.topLevelType,\n- currentPathElement,\n- topLevelTargetID,\n- bookKeeping.nativeEvent,\n- currentNativeTarget\n- );\n-\n- \/\/ Jump to the root of this React render tree\n- while (currentPathElementID !== newRootID) {\n- i++;\n- currentPathElement = path[i];\n- currentPathElementID = ReactMount.getID(currentPathElement);\n- }\n- }\n- }\n- if (eventsFired === 0) {\n+ targetInst = bookKeeping.ancestors[i];\n ReactEventListener._handleTopLevel(\n bookKeeping.topLevelType,\n- window,\n- '',\n+ targetInst,\n bookKeeping.nativeEvent,\n getEventTarget(bookKeeping.nativeEvent)\n );\ndiff --git a\/src\/renderers\/dom\/client\/__tests__\/ReactBrowserEventEmitter-test.js b\/src\/renderers\/dom\/client\/__tests__\/ReactBrowserEventEmitter-test.js\nindex 7d84831a68..7d2cf19e96 100644\n--- a\/src\/renderers\/dom\/client\/__tests__\/ReactBrowserEventEmitter-test.js\n+++ b\/src\/renderers\/dom\/client\/__tests__\/ReactBrowserEventEmitter-test.js\n@@ -13,25 +13,17 @@\n \n var keyOf = require('keyOf');\n \n-var ReactMount = require('ReactMount');\n-var idToNode = {};\n-var getID = ReactMount.getID;\n-var setID = function(el, id) {\n- ReactMount.setID(el, id);\n- idToNode[id] = el;\n-};\n-var oldGetNode;\n-var oldGetFirstReactDOM;\n-\n+var EventListener;\n var EventPluginHub;\n var EventPluginRegistry;\n+var React;\n var ReactBrowserEventEmitter;\n+var ReactDOMComponentTree;\n var ReactTestUtils;\n var TapEventPlugin;\n-var EventListener;\n \n var tapMoveThreshold;\n-var idCallOrder = [];\n+var idCallOrder;\n var recordID = function(id) {\n idCallOrder.push(id);\n };\n@@ -49,21 +41,9 @@ var ON_TOUCH_TAP_KEY = keyOf({onTouchTap: null});\n var ON_CHANGE_KEY = keyOf({onChange: null});\n var ON_MOUSE_ENTER_KEY = keyOf({onMouseEnter: null});\n \n-\n-\/**\n- * Since `ReactBrowserEventEmitter` is fairly well separated from the DOM, we\n- * can test almost all of `ReactBrowserEventEmitter` without ever rendering\n- * anything in the DOM. As long as we provide IDs that follow `React's`\n- * conventional id namespace hierarchy. The only reason why we create these DOM\n- * nodes is so that when we feed them into `ReactBrowserEventEmitter` (through\n- * `ReactTestUtils`), the event handlers may receive a DOM node to inspect.\n- *\/\n-var CHILD = document.createElement('div');\n-var PARENT = document.createElement('div');\n-var GRANDPARENT = document.createElement('div');\n-setID(CHILD, '.0.0.0.0');\n-setID(PARENT, '.0.0.0');\n-setID(GRANDPARENT, '.0.0');\n+var GRANDPARENT;\n+var PARENT;\n+var CHILD;\n \n function registerSimpleTestHandler() {\n EventPluginHub.putListener(getID(CHILD), ON_CLICK_KEY, LISTENER);\n@@ -72,27 +52,31 @@ function registerSimpleTestHandler() {\n return EventPluginHub.getListener(getID(CHILD), ON_CLICK_KEY);\n }\n \n+function getID(node) {\n+ return ReactDOMComponentTree.getInstanceFromNode(node)._rootNodeID;\n+}\n+\n \n describe('ReactBrowserEventEmitter', function() {\n beforeEach(function() {\n jest.resetModuleRegistry();\n LISTENER.mockClear();\n+ EventListener = require('EventListener');\n EventPluginHub = require('EventPluginHub');\n EventPluginRegistry = require('EventPluginRegistry');\n- TapEventPlugin = require('TapEventPlugin');\n- ReactMount = require('ReactMount');\n- EventListener = require('EventListener');\n+ React = require('React');\n ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n ReactTestUtils = require('ReactTestUtils');\n+ TapEventPlugin = require('TapEventPlugin');\n \n- oldGetNode = ReactMount.getNode;\n- oldGetFirstReactDOM = ReactMount.oldGetFirstReactDOM;\n- ReactMount.getNode = function(id) {\n- return idToNode[id];\n- };\n- ReactMount.getFirstReactDOM = function(node) {\n- return node;\n- };\n+ ReactTestUtils.renderIntoDocument(\n+

GRANDPARENT = c}>\n+

PARENT = c}>\n+

CHILD = c} \/>\n+ <\/div>\n+ <\/div>\n+ );\n \n idCallOrder = [];\n tapMoveThreshold = TapEventPlugin.tapMoveThreshold;\n@@ -101,11 +85,6 @@ describe('ReactBrowserEventEmitter', function() {\n });\n });\n \n- afterEach(function() {\n- ReactMount.getNode = oldGetNode;\n- ReactMount.getFirstReactDOM = oldGetFirstReactDOM;\n- });\n-\n it('should store a listener correctly', function() {\n registerSimpleTestHandler();\n var listener = EventPluginHub.getListener(getID(CHILD), ON_CLICK_KEY);\ndiff --git a\/src\/renderers\/dom\/client\/__tests__\/ReactEventListener-test.js b\/src\/renderers\/dom\/client\/__tests__\/ReactEventListener-test.js\nindex 42e5dbc552..6e53f1a12c 100644\n--- a\/src\/renderers\/dom\/client\/__tests__\/ReactEventListener-test.js\n+++ b\/src\/renderers\/dom\/client\/__tests__\/ReactEventListener-test.js\n@@ -16,10 +16,8 @@ var EVENT_TARGET_PARAM = 1;\n \n describe('ReactEventListener', function() {\n var React;\n-\n var ReactDOM;\n-\n- var ReactMount;\n+ var ReactDOMComponentTree;\n var ReactEventListener;\n var ReactTestUtils;\n var handleTopLevel;\n@@ -27,10 +25,8 @@ describe('ReactEventListener', function() {\n beforeEach(function() {\n jest.resetModuleRegistry();\n React = require('React');\n-\n ReactDOM = require('ReactDOM');\n-\n- ReactMount = require('ReactMount');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n ReactEventListener = require('ReactEventListener');\n ReactTestUtils = require('ReactTestUtils');\n \n@@ -40,7 +36,7 @@ describe('ReactEventListener', function() {\n \n it('should dispatch events from outside React tree', function() {\n var otherNode = document.createElement('h1');\n- var component = ReactMount.render(

, document.createElement('div'));\n+ var component = ReactDOM.render(

, document.createElement('div'));\n expect(handleTopLevel.mock.calls.length).toBe(0);\n ReactEventListener.dispatchEvent(\n 'topMouseOut',\n@@ -64,9 +60,9 @@ describe('ReactEventListener', function() {\n var childControl =

Child<\/div>;\n var parentContainer = document.createElement('div');\n var parentControl =

Parent<\/div>;\n var grandParentContainer = document.createElement('div');\n var grandParentControl =

Parent<\/div>;\n- childControl = ReactMount.render(childControl, childContainer);\n+ childControl = ReactDOM.render(childControl, childContainer);\n parentControl =\n- ReactMount.render(parentControl, parentContainer);\n+ ReactDOM.render(parentControl, parentContainer);\n grandParentControl =\n- ReactMount.render(grandParentControl, grandParentContainer);\n+ ReactDOM.render(grandParentControl, grandParentContainer);\n ReactDOM.findDOMNode(parentControl).appendChild(childContainer);\n ReactDOM.findDOMNode(grandParentControl).appendChild(parentContainer);\n \n@@ -105,11 +101,11 @@ describe('ReactEventListener', function() {\n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(3);\n expect(calls[0][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(childControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(childControl));\n expect(calls[1][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(parentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(parentControl));\n expect(calls[2][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(grandParentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(grandParentControl));\n });\n \n it('should not get confused by disappearing elements', function() {\n@@ -117,9 +113,9 @@ describe('ReactEventListener', function() {\n var childControl =

Child<\/div>;\n var parentContainer = document.createElement('div');\n var parentControl =

Parent<\/div>;\n- childControl = ReactMount.render(childControl, childContainer);\n+ childControl = ReactDOM.render(childControl, childContainer);\n parentControl =\n- ReactMount.render(parentControl, parentContainer);\n+ ReactDOM.render(parentControl, parentContainer);\n ReactDOM.findDOMNode(parentControl).appendChild(childContainer);\n \n \/\/ ReactBrowserEventEmitter.handleTopLevel might remove the\n@@ -130,7 +126,7 @@ describe('ReactEventListener', function() {\n handleTopLevel.mockImplementation(\n function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {\n if (topLevelTarget === childNode) {\n- ReactMount.unmountComponentAtNode(childContainer);\n+ ReactDOM.unmountComponentAtNode(childContainer);\n }\n }\n );\n@@ -142,19 +138,20 @@ describe('ReactEventListener', function() {\n \n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(2);\n- expect(calls[0][EVENT_TARGET_PARAM]).toBe(childNode);\n+ expect(calls[0][EVENT_TARGET_PARAM])\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(childNode));\n expect(calls[1][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(parentControl));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(parentControl));\n });\n \n it('should batch between handlers from different roots', function() {\n var childContainer = document.createElement('div');\n var parentContainer = document.createElement('div');\n- var childControl = ReactMount.render(\n+ var childControl = ReactDOM.render(\n

Child<\/div>,\n childContainer\n );\n- var parentControl = ReactMount.render(\n+ var parentControl = ReactDOM.render(\n

Parent<\/div>,\n parentContainer\n );\n@@ -165,7 +162,7 @@ describe('ReactEventListener', function() {\n var childNode = ReactDOM.findDOMNode(childControl);\n handleTopLevel.mockImplementation(\n function(topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) {\n- ReactMount.render(\n+ ReactDOM.render(\n

{topLevelTarget === childNode ? '1' : '2'}<\/div>,\n childContainer\n );\n@@ -210,6 +207,6 @@ describe('ReactEventListener', function() {\n var calls = handleTopLevel.mock.calls;\n expect(calls.length).toBe(1);\n expect(calls[0][EVENT_TARGET_PARAM])\n- .toBe(ReactDOM.findDOMNode(instance.getInner()));\n+ .toBe(ReactDOMComponentTree.getInstanceFromNode(instance.getInner()));\n });\n });\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\nindex fdcf0bf8de..278104917f 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js\n@@ -227,16 +227,11 @@ function getDataFromCustomEvent(nativeEvent) {\n var currentComposition = null;\n \n \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {?object} A SyntheticCompositionEvent.\n *\/\n function extractCompositionEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -261,7 +256,8 @@ function extractCompositionEvent(\n \/\/ The current composition is stored statically and must not be\n \/\/ overwritten while composition continues.\n if (!currentComposition && eventType === eventTypes.compositionStart) {\n- currentComposition = FallbackCompositionState.getPooled(topLevelTarget);\n+ currentComposition =\n+ FallbackCompositionState.getPooled(nativeEventTarget);\n } else if (eventType === eventTypes.compositionEnd) {\n if (currentComposition) {\n fallbackData = currentComposition.getData();\n@@ -271,7 +267,7 @@ function extractCompositionEvent(\n \n var event = SyntheticCompositionEvent.getPooled(\n eventType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -403,16 +399,11 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {\n * Extract a SyntheticInputEvent for `beforeInput`, based on either native\n * `textInput` or fallback behavior.\n *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {?object} A SyntheticInputEvent.\n *\/\n function extractBeforeInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -432,7 +423,7 @@ function extractBeforeInputEvent(\n \n var event = SyntheticInputEvent.getPooled(\n eventTypes.beforeInput,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -464,33 +455,22 @@ var BeforeInputEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n return [\n extractCompositionEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ),\n extractBeforeInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ),\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\nindex f990004abd..c78827f70e 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js\n@@ -15,6 +15,7 @@ var EventConstants = require('EventConstants');\n var EventPluginHub = require('EventPluginHub');\n var EventPropagators = require('EventPropagators');\n var ExecutionEnvironment = require('ExecutionEnvironment');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactUpdates = require('ReactUpdates');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -48,7 +49,7 @@ var eventTypes = {\n * For IE shims\n *\/\n var activeElement = null;\n-var activeElementID = null;\n+var activeElementInst = null;\n var activeElementValue = null;\n var activeElementValueProp = null;\n \n@@ -74,7 +75,7 @@ if (ExecutionEnvironment.canUseDOM) {\n function manualDispatchChangeEvent(nativeEvent) {\n var event = SyntheticEvent.getPooled(\n eventTypes.change,\n- activeElementID,\n+ activeElementInst,\n nativeEvent,\n getEventTarget(nativeEvent)\n );\n@@ -99,9 +100,9 @@ function runEventInBatch(event) {\n EventPluginHub.processEventQueue(false);\n }\n \n-function startWatchingForChangeEventIE8(target, targetID) {\n+function startWatchingForChangeEventIE8(target, targetInst) {\n activeElement = target;\n- activeElementID = targetID;\n+ activeElementInst = targetInst;\n activeElement.attachEvent('onchange', manualDispatchChangeEvent);\n }\n \n@@ -111,28 +112,27 @@ function stopWatchingForChangeEventIE8() {\n }\n activeElement.detachEvent('onchange', manualDispatchChangeEvent);\n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n }\n \n-function getTargetIDForChangeEvent(\n+function getTargetInstForChangeEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topChange) {\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n function handleEventsForChangeEventIE8(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ target,\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topFocus) {\n \/\/ stopWatching() should be a noop here but we call it just in case we\n \/\/ missed a blur event somehow.\n stopWatchingForChangeEventIE8();\n- startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID);\n+ startWatchingForChangeEventIE8(target, targetInst);\n } else if (topLevelType === topLevelTypes.topBlur) {\n stopWatchingForChangeEventIE8();\n }\n@@ -173,9 +173,9 @@ var newValueProp = {\n * and override the value property so that we can distinguish user events from\n * value changes in JS.\n *\/\n-function startWatchingForValueChange(target, targetID) {\n+function startWatchingForValueChange(target, targetInst) {\n activeElement = target;\n- activeElementID = targetID;\n+ activeElementInst = targetInst;\n activeElementValue = target.value;\n activeElementValueProp = Object.getOwnPropertyDescriptor(\n target.constructor.prototype,\n@@ -211,7 +211,7 @@ function stopWatchingForValueChange() {\n }\n \n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n activeElementValue = null;\n activeElementValueProp = null;\n }\n@@ -236,22 +236,21 @@ function handlePropertyChange(nativeEvent) {\n \/**\n * If a `change` event should be fired, returns the target's ID.\n *\/\n-function getTargetIDForInputEvent(\n+function getTargetInstForInputEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topInput) {\n \/\/ In modern browsers (i.e., not IE8 or IE9), the input event is exactly\n \/\/ what we want so fall through here and trigger an abstract event\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n \n function handleEventsForInputEventIE(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ target,\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topFocus) {\n \/\/ In IE8, we can capture almost all .value changes by adding a\n@@ -268,17 +267,16 @@ function handleEventsForInputEventIE(\n \/\/ stopWatching() should be a noop here but we call it just in case we\n \/\/ missed a blur event somehow.\n stopWatchingForValueChange();\n- startWatchingForValueChange(topLevelTarget, topLevelTargetID);\n+ startWatchingForValueChange(target, targetInst);\n } else if (topLevelType === topLevelTypes.topBlur) {\n stopWatchingForValueChange();\n }\n }\n \n \/\/ For IE8 and IE9.\n-function getTargetIDForInputEventIE(\n+function getTargetInstForInputEventIE(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topSelectionChange ||\n topLevelType === topLevelTypes.topKeyUp ||\n@@ -295,7 +293,7 @@ function getTargetIDForInputEventIE(\n \/\/ fire selectionchange normally.\n if (activeElement && activeElement.value !== activeElementValue) {\n activeElementValue = activeElement.value;\n- return activeElementID;\n+ return activeElementInst;\n }\n }\n }\n@@ -314,13 +312,12 @@ function shouldUseClickEvent(elem) {\n );\n }\n \n-function getTargetIDForClickEvent(\n+function getTargetInstForClickEvent(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetInst\n ) {\n if (topLevelType === topLevelTypes.topClick) {\n- return topLevelTargetID;\n+ return targetInst;\n }\n }\n \n@@ -338,49 +335,39 @@ var ChangeEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n-\n- var getTargetIDFunc, handleEventFunc;\n- if (shouldUseChangeEvent(topLevelTarget)) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n+ var targetNode = targetInst ?\n+ ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;\n+\n+ var getTargetInstFunc, handleEventFunc;\n+ if (shouldUseChangeEvent(targetNode)) {\n if (doesChangeEventBubble) {\n- getTargetIDFunc = getTargetIDForChangeEvent;\n+ getTargetInstFunc = getTargetInstForChangeEvent;\n } else {\n handleEventFunc = handleEventsForChangeEventIE8;\n }\n- } else if (isTextInputElement(topLevelTarget)) {\n+ } else if (isTextInputElement(targetNode)) {\n if (isInputEventSupported) {\n- getTargetIDFunc = getTargetIDForInputEvent;\n+ getTargetInstFunc = getTargetInstForInputEvent;\n } else {\n- getTargetIDFunc = getTargetIDForInputEventIE;\n+ getTargetInstFunc = getTargetInstForInputEventIE;\n handleEventFunc = handleEventsForInputEventIE;\n }\n- } else if (shouldUseClickEvent(topLevelTarget)) {\n- getTargetIDFunc = getTargetIDForClickEvent;\n+ } else if (shouldUseClickEvent(targetNode)) {\n+ getTargetInstFunc = getTargetInstForClickEvent;\n }\n \n- if (getTargetIDFunc) {\n- var targetID = getTargetIDFunc(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n- );\n- if (targetID) {\n+ if (getTargetInstFunc) {\n+ var inst = getTargetInstFunc(topLevelType, targetInst);\n+ if (inst) {\n var event = SyntheticEvent.getPooled(\n eventTypes.change,\n- targetID,\n+ inst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -393,8 +380,8 @@ var ChangeEventPlugin = {\n if (handleEventFunc) {\n handleEventFunc(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID\n+ targetNode,\n+ targetInst\n );\n }\n },\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\nindex 6eccf1779e..27a9afce51 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js\n@@ -14,13 +14,12 @@\n \n var EventConstants = require('EventConstants');\n var EventPropagators = require('EventPropagators');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var SyntheticMouseEvent = require('SyntheticMouseEvent');\n \n-var ReactMount = require('ReactMount');\n var keyOf = require('keyOf');\n \n var topLevelTypes = EventConstants.topLevelTypes;\n-var getFirstReactDOM = ReactMount.getFirstReactDOM;\n \n var eventTypes = {\n mouseEnter: {\n@@ -39,8 +38,6 @@ var eventTypes = {\n },\n };\n \n-var extractedEvents = [null, null];\n-\n var EnterLeaveEventPlugin = {\n \n eventTypes: eventTypes,\n@@ -51,20 +48,13 @@ var EnterLeaveEventPlugin = {\n * we do not extract duplicate events. However, moving the mouse into the\n * browser from outside will not fire a `mouseout` event. In this case, we use\n * the `mouseover` top-level event.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (topLevelType === topLevelTypes.topMouseOver &&\n (nativeEvent.relatedTarget || nativeEvent.fromElement)) {\n return null;\n@@ -76,12 +66,12 @@ var EnterLeaveEventPlugin = {\n }\n \n var win;\n- if (topLevelTarget.window === topLevelTarget) {\n- \/\/ `topLevelTarget` is probably a window object.\n- win = topLevelTarget;\n+ if (nativeEventTarget.window === nativeEventTarget) {\n+ \/\/ `nativeEventTarget` is probably a window object.\n+ win = nativeEventTarget;\n } else {\n \/\/ TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.\n- var doc = topLevelTarget.ownerDocument;\n+ var doc = nativeEventTarget.ownerDocument;\n if (doc) {\n win = doc.defaultView || doc.parentWindow;\n } else {\n@@ -91,22 +81,15 @@ var EnterLeaveEventPlugin = {\n \n var from;\n var to;\n- var fromID = '';\n- var toID = '';\n if (topLevelType === topLevelTypes.topMouseOut) {\n- from = topLevelTarget;\n- fromID = topLevelTargetID;\n- to = getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement);\n- if (to) {\n- toID = ReactMount.getID(to);\n- } else {\n- to = win;\n- }\n- to = to || win;\n+ from = targetInst;\n+ var related = nativeEvent.relatedTarget || nativeEvent.toElement;\n+ to = related ?\n+ ReactDOMComponentTree.getClosestInstanceFromNode(related) : null;\n } else {\n- from = win;\n- to = topLevelTarget;\n- toID = topLevelTargetID;\n+ \/\/ Moving to a node from outside the window.\n+ from = null;\n+ to = targetInst;\n }\n \n if (from === to) {\n@@ -114,32 +97,34 @@ var EnterLeaveEventPlugin = {\n return null;\n }\n \n+ var fromNode =\n+ from == null ? win : ReactDOMComponentTree.getNodeFromInstance(from);\n+ var toNode =\n+ to == null ? win : ReactDOMComponentTree.getNodeFromInstance(to);\n+\n var leave = SyntheticMouseEvent.getPooled(\n eventTypes.mouseLeave,\n- fromID,\n+ from,\n nativeEvent,\n nativeEventTarget\n );\n leave.type = 'mouseleave';\n- leave.target = from;\n- leave.relatedTarget = to;\n+ leave.target = fromNode;\n+ leave.relatedTarget = toNode;\n \n var enter = SyntheticMouseEvent.getPooled(\n eventTypes.mouseEnter,\n- toID,\n+ to,\n nativeEvent,\n nativeEventTarget\n );\n enter.type = 'mouseenter';\n- enter.target = to;\n- enter.relatedTarget = from;\n-\n- EventPropagators.accumulateEnterLeaveDispatches(leave, enter, fromID, toID);\n+ enter.target = toNode;\n+ enter.relatedTarget = fromNode;\n \n- extractedEvents[0] = leave;\n- extractedEvents[1] = enter;\n+ EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to);\n \n- return extractedEvents;\n+ return [leave, enter];\n },\n \n };\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\nindex bda881154a..a8c111cbc4 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js\n@@ -14,6 +14,7 @@\n var EventConstants = require('EventConstants');\n var EventPropagators = require('EventPropagators');\n var ExecutionEnvironment = require('ExecutionEnvironment');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactInputSelection = require('ReactInputSelection');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -49,12 +50,12 @@ var eventTypes = {\n };\n \n var activeElement = null;\n-var activeElementID = null;\n+var activeElementInst = null;\n var lastSelection = null;\n var mouseDown = false;\n \n \/\/ Track whether a listener exists for this plugin. If none exist, we do\n-\/\/ not extract events.\n+\/\/ not extract events. See #3639.\n var hasListener = false;\n var ON_SELECT_KEY = keyOf({onSelect: null});\n \n@@ -117,7 +118,7 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {\n \n var syntheticEvent = SyntheticEvent.getPooled(\n eventTypes.select,\n- activeElementID,\n+ activeElementInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -151,37 +152,32 @@ var SelectEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (!hasListener) {\n return null;\n }\n \n+ var targetNode = targetInst ?\n+ ReactDOMComponentTree.getNodeFromInstance(targetInst) : window;\n+\n switch (topLevelType) {\n \/\/ Track the input node that has focus.\n case topLevelTypes.topFocus:\n- if (isTextInputElement(topLevelTarget) ||\n- topLevelTarget.contentEditable === 'true') {\n- activeElement = topLevelTarget;\n- activeElementID = topLevelTargetID;\n+ if (isTextInputElement(targetNode) ||\n+ targetNode.contentEditable === 'true') {\n+ activeElement = targetNode;\n+ activeElementInst = targetInst;\n lastSelection = null;\n }\n break;\n case topLevelTypes.topBlur:\n activeElement = null;\n- activeElementID = null;\n+ activeElementInst = null;\n lastSelection = null;\n break;\n \ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\nindex 1009a12fa2..d2220869c5 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js\n@@ -457,20 +457,11 @@ var SimpleEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n ) {\n var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];\n if (!dispatchConfig) {\n@@ -511,7 +502,7 @@ var SimpleEventPlugin = {\n EventConstructor = SyntheticEvent;\n break;\n case topLevelTypes.topKeyPress:\n- \/\/ FireFox creates a keypress event for function keys too. This removes\n+ \/\/ Firefox creates a keypress event for function keys too. This removes\n \/\/ the unwanted keypress events. Enter is however both printable and\n \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n if (getEventCharCode(nativeEvent) === 0) {\n@@ -577,7 +568,7 @@ var SimpleEventPlugin = {\n );\n var event = EventConstructor.getPooled(\n dispatchConfig,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js b\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\nindex 794d5ee8ba..18140b2025 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js\n@@ -89,20 +89,12 @@ var TapEventPlugin = {\n \n eventTypes: eventTypes,\n \n- \/**\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n- *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (!isStartish(topLevelType) && !isEndish(topLevelType)) {\n return null;\n }\n@@ -122,7 +114,7 @@ var TapEventPlugin = {\n if (isEndish(topLevelType) && distance < tapMoveThreshold) {\n event = SyntheticUIEvent.getPooled(\n eventTypes.touchTap,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\nindex 5d3afd3ee8..21d588f7f4 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js\n@@ -15,7 +15,7 @@ var EnterLeaveEventPlugin;\n var EventConstants;\n var React;\n var ReactDOM;\n-var ReactMount;\n+var ReactDOMComponentTree;\n \n var topLevelTypes;\n \n@@ -27,7 +27,7 @@ describe('EnterLeaveEventPlugin', function() {\n EventConstants = require('EventConstants');\n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactMount = require('ReactMount');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n \n topLevelTypes = EventConstants.topLevelTypes;\n });\n@@ -48,8 +48,7 @@ describe('EnterLeaveEventPlugin', function() {\n \n var extracted = EnterLeaveEventPlugin.extractEvents(\n topLevelTypes.topMouseOver,\n- div,\n- ReactMount.getID(div),\n+ ReactDOMComponentTree.getInstanceFromNode(div),\n {target: div},\n div\n );\ndiff --git a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\nindex e9b8be7347..ef845a0670 100644\n--- a\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\n+++ b\/src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js\n@@ -14,7 +14,7 @@\n var EventConstants;\n var React;\n var ReactDOM;\n-var ReactMount;\n+var ReactDOMComponentTree;\n var ReactTestUtils;\n var SelectEventPlugin;\n \n@@ -24,8 +24,7 @@ describe('SelectEventPlugin', function() {\n function extract(node, topLevelEvent) {\n return SelectEventPlugin.extractEvents(\n topLevelEvent,\n- node,\n- ReactMount.getID(node),\n+ ReactDOMComponentTree.getInstanceFromNode(node),\n {target: node},\n node\n );\n@@ -35,7 +34,7 @@ describe('SelectEventPlugin', function() {\n EventConstants = require('EventConstants');\n React = require('React');\n ReactDOM = require('ReactDOM');\n- ReactMount = require('ReactMount');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n ReactTestUtils = require('ReactTestUtils');\n SelectEventPlugin = require('SelectEventPlugin');\n \ndiff --git a\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js b\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\nindex fe76ae7c03..eff39b69f8 100644\n--- a\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\n+++ b\/src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js\n@@ -50,12 +50,13 @@ var EventInterface = {\n * DOM interface; custom application-specific events can also subclass this.\n *\n * @param {object} dispatchConfig Configuration used to dispatch this event.\n- * @param {string} dispatchMarker Marker identifying the event target.\n+ * @param {*} targetInst Marker identifying the event target.\n * @param {object} nativeEvent Native browser event.\n *\/\n-function SyntheticEvent(dispatchConfig, dispatchMarker, nativeEvent, nativeEventTarget) {\n+function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {\n this.dispatchConfig = dispatchConfig;\n- this.dispatchMarker = dispatchMarker;\n+ this._targetInst = targetInst;\n+\n this.nativeEvent = nativeEvent;\n this.target = nativeEventTarget;\n this.currentTarget = nativeEventTarget;\n@@ -158,7 +159,7 @@ assign(SyntheticEvent.prototype, {\n this[propName] = null;\n }\n this.dispatchConfig = null;\n- this.dispatchMarker = null;\n+ this._targetInst = null;\n this.nativeEvent = null;\n },\n \ndiff --git a\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js b\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\nindex 5c6dbb979a..f569499aac 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDefaultInjection.js\n@@ -20,17 +20,19 @@ var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig');\n var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');\n var ReactComponentBrowserEnvironment =\n require('ReactComponentBrowserEnvironment');\n-var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');\n var ReactDOMComponent = require('ReactDOMComponent');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n+var ReactDOMTreeTraversal = require('ReactDOMTreeTraversal');\n var ReactDOMTextComponent = require('ReactDOMTextComponent');\n+var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');\n var ReactEventListener = require('ReactEventListener');\n var ReactInjection = require('ReactInjection');\n var ReactInstanceHandles = require('ReactInstanceHandles');\n var ReactMount = require('ReactMount');\n var ReactReconcileTransaction = require('ReactReconcileTransaction');\n+var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');\n var SelectEventPlugin = require('SelectEventPlugin');\n var SimpleEventPlugin = require('SimpleEventPlugin');\n-var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');\n \n var alreadyInjected = false;\n \n@@ -52,7 +54,9 @@ function inject() {\n *\/\n ReactInjection.EventPluginHub.injectEventPluginOrder(DefaultEventPluginOrder);\n ReactInjection.EventPluginHub.injectInstanceHandle(ReactInstanceHandles);\n- ReactInjection.EventPluginHub.injectMount(ReactMount);\n+ ReactInjection.EventPluginUtils.injectComponentTree(ReactDOMComponentTree);\n+ ReactInjection.EventPluginUtils.injectTreeTraversal(ReactDOMTreeTraversal);\n+ ReactInjection.EventPluginUtils.injectMount(ReactMount);\n \n \/**\n * Some important event plugins included by default (without having to require\ndiff --git a\/src\/renderers\/dom\/shared\/ReactInjection.js b\/src\/renderers\/dom\/shared\/ReactInjection.js\nindex dc114c4661..0e8c0dc90e 100644\n--- a\/src\/renderers\/dom\/shared\/ReactInjection.js\n+++ b\/src\/renderers\/dom\/shared\/ReactInjection.js\n@@ -13,6 +13,7 @@\n \n var DOMProperty = require('DOMProperty');\n var EventPluginHub = require('EventPluginHub');\n+var EventPluginUtils = require('EventPluginUtils');\n var ReactComponentEnvironment = require('ReactComponentEnvironment');\n var ReactClass = require('ReactClass');\n var ReactEmptyComponent = require('ReactEmptyComponent');\n@@ -27,6 +28,7 @@ var ReactInjection = {\n DOMProperty: DOMProperty.injection,\n EmptyComponent: ReactEmptyComponent.injection,\n EventPluginHub: EventPluginHub.injection,\n+ EventPluginUtils: EventPluginUtils.injection,\n EventEmitter: ReactBrowserEventEmitter.injection,\n NativeComponent: ReactNativeComponent.injection,\n Perf: ReactPerf.injection,\ndiff --git a\/src\/renderers\/shared\/event\/EventPluginHub.js b\/src\/renderers\/shared\/event\/EventPluginHub.js\nindex d5078f5e00..6ed5103979 100644\n--- a\/src\/renderers\/shared\/event\/EventPluginHub.js\n+++ b\/src\/renderers\/shared\/event\/EventPluginHub.js\n@@ -100,12 +100,6 @@ var EventPluginHub = {\n *\/\n injection: {\n \n- \/**\n- * @param {object} InjectedMount\n- * @public\n- *\/\n- injectMount: EventPluginUtils.injection.injectMount,\n-\n \/**\n * @param {object} InjectedInstanceHandle\n * @public\n@@ -217,17 +211,12 @@ var EventPluginHub = {\n * Allows registered plugins an opportunity to extract events from top-level\n * native browser events.\n *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n * @return {*} An accumulation of synthetic events.\n * @internal\n *\/\n extractEvents: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) {\n var events;\n@@ -238,8 +227,7 @@ var EventPluginHub = {\n if (possiblePlugin) {\n var extractedEvents = possiblePlugin.extractEvents(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/renderers\/shared\/event\/EventPluginUtils.js b\/src\/renderers\/shared\/event\/EventPluginUtils.js\nindex bff374799e..9883becf5c 100644\n--- a\/src\/renderers\/shared\/event\/EventPluginUtils.js\n+++ b\/src\/renderers\/shared\/event\/EventPluginUtils.js\n@@ -22,21 +22,47 @@ var warning = require('warning');\n *\/\n \n \/**\n+ * - `ComponentTree`: [required] Module that can convert between React instances\n+ * and actual node references.\n * - `Mount`: [required] Module that can convert between React dom IDs and\n * actual node references.\n *\/\n+var ComponentTree;\n+var Mount;\n+var TreeTraversal;\n var injection = {\n- Mount: null,\n- injectMount: function(InjectedMount) {\n- injection.Mount = InjectedMount;\n+ injectComponentTree: function(Injected) {\n+ ComponentTree = Injected;\n if (__DEV__) {\n warning(\n- InjectedMount && InjectedMount.getNode && InjectedMount.getID,\n+ Injected &&\n+ Injected.getNodeFromInstance &&\n+ Injected.getInstanceFromNode,\n+ 'EventPluginUtils.injection.injectComponentTree(...): Injected ' +\n+ 'module is missing getNodeFromInstance or getInstanceFromNode.'\n+ );\n+ }\n+ },\n+ injectMount: function(Injected) {\n+ Mount = Injected;\n+ if (__DEV__) {\n+ warning(\n+ Injected && Injected.getNode && Injected.getID,\n 'EventPluginUtils.injection.injectMount(...): Injected Mount ' +\n 'module is missing getNode or getID.'\n );\n }\n },\n+ injectTreeTraversal: function(Injected) {\n+ TreeTraversal = Injected;\n+ if (__DEV__) {\n+ warning(\n+ Injected && Injected.isAncestor && Injected.getLowestCommonAncestor,\n+ 'EventPluginUtils.injection.injectTreeTraversal(...): Injected ' +\n+ 'module is missing isAncestor or getLowestCommonAncestor.'\n+ );\n+ }\n+ },\n };\n \n var topLevelTypes = EventConstants.topLevelTypes;\n@@ -86,7 +112,7 @@ if (__DEV__) {\n *\/\n function executeDispatch(event, simulated, listener, domID) {\n var type = event.type || 'unknown-event';\n- event.currentTarget = injection.Mount.getNode(domID);\n+ event.currentTarget = EventPluginUtils.getNode(domID);\n if (simulated) {\n ReactErrorUtils.invokeGuardedCallbackWithCatch(\n type,\n@@ -214,10 +240,19 @@ var EventPluginUtils = {\n hasDispatches: hasDispatches,\n \n getNode: function(id) {\n- return injection.Mount.getNode(id);\n+ return Mount.getNode(id);\n+ },\n+ getInstanceFromNode: function(node) {\n+ return ComponentTree.getInstanceFromNode(node);\n+ },\n+ isAncestor: function(a, b) {\n+ return TreeTraversal.isAncestor(a, b);\n+ },\n+ getLowestCommonAncestor: function(a, b) {\n+ return TreeTraversal.getLowestCommonAncestor(a, b);\n },\n- getID: function(node) {\n- return injection.Mount.getID(node);\n+ getParentInstance: function(inst) {\n+ return TreeTraversal.getParentInstance(inst);\n },\n \n injection: injection,\ndiff --git a\/src\/renderers\/shared\/event\/EventPropagators.js b\/src\/renderers\/shared\/event\/EventPropagators.js\nindex 896382aba0..000f4300d2 100644\n--- a\/src\/renderers\/shared\/event\/EventPropagators.js\n+++ b\/src\/renderers\/shared\/event\/EventPropagators.js\n@@ -22,6 +22,10 @@ var forEachAccumulated = require('forEachAccumulated');\n var PropagationPhases = EventConstants.PropagationPhases;\n var getListener = EventPluginHub.getListener;\n \n+function getID(inst) {\n+ return inst ? inst._rootNodeID : '';\n+}\n+\n \/**\n * Some event types have a notion of different registration names for different\n * \"phases\" of propagation. This finds listeners by a given phase.\n@@ -64,7 +68,7 @@ function accumulateDirectionalDispatches(domID, upwards, event) {\n function accumulateTwoPhaseDispatchesSingle(event) {\n if (event && event.dispatchConfig.phasedRegistrationNames) {\n EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(\n- event.dispatchMarker,\n+ getID(event._targetInst),\n accumulateDirectionalDispatches,\n event\n );\n@@ -77,7 +81,7 @@ function accumulateTwoPhaseDispatchesSingle(event) {\n function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {\n if (event && event.dispatchConfig.phasedRegistrationNames) {\n EventPluginHub.injection.getInstanceHandle().traverseTwoPhaseSkipTarget(\n- event.dispatchMarker,\n+ getID(event._targetInst),\n accumulateDirectionalDispatches,\n event\n );\n@@ -109,7 +113,7 @@ function accumulateDispatches(id, ignoredDirection, event) {\n *\/\n function accumulateDirectDispatchesSingle(event) {\n if (event && event.dispatchConfig.registrationName) {\n- accumulateDispatches(event.dispatchMarker, null, event);\n+ accumulateDispatches(getID(event._targetInst), null, event);\n }\n }\n \n@@ -121,10 +125,10 @@ function accumulateTwoPhaseDispatchesSkipTarget(events) {\n forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);\n }\n \n-function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {\n+function accumulateEnterLeaveDispatches(leave, enter, from, to) {\n EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(\n- fromID,\n- toID,\n+ getID(from),\n+ getID(to),\n accumulateDispatches,\n leave,\n enter\ndiff --git a\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js b\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\nindex 065cee28ab..15f0e4fa0e 100644\n--- a\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\n+++ b\/src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js\n@@ -14,7 +14,6 @@\n var EventConstants = require('EventConstants');\n var EventPluginUtils = require('EventPluginUtils');\n var EventPropagators = require('EventPropagators');\n-var ReactInstanceHandles = require('ReactInstanceHandles');\n var ResponderSyntheticEvent = require('ResponderSyntheticEvent');\n var ResponderTouchHistoryStore = require('ResponderTouchHistoryStore');\n \n@@ -31,10 +30,10 @@ var executeDispatchesInOrderStopAtTrue =\n EventPluginUtils.executeDispatchesInOrderStopAtTrue;\n \n \/**\n- * ID of element that should respond to touch\/move types of interactions, as\n+ * Instance of element that should respond to touch\/move types of interactions, as\n * indicated explicitly by relevant callbacks.\n *\/\n-var responderID = null;\n+var responderInst = null;\n \n \/**\n * Count of current touches. A textInput should become responder iff the\n@@ -47,13 +46,13 @@ var trackedTouchCount = 0;\n *\/\n var previousActiveTouches = 0;\n \n-var changeResponder = function(nextResponderID) {\n- var oldResponderID = responderID;\n- responderID = nextResponderID;\n+var changeResponder = function(nextResponderInst) {\n+ var oldResponderInst = responderInst;\n+ responderInst = nextResponderInst;\n if (ResponderEventPlugin.GlobalResponderHandler !== null) {\n ResponderEventPlugin.GlobalResponderHandler.onChange(\n- oldResponderID,\n- nextResponderID\n+ oldResponderInst,\n+ nextResponderInst\n );\n }\n };\n@@ -149,7 +148,7 @@ var eventTypes = {\n * - If nothing is currently the responder, the \"appropriate place\" is the\n * initiating event's `targetID`.\n * - If something *is* already the responder, the \"appropriate place\" is the\n- * first common ancestor of the event target and the current `responderID`.\n+ * first common ancestor of the event target and the current `responderInst`.\n * - Some negotiation happens: See the timing diagram below.\n * - Scrolled views automatically become responder. The reasoning is that a\n * platform scroll view that isn't built on top of the responder system has\n@@ -158,7 +157,7 @@ var eventTypes = {\n *\n * - Responder being released:\n * As soon as no more touches that *started* inside of descendents of the\n- * *current* responderID, an `onResponderRelease` event is dispatched to the\n+ * *current* responderInst, an `onResponderRelease` event is dispatched to the\n * current responder, and the responder lock is released.\n *\n * TODO:\n@@ -316,15 +315,11 @@ to return true:wantsResponderID| |\n * - `touchStartCapture` (`EventPluginHub` dispatches as usual)\n * - `touchStart` (`EventPluginHub` dispatches as usual)\n * - `responderGrant\/Reject` (`EventPluginHub` dispatches as usual)\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {string} topLevelTargetID ID of deepest React rendered element.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n *\/\n+\n function setResponderAndExtractTransfer(\n topLevelType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n ) {\n@@ -336,15 +331,15 @@ function setResponderAndExtractTransfer(\n eventTypes.scrollShouldSetResponder;\n \n \/\/ TODO: stop one short of the the current responder.\n- var bubbleShouldSetFrom = !responderID ?\n- topLevelTargetID :\n- ReactInstanceHandles.getFirstCommonAncestorID(responderID, topLevelTargetID);\n+ var bubbleShouldSetFrom = !responderInst ?\n+ targetInst :\n+ EventPluginUtils.getLowestCommonAncestor(responderInst, targetInst);\n \n \/\/ When capturing\/bubbling the \"shouldSet\" event, we want to skip the target\n \/\/ (deepest ID) if it happens to be the current responder. The reasoning:\n \/\/ It's strange to get an `onMoveShouldSetResponder` when you're *already*\n \/\/ the responder.\n- var skipOverBubbleShouldSetFrom = bubbleShouldSetFrom === responderID;\n+ var skipOverBubbleShouldSetFrom = bubbleShouldSetFrom === responderInst;\n var shouldSetEvent = ResponderSyntheticEvent.getPooled(\n shouldSetEventType,\n bubbleShouldSetFrom,\n@@ -362,24 +357,43 @@ function setResponderAndExtractTransfer(\n shouldSetEvent.constructor.release(shouldSetEvent);\n }\n \n- if (!wantsResponderID || wantsResponderID === responderID) {\n+ if (!wantsResponderID) {\n+ return null;\n+ }\n+\n+ \/\/ HACK: Temporary tree-crawling until executeDispatchesInOrderStopAtTrue\n+ \/\/ returns the instance instead of the ID.\n+ var wantsResponderInst;\n+ for (\n+ var inst = bubbleShouldSetFrom;\n+ inst;\n+ inst = EventPluginUtils.getParentInstance(inst)\n+ ) {\n+ if (wantsResponderID === inst._rootNodeID) {\n+ wantsResponderInst = inst;\n+ break;\n+ }\n+ }\n+ invariant(wantsResponderInst, 'Requested responder instance not found.');\n+\n+ if (wantsResponderInst === responderInst) {\n return null;\n }\n var extracted;\n var grantEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderGrant,\n- wantsResponderID,\n+ wantsResponderInst,\n nativeEvent,\n nativeEventTarget\n );\n grantEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n \n EventPropagators.accumulateDirectDispatches(grantEvent);\n- if (responderID) {\n+ if (responderInst) {\n \n var terminationRequestEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderTerminationRequest,\n- responderID,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -392,21 +406,20 @@ function setResponderAndExtractTransfer(\n }\n \n if (shouldSwitch) {\n- var terminateType = eventTypes.responderTerminate;\n var terminateEvent = ResponderSyntheticEvent.getPooled(\n- terminateType,\n- responderID,\n+ eventTypes.responderTerminate,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n terminateEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n EventPropagators.accumulateDirectDispatches(terminateEvent);\n extracted = accumulate(extracted, [grantEvent, terminateEvent]);\n- changeResponder(wantsResponderID);\n+ changeResponder(wantsResponderInst);\n } else {\n var rejectEvent = ResponderSyntheticEvent.getPooled(\n eventTypes.responderReject,\n- wantsResponderID,\n+ wantsResponderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -416,7 +429,7 @@ function setResponderAndExtractTransfer(\n }\n } else {\n extracted = accumulate(extracted, grantEvent);\n- changeResponder(wantsResponderID);\n+ changeResponder(wantsResponderInst);\n }\n return extracted;\n }\n@@ -424,13 +437,13 @@ function setResponderAndExtractTransfer(\n \/**\n * A transfer is a negotiation between a currently set responder and the next\n * element to claim responder status. Any start event could trigger a transfer\n- * of responderID. Any move event could trigger a transfer.\n+ * of responderInst. Any move event could trigger a transfer.\n *\n * @param {string} topLevelType Record from `EventConstants`.\n * @return {boolean} True if a transfer of responder could possibly occur.\n *\/\n-function canTriggerTransfer(topLevelType, topLevelTargetID) {\n- return topLevelTargetID && (\n+function canTriggerTransfer(topLevelType, targetInst) {\n+ return !!targetInst && (\n topLevelType === EventConstants.topLevelTypes.topScroll ||\n (trackedTouchCount > 0 &&\n topLevelType === EventConstants.topLevelTypes.topSelectionChange) ||\n@@ -441,7 +454,7 @@ function canTriggerTransfer(topLevelType, topLevelTargetID) {\n \n \/**\n * Returns whether or not this touch end event makes it such that there are no\n- * longer any touches that started inside of the current `responderID`.\n+ * longer any touches that started inside of the current `responderInst`.\n *\n * @param {NativeEvent} nativeEvent Native touch end event.\n * @return {boolean} Whether or not this touch end event ends the responder.\n@@ -456,12 +469,8 @@ function noResponderTouches(nativeEvent) {\n var target = activeTouch.target;\n if (target !== null && target !== undefined && target !== 0) {\n \/\/ Is the original touch location inside of the current responder?\n- var isAncestor =\n- ReactInstanceHandles.isAncestorIDOf(\n- responderID,\n- EventPluginUtils.getID(target)\n- );\n- if (isAncestor) {\n+ var targetInst = EventPluginUtils.getInstanceFromNode(target);\n+ if (EventPluginUtils.isAncestor(responderInst, targetInst)) {\n return false;\n }\n }\n@@ -472,30 +481,24 @@ function noResponderTouches(nativeEvent) {\n \n var ResponderEventPlugin = {\n \n- getResponderID: function() {\n- return responderID;\n+ \/* For unit testing only *\/\n+ _getResponderID: function() {\n+ return responderInst ? responderInst._rootNodeID : null;\n },\n \n eventTypes: eventTypes,\n \n \/**\n- * We must be resilient to `topLevelTargetID` being `undefined` on\n- * `touchMove`, or `touchEnd`. On certain platforms, this means that a native\n- * scroll has assumed control and the original touch targets are destroyed.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {DOMEventTarget} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {*} An accumulation of synthetic events.\n- * @see {EventPluginHub.extractEvents}\n+ * We must be resilient to `targetInst` being `null` on `touchMove` or\n+ * `touchEnd`. On certain platforms, this means that a native scroll has\n+ * assumed control and the original touch targets are destroyed.\n *\/\n extractEvents: function(\n- topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n- nativeEvent,\n- nativeEventTarget) {\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget\n+ ) {\n if (isStartish(topLevelType)) {\n trackedTouchCount += 1;\n } else if (isEndish(topLevelType)) {\n@@ -508,10 +511,10 @@ var ResponderEventPlugin = {\n \n ResponderTouchHistoryStore.recordTouchTrack(topLevelType, nativeEvent, nativeEventTarget);\n \n- var extracted = canTriggerTransfer(topLevelType, topLevelTargetID) ?\n+ var extracted = canTriggerTransfer(topLevelType, targetInst) ?\n setResponderAndExtractTransfer(\n topLevelType,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) :\n null;\n@@ -525,9 +528,9 @@ var ResponderEventPlugin = {\n \/\/ These multiple individual change touch events are are always bookended\n \/\/ by `onResponderGrant`, and one of\n \/\/ (`onResponderRelease\/onResponderTerminate`).\n- var isResponderTouchStart = responderID && isStartish(topLevelType);\n- var isResponderTouchMove = responderID && isMoveish(topLevelType);\n- var isResponderTouchEnd = responderID && isEndish(topLevelType);\n+ var isResponderTouchStart = responderInst && isStartish(topLevelType);\n+ var isResponderTouchMove = responderInst && isMoveish(topLevelType);\n+ var isResponderTouchEnd = responderInst && isEndish(topLevelType);\n var incrementalTouch =\n isResponderTouchStart ? eventTypes.responderStart :\n isResponderTouchMove ? eventTypes.responderMove :\n@@ -538,7 +541,7 @@ var ResponderEventPlugin = {\n var gesture =\n ResponderSyntheticEvent.getPooled(\n incrementalTouch,\n- responderID,\n+ responderInst,\n nativeEvent,\n nativeEventTarget\n );\n@@ -548,10 +551,10 @@ var ResponderEventPlugin = {\n }\n \n var isResponderTerminate =\n- responderID &&\n+ responderInst &&\n topLevelType === EventConstants.topLevelTypes.topTouchCancel;\n var isResponderRelease =\n- responderID &&\n+ responderInst &&\n !isResponderTerminate &&\n isEndish(topLevelType) &&\n noResponderTouches(nativeEvent);\n@@ -560,8 +563,9 @@ var ResponderEventPlugin = {\n isResponderRelease ? eventTypes.responderRelease :\n null;\n if (finalTouch) {\n- var finalEvent =\n- ResponderSyntheticEvent.getPooled(finalTouch, responderID, nativeEvent, nativeEventTarget);\n+ var finalEvent = ResponderSyntheticEvent.getPooled(\n+ finalTouch, responderInst, nativeEvent, nativeEventTarget\n+ );\n finalEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;\n EventPropagators.accumulateDirectDispatches(finalEvent);\n extracted = accumulate(extracted, finalEvent);\ndiff --git a\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js b\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\nindex 21c719aabe..533fc15b22 100644\n--- a\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\n+++ b\/src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js\n@@ -17,11 +17,6 @@ var ReactInstanceHandles;\n var ResponderEventPlugin;\n var EventPluginUtils;\n \n-var GRANDPARENT_ID = '.0';\n-var PARENT_ID = '.0.0';\n-var CHILD_ID = '.0.0.0';\n-var CHILD_ID2 = '.0.0.1';\n-\n var topLevelTypes;\n \n var touch = function(nodeHandle, i) {\n@@ -89,8 +84,7 @@ var _touchConfig = function(\n changedTouchObjects\n ),\n topLevelType: topType,\n- target: targetNodeHandle,\n- targetID: targetNodeHandle,\n+ targetInst: idToInstance[targetNodeHandle],\n };\n };\n \n@@ -296,8 +290,7 @@ var run = function(config, hierarchyConfig, nativeEventConfig) {\n \/\/ Trigger the event\n var extractedEvents = ResponderEventPlugin.extractEvents(\n nativeEventConfig.topLevelType,\n- nativeEventConfig.target,\n- nativeEventConfig.targetID,\n+ nativeEventConfig.targetInst,\n nativeEventConfig.nativeEvent,\n nativeEventConfig.target\n );\n@@ -316,6 +309,16 @@ var run = function(config, hierarchyConfig, nativeEventConfig) {\n ); \/\/ +1 for extra ++\n };\n \n+var GRANDPARENT_ID = '.0';\n+var PARENT_ID = '.0.0';\n+var CHILD_ID = '.0.0.0';\n+var CHILD_ID2 = '.0.0.1';\n+\n+var idToInstance = {};\n+[GRANDPARENT_ID, PARENT_ID, CHILD_ID, CHILD_ID2].forEach(function(id) {\n+ idToInstance[id] = {_rootNodeID: id};\n+});\n+\n var three = {\n grandParent: GRANDPARENT_ID,\n parent: PARENT_ID,\n@@ -351,6 +354,39 @@ describe('ResponderEventPlugin', function() {\n },\n });\n \n+ EventPluginUtils.injection.injectComponentTree({\n+ getInstanceFromNode: function(id) {\n+ return idToInstance[id];\n+ },\n+ getNodeFromInstance: function(inst) {\n+ return inst._rootNodeID;\n+ },\n+ });\n+\n+ EventPluginUtils.injection.injectTreeTraversal({\n+ isAncestor: function(a, b) {\n+ return ReactInstanceHandles.isAncestorIDOf(\n+ a._rootNodeID,\n+ b._rootNodeID\n+ );\n+ },\n+ getLowestCommonAncestor: function(a, b) {\n+ if (!a || !b) {\n+ return null;\n+ }\n+ var commonID = ReactInstanceHandles.getFirstCommonAncestorID(\n+ a._rootNodeID,\n+ b._rootNodeID\n+ );\n+ return idToInstance[commonID] || null;\n+ },\n+ getParentInstance: function(inst) {\n+ var id = inst._rootNodeID;\n+ var parentID = id.substr(0, id.lastIndexOf('.'));\n+ return idToInstance[parentID] || null;\n+ },\n+ });\n+\n topLevelTypes = EventConstants.topLevelTypes;\n });\n \n@@ -363,12 +399,12 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.parent = {order: 4, returnVal: false};\n config.startShouldSetResponder.bubbled.grandParent = {order: 5, returnVal: false};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n \n \/\/ Now no handlers should be called on `touchEnd`.\n config = oneEventLoopTestConfig(three);\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -384,13 +420,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 1};\n config.responderStart.grandParent = {order: 2};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while capturing', () => {\n@@ -400,13 +436,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while capturing', () => {\n@@ -417,13 +453,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 3};\n config.responderStart.child = {order: 4};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while bubbling', () => {\n@@ -435,13 +471,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 4};\n config.responderStart.child = {order: 5};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while bubbling', () => {\n@@ -454,13 +490,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 5};\n config.responderStart.parent = {order: 6};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder grandParent while bubbling', () => {\n@@ -474,13 +510,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 6};\n config.responderStart.grandParent = {order: 7};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -506,13 +542,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 1};\n config.responderMove.grandParent = {order: 2};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while capturing move', () => {\n@@ -532,13 +568,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderMove.parent = {order: 3};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while capturing move', () => {\n@@ -559,13 +595,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 3};\n config.responderMove.child = {order: 4};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder child while bubbling move', () => {\n@@ -587,13 +623,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.child = {order: 4};\n config.responderMove.child = {order: 5};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n config.responderRelease.child = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder parent while bubbling move', () => {\n@@ -616,13 +652,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 5};\n config.responderMove.parent = {order: 6};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should grant responder grandParent while bubbling move', () => {\n@@ -646,13 +682,13 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.grandParent = {order: 6};\n config.responderMove.grandParent = {order: 7};\n run(config, three, moveConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -668,9 +704,9 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n- \/\/ While `PARENT_ID` is still responder, we create new handlers that verify\n+ \/\/ While `parent` is still responder, we create new handlers that verify\n \/\/ the ordering of propagation, restarting the count at `0`.\n config = oneEventLoopTestConfig(three);\n config.startShouldSetResponder.captured.grandParent = {order: 0, returnVal: false};\n@@ -678,13 +714,13 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.grandParent = {order: 1, returnVal: false};\n config.responderStart.parent = {order: 2};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.parent = {order: 0};\n config.responderRelease.parent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n it('should bubble negotiation to first common ancestor of responder then transfer', () => {\n@@ -694,7 +730,7 @@ describe('ResponderEventPlugin', function() {\n config.responderGrant.parent = {order: 2};\n config.responderStart.parent = {order: 3};\n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(PARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n config = oneEventLoopTestConfig(three);\n \n@@ -705,19 +741,19 @@ describe('ResponderEventPlugin', function() {\n config.responderTerminate.parent = {order: 3};\n config.responderStart.grandParent = {order: 4};\n run(config, three, startConfig(three.child, [three.child, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n \/\/ one remains\\ \/one ended \\\n run(config, three, endConfig(three.child, [three.child, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(GRANDPARENT_ID);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.grandParent);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.grandParent = {order: 0};\n config.responderRelease.grandParent = {order: 1};\n run(config, three, endConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \/**\n@@ -733,7 +769,7 @@ describe('ResponderEventPlugin', function() {\n config.startShouldSetResponder.bubbled.grandParent = {order: 3, returnVal: false};\n \n run(config, three, startConfig(three.parent, [three.parent], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n \n config = oneEventLoopTestConfig(three);\n \n@@ -749,7 +785,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \/\/ \/ Two active touches \\ \/one of them new\\\n run(config, three, startConfig(three.child, [three.parent, three.child], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now we remove the original first touch, keeping the second touch that\n@@ -759,7 +795,7 @@ describe('ResponderEventPlugin', function() {\n config.responderEnd.child = {order: 0};\n \/\/ \/ one ended\\ \/one remains \\\n run(config, three, endConfig(three.child, [three.parent, three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ Okay, now let's add back that first touch (nothing should change) and\n \/\/ then we'll try peeling back the touches in the opposite order to make\n@@ -775,7 +811,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 4};\n \/\/ \/ Two active touches \\ \/one of them new\\\n run(config, three, startConfig(three.parent, [three.child, three.parent], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now, move that new touch that had no effect, and did not start within\n@@ -790,7 +826,7 @@ describe('ResponderEventPlugin', function() {\n config.responderMove.child = {order: 4};\n \/\/ \/ Two active touches \\ \/one of them moved\\\n run(config, three, moveConfig(three.parent, [three.child, three.parent], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n config = oneEventLoopTestConfig(three);\n@@ -798,7 +834,7 @@ describe('ResponderEventPlugin', function() {\n config.responderRelease.child = {order: 1};\n \/\/ \/child end \\ \/parent remain\\\n run(config, three, endConfig(three.child, [three.child, three.parent], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n \n \n@@ -816,7 +852,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.childOne = {order: 4};\n \n run(config, siblings, startConfig(siblings.childOne, [siblings.childOne], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \/\/ If the touch target is the sibling item, the negotiation should only\n \/\/ propagate to first common ancestor of current responder and sibling (so\n@@ -829,7 +865,7 @@ describe('ResponderEventPlugin', function() {\n var touchConfig =\n startConfig(siblings.childTwo, [siblings.childOne, siblings.childTwo], [1]);\n run(config, siblings, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \n \/\/ move childOne\n@@ -838,7 +874,7 @@ describe('ResponderEventPlugin', function() {\n config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};\n config.responderMove.childOne = {order: 2};\n run(config, siblings, moveConfig(siblings.childOne, [siblings.childOne, siblings.childTwo], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n \/\/ move childTwo: Only negotiates to `parent`.\n config = oneEventLoopTestConfig(siblings);\n@@ -846,7 +882,7 @@ describe('ResponderEventPlugin', function() {\n config.moveShouldSetResponder.bubbled.parent = {order: 1, returnVal: false};\n config.responderMove.childOne = {order: 2};\n run(config, siblings, moveConfig(siblings.childTwo, [siblings.childOne, siblings.childTwo], [1]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(siblings.childOne);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(siblings.childOne);\n \n });\n \n@@ -862,7 +898,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ Suppose parent wants to become responder on move, and is rejected\n config = oneEventLoopTestConfig(three);\n@@ -877,7 +913,7 @@ describe('ResponderEventPlugin', function() {\n var touchConfig =\n moveConfig(three.child, [three.child], [0]);\n run(config, three, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.startShouldSetResponder.captured.grandParent = {order: 0, returnVal: false};\n@@ -891,7 +927,7 @@ describe('ResponderEventPlugin', function() {\n touchConfig =\n startConfig(three.child, [three.child, three.child], [1]);\n run(config, three, touchConfig);\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n });\n \n@@ -907,7 +943,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \/\/ If the touch target is the sibling item, the negotiation should only\n \/\/ propagate to first common ancestor of current responder and sibling (so\n@@ -921,11 +957,10 @@ describe('ResponderEventPlugin', function() {\n \n run(config, three, {\n topLevelType: topLevelTypes.topScroll,\n- target: three.parent,\n- targetID: three.parent,\n+ targetInst: idToInstance[three.parent],\n nativeEvent: {},\n });\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n \n \/\/ Now lets let the scroll take control this time.\n@@ -939,11 +974,10 @@ describe('ResponderEventPlugin', function() {\n \n run(config, three, {\n topLevelType: topLevelTypes.topScroll,\n- target: three.parent,\n- targetID: three.parent,\n+ targetInst: idToInstance[three.parent],\n nativeEvent: {},\n });\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.parent);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.parent);\n \n \n });\n@@ -959,7 +993,7 @@ describe('ResponderEventPlugin', function() {\n config.responderStart.child = {order: 5};\n \n run(config, three, startConfig(three.child, [three.child], [0]));\n- expect(ResponderEventPlugin.getResponderID()).toBe(three.child);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(three.child);\n \n config = oneEventLoopTestConfig(three);\n config.responderEnd.child = {order: 0};\n@@ -972,6 +1006,6 @@ describe('ResponderEventPlugin', function() {\n [0]\n );\n run(config, three, nativeEvent);\n- expect(ResponderEventPlugin.getResponderID()).toBe(null);\n+ expect(ResponderEventPlugin._getResponderID()).toBe(null);\n });\n });\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js b\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\nindex 6ab34f0050..9295e2675e 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js\n@@ -23,22 +23,15 @@ var ReactEventEmitterMixin = {\n \/**\n * Streams a fired top-level event to `EventPluginHub` where plugins have the\n * opportunity to create `ReactEvent`s to be dispatched.\n- *\n- * @param {string} topLevelType Record from `EventConstants`.\n- * @param {object} topLevelTarget The listening component root node.\n- * @param {string} topLevelTargetID ID of `topLevelTarget`.\n- * @param {object} nativeEvent Native environment event.\n *\/\n handleTopLevel: function(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget) {\n var events = EventPluginHub.extractEvents(\n topLevelType,\n- topLevelTarget,\n- topLevelTargetID,\n+ targetInst,\n nativeEvent,\n nativeEventTarget\n );\ndiff --git a\/src\/test\/ReactTestUtils.js b\/src\/test\/ReactTestUtils.js\nindex 8be0366f4b..464502638a 100644\n--- a\/src\/test\/ReactTestUtils.js\n+++ b\/src\/test\/ReactTestUtils.js\n@@ -18,12 +18,12 @@ var EventPluginRegistry = require('EventPluginRegistry');\n var EventPropagators = require('EventPropagators');\n var React = require('React');\n var ReactDOM = require('ReactDOM');\n+var ReactDOMComponentTree = require('ReactDOMComponentTree');\n var ReactElement = require('ReactElement');\n var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');\n var ReactCompositeComponent = require('ReactCompositeComponent');\n var ReactInstanceHandles = require('ReactInstanceHandles');\n var ReactInstanceMap = require('ReactInstanceMap');\n-var ReactMount = require('ReactMount');\n var ReactUpdates = require('ReactUpdates');\n var SyntheticEvent = require('SyntheticEvent');\n \n@@ -490,7 +490,7 @@ function makeSimulator(eventType) {\n \/\/ properly destroying any properties assigned from `eventData` upon release\n var event = new SyntheticEvent(\n dispatchConfig,\n- ReactMount.getID(node),\n+ ReactDOMComponentTree.getInstanceFromNode(node),\n fakeNativeEvent,\n node\n );\n","body":"Next step: take advantage of having the native instances in EventPropagators instead of converting right back to IDs.","files":[{"path":"src\/renderers\/dom\/client\/ReactDOMComponentTree.js","status":"M"},{"path":"src\/renderers\/dom\/client\/ReactDOMTreeTraversal.js","status":"A"},{"path":"src\/renderers\/dom\/client\/ReactEventListener.js","status":"M"},{"path":"src\/renderers\/dom\/client\/__tests__\/ReactBrowserEventEmitter-test.js","status":"M"},{"path":"src\/renderers\/dom\/client\/__tests__\/ReactEventListener-test.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/BeforeInputEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/ChangeEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/EnterLeaveEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/SelectEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/SimpleEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/TapEventPlugin.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/__tests__\/EnterLeaveEventPlugin-test.js","status":"M"},{"path":"src\/renderers\/dom\/client\/eventPlugins\/__tests__\/SelectEventPlugin-test.js","status":"M"},{"path":"src\/renderers\/dom\/client\/syntheticEvents\/SyntheticEvent.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/ReactDefaultInjection.js","status":"M"},{"path":"src\/renderers\/dom\/shared\/ReactInjection.js","status":"M"},{"path":"src\/renderers\/shared\/event\/EventPluginHub.js","status":"M"},{"path":"src\/renderers\/shared\/event\/EventPluginUtils.js","status":"M"},{"path":"src\/renderers\/shared\/event\/EventPropagators.js","status":"M"},{"path":"src\/renderers\/shared\/event\/eventPlugins\/ResponderEventPlugin.js","status":"M"},{"path":"src\/renderers\/shared\/event\/eventPlugins\/__tests__\/ResponderEventPlugin-test.js","status":"M"},{"path":"src\/renderers\/shared\/reconciler\/ReactEventEmitterMixin.js","status":"M"},{"path":"src\/test\/ReactTestUtils.js","status":"M"}],"commit":{"authoredAt":"2015-10-16T23:42:21-07:00","authorName":"Ben Alpert","shortRevision":"f470cb88f8","authorEmail":"balpert@fb.com","subject":"Events: Pass native instances up until propagation","revision":"f470cb88f88b4667419f170fcc7971dad4298494"}}

dillon1000/react

Files changed