);\n-\n- stub.receiveComponent({props: { className: 'foo' }}, transaction);\n- expect(stub.getDOMNode().className).toEqual('foo');\n- stub.receiveComponent({props: { className: 'bar' }}, transaction);\n- expect(stub.getDOMNode().className).toEqual('bar');\n- stub.receiveComponent({props: { className: null }}, transaction);\n- expect(stub.getDOMNode().className).toEqual('');\n+ var container = document.createElement('div');\n+ React.render(

, container);\n+\n+ React.render(

, container);\n+ expect(container.firstChild.className).toEqual('foo');\n+ React.render(

, container);\n+ expect(container.firstChild.className).toEqual('bar');\n+ React.render(

, container);\n+ expect(container.firstChild.className).toEqual('');\n });\n \n it(\"should gracefully handle various style value types\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(

);\n- var stubStyle = stub.getDOMNode().style;\n+ var container = document.createElement('div');\n+ React.render(

, container);\n+ var stubStyle = container.firstChild.style;\n \n \/\/ set initial style\n var setup = { display: 'block', left: '1', top: 2, fontFamily: 'Arial' };\n- stub.receiveComponent({props: { style: setup }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.left).toEqual('1px');\n expect(stubStyle.fontFamily).toEqual('Arial');\n \n \/\/ reset the style to their default state\n var reset = { display: '', left: null, top: false, fontFamily: true };\n- stub.receiveComponent({props: { style: reset }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.left).toEqual('');\n expect(stubStyle.top).toEqual('');\n@@ -64,34 +62,35 @@ describe('ReactDOMComponent', function() {\n \n it(\"should update styles when mutating style object\", function() {\n var styles = { display: 'none', fontFamily: 'Arial', lineHeight: 1.2 };\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- var stubStyle = stub.getDOMNode().style;\n+ var stubStyle = container.firstChild.style;\n stubStyle.display = styles.display;\n stubStyle.fontFamily = styles.fontFamily;\n \n styles.display = 'block';\n \n- stub.receiveComponent({props: { style: styles }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.fontFamily).toEqual('Arial');\n expect(stubStyle.lineHeight).toEqual('1.2');\n \n styles.fontFamily = 'Helvetica';\n \n- stub.receiveComponent({props: { style: styles }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.fontFamily).toEqual('Helvetica');\n expect(stubStyle.lineHeight).toEqual('1.2');\n \n styles.lineHeight = 0.5;\n \n- stub.receiveComponent({props: { style: styles }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('block');\n expect(stubStyle.fontFamily).toEqual('Helvetica');\n expect(stubStyle.lineHeight).toEqual('0.5');\n \n- stub.receiveComponent({props: { style: undefined }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toBe('');\n expect(stubStyle.fontFamily).toBe('');\n expect(stubStyle.lineHeight).toBe('');\n@@ -99,92 +98,96 @@ describe('ReactDOMComponent', function() {\n \n it(\"should update styles if initially null\", function() {\n var styles = null;\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- var stubStyle = stub.getDOMNode().style;\n+ var stubStyle = container.firstChild.style;\n \n styles = {display: 'block'};\n \n- stub.receiveComponent({props: { style: styles }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('block');\n });\n \n it(\"should remove attributes\", function() {\n- var stub = ReactTestUtils.renderIntoDocument();\n+ var container = document.createElement('div');\n+ React.render(, container);\n \n- expect(stub.getDOMNode().hasAttribute('height')).toBe(true);\n- stub.receiveComponent({props: {}}, transaction);\n- expect(stub.getDOMNode().hasAttribute('height')).toBe(false);\n+ expect(container.firstChild.hasAttribute('height')).toBe(true);\n+ React.render(, container);\n+ expect(container.firstChild.hasAttribute('height')).toBe(false);\n });\n \n it(\"should remove properties\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- expect(stub.getDOMNode().className).toEqual('monkey');\n- stub.receiveComponent({props: {}}, transaction);\n- expect(stub.getDOMNode().className).toEqual('');\n+ expect(container.firstChild.className).toEqual('monkey');\n+ React.render(

, container);\n+ expect(container.firstChild.className).toEqual('');\n });\n \n it(\"should clear a single style prop when changing 'style'\", function() {\n var styles = {display: 'none', color: 'red'};\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- var stubStyle = stub.getDOMNode().style;\n+ var stubStyle = container.firstChild.style;\n \n styles = {color: 'green'};\n- stub.receiveComponent({props: { style: styles }}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.color).toEqual('green');\n });\n \n it(\"should clear all the styles when removing 'style'\", function() {\n var styles = {display: 'none', color: 'red'};\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- var stubStyle = stub.getDOMNode().style;\n+ var stubStyle = container.firstChild.style;\n \n- stub.receiveComponent({props: {}}, transaction);\n+ React.render(

, container);\n expect(stubStyle.display).toEqual('');\n expect(stubStyle.color).toEqual('');\n });\n \n it(\"should empty element when removing innerHTML\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(\n-

\n- );\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- expect(stub.getDOMNode().innerHTML).toEqual(':)');\n- stub.receiveComponent({props: {}}, transaction);\n- expect(stub.getDOMNode().innerHTML).toEqual('');\n+ expect(container.firstChild.innerHTML).toEqual(':)');\n+ React.render(

, container);\n+ expect(container.firstChild.innerHTML).toEqual('');\n });\n \n it(\"should transition from string content to innerHTML\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(\n-

hello<\/div>\n- );\n+ var container = document.createElement('div');\n+ React.render(

hello<\/div>, container);\n \n- expect(stub.getDOMNode().innerHTML).toEqual('hello');\n- stub.receiveComponent(\n- {props: {dangerouslySetInnerHTML: {__html: 'goodbye'}}},\n- transaction\n+ expect(container.firstChild.innerHTML).toEqual('hello');\n+ React.render(\n+

,\n+ container\n );\n- expect(stub.getDOMNode().innerHTML).toEqual('goodbye');\n+ expect(container.firstChild.innerHTML).toEqual('goodbye');\n });\n \n it(\"should transition from innerHTML to string content\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(\n-

\n- );\n+ var container = document.createElement('div');\n+ React.render(

\n+ , container);\n \n- expect(stub.getDOMNode().innerHTML).toEqual('bonjour');\n- stub.receiveComponent({props: {children: 'adieu'}}, transaction);\n- expect(stub.getDOMNode().innerHTML).toEqual('adieu');\n+ expect(container.firstChild.innerHTML).toEqual('bonjour');\n+ React.render(

adieu<\/div>, container);\n+ expect(container.firstChild.innerHTML).toEqual('adieu');\n });\n \n it(\"should not incur unnecessary DOM mutations\", function() {\n- var stub = ReactTestUtils.renderIntoDocument(

);\n+ var container = document.createElement('div');\n+ React.render(

, container);\n \n- var node = stub.getDOMNode();\n+ var node = container.firstChild;\n var nodeValue = ''; \/\/ node.value always returns undefined\n var nodeValueSetter = mocks.getMockFunction();\n Object.defineProperty(node, 'value', {\n@@ -196,10 +199,10 @@ describe('ReactDOMComponent', function() {\n })\n });\n \n- stub.receiveComponent({props: {value: ''}}, transaction);\n+ React.render(

, container);\n expect(nodeValueSetter.mock.calls.length).toBe(0);\n \n- stub.receiveComponent({props: {}}, transaction);\n+ React.render(

, container);\n expect(nodeValueSetter.mock.calls.length).toBe(1);\n });\n });\ndiff --git a\/src\/browser\/ui\/__tests__\/ReactRenderDocument-test.js b\/src\/browser\/ui\/__tests__\/ReactRenderDocument-test.js\nindex 7ebeb2a7c0..b0c644c3a9 100644\n--- a\/src\/browser\/ui\/__tests__\/ReactRenderDocument-test.js\n+++ b\/src\/browser\/ui\/__tests__\/ReactRenderDocument-test.js\n@@ -14,6 +14,7 @@\n \"use strict\";\n \n var React;\n+var ReactInstanceMap;\n var ReactMount;\n \n var getTestDocument;\n@@ -32,6 +33,7 @@ describe('rendering React components at document', function() {\n require('mock-modules').dumpCache();\n \n React = require('React');\n+ ReactInstanceMap = require('ReactInstanceMap');\n ReactMount = require('ReactMount');\n getTestDocument = require('getTestDocument');\n \n@@ -61,8 +63,10 @@ describe('rendering React components at document', function() {\n var component = React.render(, testDocument);\n expect(testDocument.body.innerHTML).toBe('Hello world');\n \n+ \/\/ TODO: This is a bad test. I have no idea what this is testing.\n+ \/\/ Node IDs is an implementation detail and not part of the public API.\n var componentID = ReactMount.getReactRootID(testDocument);\n- expect(componentID).toBe(component._rootNodeID);\n+ expect(componentID).toBe(ReactInstanceMap.get(component)._rootNodeID);\n });\n \n it('should not be able to unmount component from document node', function() {\ndiff --git a\/src\/class\/ReactClass.js b\/src\/class\/ReactClass.js\nindex 13ed707fb5..74e424eb4f 100644\n--- a\/src\/class\/ReactClass.js\n+++ b\/src\/class\/ReactClass.js\n@@ -11,8 +11,10 @@\n \n \"use strict\";\n \n-var ReactCompositeComponent = require('ReactCompositeComponent');\n var ReactElement = require('ReactElement');\n+var ReactErrorUtils = require('ReactErrorUtils');\n+var ReactInstanceMap = require('ReactInstanceMap');\n+var ReactPropTransferer = require('ReactPropTransferer');\n var ReactPropTypeLocations = require('ReactPropTypeLocations');\n var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');\n \n@@ -22,6 +24,7 @@ var keyMirror = require('keyMirror');\n var keyOf = require('keyOf');\n var monitorCodeUse = require('monitorCodeUse');\n var mapObject = require('mapObject');\n+var warning = require('warning');\n \n var MIXINS_KEY = keyOf({mixins: null});\n \n@@ -398,7 +401,7 @@ function validateMethodOverride(proto, name) {\n null;\n \n \/\/ Disallow overriding of base class methods unless explicitly allowed.\n- if (ReactCompositeComponent.Base.prototype.hasOwnProperty(name)) {\n+ if (ReactClassMixin.hasOwnProperty(name)) {\n invariant(\n specPolicy === SpecPolicy.OVERRIDE_BASE,\n 'ReactClassInterface: You are attempting to override ' +\n@@ -621,6 +624,218 @@ function createChainedFunction(one, two) {\n };\n }\n \n+\/**\n+ * Binds a method to the component.\n+ *\n+ * @param {object} component Component whose method is going to be bound.\n+ * @param {function} method Method to be bound.\n+ * @return {function} The bound method.\n+ *\/\n+function bindAutoBindMethod(component, method) {\n+ var boundMethod = method.bind(component);\n+ if (__DEV__) {\n+ boundMethod.__reactBoundContext = component;\n+ boundMethod.__reactBoundMethod = method;\n+ boundMethod.__reactBoundArguments = null;\n+ var componentName = component.constructor.displayName;\n+ var _bind = boundMethod.bind;\n+ boundMethod.bind = function(newThis, ...args) {\n+ \/\/ User is trying to bind() an autobound method; we effectively will\n+ \/\/ ignore the value of \"this\" that the user is trying to use, so\n+ \/\/ let's warn.\n+ if (newThis !== component && newThis !== null) {\n+ monitorCodeUse('react_bind_warning', { component: componentName });\n+ console.warn(\n+ 'bind(): React component methods may only be bound to the ' +\n+ 'component instance. See ' + componentName\n+ );\n+ } else if (!args.length) {\n+ monitorCodeUse('react_bind_warning', { component: componentName });\n+ console.warn(\n+ 'bind(): You are binding a component method to the component. ' +\n+ 'React does this for you automatically in a high-performance ' +\n+ 'way, so you can safely remove this call. See ' + componentName\n+ );\n+ return boundMethod;\n+ }\n+ var reboundMethod = _bind.apply(boundMethod, arguments);\n+ reboundMethod.__reactBoundContext = component;\n+ reboundMethod.__reactBoundMethod = method;\n+ reboundMethod.__reactBoundArguments = args;\n+ return reboundMethod;\n+ };\n+ }\n+ return boundMethod;\n+}\n+\n+\/**\n+ * Binds all auto-bound methods in a component.\n+ *\n+ * @param {object} component Component whose method is going to be bound.\n+ *\/\n+function bindAutoBindMethods(component) {\n+ for (var autoBindKey in component.__reactAutoBindMap) {\n+ if (component.__reactAutoBindMap.hasOwnProperty(autoBindKey)) {\n+ var method = component.__reactAutoBindMap[autoBindKey];\n+ component[autoBindKey] = bindAutoBindMethod(\n+ component,\n+ ReactErrorUtils.guard(\n+ method,\n+ component.constructor.displayName + '.' + autoBindKey\n+ )\n+ );\n+ }\n+ }\n+}\n+\n+\/**\n+ * @lends {ReactClass.prototype}\n+ *\/\n+var ReactClassMixin = {\n+\n+ \/**\n+ * Sets a subset of the state. Always use this or `replaceState` to mutate\n+ * state. You should treat `this.state` as immutable.\n+ *\n+ * There is no guarantee that `this.state` will be immediately updated, so\n+ * accessing `this.state` after calling this method may return the old value.\n+ *\n+ * There is no guarantee that calls to `setState` will run synchronously,\n+ * as they may eventually be batched together. You can provide an optional\n+ * callback that will be executed when the call to setState is actually\n+ * completed.\n+ *\n+ * @param {object} partialState Next partial state to be merged with state.\n+ * @param {?function} callback Called after state is updated.\n+ * @final\n+ * @protected\n+ *\/\n+ setState: function(partialState, callback) {\n+ invariant(\n+ typeof partialState === 'object' || partialState == null,\n+ 'setState(...): takes an object of state variables to update.'\n+ );\n+ if (__DEV__) {\n+ warning(\n+ partialState != null,\n+ 'setState(...): You passed an undefined or null state object; ' +\n+ 'instead, use forceUpdate().'\n+ );\n+ }\n+ var internalInstance = ReactInstanceMap.get(this);\n+ invariant(\n+ internalInstance,\n+ 'setState(...): Can only update a mounted or mounting component.'\n+ );\n+ internalInstance.setState(\n+ partialState, callback && callback.bind(this)\n+ );\n+ },\n+\n+ \/**\n+ * TODO: This will be deprecated because state should always keep a consistent\n+ * type signature and the only use case for this, is to avoid that.\n+ *\/\n+ replaceState: function(newState, callback) {\n+ var internalInstance = ReactInstanceMap.get(this);\n+ invariant(\n+ internalInstance,\n+ 'replaceState(...): Can only update a mounted or mounting component.'\n+ );\n+ internalInstance.replaceState(\n+ newState,\n+ callback && callback.bind(this)\n+ );\n+ },\n+\n+ \/**\n+ * Forces an update. This should only be invoked when it is known with\n+ * certainty that we are **not** in a DOM transaction.\n+ *\n+ * You may want to call this when you know that some deeper aspect of the\n+ * component's state has changed but `setState` was not called.\n+ *\n+ * This will not invoke `shouldUpdateComponent`, but it will invoke\n+ * `componentWillUpdate` and `componentDidUpdate`.\n+ *\n+ * @param {?function} callback Called after update is complete.\n+ * @final\n+ * @protected\n+ *\/\n+ forceUpdate: function(callback) {\n+ var internalInstance = ReactInstanceMap.get(this);\n+ invariant(\n+ internalInstance,\n+ 'forceUpdate(...): Can only force an update on mounted or mounting ' +\n+ 'components.'\n+ );\n+ internalInstance.forceUpdate(callback && callback.bind(this));\n+ },\n+\n+ \/**\n+ * Checks whether or not this composite component is mounted.\n+ * @return {boolean} True if mounted, false otherwise.\n+ * @protected\n+ * @final\n+ *\/\n+ isMounted: function() {\n+ var internalInstance = ReactInstanceMap.get(this);\n+ \/\/ In theory, isMounted is always true if it exists in the map.\n+ \/\/ TODO: Remove the internal isMounted method.\n+ return internalInstance && internalInstance.isMounted();\n+ },\n+\n+ \/**\n+ * Sets a subset of the props.\n+ *\n+ * @param {object} partialProps Subset of the next props.\n+ * @param {?function} callback Called after props are updated.\n+ * @final\n+ * @public\n+ * @deprecated\n+ *\/\n+ setProps: function(partialProps, callback) {\n+ var internalInstance = ReactInstanceMap.get(this);\n+ invariant(\n+ internalInstance,\n+ 'setProps(...): Can only update a mounted component.'\n+ );\n+ internalInstance.setProps(\n+ partialProps,\n+ callback && callback.bind(this)\n+ );\n+ },\n+\n+ \/**\n+ * Replace all the props.\n+ *\n+ * @param {object} newProps Subset of the next props.\n+ * @param {?function} callback Called after props are updated.\n+ * @final\n+ * @public\n+ * @deprecated\n+ *\/\n+ replaceProps: function(newProps, callback) {\n+ ReactInstanceMap.get(this).replaceProps(\n+ newProps,\n+ callback && callback.bind(this)\n+ );\n+ }\n+};\n+\n+var ReactClassBase = function() {};\n+assign(\n+ ReactClassBase.prototype,\n+ ReactPropTransferer.Mixin,\n+ ReactClassMixin\n+);\n+\n+\/**\n+ * Module for creating composite components.\n+ *\n+ * @class ReactClass\n+ * @extends ReactPropTransferer\n+ *\/\n var ReactClass = {\n \n \/**\n@@ -633,10 +848,14 @@ var ReactClass = {\n createClass: function(spec) {\n var Constructor = function(props) {\n \/\/ This constructor is overridden by mocks. The argument is used\n- \/\/ by mocks to assert on what gets mounted. This will later be used\n- \/\/ by the stand-alone class implementation.\n+ \/\/ by mocks to assert on what gets mounted.\n+\n+ \/\/ Wire up auto-binding\n+ if (this.__reactAutoBindMap) {\n+ bindAutoBindMethods(this);\n+ }\n };\n- Constructor.prototype = new ReactCompositeComponent.Base();\n+ Constructor.prototype = new ReactClassBase();\n Constructor.prototype.constructor = Constructor;\n \n injectedMixins.forEach(\ndiff --git a\/src\/core\/ReactComponent.js b\/src\/core\/ReactComponent.js\nindex 7a7b9688d1..2e400d3e20 100644\n--- a\/src\/core\/ReactComponent.js\n+++ b\/src\/core\/ReactComponent.js\n@@ -442,6 +442,18 @@ var ReactComponent = {\n return null;\n }\n return owner.refs[ref];\n+ },\n+\n+ \/**\n+ * Get the publicly accessible representation of this component - i.e. what\n+ * is exposed by refs and renderComponent. Can be null for stateless\n+ * components.\n+ *\n+ * @return {?ReactComponent} the actual sibling Component.\n+ * @internal\n+ *\/\n+ getPublicInstance: function() {\n+ return this;\n }\n }\n };\ndiff --git a\/src\/core\/ReactCompositeComponent.js b\/src\/core\/ReactCompositeComponent.js\nindex 0c1f187e14..b78909c6bd 100644\n--- a\/src\/core\/ReactCompositeComponent.js\n+++ b\/src\/core\/ReactCompositeComponent.js\n@@ -16,37 +16,31 @@ var ReactContext = require('ReactContext');\n var ReactCurrentOwner = require('ReactCurrentOwner');\n var ReactElement = require('ReactElement');\n var ReactEmptyComponent = require('ReactEmptyComponent');\n-var ReactErrorUtils = require('ReactErrorUtils');\n+var ReactInstanceMap = require('ReactInstanceMap');\n var ReactOwner = require('ReactOwner');\n var ReactPerf = require('ReactPerf');\n-var ReactPropTransferer = require('ReactPropTransferer');\n var ReactPropTypeLocations = require('ReactPropTypeLocations');\n var ReactUpdates = require('ReactUpdates');\n \n var assign = require('Object.assign');\n-var instantiateReactComponent = require('instantiateReactComponent');\n var invariant = require('invariant');\n var keyMirror = require('keyMirror');\n-var monitorCodeUse = require('monitorCodeUse');\n var shouldUpdateReactComponent = require('shouldUpdateReactComponent');\n var warning = require('warning');\n \n function getDeclarationErrorAddendum(component) {\n var owner = component._owner || null;\n- if (owner && owner.constructor && owner.constructor.displayName) {\n- return ' Check the render method of `' + owner.constructor.displayName +\n- '`.';\n+ if (owner) {\n+ var constructor = owner._instance.constructor;\n+ if (constructor && constructor.displayName) {\n+ return ' Check the render method of `' + constructor.displayName + '`.';\n+ }\n }\n return '';\n }\n \n function validateLifeCycleOnReplaceState(instance) {\n var compositeLifeCycleState = instance._compositeLifeCycleState;\n- invariant(\n- instance.isMounted() ||\n- compositeLifeCycleState === CompositeLifeCycle.MOUNTING,\n- 'replaceState(...): Can only update a mounted or mounting component.'\n- );\n invariant(\n ReactCurrentOwner.current == null,\n 'replaceState(...): Cannot update during an existing state transition ' +\n@@ -106,7 +100,9 @@ var CompositeLifeCycle = keyMirror({\n \/**\n * @lends {ReactCompositeComponent.prototype}\n *\/\n-var ReactCompositeComponentMixin = {\n+var ReactCompositeComponentMixin = assign({},\n+ ReactComponent.Mixin,\n+ ReactOwner.Mixin, {\n \n \/**\n * Base constructor for all composite component.\n@@ -116,18 +112,16 @@ var ReactCompositeComponentMixin = {\n * @internal\n *\/\n construct: function(element) {\n- \/\/ Children can be either an array or more than one argument\n- ReactComponent.Mixin.construct.apply(this, arguments);\n- ReactOwner.Mixin.construct.apply(this, arguments);\n+ this._instance.props = element.props;\n+ this._instance.state = null;\n+ this._instance.context = null;\n \n- this.state = null;\n this._pendingState = null;\n-\n- \/\/ This is the public post-processed context. The real context and pending\n- \/\/ context lives on the element.\n- this.context = null;\n-\n this._compositeLifeCycleState = null;\n+\n+ \/\/ Children can be either an array or more than one argument\n+ ReactComponent.Mixin.construct.apply(this, arguments);\n+ ReactOwner.Mixin.construct.apply(this, arguments);\n },\n \n \/**\n@@ -161,47 +155,48 @@ var ReactCompositeComponentMixin = {\n transaction,\n mountDepth\n );\n- this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;\n \n- if (this.__reactAutoBindMap) {\n- this._bindAutoBindMethods();\n- }\n+ var inst = this._instance;\n+\n+ \/\/ Store a reference from the instance back to the internal representation\n+ ReactInstanceMap.set(inst, this);\n \n- this.context = this._processContext(this._currentElement._context);\n- this.props = this._processProps(this.props);\n+ this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;\n \n- this.state = this.getInitialState ? this.getInitialState() : null;\n+ inst.context = this._processContext(this._currentElement._context);\n+ inst.props = this._processProps(this._currentElement.props);\n \n+ var initialState = inst.getInitialState ? inst.getInitialState() : null;\n if (__DEV__) {\n \/\/ We allow auto-mocks to proceed as if they're returning null.\n- if (typeof this.state === 'undefined' &&\n- this.getInitialState && this.getInitialState._isMockFunction) {\n+ if (typeof initialState === 'undefined' &&\n+ inst.getInitialState._isMockFunction) {\n \/\/ This is probably bad practice. Consider warning here and\n \/\/ deprecating this convenience.\n- this.state = null;\n+ initialState = null;\n }\n }\n-\n invariant(\n- typeof this.state === 'object' && !Array.isArray(this.state),\n+ typeof initialState === 'object' && !Array.isArray(initialState),\n '%s.getInitialState(): must return an object or null',\n- this.constructor.displayName || 'ReactCompositeComponent'\n+ inst.constructor.displayName || 'ReactCompositeComponent'\n );\n+ inst.state = initialState;\n \n this._pendingState = null;\n this._pendingForceUpdate = false;\n \n- if (this.componentWillMount) {\n- this.componentWillMount();\n+ if (inst.componentWillMount) {\n+ inst.componentWillMount();\n \/\/ When mounting, calls to `setState` by `componentWillMount` will set\n \/\/ `this._pendingState` without triggering a re-render.\n if (this._pendingState) {\n- this.state = this._pendingState;\n+ inst.state = this._pendingState;\n this._pendingState = null;\n }\n }\n \n- this._renderedComponent = instantiateReactComponent(\n+ this._renderedComponent = this._instantiateReactComponent(\n this._renderValidatedComponent(),\n this._currentElement.type \/\/ The wrapping type\n );\n@@ -213,8 +208,8 @@ var ReactCompositeComponentMixin = {\n transaction,\n mountDepth + 1\n );\n- if (this.componentDidMount) {\n- transaction.getReactMountReady().enqueue(this.componentDidMount, this);\n+ if (inst.componentDidMount) {\n+ transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);\n }\n return markup;\n }\n@@ -227,9 +222,11 @@ var ReactCompositeComponentMixin = {\n * @internal\n *\/\n unmountComponent: function() {\n+ var inst = this._instance;\n+\n this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;\n- if (this.componentWillUnmount) {\n- this.componentWillUnmount();\n+ if (inst.componentWillUnmount) {\n+ inst.componentWillUnmount();\n }\n this._compositeLifeCycleState = null;\n \n@@ -238,23 +235,23 @@ var ReactCompositeComponentMixin = {\n \n ReactComponent.Mixin.unmountComponent.call(this);\n \n- \/\/ Some existing components rely on this.props even after they've been\n+ \/\/ Delete the reference from the instance to this internal representation\n+ \/\/ which allow the internals to be properly cleaned up even if the user\n+ \/\/ leaks a reference to the public instance.\n+ ReactInstanceMap.remove(inst);\n+\n+ \/\/ Some existing components rely on inst.props even after they've been\n \/\/ destroyed (in event handlers).\n- \/\/ TODO: this.props = null;\n- \/\/ TODO: this.state = null;\n+ \/\/ TODO: inst.props = null;\n+ \/\/ TODO: inst.state = null;\n+ \/\/ TODO: inst.context = null;\n },\n \n \/**\n- * Sets a subset of the state. Always use this or `replaceState` to mutate\n- * state. You should treat `this.state` as immutable.\n- *\n- * There is no guarantee that `this.state` will be immediately updated, so\n- * accessing `this.state` after calling this method may return the old value.\n- *\n- * There is no guarantee that calls to `setState` will run synchronously,\n- * as they may eventually be batched together. You can provide an optional\n- * callback that will be executed when the call to setState is actually\n- * completed.\n+ * Sets a subset of the state. This only exists because _pendingState is\n+ * internal. This provides a merging strategy that is not available to deep\n+ * properties which is confusing. TODO: Expose pendingState or don't use it\n+ * during the merge.\n *\n * @param {object} partialState Next partial state to be merged with state.\n * @param {?function} callback Called after state is updated.\n@@ -262,20 +259,9 @@ var ReactCompositeComponentMixin = {\n * @protected\n *\/\n setState: function(partialState, callback) {\n- invariant(\n- typeof partialState === 'object' || partialState == null,\n- 'setState(...): takes an object of state variables to update.'\n- );\n- if (__DEV__){\n- warning(\n- partialState != null,\n- 'setState(...): You passed an undefined or null state object; ' +\n- 'instead, use forceUpdate().'\n- );\n- }\n \/\/ Merge with `_pendingState` if it exists, otherwise with existing state.\n this.replaceState(\n- assign({}, this._pendingState || this.state, partialState),\n+ assign({}, this._pendingState || this._instance.state, partialState),\n callback\n );\n },\n@@ -306,6 +292,32 @@ var ReactCompositeComponentMixin = {\n }\n },\n \n+ \/**\n+ * Forces an update. This should only be invoked when it is known with\n+ * certainty that we are **not** in a DOM transaction.\n+ *\n+ * You may want to call this when you know that some deeper aspect of the\n+ * component's state has changed but `setState` was not called.\n+ *\n+ * This will not invoke `shouldUpdateComponent`, but it will invoke\n+ * `componentWillUpdate` and `componentDidUpdate`.\n+ *\n+ * @param {?function} callback Called after update is complete.isM\n+ * @final\n+ * @protected\n+ *\/\n+ forceUpdate: function(callback) {\n+ var compositeLifeCycleState = this._compositeLifeCycleState;\n+ invariant(\n+ compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&\n+ compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,\n+ 'forceUpdate(...): Cannot force an update while unmounting component ' +\n+ 'or during an existing state transition (such as within `render`).'\n+ );\n+ this._pendingForceUpdate = true;\n+ ReactUpdates.enqueueUpdate(this, callback);\n+ },\n+\n \/**\n * Filters the context object to only contain keys specified in\n * `contextTypes`, and asserts that they are valid.\n@@ -316,7 +328,7 @@ var ReactCompositeComponentMixin = {\n *\/\n _processContext: function(context) {\n var maskedContext = null;\n- var contextTypes = this.constructor.contextTypes;\n+ var contextTypes = this._instance.constructor.contextTypes;\n if (contextTypes) {\n maskedContext = {};\n for (var contextName in contextTypes) {\n@@ -339,25 +351,26 @@ var ReactCompositeComponentMixin = {\n * @private\n *\/\n _processChildContext: function(currentContext) {\n- var childContext = this.getChildContext && this.getChildContext();\n- var displayName = this.constructor.displayName || 'ReactCompositeComponent';\n+ var inst = this._instance;\n+ var childContext = inst.getChildContext && inst.getChildContext();\n+ var displayName = inst.constructor.displayName || 'ReactCompositeComponent';\n if (childContext) {\n invariant(\n- typeof this.constructor.childContextTypes === 'object',\n+ typeof inst.constructor.childContextTypes === 'object',\n '%s.getChildContext(): childContextTypes must be defined in order to ' +\n 'use getChildContext().',\n displayName\n );\n if (__DEV__) {\n this._checkPropTypes(\n- this.constructor.childContextTypes,\n+ inst.constructor.childContextTypes,\n childContext,\n ReactPropTypeLocations.childContext\n );\n }\n for (var name in childContext) {\n invariant(\n- name in this.constructor.childContextTypes,\n+ name in inst.constructor.childContextTypes,\n '%s.getChildContext(): key \"%s\" is not defined in childContextTypes.',\n displayName,\n name\n@@ -379,7 +392,8 @@ var ReactCompositeComponentMixin = {\n *\/\n _processProps: function(newProps) {\n if (__DEV__) {\n- var propTypes = this.constructor.propTypes;\n+ var inst = this._instance;\n+ var propTypes = inst.constructor.propTypes;\n if (propTypes) {\n this._checkPropTypes(propTypes, newProps, ReactPropTypeLocations.prop);\n }\n@@ -398,7 +412,7 @@ var ReactCompositeComponentMixin = {\n _checkPropTypes: function(propTypes, props, location) {\n \/\/ TODO: Stop validating prop types here and only use the element\n \/\/ validation.\n- var componentName = this.constructor.displayName;\n+ var componentName = this._instance.constructor.displayName;\n for (var propName in propTypes) {\n if (propTypes.hasOwnProperty(propName)) {\n var error =\n@@ -497,8 +511,10 @@ var ReactCompositeComponentMixin = {\n nextParentElement\n );\n \n- var prevContext = this.context;\n- var prevProps = this.props;\n+ var inst = this._instance;\n+\n+ var prevContext = inst.context;\n+ var prevProps = inst.props;\n var nextContext = prevContext;\n var nextProps = prevProps;\n \/\/ Distinguish between a props update versus a simple state update\n@@ -507,25 +523,25 @@ var ReactCompositeComponentMixin = {\n nextProps = this._processProps(nextParentElement.props);\n \n this._compositeLifeCycleState = CompositeLifeCycle.RECEIVING_PROPS;\n- if (this.componentWillReceiveProps) {\n- this.componentWillReceiveProps(nextProps, nextContext);\n+ if (inst.componentWillReceiveProps) {\n+ inst.componentWillReceiveProps(nextProps, nextContext);\n }\n }\n \n this._compositeLifeCycleState = null;\n \n- var nextState = this._pendingState || this.state;\n+ var nextState = this._pendingState || inst.state;\n this._pendingState = null;\n \n var shouldUpdate =\n this._pendingForceUpdate ||\n- !this.shouldComponentUpdate ||\n- this.shouldComponentUpdate(nextProps, nextState, nextContext);\n+ !inst.shouldComponentUpdate ||\n+ inst.shouldComponentUpdate(nextProps, nextState, nextContext);\n \n if (__DEV__) {\n if (typeof shouldUpdate === \"undefined\") {\n console.warn(\n- (this.constructor.displayName || 'ReactCompositeComponent') +\n+ (inst.constructor.displayName || 'ReactCompositeComponent') +\n '.shouldComponentUpdate(): Returned undefined instead of a ' +\n 'boolean value. Make sure to return true or false.'\n );\n@@ -536,9 +552,9 @@ var ReactCompositeComponentMixin = {\n \/\/ If it's determined that a component should not update, we still want\n \/\/ to set props and state but we shortcut the rest of the update.\n this._currentElement = nextParentElement;\n- this.props = nextProps;\n- this.state = nextState;\n- this.context = nextContext;\n+ inst.props = nextProps;\n+ inst.state = nextState;\n+ inst.context = nextContext;\n \n \/\/ Owner cannot change because shouldUpdateReactComponent doesn't allow\n \/\/ it. TODO: Remove this._owner completely.\n@@ -576,18 +592,20 @@ var ReactCompositeComponentMixin = {\n nextContext,\n transaction\n ) {\n- var prevProps = this.props;\n- var prevState = this.state;\n- var prevContext = this.context;\n+ var inst = this._instance;\n+\n+ var prevProps = inst.props;\n+ var prevState = inst.state;\n+ var prevContext = inst.context;\n \n- if (this.componentWillUpdate) {\n- this.componentWillUpdate(nextProps, nextState, nextContext);\n+ if (inst.componentWillUpdate) {\n+ inst.componentWillUpdate(nextProps, nextState, nextContext);\n }\n \n this._currentElement = nextElement;\n- this.props = nextProps;\n- this.state = nextState;\n- this.context = nextContext;\n+ inst.props = nextProps;\n+ inst.state = nextState;\n+ inst.context = nextContext;\n \n \/\/ Owner cannot change because shouldUpdateReactComponent doesn't allow\n \/\/ it. TODO: Remove this._owner completely.\n@@ -595,10 +613,10 @@ var ReactCompositeComponentMixin = {\n \n this._updateRenderedComponent(transaction);\n \n- if (this.componentDidUpdate) {\n+ if (inst.componentDidUpdate) {\n transaction.getReactMountReady().enqueue(\n- this.componentDidUpdate.bind(this, prevProps, prevState, prevContext),\n- this\n+ inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext),\n+ inst\n );\n }\n },\n@@ -623,7 +641,7 @@ var ReactCompositeComponentMixin = {\n var thisID = this._rootNodeID;\n var prevComponentID = prevComponentInstance._rootNodeID;\n prevComponentInstance.unmountComponent();\n- this._renderedComponent = instantiateReactComponent(\n+ this._renderedComponent = this._instantiateReactComponent(\n nextRenderedElement,\n this._currentElement.type\n );\n@@ -639,38 +657,6 @@ var ReactCompositeComponentMixin = {\n }\n },\n \n- \/**\n- * Forces an update. This should only be invoked when it is known with\n- * certainty that we are **not** in a DOM transaction.\n- *\n- * You may want to call this when you know that some deeper aspect of the\n- * component's state has changed but `setState` was not called.\n- *\n- * This will not invoke `shouldUpdateComponent`, but it will invoke\n- * `componentWillUpdate` and `componentDidUpdate`.\n- *\n- * @param {?function} callback Called after update is complete.\n- * @final\n- * @protected\n- *\/\n- forceUpdate: function(callback) {\n- var compositeLifeCycleState = this._compositeLifeCycleState;\n- invariant(\n- this.isMounted() ||\n- compositeLifeCycleState === CompositeLifeCycle.MOUNTING,\n- 'forceUpdate(...): Can only force an update on mounted or mounting ' +\n- 'components.'\n- );\n- invariant(\n- compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING &&\n- ReactCurrentOwner.current == null,\n- 'forceUpdate(...): Cannot force an update while unmounting component ' +\n- 'or within a `render` function.'\n- );\n- this._pendingForceUpdate = true;\n- ReactUpdates.enqueueUpdate(this, callback);\n- },\n-\n \/**\n * @private\n *\/\n@@ -684,12 +670,13 @@ var ReactCompositeComponentMixin = {\n this._currentElement._context\n );\n ReactCurrentOwner.current = this;\n+ var inst = this._instance;\n try {\n- renderedComponent = this.render();\n+ renderedComponent = inst.render();\n if (__DEV__) {\n \/\/ We allow auto-mocks to proceed as if they're returning null.\n if (typeof renderedComponent === 'undefined' &&\n- this.render._isMockFunction) {\n+ inst.render._isMockFunction) {\n \/\/ This is probably bad practice. Consider warning here and\n \/\/ deprecating this convenience.\n renderedComponent = null;\n@@ -709,100 +696,35 @@ var ReactCompositeComponentMixin = {\n ReactElement.isValidElement(renderedComponent),\n '%s.render(): A valid ReactComponent must be returned. You may have ' +\n 'returned undefined, an array or some other invalid object.',\n- this.constructor.displayName || 'ReactCompositeComponent'\n+ inst.constructor.displayName || 'ReactCompositeComponent'\n );\n return renderedComponent;\n }\n ),\n \n \/**\n- * @private\n+ * Get the publicly accessible representation of this component - i.e. what\n+ * is exposed by refs and renderComponent. Can be null for stateless\n+ * components.\n+ *\n+ * @return {ReactComponent} the public component instance.\n+ * @internal\n *\/\n- _bindAutoBindMethods: function() {\n- for (var autoBindKey in this.__reactAutoBindMap) {\n- if (!this.__reactAutoBindMap.hasOwnProperty(autoBindKey)) {\n- continue;\n- }\n- var method = this.__reactAutoBindMap[autoBindKey];\n- this[autoBindKey] = this._bindAutoBindMethod(ReactErrorUtils.guard(\n- method,\n- this.constructor.displayName + '.' + autoBindKey\n- ));\n- }\n+ getPublicInstance: function() {\n+ return this._instance;\n },\n \n- \/**\n- * Binds a method to the component.\n- *\n- * @param {function} method Method to be bound.\n- * @private\n- *\/\n- _bindAutoBindMethod: function(method) {\n- var component = this;\n- var boundMethod = method.bind(component);\n- if (__DEV__) {\n- boundMethod.__reactBoundContext = component;\n- boundMethod.__reactBoundMethod = method;\n- boundMethod.__reactBoundArguments = null;\n- var componentName = component.constructor.displayName;\n- var _bind = boundMethod.bind;\n- boundMethod.bind = function(newThis, ...args) {\n- \/\/ User is trying to bind() an autobound method; we effectively will\n- \/\/ ignore the value of \"this\" that the user is trying to use, so\n- \/\/ let's warn.\n- if (newThis !== component && newThis !== null) {\n- monitorCodeUse('react_bind_warning', { component: componentName });\n- console.warn(\n- 'bind(): React component methods may only be bound to the ' +\n- 'component instance. See ' + componentName\n- );\n- } else if (!args.length) {\n- monitorCodeUse('react_bind_warning', { component: componentName });\n- console.warn(\n- 'bind(): You are binding a component method to the component. ' +\n- 'React does this for you automatically in a high-performance ' +\n- 'way, so you can safely remove this call. See ' + componentName\n- );\n- return boundMethod;\n- }\n- var reboundMethod = _bind.apply(boundMethod, arguments);\n- reboundMethod.__reactBoundContext = component;\n- reboundMethod.__reactBoundMethod = method;\n- reboundMethod.__reactBoundArguments = args;\n- return reboundMethod;\n- };\n- }\n- return boundMethod;\n- }\n-};\n+ \/\/ Stub\n+ _instantiateReactComponent: null\n \n-var ReactCompositeComponentBase = function() {};\n-assign(\n- ReactCompositeComponentBase.prototype,\n- ReactComponent.Mixin,\n- ReactOwner.Mixin,\n- ReactPropTransferer.Mixin,\n- ReactCompositeComponentMixin\n-);\n+});\n \n-\/**\n- * Module for creating composite components.\n- *\n- * @class ReactCompositeComponent\n- * @extends ReactComponent\n- * @extends ReactOwner\n- * @extends ReactPropTransferer\n- *\/\n var ReactCompositeComponent = {\n \n LifeCycle: CompositeLifeCycle,\n \n- Base: ReactCompositeComponentBase\n+ Mixin: ReactCompositeComponentMixin\n \n };\n \n-\/\/ Temporary injection.\n-\/\/ TODO: Delete this hack once implementation details are hidden.\n-instantiateReactComponent._compositeBase = ReactCompositeComponentBase;\n-\n module.exports = ReactCompositeComponent;\ndiff --git a\/src\/core\/ReactElementValidator.js b\/src\/core\/ReactElementValidator.js\nindex 0469e8ca45..2dacfd5c78 100644\n--- a\/src\/core\/ReactElementValidator.js\n+++ b\/src\/core\/ReactElementValidator.js\n@@ -48,7 +48,9 @@ var NUMERIC_PROPERTY_REGEX = \/^\\d+$\/;\n *\/\n function getCurrentOwnerDisplayName() {\n var current = ReactCurrentOwner.current;\n- return current && current.constructor.displayName || undefined;\n+ return (\n+ current && current.getPublicInstance().constructor.displayName || undefined\n+ );\n }\n \n \/**\n@@ -128,7 +130,8 @@ function warnAndMonitorForKeyUse(warningID, message, component, parentType) {\n component._owner &&\n component._owner !== ReactCurrentOwner.current) {\n \/\/ Name of the component that originally created this child.\n- childOwnerName = component._owner.constructor.displayName;\n+ childOwnerName =\n+ component._owner.getPublicInstance().constructor.displayName;\n \n message += ` It was passed a child from ${childOwnerName}.`;\n }\ndiff --git a\/src\/core\/ReactInstanceMap.js b\/src\/core\/ReactInstanceMap.js\nnew file mode 100644\nindex 0000000000..6c6209eb94\n--- \/dev\/null\n+++ b\/src\/core\/ReactInstanceMap.js\n@@ -0,0 +1,47 @@\n+\/**\n+ * Copyright 2013-2014, 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 ReactInstanceMap\n+ *\/\n+\n+\"use strict\";\n+\n+\/**\n+ * `ReactInstanceMap` maintains a mapping from a public facing stateful\n+ * instance (key) and the internal representation (value). This allows public\n+ * methods to accept the user facing instance as an argument and map them back\n+ * to internal methods.\n+ *\/\n+\n+\/\/ TODO: Replace this with ES6: var ReactInstanceMap = new Map();\n+var ReactInstanceMap = {\n+\n+ \/**\n+ * This API should be called `delete` but we'd have to make sure to always\n+ * transform these to strings for IE support. When this transform is fully\n+ * supported we can rename it.\n+ *\/\n+ remove: function(key) {\n+ key._reactInternalInstance = undefined;\n+ },\n+\n+ get: function(key) {\n+ return key._reactInternalInstance;\n+ },\n+\n+ has: function(key) {\n+ return key._reactInternalInstance !== undefined;\n+ },\n+\n+ set: function(key, value) {\n+ key._reactInternalInstance = value;\n+ }\n+\n+};\n+\n+module.exports = ReactInstanceMap;\ndiff --git a\/src\/core\/ReactOwner.js b\/src\/core\/ReactOwner.js\nindex 36f155940d..22e493493e 100644\n--- a\/src\/core\/ReactOwner.js\n+++ b\/src\/core\/ReactOwner.js\n@@ -100,7 +100,7 @@ var ReactOwner = {\n );\n \/\/ Check that `component` is still the current ref because we do not want to\n \/\/ detach the ref if another component stole it.\n- if (owner.refs[ref] === component) {\n+ if (owner.getPublicInstance().refs[ref] === component.getPublicInstance()) {\n owner.detachRef(ref);\n }\n },\n@@ -113,7 +113,8 @@ var ReactOwner = {\n Mixin: {\n \n construct: function() {\n- this.refs = emptyObject;\n+ var inst = this.getPublicInstance();\n+ inst.refs = emptyObject;\n },\n \n \/**\n@@ -125,13 +126,16 @@ var ReactOwner = {\n * @private\n *\/\n attachRef: function(ref, component) {\n+ \/\/ TODO: Remove this invariant. This is never exposed and cannot be called\n+ \/\/ by user code. The unit test is already removed.\n invariant(\n component.isOwnedBy(this),\n 'attachRef(%s, ...): Only a component\\'s owner can store a ref to it.',\n ref\n );\n- var refs = this.refs === emptyObject ? (this.refs = {}) : this.refs;\n- refs[ref] = component;\n+ var inst = this.getPublicInstance();\n+ var refs = inst.refs === emptyObject ? (inst.refs = {}) : inst.refs;\n+ refs[ref] = component.getPublicInstance();\n },\n \n \/**\n@@ -142,7 +146,8 @@ var ReactOwner = {\n * @private\n *\/\n detachRef: function(ref) {\n- delete this.refs[ref];\n+ var refs = this.getPublicInstance().refs;\n+ delete refs[ref];\n }\n \n }\ndiff --git a\/src\/core\/ReactPropTransferer.js b\/src\/core\/ReactPropTransferer.js\nindex ad2f93413d..01a4591725 100644\n--- a\/src\/core\/ReactPropTransferer.js\n+++ b\/src\/core\/ReactPropTransferer.js\n@@ -129,7 +129,7 @@ var ReactPropTransferer = {\n *\/\n transferPropsTo: function(element) {\n invariant(\n- element._owner === this,\n+ element._owner && element._owner.getPublicInstance() === this,\n '%s: You can\\'t call transferPropsTo() on a component that you ' +\n 'don\\'t own, %s. This usually means you are calling ' +\n 'transferPropsTo() on a component passed in as props or children.',\ndiff --git a\/src\/core\/ReactRef.js b\/src\/core\/ReactRef.js\nindex 4463d54bf0..b93290703e 100644\n--- a\/src\/core\/ReactRef.js\n+++ b\/src\/core\/ReactRef.js\n@@ -89,7 +89,7 @@ assign(ReactRef.prototype, {\n });\n \n ReactRef.attachRef = function(ref, value) {\n- ref._value = value;\n+ ref._value = value.getPublicInstance();\n };\n \n ReactRef.detachRef = function(ref, value) {\ndiff --git a\/src\/core\/__tests__\/ReactComponent-test.js b\/src\/core\/__tests__\/ReactComponent-test.js\nindex 3f4129b72a..35e7ada062 100644\n--- a\/src\/core\/__tests__\/ReactComponent-test.js\n+++ b\/src\/core\/__tests__\/ReactComponent-test.js\n@@ -12,15 +12,26 @@\n \"use strict\";\n \n var React;\n+var ReactInstanceMap;\n var ReactTestUtils;\n \n var reactComponentExpect;\n+var getMountDepth;\n \n describe('ReactComponent', function() {\n beforeEach(function() {\n React = require('React');\n+ ReactInstanceMap = require('ReactInstanceMap');\n ReactTestUtils = require('ReactTestUtils');\n reactComponentExpect = require('reactComponentExpect');\n+\n+ getMountDepth = function(instance) {\n+ if (instance.mountComponent) {\n+ \/\/ Native instance\n+ return instance._mountDepth;\n+ }\n+ return ReactInstanceMap.get(instance)._mountDepth;\n+ };\n });\n \n it('should throw on invalid render targets', function() {\n@@ -48,26 +59,6 @@ describe('ReactComponent', function() {\n }).toThrow();\n });\n \n- it('should throw when attempting to hijack a ref', function() {\n- var Component = React.createClass({\n- render: function() {\n- var child = this.props.child;\n- this.attachRef('test', child);\n- return child;\n- }\n- });\n-\n- var childInstance = ReactTestUtils.renderIntoDocument();\n- var instance = ;\n-\n- expect(function() {\n- instance = ReactTestUtils.renderIntoDocument(instance);\n- }).toThrow(\n- 'Invariant Violation: attachRef(test, ...): Only a component\\'s owner ' +\n- 'can store a ref to it.'\n- );\n- });\n-\n it('should support refs on owned components', function() {\n var innerObj = {}, outerObj = {};\n \n@@ -260,8 +251,8 @@ describe('ReactComponent', function() {\n \n var instance = ;\n instance = ReactTestUtils.renderIntoDocument(instance);\n- expect(instance._mountDepth).toBe(0);\n- expect(instance.refs.child._mountDepth).toBe(1);\n+ expect(getMountDepth(instance)).toBe(0);\n+ expect(getMountDepth(instance.refs.child)).toBe(1);\n });\n \n it('should know its (complicated) mount depth', function() {\n@@ -291,7 +282,7 @@ describe('ReactComponent', function() {\n ref=\"switcherDiv\"\n style={{\n display: this.state.tabKey === child.key ? '' : 'none'\n- }}>\n+ }}>\n {child}\n <\/div>\n <\/Box>\n@@ -312,12 +303,12 @@ describe('ReactComponent', function() {\n var root = ;\n root = ReactTestUtils.renderIntoDocument(root);\n \n- expect(root._mountDepth).toBe(0);\n- expect(root.refs.switcher._mountDepth).toBe(1);\n- expect(root.refs.switcher.refs.box._mountDepth).toBe(2);\n- expect(root.refs.switcher.refs.switcherDiv._mountDepth).toBe(4);\n- expect(root.refs.child._mountDepth).toBe(5);\n- expect(root.refs.switcher.refs.box.refs.boxDiv._mountDepth).toBe(3);\n- expect(root.refs.child.refs.span._mountDepth).toBe(6);\n+ expect(getMountDepth(root)).toBe(0);\n+ expect(getMountDepth(root.refs.switcher)).toBe(1);\n+ expect(getMountDepth(root.refs.switcher.refs.box)).toBe(2);\n+ expect(getMountDepth(root.refs.switcher.refs.switcherDiv)).toBe(4);\n+ expect(getMountDepth(root.refs.child)).toBe(5);\n+ expect(getMountDepth(root.refs.switcher.refs.box.refs.boxDiv)).toBe(3);\n+ expect(getMountDepth(root.refs.child.refs.span)).toBe(6);\n });\n });\ndiff --git a\/src\/core\/__tests__\/ReactComponentLifeCycle-test.js b\/src\/core\/__tests__\/ReactComponentLifeCycle-test.js\nindex a625bf2401..214b18d017 100644\n--- a\/src\/core\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/src\/core\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -15,9 +15,13 @@ var React;\n var ReactTestUtils;\n var ReactComponent;\n var ReactCompositeComponent;\n+var ReactInstanceMap;\n var ComponentLifeCycle;\n var CompositeComponentLifeCycle;\n \n+var getCompositeLifeCycle;\n+var getLifeCycleState;\n+\n var clone = function(o) {\n return JSON.parse(JSON.stringify(o));\n };\n@@ -81,6 +85,23 @@ describe('ReactComponentLifeCycle', function() {\n ReactCompositeComponent = require('ReactCompositeComponent');\n ComponentLifeCycle = ReactComponent.LifeCycle;\n CompositeComponentLifeCycle = ReactCompositeComponent.LifeCycle;\n+\n+ ReactInstanceMap = require('ReactInstanceMap');\n+\n+ getCompositeLifeCycle = function(instance) {\n+ return ReactInstanceMap.get(instance)._compositeLifeCycleState;\n+ };\n+\n+ getLifeCycleState = function(instance) {\n+ var internalInstance = ReactInstanceMap.get(instance);\n+ if (!internalInstance) {\n+ \/\/ Once a component is fully unmounted, we cannot actually get to the\n+ \/\/ internal instance. It's already dereferenced and possibly GC:ed.\n+ \/\/ So the unmounted life cycle hook doesn't exist anymore.\n+ return ComponentLifeCycle.UNMOUNTED;\n+ }\n+ return internalInstance._lifeCycleState;\n+ };\n });\n \n it('should not reuse an instance when it has been unmounted', function() {\n@@ -222,25 +243,25 @@ describe('ReactComponentLifeCycle', function() {\n };\n this._testJournal.returnedFromGetInitialState = clone(initState);\n this._testJournal.lifeCycleAtStartOfGetInitialState =\n- this._lifeCycleState;\n+ getLifeCycleState(this);\n this._testJournal.compositeLifeCycleAtStartOfGetInitialState =\n- this._compositeLifeCycleState;\n+ getCompositeLifeCycle(this);\n return initState;\n },\n \n componentWillMount: function() {\n this._testJournal.stateAtStartOfWillMount = clone(this.state);\n this._testJournal.lifeCycleAtStartOfWillMount =\n- this._lifeCycleState;\n+ getLifeCycleState(this);\n this._testJournal.compositeLifeCycleAtStartOfWillMount =\n- this._compositeLifeCycleState;\n+ getCompositeLifeCycle(this);\n this.state.hasWillMountCompleted = true;\n },\n \n componentDidMount: function() {\n this._testJournal.stateAtStartOfDidMount = clone(this.state);\n this._testJournal.lifeCycleAtStartOfDidMount =\n- this._lifeCycleState;\n+ getLifeCycleState(this);\n this.setState({hasDidMountCompleted: true});\n },\n \n@@ -248,12 +269,12 @@ describe('ReactComponentLifeCycle', function() {\n var isInitialRender = !this.state.hasRenderCompleted;\n if (isInitialRender) {\n this._testJournal.stateInInitialRender = clone(this.state);\n- this._testJournal.lifeCycleInInitialRender = this._lifeCycleState;\n+ this._testJournal.lifeCycleInInitialRender = getLifeCycleState(this);\n this._testJournal.compositeLifeCycleInInitialRender =\n- this._compositeLifeCycleState;\n+ getCompositeLifeCycle(this);\n } else {\n this._testJournal.stateInLaterRender = clone(this.state);\n- this._testJournal.lifeCycleInLaterRender = this._lifeCycleState;\n+ this._testJournal.lifeCycleInLaterRender = getLifeCycleState(this);\n }\n \/\/ you would *NEVER* do anything like this in real code!\n this.state.hasRenderCompleted = true;\n@@ -267,7 +288,7 @@ describe('ReactComponentLifeCycle', function() {\n componentWillUnmount: function() {\n this._testJournal.stateAtStartOfWillUnmount = clone(this.state);\n this._testJournal.lifeCycleAtStartOfWillUnmount =\n- this._lifeCycleState;\n+ getLifeCycleState(this);\n this.state.hasWillUnmountCompleted = true;\n }\n });\n@@ -275,7 +296,8 @@ describe('ReactComponentLifeCycle', function() {\n \/\/ A component that is merely \"constructed\" (as in \"constructor\") but not\n \/\/ yet initialized, or rendered.\n \/\/\n- var instance = ReactTestUtils.renderIntoDocument();\n+ var container = document.createElement('div');\n+ var instance = React.render(, container);\n \n \/\/ getInitialState\n expect(instance._testJournal.returnedFromGetInitialState).toEqual(\n@@ -312,7 +334,7 @@ describe('ReactComponentLifeCycle', function() {\n CompositeComponentLifeCycle.MOUNTING\n );\n \n- expect(instance._lifeCycleState).toBe(ComponentLifeCycle.MOUNTED);\n+ expect(getLifeCycleState(instance)).toBe(ComponentLifeCycle.MOUNTED);\n \n \/\/ Now *update the component*\n instance.forceUpdate();\n@@ -324,10 +346,9 @@ describe('ReactComponentLifeCycle', function() {\n ComponentLifeCycle.MOUNTED\n );\n \n- expect(instance._lifeCycleState).toBe(ComponentLifeCycle.MOUNTED);\n+ expect(getLifeCycleState(instance)).toBe(ComponentLifeCycle.MOUNTED);\n \n- \/\/ Now *unmountComponent*\n- instance.unmountComponent();\n+ React.unmountComponentAtNode(container);\n \n expect(instance._testJournal.stateAtStartOfWillUnmount)\n .toEqual(WILL_UNMOUNT_STATE);\n@@ -337,7 +358,7 @@ describe('ReactComponentLifeCycle', function() {\n );\n \n \/\/ But the current lifecycle of the component is unmounted.\n- expect(instance._lifeCycleState).toBe(ComponentLifeCycle.UNMOUNTED);\n+ expect(getLifeCycleState(instance)).toBe(ComponentLifeCycle.UNMOUNTED);\n expect(instance.state).toEqual(POST_WILL_UNMOUNT_STATE);\n });\n \n@@ -487,10 +508,11 @@ describe('ReactComponentLifeCycle', function() {\n componentDidUpdate: logger('inner componentDidUpdate'),\n componentWillUnmount: logger('inner componentWillUnmount')\n });\n- var instance;\n \n+\n+ var container = document.createElement('div');\n log = [];\n- instance = ReactTestUtils.renderIntoDocument();\n+ var instance = React.render(, container);\n expect(log).toEqual([\n 'outer componentWillMount',\n 'inner componentWillMount',\n@@ -512,7 +534,7 @@ describe('ReactComponentLifeCycle', function() {\n ]);\n \n log = [];\n- instance.unmountComponent();\n+ React.unmountComponentAtNode(container);\n expect(log).toEqual([\n 'outer componentWillUnmount',\n 'inner componentWillUnmount'\ndiff --git a\/src\/core\/__tests__\/ReactCompositeComponent-test.js b\/src\/core\/__tests__\/ReactCompositeComponent-test.js\nindex cf94ce86b8..fbe792596f 100644\n--- a\/src\/core\/__tests__\/ReactCompositeComponent-test.js\n+++ b\/src\/core\/__tests__\/ReactCompositeComponent-test.js\n@@ -623,6 +623,63 @@ describe('ReactCompositeComponent', function() {\n );\n });\n \n+ it('should not allow `setState` on unmounted components', function() {\n+ var container = document.createElement('div');\n+ document.documentElement.appendChild(container);\n+\n+ var Component = React.createClass({\n+ getInitialState: function() {\n+ return { value: 0 };\n+ },\n+ render: function() {\n+ return

;\n+ }\n+ });\n+\n+ var instance = ;\n+ expect(instance.setState).not.toBeDefined();\n+\n+ instance = React.render(instance, container);\n+ expect(function() {\n+ instance.setState({ value: 1 });\n+ }).not.toThrow();\n+\n+ React.unmountComponentAtNode(container);\n+ expect(function() {\n+ instance.setState({ value: 2 });\n+ }).toThrow(\n+ 'Invariant Violation: setState(...): Can only update a mounted or ' +\n+ 'mounting component.'\n+ );\n+ });\n+\n+ it('should not allow `setProps` on unmounted components', function() {\n+ var container = document.createElement('div');\n+ document.documentElement.appendChild(container);\n+\n+ var Component = React.createClass({\n+ render: function() {\n+ return

;\n+ }\n+ });\n+\n+ var instance = ;\n+ expect(instance.setProps).not.toBeDefined();\n+\n+ instance = React.render(instance, container);\n+ expect(function() {\n+ instance.setProps({ value: 1 });\n+ }).not.toThrow();\n+\n+ React.unmountComponentAtNode(container);\n+ expect(function() {\n+ instance.setProps({ value: 2 });\n+ }).toThrow(\n+ 'Invariant Violation: setProps(...): Can only update a mounted ' +\n+ 'component.'\n+ );\n+ });\n+\n it('should cleanup even if render() fatals', function() {\n var BadComponent = React.createClass({\n render: function() {\ndiff --git a\/src\/core\/__tests__\/ReactCompositeComponentState-test.js b\/src\/core\/__tests__\/ReactCompositeComponentState-test.js\nindex 9de786fbac..10fa09a1bf 100644\n--- a\/src\/core\/__tests__\/ReactCompositeComponentState-test.js\n+++ b\/src\/core\/__tests__\/ReactCompositeComponentState-test.js\n@@ -14,6 +14,7 @@\n var mocks = require('mocks');\n \n var React;\n+var ReactInstanceMap;\n var ReactTestUtils;\n var reactComponentExpect;\n \n@@ -23,6 +24,7 @@ describe('ReactCompositeComponent-state', function() {\n \n beforeEach(function() {\n React = require('React');\n+ ReactInstanceMap = require('ReactInstanceMap');\n ReactTestUtils = require('ReactTestUtils');\n reactComponentExpect = require('reactComponentExpect');\n \n@@ -31,10 +33,13 @@ describe('ReactCompositeComponent-state', function() {\n if (state) {\n this.props.stateListener(from, state && state.color);\n } else {\n+ var internalInstance = ReactInstanceMap.get(this);\n+ var pendingState = internalInstance ? internalInstance._pendingState :\n+ null;\n this.props.stateListener(\n from,\n this.state && this.state.color,\n- this._pendingState && this._pendingState.color\n+ pendingState && pendingState.color\n );\n }\n },\n@@ -99,13 +104,17 @@ describe('ReactCompositeComponent-state', function() {\n });\n \n it('should support setting state', function() {\n+ var container = document.createElement('div');\n+ document.documentElement.appendChild(container);\n+\n var stateListener = mocks.getMockFunction();\n var instance = ;\n- instance = ReactTestUtils.renderIntoDocument(instance);\n+ instance = React.render(instance, container);\n instance.setProps({nextColor: 'green'});\n instance.setFavoriteColor('blue');\n instance.forceUpdate();\n- instance.unmountComponent();\n+\n+ React.unmountComponentAtNode(container);\n \n expect(stateListener.mock.calls).toEqual([\n \/\/ there is no state when getInitialState() is called\ndiff --git a\/src\/core\/__tests__\/ReactElement-test.js b\/src\/core\/__tests__\/ReactElement-test.js\nindex ba5af2e77a..76255209dd 100644\n--- a\/src\/core\/__tests__\/ReactElement-test.js\n+++ b\/src\/core\/__tests__\/ReactElement-test.js\n@@ -138,7 +138,7 @@ describe('ReactElement', function() {\n \n var instance = ReactTestUtils.renderIntoDocument();\n \n- expect(element._owner).toBe(instance);\n+ expect(element._owner.getPublicInstance()).toBe(instance);\n });\n \n it('merges an additional argument onto the children prop', function() {\ndiff --git a\/src\/core\/__tests__\/ReactInstanceHandles-test.js b\/src\/core\/__tests__\/ReactInstanceHandles-test.js\nindex 82e835282d..0620b40d21 100644\n--- a\/src\/core\/__tests__\/ReactInstanceHandles-test.js\n+++ b\/src\/core\/__tests__\/ReactInstanceHandles-test.js\n@@ -62,6 +62,14 @@ describe('ReactInstanceHandles', function() {\n });\n }\n \n+ function getNodeID(instance) {\n+ if (instance === null) {\n+ return '';\n+ }\n+ var internal = ReactTestUtils.getInternalRepresentation(instance);\n+ return internal._rootNodeID;\n+ }\n+\n beforeEach(function() {\n ReactInstanceHandles = require('ReactInstanceHandles');\n aggregatedArgs = [];\n@@ -178,17 +186,17 @@ describe('ReactInstanceHandles', function() {\n \n it(\"should traverse two phase across component boundary\", function() {\n var parent = renderParentIntoDocument();\n- var targetID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;\n+ var targetID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n var expectedAggregation = [\n- {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG},\n- {id: parent.refs.P_P1._rootNodeID, isUp: false, arg: ARG},\n- {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: false, arg: ARG},\n- {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: false, arg: ARG},\n-\n- {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}\n+ {id: getNodeID(parent.refs.P), isUp: false, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1), isUp: false, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: false, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: false, arg: ARG},\n+\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P), isUp: true, arg: ARG}\n ];\n ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);\n expect(aggregatedArgs).toEqual(expectedAggregation);\n@@ -196,10 +204,10 @@ describe('ReactInstanceHandles', function() {\n \n it(\"should traverse two phase at shallowest node\", function() {\n var parent = renderParentIntoDocument();\n- var targetID = parent.refs.P._rootNodeID;\n+ var targetID = getNodeID(parent.refs.P);\n var expectedAggregation = [\n- {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG},\n- {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}\n+ {id: getNodeID(parent.refs.P), isUp: false, arg: ARG},\n+ {id: getNodeID(parent.refs.P), isUp: true, arg: ARG}\n ];\n ReactInstanceHandles.traverseTwoPhase(targetID, argAggregator, ARG);\n expect(aggregatedArgs).toEqual(expectedAggregation);\n@@ -218,8 +226,8 @@ describe('ReactInstanceHandles', function() {\n \n it(\"should not traverse if enter\/leave the same node\", function() {\n var parent = renderParentIntoDocument();\n- var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;\n- var enterID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;\n+ var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n+ var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n var expectedAggregation = [];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -229,12 +237,12 @@ describe('ReactInstanceHandles', function() {\n \n it(\"should traverse enter\/leave to sibling - avoids parent\", function() {\n var parent = renderParentIntoDocument();\n- var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;\n- var enterID = parent.refs.P_P1_C1.refs.DIV_2._rootNodeID;\n+ var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n+ var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV_2);\n var expectedAggregation = [\n- {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG},\n \/\/ enter\/leave shouldn't fire antyhing on the parent\n- {id: parent.refs.P_P1_C1.refs.DIV_2._rootNodeID, isUp: false, arg: ARG2}\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_2), isUp: false, arg: ARG2}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -244,10 +252,10 @@ describe('ReactInstanceHandles', function() {\n \n it(\"should traverse enter\/leave to parent - avoids parent\", function() {\n var parent = renderParentIntoDocument();\n- var leaveID = parent.refs.P_P1_C1.refs.DIV_1._rootNodeID;\n- var enterID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;\n+ var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV_1);\n+ var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n var expectedAggregation = [\n- {id: parent.refs.P_P1_C1.refs.DIV_1._rootNodeID, isUp: true, arg: ARG}\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV_1), isUp: true, arg: ARG}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -258,11 +266,11 @@ describe('ReactInstanceHandles', function() {\n it(\"should enter from the window\", function() {\n var parent = renderParentIntoDocument();\n var leaveID = ''; \/\/ From the window or outside of the React sandbox.\n- var enterID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;\n+ var enterID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n var expectedAggregation = [\n- {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG2},\n- {id: parent.refs.P_P1._rootNodeID, isUp: false, arg: ARG2},\n- {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: false, arg: ARG2}\n+ {id: getNodeID(parent.refs.P), isUp: false, arg: ARG2},\n+ {id: getNodeID(parent.refs.P_P1), isUp: false, arg: ARG2},\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: false, arg: ARG2}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -273,9 +281,9 @@ describe('ReactInstanceHandles', function() {\n it(\"should enter from the window to the shallowest\", function() {\n var parent = renderParentIntoDocument();\n var leaveID = ''; \/\/ From the window or outside of the React sandbox.\n- var enterID = parent.refs.P._rootNodeID;\n+ var enterID = getNodeID(parent.refs.P);\n var expectedAggregation = [\n- {id: parent.refs.P._rootNodeID, isUp: false, arg: ARG2}\n+ {id: getNodeID(parent.refs.P), isUp: false, arg: ARG2}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -286,11 +294,11 @@ describe('ReactInstanceHandles', function() {\n it(\"should leave to the window\", function() {\n var parent = renderParentIntoDocument();\n var enterID = ''; \/\/ From the window or outside of the React sandbox.\n- var leaveID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;\n+ var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n var expectedAggregation = [\n- {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P), isUp: true, arg: ARG}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -301,11 +309,11 @@ describe('ReactInstanceHandles', function() {\n it(\"should leave to the window from the shallowest\", function() {\n var parent = renderParentIntoDocument();\n var enterID = ''; \/\/ From the window or outside of the React sandbox.\n- var leaveID = parent.refs.P_P1_C1.refs.DIV._rootNodeID;\n+ var leaveID = getNodeID(parent.refs.P_P1_C1.refs.DIV);\n var expectedAggregation = [\n- {id: parent.refs.P_P1_C1.refs.DIV._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P_P1._rootNodeID, isUp: true, arg: ARG},\n- {id: parent.refs.P._rootNodeID, isUp: true, arg: ARG}\n+ {id: getNodeID(parent.refs.P_P1_C1.refs.DIV), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P_P1), isUp: true, arg: ARG},\n+ {id: getNodeID(parent.refs.P), isUp: true, arg: ARG}\n ];\n ReactInstanceHandles.traverseEnterLeave(\n leaveID, enterID, argAggregator, ARG, ARG2\n@@ -320,9 +328,9 @@ describe('ReactInstanceHandles', function() {\n expect(\n ReactInstanceHandles._getNextDescendantID(\n '',\n- parent.refs.P_P1._rootNodeID\n+ getNodeID(parent.refs.P_P1)\n )\n- ).toBe(parent.refs.P._rootNodeID);\n+ ).toBe(getNodeID(parent.refs.P));\n });\n \n it(\"should return window for next descendent towards window\", function() {\n@@ -333,10 +341,10 @@ describe('ReactInstanceHandles', function() {\n var parent = renderParentIntoDocument();\n expect(\n ReactInstanceHandles._getNextDescendantID(\n- parent.refs.P_P1._rootNodeID,\n- parent.refs.P_P1._rootNodeID\n+ getNodeID(parent.refs.P_P1),\n+ getNodeID(parent.refs.P_P1)\n )\n- ).toBe(parent.refs.P_P1._rootNodeID);\n+ ).toBe(getNodeID(parent.refs.P_P1));\n });\n });\n \n@@ -345,19 +353,19 @@ describe('ReactInstanceHandles', function() {\n var parent = renderParentIntoDocument();\n var ancestors = [\n \/\/ Common ancestor from window to deep element is ''.\n- { one: {_rootNodeID: ''},\n+ { one: null,\n two: parent.refs.P_P1_C1.refs.DIV_1,\n- com: {_rootNodeID: ''}\n+ com: null\n },\n \/\/ Same as previous - reversed direction.\n { one: parent.refs.P_P1_C1.refs.DIV_1,\n- two: {_rootNodeID: ''},\n- com: {_rootNodeID: ''}\n+ two: null,\n+ com: null\n },\n \/\/ Common ancestor from window to shallow id is ''.\n { one: parent.refs.P,\n- two: {_rootNodeID: ''},\n- com: {_rootNodeID: ''}\n+ two: null,\n+ com: null\n },\n \/\/ Common ancestor with self is self.\n { one: parent.refs.P_P1_C1.refs.DIV_1,\n@@ -401,10 +409,10 @@ describe('ReactInstanceHandles', function() {\n for (i = 0; i < ancestors.length; i++) {\n var plan = ancestors[i];\n var firstCommon = ReactInstanceHandles._getFirstCommonAncestorID(\n- plan.one._rootNodeID,\n- plan.two._rootNodeID\n+ getNodeID(plan.one),\n+ getNodeID(plan.two)\n );\n- expect(firstCommon).toBe(plan.com._rootNodeID);\n+ expect(firstCommon).toBe(getNodeID(plan.com));\n }\n });\n });\ndiff --git a\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js b\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\nindex babe8616c2..faa9d467ef 100644\n--- a\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\n+++ b\/src\/core\/__tests__\/ReactMultiChildReconcile-test.js\n@@ -14,6 +14,7 @@\n require('mock-modules');\n \n var React = require('React');\n+var ReactInstanceMap = require('ReactInstanceMap');\n var ReactTestUtils = require('ReactTestUtils');\n var ReactMount = require('ReactMount');\n \n@@ -83,7 +84,10 @@ var FriendsStatusDisplay = React.createClass({\n getStatusDisplays: function() {\n var name;\n var orderOfUsernames = [];\n- var statusDisplays = this._renderedComponent._renderedChildren;\n+ \/\/ TODO: Update this to a better test that doesn't rely so much on internal\n+ \/\/ implementation details.\n+ var statusDisplays =\n+ ReactInstanceMap.get(this)._renderedComponent._renderedChildren;\n for (name in statusDisplays) {\n var child = statusDisplays[name];\n var isPresent = !!child;\n@@ -195,7 +199,7 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {\n continue;\n }\n var statusDisplay = statusDisplays[username];\n- orderedLogicalIds.push(statusDisplay._rootNodeID);\n+ orderedLogicalIds.push(ReactInstanceMap.get(statusDisplay)._rootNodeID);\n }\n expect(orderedDomIds).toEqual(orderedLogicalIds);\n }\ndiff --git a\/src\/core\/__tests__\/refs-destruction-test.js b\/src\/core\/__tests__\/refs-destruction-test.js\nindex 4bc95c5a20..fc1ff60108 100644\n--- a\/src\/core\/__tests__\/refs-destruction-test.js\n+++ b\/src\/core\/__tests__\/refs-destruction-test.js\n@@ -19,9 +19,11 @@ var TestComponent = React.createClass({\n render: function() {\n return (\n

\n-

\n- Lets try to destroy this.\n- <\/div>\n+ {this.props.destroy ? null :\n+

\n+ Lets try to destroy this.\n+ <\/div>\n+ }\n <\/div>\n );\n }\n@@ -33,20 +35,22 @@ describe('refs-destruction', function() {\n });\n \n it(\"should remove refs when destroying the parent\", function() {\n- var testInstance = ReactTestUtils.renderIntoDocument();\n+ var container = document.createElement('div');\n+ var testInstance = React.render(, container);\n reactComponentExpect(testInstance.refs.theInnerDiv)\n .toBeDOMComponentWithTag('div');\n expect(Object.keys(testInstance.refs || {}).length).toEqual(1);\n- testInstance.unmountComponent();\n+ React.unmountComponentAtNode(container);\n expect(Object.keys(testInstance.refs || {}).length).toEqual(0);\n });\n \n it(\"should remove refs when destroying the child\", function() {\n- var testInstance = ReactTestUtils.renderIntoDocument();\n+ var container = document.createElement('div');\n+ var testInstance = React.render(, container);\n reactComponentExpect(testInstance.refs.theInnerDiv)\n .toBeDOMComponentWithTag('div');\n expect(Object.keys(testInstance.refs || {}).length).toEqual(1);\n- testInstance.refs.theInnerDiv.unmountComponent();\n+ React.render(, container);\n expect(Object.keys(testInstance.refs || {}).length).toEqual(0);\n });\n });\ndiff --git a\/src\/core\/instantiateReactComponent.js b\/src\/core\/instantiateReactComponent.js\nindex 3db5ba3a88..e342043ac9 100644\n--- a\/src\/core\/instantiateReactComponent.js\n+++ b\/src\/core\/instantiateReactComponent.js\n@@ -12,30 +12,37 @@\n \n \"use strict\";\n \n-var warning = require('warning');\n-\n+var ReactCompositeComponent = require('ReactCompositeComponent');\n var ReactNativeComponent = require('ReactNativeComponent');\n \n-\/\/ This is temporary until we've hidden all the implementation details\n-\/\/ TODO: Delete this hack once implementation details are hidden\n-var publicAPIs = {\n- forceUpdate: true,\n- replaceState: true,\n- setProps: true,\n- setState: true,\n- getDOMNode: true\n- \/\/ Public APIs used internally:\n- \/\/ isMounted: true,\n- \/\/ replaceProps: true,\n-};\n+var assign = require('Object.assign');\n+var warning = require('warning');\n \n-function unmockImplementationDetails(mockInstance) {\n- var ReactCompositeComponentBase = instantiateReactComponent._compositeBase;\n- for (var key in ReactCompositeComponentBase.prototype) {\n- if (!publicAPIs.hasOwnProperty(key)) {\n- mockInstance[key] = ReactCompositeComponentBase.prototype[key];\n- }\n+\/\/ To avoid a cyclic dependency, we create the final class in this module\n+var ReactCompositeComponentWrapper = function(inst) {\n+ this._instance = inst;\n+};\n+assign(\n+ ReactCompositeComponentWrapper.prototype,\n+ ReactCompositeComponent.Mixin,\n+ {\n+ _instantiateReactComponent: instantiateReactComponent\n }\n+);\n+\n+\/**\n+ * Check if the type reference is a known internal type. I.e. not a user\n+ * provided composite type.\n+ *\n+ * @param {function} type\n+ * @return {boolean} Returns true if this is a valid internal type.\n+ *\/\n+function isInternalComponentType(type) {\n+ return (\n+ typeof type === 'function' &&\n+ typeof type.prototype.mountComponent === 'function' &&\n+ typeof type.prototype.receiveComponent === 'function'\n+ );\n }\n \n \/**\n@@ -52,7 +59,7 @@ function instantiateReactComponent(element, parentCompositeType) {\n if (__DEV__) {\n warning(\n element && (typeof element.type === 'function' ||\n- typeof element.type === 'string'),\n+ typeof element.type === 'string'),\n 'Only functions or strings can be mounted as React components.'\n );\n }\n@@ -64,17 +71,25 @@ function instantiateReactComponent(element, parentCompositeType) {\n element.props,\n parentCompositeType\n );\n+ \/\/ If the injected special class is not an internal class, but another\n+ \/\/ composite, then we must wrap it.\n+ \/\/ TODO: Move this resolution around to something cleaner.\n+ if (typeof instance.mountComponent !== 'function') {\n+ instance = new ReactCompositeComponentWrapper(instance);\n+ }\n+ } else if (isInternalComponentType(element.type)) {\n+ \/\/ This is temporarily available for custom components that are not string\n+ \/\/ represenations. I.e. ART. Once those are updated to use the string\n+ \/\/ representation, we can drop this code path.\n+ instance = new element.type(element);\n } else {\n- \/\/ Normal case for non-mocks and non-strings\n- instance = new element.type(element.props);\n+ \/\/ TODO: Update to follow new ES6 initialization. Ideally, we can use props\n+ \/\/ in property initializers.\n+ var inst = new element.type(element.props);\n+ instance = new ReactCompositeComponentWrapper(inst);\n }\n \n if (__DEV__) {\n- if (element.type._isMockFunction) {\n- \/\/ TODO: Remove this special case\n- unmockImplementationDetails(instance);\n- }\n-\n warning(\n typeof instance.construct === 'function' &&\n typeof instance.mountComponent === 'function' &&\n@@ -83,8 +98,7 @@ function instantiateReactComponent(element, parentCompositeType) {\n );\n }\n \n- \/\/ This actually sets up the internal instance. This will become decoupled\n- \/\/ from the public instance in a future diff.\n+ \/\/ Sets up the instance. This can probably just move into the constructor now.\n instance.construct(element);\n \n return instance;\ndiff --git a\/src\/test\/ReactTestUtils.js b\/src\/test\/ReactTestUtils.js\nindex 3e2deccc86..bbc2724387 100644\n--- a\/src\/test\/ReactTestUtils.js\n+++ b\/src\/test\/ReactTestUtils.js\n@@ -17,6 +17,7 @@ var EventPropagators = require('EventPropagators');\n var React = require('React');\n var ReactElement = require('ReactElement');\n var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');\n+var ReactInstanceMap = require('ReactInstanceMap');\n var ReactMount = require('ReactMount');\n var ReactTextComponent = require('ReactTextComponent');\n var ReactUpdates = require('ReactUpdates');\n@@ -60,7 +61,9 @@ var ReactTestUtils = {\n },\n \n isDOMComponent: function(inst) {\n- return !!(inst && inst.mountComponent && inst.tagName);\n+ \/\/ TODO: Fix this heuristic. It's just here because composites can currently\n+ \/\/ pretend to be DOM components.\n+ return !!(inst && inst.getDOMNode && inst.tagName);\n },\n \n isDOMComponentElement: function(inst) {\n@@ -101,6 +104,22 @@ var ReactTestUtils = {\n return inst instanceof ReactTextComponent.type;\n },\n \n+ getInternalRepresentation: function(inst) {\n+ \/\/ TODO: Remove this duck check once we have a separate DOM\/Native instance\n+ if (typeof inst.mountComponent === 'function') {\n+ return inst;\n+ }\n+ return ReactInstanceMap.get(inst);\n+ },\n+\n+ getRenderedChildOfCompositeComponent: function(inst) {\n+ if (!ReactTestUtils.isCompositeComponent(inst)) {\n+ return null;\n+ }\n+ var internalInstance = ReactInstanceMap.get(inst);\n+ return internalInstance._renderedComponent.getPublicInstance();\n+ },\n+\n findAllInRenderedTree: function(inst, test) {\n if (!inst) {\n return [];\n@@ -114,12 +133,18 @@ var ReactTestUtils = {\n continue;\n }\n ret = ret.concat(\n- ReactTestUtils.findAllInRenderedTree(renderedChildren[key], test)\n+ ReactTestUtils.findAllInRenderedTree(\n+ renderedChildren[key].getPublicInstance(),\n+ test\n+ )\n );\n }\n } else if (ReactTestUtils.isCompositeComponent(inst)) {\n ret = ret.concat(\n- ReactTestUtils.findAllInRenderedTree(inst._renderedComponent, test)\n+ ReactTestUtils.findAllInRenderedTree(\n+ ReactTestUtils.getRenderedChildOfCompositeComponent(inst),\n+ test\n+ )\n );\n }\n return ret;\ndiff --git a\/src\/test\/reactComponentExpect.js b\/src\/test\/reactComponentExpect.js\nindex cb03a48b3a..17c1c7e1af 100644\n--- a\/src\/test\/reactComponentExpect.js\n+++ b\/src\/test\/reactComponentExpect.js\n@@ -12,6 +12,7 @@\n \n \"use strict\";\n \n+var ReactInstanceMap = require('ReactInstanceMap');\n var ReactTestUtils = require('ReactTestUtils');\n \n var assign = require('Object.assign');\n@@ -25,7 +26,10 @@ function reactComponentExpect(instance) {\n return new reactComponentExpect(instance);\n }\n \n- this._instance = instance;\n+ expect(instance).not.toBeNull();\n+\n+ this._instance = ReactTestUtils.getInternalRepresentation(instance);\n+\n expect(typeof instance).toBe('object');\n expect(typeof instance.constructor).toBe('function');\n expect(ReactTestUtils.isElement(instance)).toBe(false);\n@@ -38,7 +42,7 @@ assign(reactComponentExpect.prototype, {\n * @instance: Retrieves the backing instance.\n *\/\n instance: function() {\n- return this._instance;\n+ return this._instance.getPublicInstance();\n },\n \n \/**\n@@ -57,7 +61,8 @@ assign(reactComponentExpect.prototype, {\n *\/\n expectRenderedChild: function() {\n this.toBeCompositeComponent();\n- return new reactComponentExpect(this.instance()._renderedComponent);\n+ var child = this._instance._renderedComponent;\n+ return new reactComponentExpect(child);\n },\n \n \/**\n@@ -67,7 +72,7 @@ assign(reactComponentExpect.prototype, {\n \/\/ Currently only dom components have arrays of children, but that will\n \/\/ change soon.\n this.toBeDOMComponent();\n- var renderedChildren = this.instance()._renderedChildren || {};\n+ var renderedChildren = this._instance._renderedChildren || {};\n for (var name in renderedChildren) {\n if (!renderedChildren.hasOwnProperty(name)) {\n continue;\n@@ -83,15 +88,15 @@ assign(reactComponentExpect.prototype, {\n \n toBeDOMComponentWithChildCount: function(n) {\n this.toBeDOMComponent();\n- expect(this.instance()._renderedChildren).toBeTruthy();\n- var len = Object.keys(this.instance()._renderedChildren).length;\n+ expect(this._instance._renderedChildren).toBeTruthy();\n+ var len = Object.keys(this._instance._renderedChildren).length;\n expect(len).toBe(n);\n return this;\n },\n \n toBeDOMComponentWithNoChildren: function() {\n this.toBeDOMComponent();\n- expect(this.instance()._renderedChildren).toBeFalsy();\n+ expect(this._instance._renderedChildren).toBeFalsy();\n return this;\n },\n \n@@ -99,7 +104,7 @@ assign(reactComponentExpect.prototype, {\n \n toBeComponentOfType: function(constructor) {\n expect(\n- this.instance()._currentElement.type === constructor\n+ this._instance._currentElement.type === constructor\n ).toBe(true);\n return this;\n },\n@@ -110,6 +115,7 @@ assign(reactComponentExpect.prototype, {\n *\/\n toBeCompositeComponent: function() {\n expect(\n+ typeof this.instance() === 'object' &&\n typeof this.instance().render === 'function' &&\n typeof this.instance().setState === 'function'\n ).toBe(true);\n@@ -119,7 +125,7 @@ assign(reactComponentExpect.prototype, {\n toBeCompositeComponentWithType: function(constructor) {\n this.toBeCompositeComponent();\n expect(\n- this.instance()._currentElement.type === constructor\n+ this._instance._currentElement.type === constructor\n ).toBe(true);\n return this;\n },\n"}

dillon1000/react

Files changed