{"body":"","parents":["ce528457a49306cf7b0fb4008e9c15aa8d68b93e"],"files":[{"status":"M","path":"src\/renderers\/dom\/client\/ReactDOMComponentTree.js"},{"status":"M","path":"src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js"},{"status":"M","path":"src\/renderers\/dom\/shared\/ReactDOMComponent.js"}],"patch":"diff --git a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\nindex 068c34a5e6..a2d0339a2e 100644\n--- a\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n+++ b\/src\/renderers\/dom\/client\/ReactDOMComponentTree.js\n@@ -19,6 +19,9 @@ var invariant = require('invariant');\n var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;\n var Flags = ReactDOMComponentFlags;\n \n+var internalInstanceKey =\n+ '__reactInternalInstance$' + Math.random().toString(36).slice(2);\n+\n \/**\n * Drill down (through composites and empty components) until we get a native or\n * native text component.\n@@ -41,6 +44,15 @@ function getRenderedNativeOrTextFromComponent(component) {\n function precacheNode(inst, node) {\n var nativeInst = getRenderedNativeOrTextFromComponent(inst);\n nativeInst._nativeNode = node;\n+ node[internalInstanceKey] = nativeInst;\n+}\n+\n+function uncacheNode(inst) {\n+ var node = inst._nativeNode;\n+ if (node) {\n+ delete node[internalInstanceKey];\n+ inst._nativeNode = null;\n+ }\n }\n \n \/**\n@@ -84,6 +96,53 @@ function precacheChildNodes(inst, node) {\n inst._flags |= Flags.hasCachedChildNodes;\n }\n \n+\/**\n+ * Given a DOM node, return the closest ReactDOMComponent or\n+ * ReactDOMTextComponent instance ancestor.\n+ *\/\n+function getClosestInstanceFromNode(node) {\n+ if (node[internalInstanceKey]) {\n+ return node[internalInstanceKey];\n+ }\n+\n+ \/\/ Walk up the tree until we find an ancestor whose instance we have cached.\n+ var parents = [];\n+ while (!node[internalInstanceKey]) {\n+ parents.push(node);\n+ if (node.parentNode) {\n+ node = node.parentNode;\n+ } else {\n+ \/\/ Top of the tree. This node must not be part of a React tree (or is\n+ \/\/ unmounted, potentially).\n+ return null;\n+ }\n+ }\n+\n+ var closest;\n+ var inst;\n+ for (; node && (inst = node[internalInstanceKey]); node = parents.pop()) {\n+ closest = inst;\n+ if (parents.length) {\n+ precacheChildNodes(inst, node);\n+ }\n+ }\n+\n+ return closest;\n+}\n+\n+\/**\n+ * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent\n+ * instance, or null if the node was not rendered by this React.\n+ *\/\n+function getInstanceFromNode(node) {\n+ var inst = getClosestInstanceFromNode(node);\n+ if (inst != null && inst._nativeNode === node) {\n+ return inst;\n+ } else {\n+ return null;\n+ }\n+}\n+\n \/**\n * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding\n * DOM node.\n@@ -114,9 +173,12 @@ function getNodeFromInstance(inst) {\n }\n \n var ReactDOMComponentTree = {\n+ getClosestInstanceFromNode: getClosestInstanceFromNode,\n+ getInstanceFromNode: getInstanceFromNode,\n getNodeFromInstance: getNodeFromInstance,\n precacheChildNodes: precacheChildNodes,\n precacheNode: precacheNode,\n+ uncacheNode: uncacheNode,\n };\n \n module.exports = ReactDOMComponentTree;\ndiff --git a\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js b\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\nindex 7c436199ed..3488447b9c 100644\n--- a\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\n+++ b\/src\/renderers\/dom\/client\/__tests__\/ReactDOMComponentTree-test.js\n@@ -14,6 +14,7 @@\n describe('ReactDOMComponentTree', function() {\n var React;\n var ReactDOM;\n+ var ReactDOMComponentTree;\n var ReactDOMServer;\n \n function renderMarkupIntoDocument(elt) {\n@@ -26,6 +27,7 @@ describe('ReactDOMComponentTree', function() {\n beforeEach(function() {\n React = require('React');\n ReactDOM = require('ReactDOM');\n+ ReactDOMComponentTree = require('ReactDOMComponentTree');\n ReactDOMServer = require('ReactDOMServer');\n });\n \n@@ -59,4 +61,49 @@ describe('ReactDOMComponentTree', function() {\n expect(renderAndGetRef('input')).toBe('INPUT');\n });\n \n+ it('finds instances for nodes', function() {\n+ var Component = React.createClass({\n+ render: function() {\n+ return (\n+

\n+

hello<\/h1>\n+
\n+ \n+ <\/p>\n+ goodbye.\n+
<\/b>'}} \/>\n+ <\/div>\n+ );\n+ },\n+ });\n+\n+ function renderAndQuery(sel) {\n+ var root = renderMarkupIntoDocument(
<\/section>);\n+ return sel ? root.querySelector(sel) : root;\n+ }\n+\n+ function renderAndGetInstance(sel) {\n+ return ReactDOMComponentTree.getInstanceFromNode(renderAndQuery(sel));\n+ }\n+\n+ function renderAndGetClosest(sel) {\n+ return ReactDOMComponentTree.getClosestInstanceFromNode(\n+ renderAndQuery(sel)\n+ );\n+ }\n+\n+ expect(renderAndGetInstance(null)._currentElement.type).toBe('section');\n+ expect(renderAndGetInstance('div')._currentElement.type).toBe('div');\n+ expect(renderAndGetInstance('h1')._currentElement.type).toBe('h1');\n+ expect(renderAndGetInstance('p')._currentElement.type).toBe('p');\n+ expect(renderAndGetInstance('input')._currentElement.type).toBe('input');\n+ expect(renderAndGetInstance('main')._currentElement.type).toBe('main');\n+\n+ \/\/ This one's a text component!\n+ expect(renderAndGetInstance('span')._stringText).toBe('goodbye.');\n+\n+ expect(renderAndGetClosest('b')._currentElement.type).toBe('main');\n+ expect(renderAndGetClosest('img')._currentElement.type).toBe('main');\n+ });\n+\n });\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\nindex e92898e6ee..7696be2865 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n@@ -82,7 +82,7 @@ if (DEV) {\n props: {\n enumerable: false,\n get: function() {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .props of a DOM node; instead, ' +\n@@ -99,7 +99,7 @@ if (DEV) {\n \n function legacyGetDOMNode() {\n if (DEV) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .getDOMNode() of a DOM node; ' +\n@@ -111,7 +111,7 @@ function legacyGetDOMNode() {\n }\n \n function legacyIsMounted() {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (DEV) {\n warning(\n false,\n@@ -124,7 +124,7 @@ function legacyIsMounted() {\n \n function legacySetStateEtc() {\n if (DEV) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n warning(\n false,\n 'ReactDOMComponent: Do not access .setState(), .replaceState(), or ' +\n@@ -135,7 +135,7 @@ function legacySetStateEtc() {\n }\n \n function legacySetProps(partialProps, callback) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (DEV) {\n warning(\n false,\n@@ -154,7 +154,7 @@ function legacySetProps(partialProps, callback) {\n }\n \n function legacyReplaceProps(partialProps, callback) {\n- var component = this._reactInternalComponent;\n+ var component = ReactDOMComponentTree.getInstanceFromNode(this);\n if (DEV) {\n warning(\n false,\n@@ -661,7 +661,7 @@ ReactDOMComponent.Mixin = {\n this._currentElement.type\n );\n }\n- this._nativeNode = el;\n+ ReactDOMComponentTree.precacheNode(this, el);\n this._flags |= Flags.hasCachedChildNodes;\n DOMPropertyOperations.setAttributeForID(el, this._rootNodeID);\n \/\/ Populate node cache\n@@ -1145,11 +1145,7 @@ ReactDOMComponent.Mixin = {\n break;\n }\n \n- if (this._flags & Flags.nodeHasLegacyProperties) {\n- this._nativeNode._reactInternalComponent = null;\n- }\n- this._nativeNode = null;\n-\n+ ReactDOMComponentTree.uncacheNode(this);\n this.unmountChildren();\n EventPluginHub.deleteAllListeners(this._rootNodeID);\n ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);\n@@ -1158,12 +1154,10 @@ ReactDOMComponent.Mixin = {\n },\n \n getPublicInstance: function() {\n+ var node = getNode(this);\n if (this._flags & Flags.nodeHasLegacyProperties) {\n- return this._nativeNode;\n+ return node;\n } else {\n- var node = getNode(this);\n-\n- node._reactInternalComponent = this;\n node.getDOMNode = legacyGetDOMNode;\n node.isMounted = legacyIsMounted;\n node.setState = legacySetStateEtc;\n","commit":{"subject":"Add functions to find the instance given a node","authorEmail":"balpert@fb.com","authorName":"Ben Alpert","shortRevision":"6d20556c78","revision":"6d20556c78df6904254b8438bb588f7722ea602f","authoredAt":"2015-10-15T21:29:22-07:00"}}

dillon1000/react

Files changed