From 989e6b618e8084a82dc194bfe4d888ab6a52cc4f Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 19 Aug 2014 23:16:33 -0700
Subject: [PATCH] Drop usage of plain functions to create descriptors

Replace plain function calls to legacy factories with createFactory or
createElement. For ReactDOMComponents the type should be replaced with
strings.

Because we don't have easy access to ReactLegacyDescriptor from within
React, we need to use the .type property to extract the real class.
This will go away later and is covered by unit tests.
---
 src/addons/transitions/ReactCSSTransitionGroup.js      |  8 ++++++--
 src/addons/transitions/ReactTransitionGroup.js         |  6 +++++-
 src/browser/__tests__/ReactDOM-test.js                 |  5 +++--
 src/browser/ui/dom/components/ReactDOMButton.js        |  5 +++--
 src/browser/ui/dom/components/ReactDOMForm.js          |  5 +++--
 src/browser/ui/dom/components/ReactDOMImg.js           |  5 +++--
 src/browser/ui/dom/components/ReactDOMInput.js         |  5 +++--
 src/browser/ui/dom/components/ReactDOMOption.js        |  5 +++--
 src/browser/ui/dom/components/ReactDOMSelect.js        |  5 +++--
 src/browser/ui/dom/components/ReactDOMTextarea.js      |  5 +++--
 .../ui/dom/components/createFullPageComponent.js       |  5 ++++-
 src/core/ReactEmptyComponent.js                        |  4 +++-
 src/core/__tests__/ReactCompositeComponent-test.js     |  7 ++++---
 src/core/__tests__/ReactMultiChildReconcile-test.js    | 10 ++++++----
 src/core/__tests__/ReactMultiChildText-test.js         |  2 +-
 src/core/__tests__/ReactTextComponent-test.js          |  2 +-
 src/test/ReactTestUtils.js                             |  6 +++++-
 17 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/addons/transitions/ReactCSSTransitionGroup.js b/src/addons/transitions/ReactCSSTransitionGroup.js
index 2a3301fd7a..c54d9a7aeb 100644
--- a/src/addons/transitions/ReactCSSTransitionGroup.js
+++ b/src/addons/transitions/ReactCSSTransitionGroup.js
@@ -21,8 +21,12 @@
 
 var React = require('React');
 
-var ReactTransitionGroup = require('ReactTransitionGroup');
-var ReactCSSTransitionGroupChild = require('ReactCSSTransitionGroupChild');
+var ReactTransitionGroup = React.createFactory(
+  require('ReactTransitionGroup')
+);
+var ReactCSSTransitionGroupChild = React.createFactory(
+  require('ReactCSSTransitionGroupChild')
+);
 
 var merge = require('merge');
 
diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js
index 9f4276c31d..6a9e1888c9 100644
--- a/src/addons/transitions/ReactTransitionGroup.js
+++ b/src/addons/transitions/ReactTransitionGroup.js
@@ -183,7 +183,11 @@ var ReactTransitionGroup = React.createClass({
         );
       }
     }
-    return this.props.component(this.props, childrenToRender);
+    return React.createElement(
+      this.props.component,
+      this.props,
+      childrenToRender
+    );
   }
 });
 
diff --git a/src/browser/__tests__/ReactDOM-test.js b/src/browser/__tests__/ReactDOM-test.js
index da0fadb6e2..aae27e976e 100644
--- a/src/browser/__tests__/ReactDOM-test.js
+++ b/src/browser/__tests__/ReactDOM-test.js
@@ -25,6 +25,7 @@ var React = require('React');
 var ReactDOM = require('ReactDOM');
 var ReactMount = require('ReactMount');
 var ReactTestUtils = require('ReactTestUtils');
+var div = React.createFactory(ReactDOM.div); // TODO: use string
 
 describe('ReactDOM', function() {
   // TODO: uncomment this test once we can run in phantom, which
@@ -58,7 +59,7 @@ describe('ReactDOM', function() {
 
   it("should allow children to be passed as an argument", function() {
     var argDiv = ReactTestUtils.renderIntoDocument(
-      ReactDOM.div(null, 'child')
+      div(null, 'child')
     );
     var argNode = ReactMount.getNode(argDiv._rootNodeID);
     expect(argNode.innerHTML).toBe('child');
@@ -66,7 +67,7 @@ describe('ReactDOM', function() {
 
   it("should overwrite props.children with children argument", function() {
     var conflictDiv = ReactTestUtils.renderIntoDocument(
-      ReactDOM.div({children: 'fakechild'}, 'child')
+      div({children: 'fakechild'}, 'child')
     );
     var conflictNode = ReactMount.getNode(conflictDiv._rootNodeID);
     expect(conflictNode.innerHTML).toBe('child');
diff --git a/src/browser/ui/dom/components/ReactDOMButton.js b/src/browser/ui/dom/components/ReactDOMButton.js
index 68734854ff..d9c07a78db 100644
--- a/src/browser/ui/dom/components/ReactDOMButton.js
+++ b/src/browser/ui/dom/components/ReactDOMButton.js
@@ -21,12 +21,13 @@
 var AutoFocusMixin = require('AutoFocusMixin');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 
 var keyMirror = require('keyMirror');
 
-// Store a reference to the <button> `ReactDOMComponent`.
-var button = ReactDOM.button;
+// Store a reference to the <button> `ReactDOMComponent`. TODO: use string
+var button = ReactDescriptor.createFactory(ReactDOM.button.type);
 
 var mouseListenerNames = keyMirror({
   onClick: true,
diff --git a/src/browser/ui/dom/components/ReactDOMForm.js b/src/browser/ui/dom/components/ReactDOMForm.js
index ffa8c26c83..3c62983974 100644
--- a/src/browser/ui/dom/components/ReactDOMForm.js
+++ b/src/browser/ui/dom/components/ReactDOMForm.js
@@ -22,10 +22,11 @@ var EventConstants = require('EventConstants');
 var LocalEventTrapMixin = require('LocalEventTrapMixin');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 
-// Store a reference to the <form> `ReactDOMComponent`.
-var form = ReactDOM.form;
+// Store a reference to the <form> `ReactDOMComponent`. TODO: use string
+var form = ReactDescriptor.createFactory(ReactDOM.form.type);
 
 /**
  * Since onSubmit doesn't bubble OR capture on the top level in IE8, we need
diff --git a/src/browser/ui/dom/components/ReactDOMImg.js b/src/browser/ui/dom/components/ReactDOMImg.js
index 5aac678985..4caa2ffb0e 100644
--- a/src/browser/ui/dom/components/ReactDOMImg.js
+++ b/src/browser/ui/dom/components/ReactDOMImg.js
@@ -22,10 +22,11 @@ var EventConstants = require('EventConstants');
 var LocalEventTrapMixin = require('LocalEventTrapMixin');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 
-// Store a reference to the <img> `ReactDOMComponent`.
-var img = ReactDOM.img;
+// Store a reference to the <img> `ReactDOMComponent`. TODO: use string
+var img = ReactDescriptor.createFactory(ReactDOM.img.type);
 
 /**
  * Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
diff --git a/src/browser/ui/dom/components/ReactDOMInput.js b/src/browser/ui/dom/components/ReactDOMInput.js
index 1fd4351251..f1718a14c9 100644
--- a/src/browser/ui/dom/components/ReactDOMInput.js
+++ b/src/browser/ui/dom/components/ReactDOMInput.js
@@ -23,6 +23,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var LinkedValueUtils = require('LinkedValueUtils');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 var ReactMount = require('ReactMount');
 var ReactUpdates = require('ReactUpdates');
@@ -30,8 +31,8 @@ var ReactUpdates = require('ReactUpdates');
 var invariant = require('invariant');
 var merge = require('merge');
 
-// Store a reference to the <input> `ReactDOMComponent`.
-var input = ReactDOM.input;
+// Store a reference to the <input> `ReactDOMComponent`. TODO: use string
+var input = ReactDescriptor.createFactory(ReactDOM.input.type);
 
 var instancesByReactID = {};
 
diff --git a/src/browser/ui/dom/components/ReactDOMOption.js b/src/browser/ui/dom/components/ReactDOMOption.js
index 784007b919..369f04f65c 100644
--- a/src/browser/ui/dom/components/ReactDOMOption.js
+++ b/src/browser/ui/dom/components/ReactDOMOption.js
@@ -20,12 +20,13 @@
 
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 
 var warning = require('warning');
 
-// Store a reference to the <option> `ReactDOMComponent`.
-var option = ReactDOM.option;
+// Store a reference to the <option> `ReactDOMComponent`. TODO: use string
+var option = ReactDescriptor.createFactory(ReactDOM.option.type);
 
 /**
  * Implements an <option> native component that warns when `selected` is set.
diff --git a/src/browser/ui/dom/components/ReactDOMSelect.js b/src/browser/ui/dom/components/ReactDOMSelect.js
index 3b965c60ba..cc98e36815 100644
--- a/src/browser/ui/dom/components/ReactDOMSelect.js
+++ b/src/browser/ui/dom/components/ReactDOMSelect.js
@@ -22,13 +22,14 @@ var AutoFocusMixin = require('AutoFocusMixin');
 var LinkedValueUtils = require('LinkedValueUtils');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 var ReactUpdates = require('ReactUpdates');
 
 var merge = require('merge');
 
-// Store a reference to the <select> `ReactDOMComponent`.
-var select = ReactDOM.select;
+// Store a reference to the <select> `ReactDOMComponent`. TODO: use string
+var select = ReactDescriptor.createFactory(ReactDOM.select.type);
 
 function updateWithPendingValueIfMounted() {
   /*jshint validthis:true */
diff --git a/src/browser/ui/dom/components/ReactDOMTextarea.js b/src/browser/ui/dom/components/ReactDOMTextarea.js
index 9cc4d644b6..07b1377c95 100644
--- a/src/browser/ui/dom/components/ReactDOMTextarea.js
+++ b/src/browser/ui/dom/components/ReactDOMTextarea.js
@@ -23,6 +23,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
 var LinkedValueUtils = require('LinkedValueUtils');
 var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 var ReactDOM = require('ReactDOM');
 var ReactUpdates = require('ReactUpdates');
 
@@ -31,8 +32,8 @@ var merge = require('merge');
 
 var warning = require('warning');
 
-// Store a reference to the <textarea> `ReactDOMComponent`.
-var textarea = ReactDOM.textarea;
+// Store a reference to the <textarea> `ReactDOMComponent`. TODO: use string
+var textarea = ReactDescriptor.createFactory(ReactDOM.textarea.type);
 
 function forceUpdateIfMounted() {
   /*jshint validthis:true */
diff --git a/src/browser/ui/dom/components/createFullPageComponent.js b/src/browser/ui/dom/components/createFullPageComponent.js
index afaf4aaec0..4f8beafd28 100644
--- a/src/browser/ui/dom/components/createFullPageComponent.js
+++ b/src/browser/ui/dom/components/createFullPageComponent.js
@@ -21,6 +21,7 @@
 
 // Defeat circular references by requiring this directly.
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDescriptor = require('ReactDescriptor');
 
 var invariant = require('invariant');
 
@@ -36,6 +37,8 @@ var invariant = require('invariant');
  * @return {function} convenience constructor of new component
  */
 function createFullPageComponent(componentClass) {
+  var elementFactory = ReactDescriptor.createFactory(componentClass.type);
+
   var FullPageComponent = ReactCompositeComponent.createClass({
     displayName: 'ReactFullPageComponent' + (
       componentClass.type.displayName || ''
@@ -53,7 +56,7 @@ function createFullPageComponent(componentClass) {
     },
 
     render: function() {
-      return componentClass(this.props);
+      return elementFactory(this.props);
     }
   });
 
diff --git a/src/core/ReactEmptyComponent.js b/src/core/ReactEmptyComponent.js
index a9d154bc5e..64a8c22807 100644
--- a/src/core/ReactEmptyComponent.js
+++ b/src/core/ReactEmptyComponent.js
@@ -18,6 +18,8 @@
 
 "use strict";
 
+var ReactDescriptor = require('ReactDescriptor');
+
 var invariant = require('invariant');
 
 var component;
@@ -27,7 +29,7 @@ var nullComponentIdsRegistry = {};
 
 var ReactEmptyComponentInjection = {
   injectEmptyComponent: function(emptyComponent) {
-    component = emptyComponent;
+    component = ReactDescriptor.createFactory(emptyComponent.type);
   }
 };
 
diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js
index abfedc5dee..0db67f8cc6 100644
--- a/src/core/__tests__/ReactCompositeComponent-test.js
+++ b/src/core/__tests__/ReactCompositeComponent-test.js
@@ -98,7 +98,8 @@ describe('ReactCompositeComponent', function() {
         console.log(this.getDOMNode());
       },
       render: function() {
-        return this.state.component ? this.state.component() : null;
+        var component = this.state.component;
+        return component ? <component /> : null;
       }
     });
 
@@ -448,7 +449,7 @@ describe('ReactCompositeComponent', function() {
     });
 
     var inputProps = {};
-    var instance1 = Component(inputProps);
+    var instance1 = <Component {...inputProps} />;
     instance1 = ReactTestUtils.renderIntoDocument(instance1);
     expect(instance1.props.prop).toBe('testKey');
 
@@ -976,7 +977,7 @@ describe('ReactCompositeComponent', function() {
         'because the function is expected to return a value.'
       );
 
-      NamedComponent(); // Shut up lint
+      <NamedComponent />; // Shut up lint
     } finally {
       console.warn = warn;
     }
diff --git a/src/core/__tests__/ReactMultiChildReconcile-test.js b/src/core/__tests__/ReactMultiChildReconcile-test.js
index a560ac13d2..92c46eb405 100644
--- a/src/core/__tests__/ReactMultiChildReconcile-test.js
+++ b/src/core/__tests__/ReactMultiChildReconcile-test.js
@@ -213,8 +213,9 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {
  */
 function testPropsSequence(sequence) {
   var i;
-  var parentInstance =
-      ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(sequence[0]));
+  var parentInstance = ReactTestUtils.renderIntoDocument(
+    <FriendsStatusDisplay {...sequence[0]} />
+  );
   var statusDisplays = parentInstance.getStatusDisplays();
   var lastInternalStates = getInteralStateByUserName(statusDisplays);
   verifyStatuses(statusDisplays, sequence[0]);
@@ -243,8 +244,9 @@ describe('ReactMultiChildReconcile', function() {
       }
     };
 
-    var parentInstance =
-        ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(props));
+    var parentInstance = ReactTestUtils.renderIntoDocument(
+      <FriendsStatusDisplay {...props} />
+    );
     var statusDisplays = parentInstance.getStatusDisplays();
     var startingInternalState = statusDisplays.jcw.getInternalState();
 
diff --git a/src/core/__tests__/ReactMultiChildText-test.js b/src/core/__tests__/ReactMultiChildText-test.js
index 51a0cffc7a..d77c697409 100644
--- a/src/core/__tests__/ReactMultiChildText-test.js
+++ b/src/core/__tests__/ReactMultiChildText-test.js
@@ -49,7 +49,7 @@ var testAllPermutations = function(testCases) {
 
 var renderChildren = function(children) {
   return ReactTestUtils.renderIntoDocument(
-    React.DOM.div({children: children})
+    <div>{children}</div>
   );
 };
 
diff --git a/src/core/__tests__/ReactTextComponent-test.js b/src/core/__tests__/ReactTextComponent-test.js
index 0eee800d59..9ef9f16276 100644
--- a/src/core/__tests__/ReactTextComponent-test.js
+++ b/src/core/__tests__/ReactTextComponent-test.js
@@ -29,7 +29,7 @@ describe('ReactTextComponent', function() {
   it('should escape the rootID', function(){
     var ThisThingShouldBeEscaped = '">>> LULZ <<<"';
     var ThisThingWasBeEscaped = '&quot;&gt;&gt;&gt; LULZ &lt;&lt;&lt;&quot;';
-    var thing = React.DOM.div(null, React.DOM.span({key:ThisThingShouldBeEscaped}, ["LULZ"]));
+    var thing = <div><span key={ThisThingShouldBeEscaped}>LULZ</span></div>;
     var html = React.renderComponentToString(thing);
     expect(html).not.toContain(ThisThingShouldBeEscaped);
     expect(html).toContain(ThisThingWasBeEscaped);
diff --git a/src/test/ReactTestUtils.js b/src/test/ReactTestUtils.js
index d8ed3c981f..ee8ffad184 100644
--- a/src/test/ReactTestUtils.js
+++ b/src/test/ReactTestUtils.js
@@ -241,7 +241,11 @@ var ReactTestUtils = {
 
     var ConvenienceConstructor = React.createClass({
       render: function() {
-        return ReactDOM[mockTagName](null, this.props.children);
+        return React.createElement(
+          ReactDOM[mockTagName], // TODO: Replace this with just a string
+          null,
+          this.props.children
+        );
       }
     });