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

@@ -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');
 

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
+    );
   }
 });
 

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');

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,

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

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

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 = {};
 

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.

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 */

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 */

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);
     }
   });
 

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);
   }
 };
 

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;
     }

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();
 

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>
   );
 };
 

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);

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
+        );
       }
     });