From 2af5be4c4c94a5d79979b37bd69d2b31f211d4b7 Mon Sep 17 00:00:00 2001
From: CommitSyncScript <jeffmo@fb.com>
Date: Tue, 4 Jun 2013 12:17:00 -0700
Subject: [PATCH] Support rendering different components into same node

var container = ...; // some DOM node
React.renderComponent(<div />, container);
React.renderComponent(<span />, container);

This should replace the rendered <div> with a <span>, effectively
reconciling at the root level.
(cherry picked from commit 100af48f53e292898562f76e0edc9fc7ce50b04e)
---
 src/core/ReactMount.js                | 14 +++++++++-----
 src/core/__tests__/ReactMount-test.js | 22 ++++++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/core/__tests__/ReactMount-test.js

diff --git a/src/core/ReactMount.js b/src/core/ReactMount.js
index 600d720da8..09063f6a45 100644
--- a/src/core/ReactMount.js
+++ b/src/core/ReactMount.js
@@ -106,11 +106,15 @@ var ReactMount = {
   renderComponent: function(nextComponent, container) {
     var prevComponent = instanceByReactRootID[getReactRootID(container)];
     if (prevComponent) {
-      var nextProps = nextComponent.props;
-      ReactMount.scrollMonitor(container, function() {
-        prevComponent.replaceProps(nextProps);
-      });
-      return prevComponent;
+      if (prevComponent.constructor === nextComponent.constructor) {
+        var nextProps = nextComponent.props;
+        ReactMount.scrollMonitor(container, function() {
+          prevComponent.replaceProps(nextProps);
+        });
+        return prevComponent;
+      } else {
+        ReactMount.unmountAndReleaseReactRootNode(container);
+      }
     }
 
     ReactMount.prepareTopLevelEvents(ReactEventTopLevelCallback);
diff --git a/src/core/__tests__/ReactMount-test.js b/src/core/__tests__/ReactMount-test.js
new file mode 100644
index 0000000000..de7e6d8b58
--- /dev/null
+++ b/src/core/__tests__/ReactMount-test.js
@@ -0,0 +1,22 @@
+/**
+ * @jsx React.DOM
+ * @emails react-core
+ */
+
+"use strict";
+
+describe('ReactMount', function() {
+  var React = require('React');
+  var ReactMount = require('ReactMount');
+
+  it('should render different components in same root', function() {
+    var container = document.createElement('container');
+    document.documentElement.appendChild(container);
+
+    ReactMount.renderComponent(<div></div>, container);
+    expect(container.firstChild.nodeName).toBe('DIV');
+
+    ReactMount.renderComponent(<span></span>, container);
+    expect(container.firstChild.nodeName).toBe('SPAN');
+  });
+});