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.
Sebastian Markbage committed
Aug 19, 2014 at 23:16 UTC
989e6b618e8084a82dc194bfe4d888ab6a52cc4f
17 files changed
+59
-31
src/addons/transitions/ReactCSSTransitionGroup.js
+6
-2
@@ -21,8 +21,12 @@
21
22
var React = require('React');
23
24
-var ReactTransitionGroup = require('ReactTransitionGroup');
25
-var ReactCSSTransitionGroupChild = require('ReactCSSTransitionGroupChild');
24
+var ReactTransitionGroup = React.createFactory(
25
+ require('ReactTransitionGroup')
26
+);
27
+var ReactCSSTransitionGroupChild = React.createFactory(
28
+ require('ReactCSSTransitionGroupChild')
29
+);
30
31
var merge = require('merge');
32
src/addons/transitions/ReactTransitionGroup.js
+5
-1
@@ -183,7 +183,11 @@ var ReactTransitionGroup = React.createClass({
183
);
184
}
185
}
186
- return this.props.component(this.props, childrenToRender);
186
+ return React.createElement(
187
+ this.props.component,
188
+ this.props,
189
+ childrenToRender
190
+ );
191
}
192
});
193
src/browser/__tests__/ReactDOM-test.js
+3
-2
@@ -25,6 +25,7 @@ var React = require('React');
25
var ReactDOM = require('ReactDOM');
26
var ReactMount = require('ReactMount');
27
var ReactTestUtils = require('ReactTestUtils');
28
+var div = React.createFactory(ReactDOM.div); // TODO: use string
29
30
describe('ReactDOM', function() {
31
// TODO: uncomment this test once we can run in phantom, which
@@ -58,7 +59,7 @@ describe('ReactDOM', function() {
59
60
it("should allow children to be passed as an argument", function() {
61
var argDiv = ReactTestUtils.renderIntoDocument(
61
- ReactDOM.div(null, 'child')
62
+ div(null, 'child')
63
);
64
var argNode = ReactMount.getNode(argDiv._rootNodeID);
65
expect(argNode.innerHTML).toBe('child');
@@ -66,7 +67,7 @@ describe('ReactDOM', function() {
67
68
it("should overwrite props.children with children argument", function() {
69
var conflictDiv = ReactTestUtils.renderIntoDocument(
69
- ReactDOM.div({children: 'fakechild'}, 'child')
70
+ div({children: 'fakechild'}, 'child')
71
);
72
var conflictNode = ReactMount.getNode(conflictDiv._rootNodeID);
73
expect(conflictNode.innerHTML).toBe('child');
src/browser/ui/dom/components/ReactDOMButton.js
+3
-2
@@ -21,12 +21,13 @@
21
var AutoFocusMixin = require('AutoFocusMixin');
22
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
23
var ReactCompositeComponent = require('ReactCompositeComponent');
24
+var ReactDescriptor = require('ReactDescriptor');
25
var ReactDOM = require('ReactDOM');
26
27
var keyMirror = require('keyMirror');
28
28
-// Store a reference to the <button> `ReactDOMComponent`.
29
-var button = ReactDOM.button;
29
+// Store a reference to the <button> `ReactDOMComponent`. TODO: use string
30
+var button = ReactDescriptor.createFactory(ReactDOM.button.type);
31
32
var mouseListenerNames = keyMirror({
33
onClick: true,
src/browser/ui/dom/components/ReactDOMForm.js
+3
-2
@@ -22,10 +22,11 @@ var EventConstants = require('EventConstants');
22
var LocalEventTrapMixin = require('LocalEventTrapMixin');
23
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
24
var ReactCompositeComponent = require('ReactCompositeComponent');
25
+var ReactDescriptor = require('ReactDescriptor');
26
var ReactDOM = require('ReactDOM');
27
27
-// Store a reference to the <form> `ReactDOMComponent`.
28
-var form = ReactDOM.form;
28
+// Store a reference to the <form> `ReactDOMComponent`. TODO: use string
29
+var form = ReactDescriptor.createFactory(ReactDOM.form.type);
30
31
/**
32
* Since onSubmit doesn't bubble OR capture on the top level in IE8, we need
src/browser/ui/dom/components/ReactDOMImg.js
+3
-2
@@ -22,10 +22,11 @@ var EventConstants = require('EventConstants');
22
var LocalEventTrapMixin = require('LocalEventTrapMixin');
23
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
24
var ReactCompositeComponent = require('ReactCompositeComponent');
25
+var ReactDescriptor = require('ReactDescriptor');
26
var ReactDOM = require('ReactDOM');
27
27
-// Store a reference to the <img> `ReactDOMComponent`.
28
-var img = ReactDOM.img;
28
+// Store a reference to the <img> `ReactDOMComponent`. TODO: use string
29
+var img = ReactDescriptor.createFactory(ReactDOM.img.type);
30
31
/**
32
* Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
src/browser/ui/dom/components/ReactDOMInput.js
+3
-2
@@ -23,6 +23,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
23
var LinkedValueUtils = require('LinkedValueUtils');
24
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
25
var ReactCompositeComponent = require('ReactCompositeComponent');
26
+var ReactDescriptor = require('ReactDescriptor');
27
var ReactDOM = require('ReactDOM');
28
var ReactMount = require('ReactMount');
29
var ReactUpdates = require('ReactUpdates');
@@ -30,8 +31,8 @@ var ReactUpdates = require('ReactUpdates');
31
var invariant = require('invariant');
32
var merge = require('merge');
33
33
-// Store a reference to the <input> `ReactDOMComponent`.
34
-var input = ReactDOM.input;
34
+// Store a reference to the <input> `ReactDOMComponent`. TODO: use string
35
+var input = ReactDescriptor.createFactory(ReactDOM.input.type);
36
37
var instancesByReactID = {};
38
src/browser/ui/dom/components/ReactDOMOption.js
+3
-2
@@ -20,12 +20,13 @@
20
21
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
22
var ReactCompositeComponent = require('ReactCompositeComponent');
23
+var ReactDescriptor = require('ReactDescriptor');
24
var ReactDOM = require('ReactDOM');
25
26
var warning = require('warning');
27
27
-// Store a reference to the <option> `ReactDOMComponent`.
28
-var option = ReactDOM.option;
28
+// Store a reference to the <option> `ReactDOMComponent`. TODO: use string
29
+var option = ReactDescriptor.createFactory(ReactDOM.option.type);
30
31
/**
32
* Implements an <option> native component that warns when `selected` is set.
src/browser/ui/dom/components/ReactDOMSelect.js
+3
-2
@@ -22,13 +22,14 @@ var AutoFocusMixin = require('AutoFocusMixin');
22
var LinkedValueUtils = require('LinkedValueUtils');
23
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
24
var ReactCompositeComponent = require('ReactCompositeComponent');
25
+var ReactDescriptor = require('ReactDescriptor');
26
var ReactDOM = require('ReactDOM');
27
var ReactUpdates = require('ReactUpdates');
28
29
var merge = require('merge');
30
30
-// Store a reference to the <select> `ReactDOMComponent`.
31
-var select = ReactDOM.select;
31
+// Store a reference to the <select> `ReactDOMComponent`. TODO: use string
32
+var select = ReactDescriptor.createFactory(ReactDOM.select.type);
33
34
function updateWithPendingValueIfMounted() {
35
/*jshint validthis:true */
src/browser/ui/dom/components/ReactDOMTextarea.js
+3
-2
@@ -23,6 +23,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
23
var LinkedValueUtils = require('LinkedValueUtils');
24
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
25
var ReactCompositeComponent = require('ReactCompositeComponent');
26
+var ReactDescriptor = require('ReactDescriptor');
27
var ReactDOM = require('ReactDOM');
28
var ReactUpdates = require('ReactUpdates');
29
@@ -31,8 +32,8 @@ var merge = require('merge');
32
33
var warning = require('warning');
34
34
-// Store a reference to the <textarea> `ReactDOMComponent`.
35
-var textarea = ReactDOM.textarea;
35
+// Store a reference to the <textarea> `ReactDOMComponent`. TODO: use string
36
+var textarea = ReactDescriptor.createFactory(ReactDOM.textarea.type);
37
38
function forceUpdateIfMounted() {
39
/*jshint validthis:true */
src/browser/ui/dom/components/createFullPageComponent.js
+4
-1
@@ -21,6 +21,7 @@
21
22
// Defeat circular references by requiring this directly.
23
var ReactCompositeComponent = require('ReactCompositeComponent');
24
+var ReactDescriptor = require('ReactDescriptor');
25
26
var invariant = require('invariant');
27
@@ -36,6 +37,8 @@ var invariant = require('invariant');
37
* @return {function} convenience constructor of new component
38
*/
39
function createFullPageComponent(componentClass) {
40
+ var elementFactory = ReactDescriptor.createFactory(componentClass.type);
41
+
42
var FullPageComponent = ReactCompositeComponent.createClass({
43
displayName: 'ReactFullPageComponent' + (
44
componentClass.type.displayName || ''
@@ -53,7 +56,7 @@ function createFullPageComponent(componentClass) {
56
},
57
58
render: function() {
56
- return componentClass(this.props);
59
+ return elementFactory(this.props);
60
}
61
});
62
src/core/ReactEmptyComponent.js
+3
-1
@@ -18,6 +18,8 @@
18
19
"use strict";
20
21
+var ReactDescriptor = require('ReactDescriptor');
22
+
23
var invariant = require('invariant');
24
25
var component;
@@ -27,7 +29,7 @@ var nullComponentIdsRegistry = {};
29
30
var ReactEmptyComponentInjection = {
31
injectEmptyComponent: function(emptyComponent) {
30
- component = emptyComponent;
32
+ component = ReactDescriptor.createFactory(emptyComponent.type);
33
}
34
};
35
src/core/__tests__/ReactCompositeComponent-test.js
+4
-3
@@ -98,7 +98,8 @@ describe('ReactCompositeComponent', function() {
98
console.log(this.getDOMNode());
99
},
100
render: function() {
101
- return this.state.component ? this.state.component() : null;
101
+ var component = this.state.component;
102
+ return component ? <component /> : null;
103
}
104
});
105
@@ -448,7 +449,7 @@ describe('ReactCompositeComponent', function() {
449
});
450
451
var inputProps = {};
451
- var instance1 = Component(inputProps);
452
+ var instance1 = <Component {...inputProps} />;
453
instance1 = ReactTestUtils.renderIntoDocument(instance1);
454
expect(instance1.props.prop).toBe('testKey');
455
@@ -976,7 +977,7 @@ describe('ReactCompositeComponent', function() {
977
'because the function is expected to return a value.'
978
);
979
979
- NamedComponent(); // Shut up lint
980
+ <NamedComponent />; // Shut up lint
981
} finally {
982
console.warn = warn;
983
}
src/core/__tests__/ReactMultiChildReconcile-test.js
+6
-4
@@ -213,8 +213,9 @@ function verifyDomOrderingAccurate(parentInstance, statusDisplays) {
213
*/
214
function testPropsSequence(sequence) {
215
var i;
216
- var parentInstance =
217
- ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(sequence[0]));
216
+ var parentInstance = ReactTestUtils.renderIntoDocument(
217
+ <FriendsStatusDisplay {...sequence[0]} />
218
+ );
219
var statusDisplays = parentInstance.getStatusDisplays();
220
var lastInternalStates = getInteralStateByUserName(statusDisplays);
221
verifyStatuses(statusDisplays, sequence[0]);
@@ -243,8 +244,9 @@ describe('ReactMultiChildReconcile', function() {
244
}
245
};
246
246
- var parentInstance =
247
- ReactTestUtils.renderIntoDocument(FriendsStatusDisplay(props));
247
+ var parentInstance = ReactTestUtils.renderIntoDocument(
248
+ <FriendsStatusDisplay {...props} />
249
+ );
250
var statusDisplays = parentInstance.getStatusDisplays();
251
var startingInternalState = statusDisplays.jcw.getInternalState();
252
src/core/__tests__/ReactMultiChildText-test.js
+1
-1
@@ -49,7 +49,7 @@ var testAllPermutations = function(testCases) {
49
50
var renderChildren = function(children) {
51
return ReactTestUtils.renderIntoDocument(
52
- React.DOM.div({children: children})
52
+ <div>{children}</div>
53
);
54
};
55
src/core/__tests__/ReactTextComponent-test.js
+1
-1
@@ -29,7 +29,7 @@ describe('ReactTextComponent', function() {
29
it('should escape the rootID', function(){
30
var ThisThingShouldBeEscaped = '">>> LULZ <<<"';
31
var ThisThingWasBeEscaped = '">>> LULZ <<<"';
32
- var thing = React.DOM.div(null, React.DOM.span({key:ThisThingShouldBeEscaped}, ["LULZ"]));
32
+ var thing = <div><span key={ThisThingShouldBeEscaped}>LULZ</span></div>;
33
var html = React.renderComponentToString(thing);
34
expect(html).not.toContain(ThisThingShouldBeEscaped);
35
expect(html).toContain(ThisThingWasBeEscaped);
src/test/ReactTestUtils.js
+5
-1
@@ -241,7 +241,11 @@ var ReactTestUtils = {
241
242
var ConvenienceConstructor = React.createClass({
243
render: function() {
244
- return ReactDOM[mockTagName](null, this.props.children);
244
+ return React.createElement(
245
+ ReactDOM[mockTagName], // TODO: Replace this with just a string
246
+ null,
247
+ this.props.children
248
+ );
249
}
250
});
251