react 0.13.3 → 0.14.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/addons.js +7 -0
- package/dist/JSXTransformer.js +4101 -2432
- package/dist/react-with-addons.js +4389 -6277
- package/dist/react-with-addons.min.js +6 -8
- package/dist/react.js +4028 -5697
- package/dist/react.min.js +5 -6
- package/lib/{AutoFocusMixin.js → AutoFocusUtils.js} +16 -5
- package/lib/BeforeInputEventPlugin.js +30 -118
- package/lib/CSSCore.js +12 -23
- package/lib/CSSProperty.js +4 -3
- package/lib/CSSPropertyOperations.js +14 -30
- package/lib/CallbackQueue.js +7 -10
- package/lib/ChangeEventPlugin.js +26 -88
- package/lib/ClientReactRootIndex.js +2 -2
- package/lib/DOMChildrenOperations.js +13 -33
- package/lib/DOMProperty.js +86 -147
- package/lib/DOMPropertyOperations.js +91 -67
- package/lib/Danger.js +19 -62
- package/lib/DefaultEventPluginOrder.js +2 -12
- package/lib/EnterLeaveEventPlugin.js +11 -33
- package/lib/EventConstants.js +2 -2
- package/lib/EventListener.js +11 -13
- package/lib/EventPluginHub.js +44 -47
- package/lib/EventPluginRegistry.js +18 -74
- package/lib/EventPluginUtils.js +33 -44
- package/lib/EventPropagators.js +23 -26
- package/lib/ExecutionEnvironment.js +4 -8
- package/lib/FallbackCompositionState.js +3 -3
- package/lib/HTMLDOMPropertyConfig.js +15 -20
- package/lib/LinkedStateMixin.js +3 -6
- package/lib/LinkedValueUtils.js +71 -89
- package/lib/Object.assign.js +1 -1
- package/lib/PooledClass.js +20 -11
- package/lib/React.js +9 -129
- package/lib/ReactBrowserComponentMixin.js +9 -2
- package/lib/ReactBrowserEventEmitter.js +26 -82
- package/lib/ReactCSSTransitionGroup.js +13 -24
- package/lib/ReactCSSTransitionGroupChild.js +26 -28
- package/lib/ReactChildReconciler.js +11 -19
- package/lib/ReactChildren.js +24 -31
- package/lib/ReactClass.js +96 -267
- package/lib/ReactComponent.js +28 -57
- package/lib/ReactComponentBrowserEnvironment.js +4 -8
- package/lib/ReactComponentEnvironment.js +6 -12
- package/lib/ReactComponentWithPureRenderMixin.js +6 -7
- package/lib/ReactCompositeComponent.js +115 -381
- package/lib/ReactCurrentOwner.js +1 -3
- package/lib/ReactDOM.js +4 -2
- package/lib/ReactDOMButton.js +16 -28
- package/lib/ReactDOMClient.js +90 -0
- package/lib/ReactDOMComponent.js +468 -156
- package/lib/ReactDOMIDOperations.js +25 -22
- package/lib/ReactDOMInput.js +79 -108
- package/lib/ReactDOMOption.js +58 -20
- package/lib/ReactDOMSelect.js +95 -83
- package/lib/ReactDOMSelection.js +5 -20
- package/lib/ReactDOMServer.js +24 -0
- package/lib/ReactDOMTextComponent.js +17 -18
- package/lib/ReactDOMTextarea.js +44 -69
- package/lib/ReactDefaultBatchingStrategy.js +9 -13
- package/lib/ReactDefaultInjection.js +20 -76
- package/lib/ReactDefaultPerf.js +36 -69
- package/lib/ReactDefaultPerfAnalysis.js +8 -14
- package/lib/ReactElement.js +26 -120
- package/lib/ReactElementValidator.js +56 -192
- package/lib/ReactEmptyComponent.js +7 -11
- package/lib/ReactErrorUtils.js +3 -3
- package/lib/ReactEventEmitterMixin.js +3 -13
- package/lib/ReactEventListener.js +58 -40
- package/lib/ReactFragment.js +33 -59
- package/lib/ReactInjection.js +1 -1
- package/lib/ReactInputSelection.js +14 -23
- package/lib/ReactInstanceHandles.js +29 -58
- package/lib/ReactInstanceMap.js +5 -5
- package/lib/ReactIsomorphic.js +70 -0
- package/lib/ReactLink.js +2 -4
- package/lib/ReactMarkupChecksum.js +5 -10
- package/lib/ReactMount.js +142 -285
- package/lib/ReactMultiChild.js +19 -45
- package/lib/ReactMultiChildUpdateTypes.js +1 -1
- package/lib/ReactNativeComponent.js +6 -15
- package/lib/ReactNoopUpdateQueue.js +118 -0
- package/lib/ReactOwner.js +7 -24
- package/lib/ReactPerf.js +8 -12
- package/lib/ReactPropTransferer.js +4 -4
- package/lib/ReactPropTypeLocationNames.js +2 -2
- package/lib/ReactPropTypeLocations.js +1 -1
- package/lib/ReactPropTypes.js +41 -61
- package/lib/ReactReconcileTransaction.js +11 -36
- package/lib/ReactReconciler.js +14 -26
- package/lib/ReactRef.js +5 -8
- package/lib/ReactRootIndex.js +2 -2
- package/lib/ReactServerBatchingStrategy.js +23 -0
- package/lib/ReactServerRendering.js +20 -15
- package/lib/ReactServerRenderingTransaction.js +9 -34
- package/lib/ReactStateSetters.js +6 -6
- package/lib/ReactTestUtils.js +137 -190
- package/lib/ReactTransitionChildMapping.js +5 -7
- package/lib/ReactTransitionEvents.js +5 -5
- package/lib/ReactTransitionGroup.js +30 -52
- package/lib/ReactUpdateQueue.js +69 -107
- package/lib/ReactUpdates.js +26 -81
- package/lib/ReactWithAddons.js +5 -6
- package/lib/SVGDOMPropertyConfig.js +39 -4
- package/lib/SelectEventPlugin.js +31 -33
- package/lib/ServerReactRootIndex.js +2 -2
- package/lib/SimpleEventPlugin.js +138 -130
- package/lib/SyntheticClipboardEvent.js +5 -9
- package/lib/SyntheticCompositionEvent.js +4 -10
- package/lib/SyntheticDragEvent.js +3 -3
- package/lib/SyntheticEvent.js +14 -15
- package/lib/SyntheticFocusEvent.js +3 -3
- package/lib/SyntheticInputEvent.js +4 -10
- package/lib/SyntheticKeyboardEvent.js +6 -6
- package/lib/SyntheticMouseEvent.js +10 -16
- package/lib/SyntheticTouchEvent.js +3 -3
- package/lib/SyntheticUIEvent.js +5 -5
- package/lib/SyntheticWheelEvent.js +13 -17
- package/lib/Transaction.js +22 -28
- package/lib/ViewportMetrics.js +2 -2
- package/lib/accumulateInto.js +2 -5
- package/lib/adler32.js +2 -4
- package/lib/camelize.js +4 -2
- package/lib/camelizeStyleName.js +2 -2
- package/lib/cloneWithProps.js +6 -12
- package/lib/containsNode.js +29 -16
- package/lib/createArrayFromMixed.js +17 -16
- package/lib/createNodesFromMarkup.js +6 -8
- package/lib/dangerousStyleValue.js +2 -3
- package/lib/deprecated.js +47 -0
- package/lib/emptyFunction.js +10 -4
- package/lib/emptyObject.js +1 -1
- package/lib/escapeTextContentForBrowser.js +1 -1
- package/lib/findDOMNode.js +7 -27
- package/lib/flattenChildren.js +4 -10
- package/lib/focusNode.js +2 -3
- package/lib/forEachAccumulated.js +3 -3
- package/lib/getActiveElement.js +4 -2
- package/lib/getEventCharCode.js +2 -2
- package/lib/getEventKey.js +1 -1
- package/lib/getEventModifierState.js +1 -2
- package/lib/getEventTarget.js +1 -1
- package/lib/getIteratorFn.js +2 -4
- package/lib/getMarkupWrap.js +18 -40
- package/lib/getNodeForCharacterOffset.js +1 -1
- package/lib/getTextContentAccessor.js +2 -4
- package/lib/getUnboundedScrollPosition.js +1 -1
- package/lib/hyphenate.js +3 -1
- package/lib/hyphenateStyleName.js +2 -2
- package/lib/instantiateReactComponent.js +23 -43
- package/lib/invariant.js +8 -12
- package/lib/isEventSupported.js +7 -10
- package/lib/isNode.js +4 -6
- package/lib/isTextInputElement.js +3 -4
- package/lib/isTextNode.js +3 -1
- package/lib/joinClasses.js +3 -3
- package/lib/keyMirror.js +3 -6
- package/lib/keyOf.js +4 -3
- package/lib/mapObject.js +1 -1
- package/lib/memoizeStringOnly.js +2 -2
- package/lib/onlyChild.js +2 -5
- package/lib/performance.js +2 -5
- package/lib/performanceNow.js +3 -1
- package/lib/quoteAttributeValueForBrowser.js +1 -1
- package/lib/renderSubtreeIntoContainer.js +16 -0
- package/lib/setInnerHTML.js +11 -8
- package/lib/setTextContent.js +3 -3
- package/lib/shallowCompare.js +24 -0
- package/lib/shallowEqual.js +17 -11
- package/lib/shouldUpdateReactComponent.js +3 -64
- package/lib/toArray.js +8 -19
- package/lib/traverseAllChildren.js +23 -90
- package/lib/update.js +25 -85
- package/lib/validateDOMNesting.js +363 -0
- package/lib/warning.js +15 -17
- package/package.json +3 -3
- package/react.js +53 -1
- package/lib/LocalEventTrapMixin.js +0 -53
- package/lib/MobileSafariClickEventPlugin.js +0 -56
- package/lib/ReactContext.js +0 -74
- package/lib/ReactDOMForm.js +0 -47
- package/lib/ReactDOMIframe.js +0 -43
- package/lib/ReactDOMImg.js +0 -44
- package/lib/ReactLifeCycle.js +0 -35
- package/lib/ReactPutListenerQueue.js +0 -54
- package/lib/createFullPageComponent.js +0 -58
- package/lib/cx.js +0 -52
- package/lib/getReactRootElementInContainer.js +0 -33
package/lib/ReactComponent.js
CHANGED
|
@@ -11,17 +11,22 @@
|
|
|
11
11
|
|
|
12
12
|
'use strict';
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var ReactNoopUpdateQueue = require("./ReactNoopUpdateQueue");
|
|
15
15
|
|
|
16
|
+
var emptyObject = require("./emptyObject");
|
|
16
17
|
var invariant = require("./invariant");
|
|
17
18
|
var warning = require("./warning");
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* Base class helpers for the updating state of a component.
|
|
21
22
|
*/
|
|
22
|
-
function ReactComponent(props, context) {
|
|
23
|
+
function ReactComponent(props, context, updater) {
|
|
23
24
|
this.props = props;
|
|
24
25
|
this.context = context;
|
|
26
|
+
this.refs = emptyObject;
|
|
27
|
+
// We initialize the default updater but the real one gets injected by the
|
|
28
|
+
// renderer.
|
|
29
|
+
this.updater = updater || ReactNoopUpdateQueue;
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
/**
|
|
@@ -49,26 +54,14 @@ function ReactComponent(props, context) {
|
|
|
49
54
|
* @final
|
|
50
55
|
* @protected
|
|
51
56
|
*/
|
|
52
|
-
ReactComponent.prototype.setState = function(partialState, callback) {
|
|
53
|
-
(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
partialState == null,
|
|
57
|
-
'setState(...): takes an object of state variables to update or a ' +
|
|
58
|
-
'function which returns an object of state variables.'
|
|
59
|
-
) : invariant(typeof partialState === 'object' ||
|
|
60
|
-
typeof partialState === 'function' ||
|
|
61
|
-
partialState == null));
|
|
62
|
-
if ("production" !== process.env.NODE_ENV) {
|
|
63
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
64
|
-
partialState != null,
|
|
65
|
-
'setState(...): You passed an undefined or null state object; ' +
|
|
66
|
-
'instead, use forceUpdate().'
|
|
67
|
-
) : null);
|
|
57
|
+
ReactComponent.prototype.setState = function (partialState, callback) {
|
|
58
|
+
!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.') : invariant(false) : undefined;
|
|
59
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
60
|
+
'production' !== process.env.NODE_ENV ? warning(partialState != null, 'setState(...): You passed an undefined or null state object; ' + 'instead, use forceUpdate().') : undefined;
|
|
68
61
|
}
|
|
69
|
-
|
|
62
|
+
this.updater.enqueueSetState(this, partialState);
|
|
70
63
|
if (callback) {
|
|
71
|
-
|
|
64
|
+
this.updater.enqueueCallback(this, callback);
|
|
72
65
|
}
|
|
73
66
|
};
|
|
74
67
|
|
|
@@ -86,10 +79,10 @@ ReactComponent.prototype.setState = function(partialState, callback) {
|
|
|
86
79
|
* @final
|
|
87
80
|
* @protected
|
|
88
81
|
*/
|
|
89
|
-
ReactComponent.prototype.forceUpdate = function(callback) {
|
|
90
|
-
|
|
82
|
+
ReactComponent.prototype.forceUpdate = function (callback) {
|
|
83
|
+
this.updater.enqueueForceUpdate(this);
|
|
91
84
|
if (callback) {
|
|
92
|
-
|
|
85
|
+
this.updater.enqueueCallback(this, callback);
|
|
93
86
|
}
|
|
94
87
|
};
|
|
95
88
|
|
|
@@ -98,47 +91,23 @@ ReactComponent.prototype.forceUpdate = function(callback) {
|
|
|
98
91
|
* we would like to deprecate them, we're not going to move them over to this
|
|
99
92
|
* modern base class. Instead, we define a getter that warns if it's accessed.
|
|
100
93
|
*/
|
|
101
|
-
if (
|
|
94
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
102
95
|
var deprecatedAPIs = {
|
|
103
|
-
getDOMNode: [
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
],
|
|
107
|
-
|
|
108
|
-
'isMounted',
|
|
109
|
-
'Instead, make sure to clean up subscriptions and pending requests in ' +
|
|
110
|
-
'componentWillUnmount to prevent memory leaks.'
|
|
111
|
-
],
|
|
112
|
-
replaceProps: [
|
|
113
|
-
'replaceProps',
|
|
114
|
-
'Instead, call React.render again at the top level.'
|
|
115
|
-
],
|
|
116
|
-
replaceState: [
|
|
117
|
-
'replaceState',
|
|
118
|
-
'Refactor your code to use setState instead (see ' +
|
|
119
|
-
'https://github.com/facebook/react/issues/3236).'
|
|
120
|
-
],
|
|
121
|
-
setProps: [
|
|
122
|
-
'setProps',
|
|
123
|
-
'Instead, call React.render again at the top level.'
|
|
124
|
-
]
|
|
96
|
+
getDOMNode: ['getDOMNode', 'Use React.findDOMNode(component) instead.'],
|
|
97
|
+
isMounted: ['isMounted', 'Instead, make sure to clean up subscriptions and pending requests in ' + 'componentWillUnmount to prevent memory leaks.'],
|
|
98
|
+
replaceProps: ['replaceProps', 'Instead, call React.render again at the top level.'],
|
|
99
|
+
replaceState: ['replaceState', 'Refactor your code to use setState instead (see ' + 'https://github.com/facebook/react/issues/3236).'],
|
|
100
|
+
setProps: ['setProps', 'Instead, call React.render again at the top level.']
|
|
125
101
|
};
|
|
126
|
-
var defineDeprecationWarning = function(methodName, info) {
|
|
102
|
+
var defineDeprecationWarning = function (methodName, info) {
|
|
127
103
|
try {
|
|
128
104
|
Object.defineProperty(ReactComponent.prototype, methodName, {
|
|
129
|
-
get: function() {
|
|
130
|
-
|
|
131
|
-
false,
|
|
132
|
-
'%s(...) is deprecated in plain JavaScript React classes. %s',
|
|
133
|
-
info[0],
|
|
134
|
-
info[1]
|
|
135
|
-
) : null);
|
|
105
|
+
get: function () {
|
|
106
|
+
'production' !== process.env.NODE_ENV ? warning(false, '%s(...) is deprecated in plain JavaScript React classes. %s', info[0], info[1]) : undefined;
|
|
136
107
|
return undefined;
|
|
137
108
|
}
|
|
138
109
|
});
|
|
139
|
-
} catch (x) {
|
|
140
|
-
// IE will fail on defineProperty (es5-shim/sham too)
|
|
141
|
-
}
|
|
110
|
+
} catch (x) {}
|
|
142
111
|
};
|
|
143
112
|
for (var fnName in deprecatedAPIs) {
|
|
144
113
|
if (deprecatedAPIs.hasOwnProperty(fnName)) {
|
|
@@ -148,3 +117,5 @@ if ("production" !== process.env.NODE_ENV) {
|
|
|
148
117
|
}
|
|
149
118
|
|
|
150
119
|
module.exports = ReactComponent;
|
|
120
|
+
|
|
121
|
+
// IE will fail on defineProperty (es5-shim/sham too)
|
|
@@ -9,8 +9,6 @@
|
|
|
9
9
|
* @providesModule ReactComponentBrowserEnvironment
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
/*jslint evil: true */
|
|
13
|
-
|
|
14
12
|
'use strict';
|
|
15
13
|
|
|
16
14
|
var ReactDOMIDOperations = require("./ReactDOMIDOperations");
|
|
@@ -23,11 +21,9 @@ var ReactMount = require("./ReactMount");
|
|
|
23
21
|
*/
|
|
24
22
|
var ReactComponentBrowserEnvironment = {
|
|
25
23
|
|
|
26
|
-
processChildrenUpdates:
|
|
27
|
-
ReactDOMIDOperations.dangerouslyProcessChildrenUpdates,
|
|
24
|
+
processChildrenUpdates: ReactDOMIDOperations.dangerouslyProcessChildrenUpdates,
|
|
28
25
|
|
|
29
|
-
replaceNodeWithMarkupByID:
|
|
30
|
-
ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,
|
|
26
|
+
replaceNodeWithMarkupByID: ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,
|
|
31
27
|
|
|
32
28
|
/**
|
|
33
29
|
* If a particular environment requires that some resources be cleaned up,
|
|
@@ -36,10 +32,10 @@ var ReactComponentBrowserEnvironment = {
|
|
|
36
32
|
*
|
|
37
33
|
* @private
|
|
38
34
|
*/
|
|
39
|
-
unmountIDFromEnvironment: function(rootNodeID) {
|
|
35
|
+
unmountIDFromEnvironment: function (rootNodeID) {
|
|
40
36
|
ReactMount.purgeID(rootNodeID);
|
|
41
37
|
}
|
|
42
38
|
|
|
43
39
|
};
|
|
44
40
|
|
|
45
|
-
module.exports = ReactComponentBrowserEnvironment;
|
|
41
|
+
module.exports = ReactComponentBrowserEnvironment;
|
|
@@ -37,21 +37,15 @@ var ReactComponentEnvironment = {
|
|
|
37
37
|
processChildrenUpdates: null,
|
|
38
38
|
|
|
39
39
|
injection: {
|
|
40
|
-
injectEnvironment: function(environment) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
ReactComponentEnvironment.unmountIDFromEnvironment =
|
|
46
|
-
environment.unmountIDFromEnvironment;
|
|
47
|
-
ReactComponentEnvironment.replaceNodeWithMarkupByID =
|
|
48
|
-
environment.replaceNodeWithMarkupByID;
|
|
49
|
-
ReactComponentEnvironment.processChildrenUpdates =
|
|
50
|
-
environment.processChildrenUpdates;
|
|
40
|
+
injectEnvironment: function (environment) {
|
|
41
|
+
!!injected ? 'production' !== process.env.NODE_ENV ? invariant(false, 'ReactCompositeComponent: injectEnvironment() can only be called once.') : invariant(false) : undefined;
|
|
42
|
+
ReactComponentEnvironment.unmountIDFromEnvironment = environment.unmountIDFromEnvironment;
|
|
43
|
+
ReactComponentEnvironment.replaceNodeWithMarkupByID = environment.replaceNodeWithMarkupByID;
|
|
44
|
+
ReactComponentEnvironment.processChildrenUpdates = environment.processChildrenUpdates;
|
|
51
45
|
injected = true;
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
|
|
55
49
|
};
|
|
56
50
|
|
|
57
|
-
module.exports = ReactComponentEnvironment;
|
|
51
|
+
module.exports = ReactComponentEnvironment;
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
7
7
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
8
8
|
*
|
|
9
|
-
* @providesModule ReactComponentWithPureRenderMixin
|
|
10
|
-
*/
|
|
9
|
+
* @providesModule ReactComponentWithPureRenderMixin
|
|
10
|
+
*/
|
|
11
11
|
|
|
12
12
|
'use strict';
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var shallowCompare = require("./shallowCompare");
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* If your React component's render function is "pure", e.g. it will render the
|
|
@@ -38,10 +38,9 @@ var shallowEqual = require("./shallowEqual");
|
|
|
38
38
|
* use `forceUpdate()` when you know deep data structures have changed.
|
|
39
39
|
*/
|
|
40
40
|
var ReactComponentWithPureRenderMixin = {
|
|
41
|
-
shouldComponentUpdate: function(nextProps, nextState) {
|
|
42
|
-
return
|
|
43
|
-
!shallowEqual(this.state, nextState);
|
|
41
|
+
shouldComponentUpdate: function (nextProps, nextState) {
|
|
42
|
+
return shallowCompare(this, nextProps, nextState);
|
|
44
43
|
}
|
|
45
44
|
};
|
|
46
45
|
|
|
47
|
-
module.exports = ReactComponentWithPureRenderMixin;
|
|
46
|
+
module.exports = ReactComponentWithPureRenderMixin;
|
|
@@ -12,18 +12,14 @@
|
|
|
12
12
|
'use strict';
|
|
13
13
|
|
|
14
14
|
var ReactComponentEnvironment = require("./ReactComponentEnvironment");
|
|
15
|
-
var ReactContext = require("./ReactContext");
|
|
16
15
|
var ReactCurrentOwner = require("./ReactCurrentOwner");
|
|
17
16
|
var ReactElement = require("./ReactElement");
|
|
18
|
-
var ReactElementValidator = require("./ReactElementValidator");
|
|
19
17
|
var ReactInstanceMap = require("./ReactInstanceMap");
|
|
20
|
-
var ReactLifeCycle = require("./ReactLifeCycle");
|
|
21
|
-
var ReactNativeComponent = require("./ReactNativeComponent");
|
|
22
18
|
var ReactPerf = require("./ReactPerf");
|
|
23
19
|
var ReactPropTypeLocations = require("./ReactPropTypeLocations");
|
|
24
20
|
var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
|
|
25
21
|
var ReactReconciler = require("./ReactReconciler");
|
|
26
|
-
var
|
|
22
|
+
var ReactUpdateQueue = require("./ReactUpdateQueue");
|
|
27
23
|
|
|
28
24
|
var assign = require("./Object.assign");
|
|
29
25
|
var emptyObject = require("./emptyObject");
|
|
@@ -89,7 +85,7 @@ var ReactCompositeComponentMixin = {
|
|
|
89
85
|
* @final
|
|
90
86
|
* @internal
|
|
91
87
|
*/
|
|
92
|
-
construct: function(element) {
|
|
88
|
+
construct: function (element) {
|
|
93
89
|
this._currentElement = element;
|
|
94
90
|
this._rootNodeID = null;
|
|
95
91
|
this._instance = null;
|
|
@@ -104,7 +100,7 @@ var ReactCompositeComponentMixin = {
|
|
|
104
100
|
|
|
105
101
|
this._context = null;
|
|
106
102
|
this._mountOrder = 0;
|
|
107
|
-
this.
|
|
103
|
+
this._topLevelWrapper = null;
|
|
108
104
|
|
|
109
105
|
// See ReactUpdates and ReactUpdateQueue.
|
|
110
106
|
this._pendingCallbacks = null;
|
|
@@ -119,32 +115,23 @@ var ReactCompositeComponentMixin = {
|
|
|
119
115
|
* @final
|
|
120
116
|
* @internal
|
|
121
117
|
*/
|
|
122
|
-
mountComponent: function(rootID, transaction, context) {
|
|
118
|
+
mountComponent: function (rootID, transaction, context) {
|
|
123
119
|
this._context = context;
|
|
124
120
|
this._mountOrder = nextMountID++;
|
|
125
121
|
this._rootNodeID = rootID;
|
|
126
122
|
|
|
127
123
|
var publicProps = this._processProps(this._currentElement.props);
|
|
128
|
-
var publicContext = this._processContext(
|
|
124
|
+
var publicContext = this._processContext(context);
|
|
129
125
|
|
|
130
|
-
var Component =
|
|
131
|
-
this._currentElement
|
|
132
|
-
);
|
|
126
|
+
var Component = this._currentElement.type;
|
|
133
127
|
|
|
134
128
|
// Initialize the public class
|
|
135
|
-
var inst = new Component(publicProps, publicContext);
|
|
129
|
+
var inst = new Component(publicProps, publicContext, ReactUpdateQueue);
|
|
136
130
|
|
|
137
|
-
if (
|
|
131
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
138
132
|
// This will throw later in _renderValidatedComponent, but add an early
|
|
139
133
|
// warning now to help debugging
|
|
140
|
-
|
|
141
|
-
inst.render != null,
|
|
142
|
-
'%s(...): No `render` method found on the returned component ' +
|
|
143
|
-
'instance: you may have forgotten to define `render` in your ' +
|
|
144
|
-
'component or you may have accidentally tried to render an element ' +
|
|
145
|
-
'whose type is a function that isn\'t a React component.',
|
|
146
|
-
Component.displayName || Component.name || 'Component'
|
|
147
|
-
) : null);
|
|
134
|
+
'production' !== process.env.NODE_ENV ? warning(inst.render != null, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render` in your ' + 'component or you may have accidentally tried to render an element ' + 'whose type is a function that isn\'t a React component.', Component.displayName || Component.name || 'Component') : undefined;
|
|
148
135
|
}
|
|
149
136
|
|
|
150
137
|
// These should be set up in the constructor, but as a convenience for
|
|
@@ -152,104 +139,50 @@ var ReactCompositeComponentMixin = {
|
|
|
152
139
|
inst.props = publicProps;
|
|
153
140
|
inst.context = publicContext;
|
|
154
141
|
inst.refs = emptyObject;
|
|
142
|
+
inst.updater = ReactUpdateQueue;
|
|
155
143
|
|
|
156
144
|
this._instance = inst;
|
|
157
145
|
|
|
158
146
|
// Store a reference from the instance back to the internal representation
|
|
159
147
|
ReactInstanceMap.set(inst, this);
|
|
160
148
|
|
|
161
|
-
if (
|
|
162
|
-
this._warnIfContextsDiffer(this._currentElement._context, context);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
if ("production" !== process.env.NODE_ENV) {
|
|
149
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
166
150
|
// Since plain JS classes are defined without any special initialization
|
|
167
151
|
// logic, we can not catch common errors early. Therefore, we have to
|
|
168
152
|
// catch them here, at initialization time, instead.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
) : null);
|
|
177
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
178
|
-
!inst.getDefaultProps ||
|
|
179
|
-
inst.getDefaultProps.isReactClassApproved,
|
|
180
|
-
'getDefaultProps was defined on %s, a plain JavaScript class. ' +
|
|
181
|
-
'This is only supported for classes created using React.createClass. ' +
|
|
182
|
-
'Use a static property to define defaultProps instead.',
|
|
183
|
-
this.getName() || 'a component'
|
|
184
|
-
) : null);
|
|
185
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
186
|
-
!inst.propTypes,
|
|
187
|
-
'propTypes was defined as an instance property on %s. Use a static ' +
|
|
188
|
-
'property to define propTypes instead.',
|
|
189
|
-
this.getName() || 'a component'
|
|
190
|
-
) : null);
|
|
191
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
192
|
-
!inst.contextTypes,
|
|
193
|
-
'contextTypes was defined as an instance property on %s. Use a ' +
|
|
194
|
-
'static property to define contextTypes instead.',
|
|
195
|
-
this.getName() || 'a component'
|
|
196
|
-
) : null);
|
|
197
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
198
|
-
typeof inst.componentShouldUpdate !== 'function',
|
|
199
|
-
'%s has a method called ' +
|
|
200
|
-
'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
|
|
201
|
-
'The name is phrased as a question because the function is ' +
|
|
202
|
-
'expected to return a value.',
|
|
203
|
-
(this.getName() || 'A component')
|
|
204
|
-
) : null);
|
|
153
|
+
'production' !== process.env.NODE_ENV ? warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component') : undefined;
|
|
154
|
+
'production' !== process.env.NODE_ENV ? warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component') : undefined;
|
|
155
|
+
'production' !== process.env.NODE_ENV ? warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component') : undefined;
|
|
156
|
+
'production' !== process.env.NODE_ENV ? warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component') : undefined;
|
|
157
|
+
'production' !== process.env.NODE_ENV ? warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component') : undefined;
|
|
158
|
+
'production' !== process.env.NODE_ENV ? warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component') : undefined;
|
|
159
|
+
'production' !== process.env.NODE_ENV ? warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component') : undefined;
|
|
205
160
|
}
|
|
206
161
|
|
|
207
162
|
var initialState = inst.state;
|
|
208
163
|
if (initialState === undefined) {
|
|
209
164
|
inst.state = initialState = null;
|
|
210
165
|
}
|
|
211
|
-
(
|
|
212
|
-
typeof initialState === 'object' && !Array.isArray(initialState),
|
|
213
|
-
'%s.state: must be set to an object or null',
|
|
214
|
-
this.getName() || 'ReactCompositeComponent'
|
|
215
|
-
) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));
|
|
166
|
+
!(typeof initialState === 'object' && !Array.isArray(initialState)) ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent') : invariant(false) : undefined;
|
|
216
167
|
|
|
217
168
|
this._pendingStateQueue = null;
|
|
218
169
|
this._pendingReplaceState = false;
|
|
219
170
|
this._pendingForceUpdate = false;
|
|
220
171
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
if (inst.componentWillMount) {
|
|
228
|
-
inst.componentWillMount();
|
|
229
|
-
// When mounting, calls to `setState` by `componentWillMount` will set
|
|
230
|
-
// `this._pendingStateQueue` without triggering a re-render.
|
|
231
|
-
if (this._pendingStateQueue) {
|
|
232
|
-
inst.state = this._processPendingState(inst.props, inst.context);
|
|
233
|
-
}
|
|
172
|
+
if (inst.componentWillMount) {
|
|
173
|
+
inst.componentWillMount();
|
|
174
|
+
// When mounting, calls to `setState` by `componentWillMount` will set
|
|
175
|
+
// `this._pendingStateQueue` without triggering a re-render.
|
|
176
|
+
if (this._pendingStateQueue) {
|
|
177
|
+
inst.state = this._processPendingState(inst.props, inst.context);
|
|
234
178
|
}
|
|
235
|
-
|
|
236
|
-
childContext = this._getValidatedChildContext(context);
|
|
237
|
-
renderedElement = this._renderValidatedComponent(childContext);
|
|
238
|
-
} finally {
|
|
239
|
-
ReactLifeCycle.currentlyMountingInstance = previouslyMounting;
|
|
240
179
|
}
|
|
241
180
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
var markup = ReactReconciler.mountComponent(
|
|
248
|
-
this._renderedComponent,
|
|
249
|
-
rootID,
|
|
250
|
-
transaction,
|
|
251
|
-
this._mergeChildContext(context, childContext)
|
|
252
|
-
);
|
|
181
|
+
var renderedElement = this._renderValidatedComponent();
|
|
182
|
+
|
|
183
|
+
this._renderedComponent = this._instantiateReactComponent(renderedElement);
|
|
184
|
+
|
|
185
|
+
var markup = ReactReconciler.mountComponent(this._renderedComponent, rootID, transaction, this._processChildContext(context));
|
|
253
186
|
if (inst.componentDidMount) {
|
|
254
187
|
transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
|
|
255
188
|
}
|
|
@@ -263,23 +196,19 @@ var ReactCompositeComponentMixin = {
|
|
|
263
196
|
* @final
|
|
264
197
|
* @internal
|
|
265
198
|
*/
|
|
266
|
-
unmountComponent: function() {
|
|
199
|
+
unmountComponent: function () {
|
|
267
200
|
var inst = this._instance;
|
|
268
201
|
|
|
269
202
|
if (inst.componentWillUnmount) {
|
|
270
|
-
|
|
271
|
-
ReactLifeCycle.currentlyUnmountingInstance = this;
|
|
272
|
-
try {
|
|
273
|
-
inst.componentWillUnmount();
|
|
274
|
-
} finally {
|
|
275
|
-
ReactLifeCycle.currentlyUnmountingInstance = previouslyUnmounting;
|
|
276
|
-
}
|
|
203
|
+
inst.componentWillUnmount();
|
|
277
204
|
}
|
|
278
205
|
|
|
279
206
|
ReactReconciler.unmountComponent(this._renderedComponent);
|
|
280
207
|
this._renderedComponent = null;
|
|
281
208
|
|
|
282
209
|
// Reset pending fields
|
|
210
|
+
// Even if this component is scheduled for another update in ReactUpdates,
|
|
211
|
+
// it would still be ignored because these fields are reset.
|
|
283
212
|
this._pendingStateQueue = null;
|
|
284
213
|
this._pendingReplaceState = false;
|
|
285
214
|
this._pendingForceUpdate = false;
|
|
@@ -290,6 +219,7 @@ var ReactCompositeComponentMixin = {
|
|
|
290
219
|
// longer accessible.
|
|
291
220
|
this._context = null;
|
|
292
221
|
this._rootNodeID = null;
|
|
222
|
+
this._topLevelWrapper = null;
|
|
293
223
|
|
|
294
224
|
// Delete the reference from the instance to this internal representation
|
|
295
225
|
// which allow the internals to be properly cleaned up even if the user
|
|
@@ -303,25 +233,6 @@ var ReactCompositeComponentMixin = {
|
|
|
303
233
|
// TODO: inst.context = null;
|
|
304
234
|
},
|
|
305
235
|
|
|
306
|
-
/**
|
|
307
|
-
* Schedule a partial update to the props. Only used for internal testing.
|
|
308
|
-
*
|
|
309
|
-
* @param {object} partialProps Subset of the next props.
|
|
310
|
-
* @param {?function} callback Called after props are updated.
|
|
311
|
-
* @final
|
|
312
|
-
* @internal
|
|
313
|
-
*/
|
|
314
|
-
_setPropsInternal: function(partialProps, callback) {
|
|
315
|
-
// This is a deoptimized path. We optimize for always having an element.
|
|
316
|
-
// This creates an extra internal element.
|
|
317
|
-
var element = this._pendingElement || this._currentElement;
|
|
318
|
-
this._pendingElement = ReactElement.cloneAndReplaceProps(
|
|
319
|
-
element,
|
|
320
|
-
assign({}, element.props, partialProps)
|
|
321
|
-
);
|
|
322
|
-
ReactUpdates.enqueueUpdate(this, callback);
|
|
323
|
-
},
|
|
324
|
-
|
|
325
236
|
/**
|
|
326
237
|
* Filters the context object to only contain keys specified in
|
|
327
238
|
* `contextTypes`
|
|
@@ -330,14 +241,10 @@ var ReactCompositeComponentMixin = {
|
|
|
330
241
|
* @return {?object}
|
|
331
242
|
* @private
|
|
332
243
|
*/
|
|
333
|
-
_maskContext: function(context) {
|
|
244
|
+
_maskContext: function (context) {
|
|
334
245
|
var maskedContext = null;
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
if (typeof this._currentElement.type === 'string') {
|
|
338
|
-
return emptyObject;
|
|
339
|
-
}
|
|
340
|
-
var contextTypes = this._currentElement.type.contextTypes;
|
|
246
|
+
var Component = this._currentElement.type;
|
|
247
|
+
var contextTypes = Component.contextTypes;
|
|
341
248
|
if (!contextTypes) {
|
|
342
249
|
return emptyObject;
|
|
343
250
|
}
|
|
@@ -356,18 +263,12 @@ var ReactCompositeComponentMixin = {
|
|
|
356
263
|
* @return {?object}
|
|
357
264
|
* @private
|
|
358
265
|
*/
|
|
359
|
-
_processContext: function(context) {
|
|
266
|
+
_processContext: function (context) {
|
|
360
267
|
var maskedContext = this._maskContext(context);
|
|
361
|
-
if (
|
|
362
|
-
var Component =
|
|
363
|
-
this._currentElement
|
|
364
|
-
);
|
|
268
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
269
|
+
var Component = this._currentElement.type;
|
|
365
270
|
if (Component.contextTypes) {
|
|
366
|
-
this._checkPropTypes(
|
|
367
|
-
Component.contextTypes,
|
|
368
|
-
maskedContext,
|
|
369
|
-
ReactPropTypeLocations.context
|
|
370
|
-
);
|
|
271
|
+
this._checkPropTypes(Component.contextTypes, maskedContext, ReactPropTypeLocations.context);
|
|
371
272
|
}
|
|
372
273
|
}
|
|
373
274
|
return maskedContext;
|
|
@@ -378,38 +279,18 @@ var ReactCompositeComponentMixin = {
|
|
|
378
279
|
* @return {object}
|
|
379
280
|
* @private
|
|
380
281
|
*/
|
|
381
|
-
|
|
282
|
+
_processChildContext: function (currentContext) {
|
|
283
|
+
var Component = this._currentElement.type;
|
|
382
284
|
var inst = this._instance;
|
|
383
285
|
var childContext = inst.getChildContext && inst.getChildContext();
|
|
384
286
|
if (childContext) {
|
|
385
|
-
(
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
'use getChildContext().',
|
|
389
|
-
this.getName() || 'ReactCompositeComponent'
|
|
390
|
-
) : invariant(typeof inst.constructor.childContextTypes === 'object'));
|
|
391
|
-
if ("production" !== process.env.NODE_ENV) {
|
|
392
|
-
this._checkPropTypes(
|
|
393
|
-
inst.constructor.childContextTypes,
|
|
394
|
-
childContext,
|
|
395
|
-
ReactPropTypeLocations.childContext
|
|
396
|
-
);
|
|
287
|
+
!(typeof Component.childContextTypes === 'object') ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', this.getName() || 'ReactCompositeComponent') : invariant(false) : undefined;
|
|
288
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
289
|
+
this._checkPropTypes(Component.childContextTypes, childContext, ReactPropTypeLocations.childContext);
|
|
397
290
|
}
|
|
398
291
|
for (var name in childContext) {
|
|
399
|
-
(
|
|
400
|
-
name in inst.constructor.childContextTypes,
|
|
401
|
-
'%s.getChildContext(): key "%s" is not defined in childContextTypes.',
|
|
402
|
-
this.getName() || 'ReactCompositeComponent',
|
|
403
|
-
name
|
|
404
|
-
) : invariant(name in inst.constructor.childContextTypes));
|
|
292
|
+
!(name in Component.childContextTypes) ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name) : invariant(false) : undefined;
|
|
405
293
|
}
|
|
406
|
-
return childContext;
|
|
407
|
-
}
|
|
408
|
-
return null;
|
|
409
|
-
},
|
|
410
|
-
|
|
411
|
-
_mergeChildContext: function(currentContext, childContext) {
|
|
412
|
-
if (childContext) {
|
|
413
294
|
return assign({}, currentContext, childContext);
|
|
414
295
|
}
|
|
415
296
|
return currentContext;
|
|
@@ -424,17 +305,11 @@ var ReactCompositeComponentMixin = {
|
|
|
424
305
|
* @return {object}
|
|
425
306
|
* @private
|
|
426
307
|
*/
|
|
427
|
-
_processProps: function(newProps) {
|
|
428
|
-
if (
|
|
429
|
-
var Component =
|
|
430
|
-
this._currentElement
|
|
431
|
-
);
|
|
308
|
+
_processProps: function (newProps) {
|
|
309
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
310
|
+
var Component = this._currentElement.type;
|
|
432
311
|
if (Component.propTypes) {
|
|
433
|
-
this._checkPropTypes(
|
|
434
|
-
Component.propTypes,
|
|
435
|
-
newProps,
|
|
436
|
-
ReactPropTypeLocations.prop
|
|
437
|
-
);
|
|
312
|
+
this._checkPropTypes(Component.propTypes, newProps, ReactPropTypeLocations.prop);
|
|
438
313
|
}
|
|
439
314
|
}
|
|
440
315
|
return newProps;
|
|
@@ -448,7 +323,7 @@ var ReactCompositeComponentMixin = {
|
|
|
448
323
|
* @param {string} location e.g. "prop", "context", "child context"
|
|
449
324
|
* @private
|
|
450
325
|
*/
|
|
451
|
-
_checkPropTypes: function(propTypes, props, location) {
|
|
326
|
+
_checkPropTypes: function (propTypes, props, location) {
|
|
452
327
|
// TODO: Stop validating prop types here and only use the element
|
|
453
328
|
// validation.
|
|
454
329
|
var componentName = this.getName();
|
|
@@ -458,14 +333,7 @@ var ReactCompositeComponentMixin = {
|
|
|
458
333
|
try {
|
|
459
334
|
// This is intentionally an invariant that gets caught. It's the same
|
|
460
335
|
// behavior as without this statement except with a better message.
|
|
461
|
-
(
|
|
462
|
-
typeof propTypes[propName] === 'function',
|
|
463
|
-
'%s: %s type `%s` is invalid; it must be a function, usually ' +
|
|
464
|
-
'from React.PropTypes.',
|
|
465
|
-
componentName || 'React class',
|
|
466
|
-
ReactPropTypeLocationNames[location],
|
|
467
|
-
propName
|
|
468
|
-
) : invariant(typeof propTypes[propName] === 'function'));
|
|
336
|
+
!(typeof propTypes[propName] === 'function') ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s: %s type `%s` is invalid; it must be a function, usually ' + 'from React.PropTypes.', componentName || 'React class', ReactPropTypeLocationNames[location], propName) : invariant(false) : undefined;
|
|
469
337
|
error = propTypes[propName](props, propName, componentName, location);
|
|
470
338
|
} catch (ex) {
|
|
471
339
|
error = ex;
|
|
@@ -478,38 +346,22 @@ var ReactCompositeComponentMixin = {
|
|
|
478
346
|
|
|
479
347
|
if (location === ReactPropTypeLocations.prop) {
|
|
480
348
|
// Preface gives us something to blacklist in warning module
|
|
481
|
-
|
|
482
|
-
false,
|
|
483
|
-
'Failed Composite propType: %s%s',
|
|
484
|
-
error.message,
|
|
485
|
-
addendum
|
|
486
|
-
) : null);
|
|
349
|
+
'production' !== process.env.NODE_ENV ? warning(false, 'Failed Composite propType: %s%s', error.message, addendum) : undefined;
|
|
487
350
|
} else {
|
|
488
|
-
|
|
489
|
-
false,
|
|
490
|
-
'Failed Context Types: %s%s',
|
|
491
|
-
error.message,
|
|
492
|
-
addendum
|
|
493
|
-
) : null);
|
|
351
|
+
'production' !== process.env.NODE_ENV ? warning(false, 'Failed Context Types: %s%s', error.message, addendum) : undefined;
|
|
494
352
|
}
|
|
495
353
|
}
|
|
496
354
|
}
|
|
497
355
|
}
|
|
498
356
|
},
|
|
499
357
|
|
|
500
|
-
receiveComponent: function(nextElement, transaction, nextContext) {
|
|
358
|
+
receiveComponent: function (nextElement, transaction, nextContext) {
|
|
501
359
|
var prevElement = this._currentElement;
|
|
502
360
|
var prevContext = this._context;
|
|
503
361
|
|
|
504
362
|
this._pendingElement = null;
|
|
505
363
|
|
|
506
|
-
this.updateComponent(
|
|
507
|
-
transaction,
|
|
508
|
-
prevElement,
|
|
509
|
-
nextElement,
|
|
510
|
-
prevContext,
|
|
511
|
-
nextContext
|
|
512
|
-
);
|
|
364
|
+
this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext);
|
|
513
365
|
},
|
|
514
366
|
|
|
515
367
|
/**
|
|
@@ -519,54 +371,13 @@ var ReactCompositeComponentMixin = {
|
|
|
519
371
|
* @param {ReactReconcileTransaction} transaction
|
|
520
372
|
* @internal
|
|
521
373
|
*/
|
|
522
|
-
performUpdateIfNecessary: function(transaction) {
|
|
374
|
+
performUpdateIfNecessary: function (transaction) {
|
|
523
375
|
if (this._pendingElement != null) {
|
|
524
|
-
ReactReconciler.receiveComponent(
|
|
525
|
-
this,
|
|
526
|
-
this._pendingElement || this._currentElement,
|
|
527
|
-
transaction,
|
|
528
|
-
this._context
|
|
529
|
-
);
|
|
376
|
+
ReactReconciler.receiveComponent(this, this._pendingElement || this._currentElement, transaction, this._context);
|
|
530
377
|
}
|
|
531
378
|
|
|
532
379
|
if (this._pendingStateQueue !== null || this._pendingForceUpdate) {
|
|
533
|
-
|
|
534
|
-
ReactElementValidator.checkAndWarnForMutatedProps(
|
|
535
|
-
this._currentElement
|
|
536
|
-
);
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
this.updateComponent(
|
|
540
|
-
transaction,
|
|
541
|
-
this._currentElement,
|
|
542
|
-
this._currentElement,
|
|
543
|
-
this._context,
|
|
544
|
-
this._context
|
|
545
|
-
);
|
|
546
|
-
}
|
|
547
|
-
},
|
|
548
|
-
|
|
549
|
-
/**
|
|
550
|
-
* Compare two contexts, warning if they are different
|
|
551
|
-
* TODO: Remove this check when owner-context is removed
|
|
552
|
-
*/
|
|
553
|
-
_warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
|
|
554
|
-
ownerBasedContext = this._maskContext(ownerBasedContext);
|
|
555
|
-
parentBasedContext = this._maskContext(parentBasedContext);
|
|
556
|
-
var parentKeys = Object.keys(parentBasedContext).sort();
|
|
557
|
-
var displayName = this.getName() || 'ReactCompositeComponent';
|
|
558
|
-
for (var i = 0; i < parentKeys.length; i++) {
|
|
559
|
-
var key = parentKeys[i];
|
|
560
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
561
|
-
ownerBasedContext[key] === parentBasedContext[key],
|
|
562
|
-
'owner-based and parent-based contexts differ ' +
|
|
563
|
-
'(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
|
|
564
|
-
'(see: http://fb.me/react-context-by-parent)',
|
|
565
|
-
ownerBasedContext[key],
|
|
566
|
-
parentBasedContext[key],
|
|
567
|
-
key,
|
|
568
|
-
displayName
|
|
569
|
-
) : null);
|
|
380
|
+
this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context);
|
|
570
381
|
}
|
|
571
382
|
},
|
|
572
383
|
|
|
@@ -585,32 +396,19 @@ var ReactCompositeComponentMixin = {
|
|
|
585
396
|
* @internal
|
|
586
397
|
* @overridable
|
|
587
398
|
*/
|
|
588
|
-
updateComponent: function(
|
|
589
|
-
transaction,
|
|
590
|
-
prevParentElement,
|
|
591
|
-
nextParentElement,
|
|
592
|
-
prevUnmaskedContext,
|
|
593
|
-
nextUnmaskedContext
|
|
594
|
-
) {
|
|
399
|
+
updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
|
|
595
400
|
var inst = this._instance;
|
|
596
401
|
|
|
597
|
-
var nextContext = inst.context;
|
|
598
|
-
var nextProps
|
|
402
|
+
var nextContext = this._context === nextUnmaskedContext ? inst.context : this._processContext(nextUnmaskedContext);
|
|
403
|
+
var nextProps;
|
|
599
404
|
|
|
600
405
|
// Distinguish between a props update versus a simple state update
|
|
601
|
-
if (prevParentElement
|
|
602
|
-
|
|
406
|
+
if (prevParentElement === nextParentElement) {
|
|
407
|
+
// Skip checking prop types again -- we don't read inst.props to avoid
|
|
408
|
+
// warning for DOM component props in this upgrade
|
|
409
|
+
nextProps = nextParentElement.props;
|
|
410
|
+
} else {
|
|
603
411
|
nextProps = this._processProps(nextParentElement.props);
|
|
604
|
-
|
|
605
|
-
if ("production" !== process.env.NODE_ENV) {
|
|
606
|
-
if (nextUnmaskedContext != null) {
|
|
607
|
-
this._warnIfContextsDiffer(
|
|
608
|
-
nextParentElement._context,
|
|
609
|
-
nextUnmaskedContext
|
|
610
|
-
);
|
|
611
|
-
}
|
|
612
|
-
}
|
|
613
|
-
|
|
614
412
|
// An update here will schedule an update but immediately set
|
|
615
413
|
// _pendingStateQueue which will ensure that any state updates gets
|
|
616
414
|
// immediately reconciled instead of waiting for the next batch.
|
|
@@ -622,31 +420,16 @@ var ReactCompositeComponentMixin = {
|
|
|
622
420
|
|
|
623
421
|
var nextState = this._processPendingState(nextProps, nextContext);
|
|
624
422
|
|
|
625
|
-
var shouldUpdate =
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
if ("production" !== process.env.NODE_ENV) {
|
|
631
|
-
("production" !== process.env.NODE_ENV ? warning(
|
|
632
|
-
typeof shouldUpdate !== 'undefined',
|
|
633
|
-
'%s.shouldComponentUpdate(): Returned undefined instead of a ' +
|
|
634
|
-
'boolean value. Make sure to return true or false.',
|
|
635
|
-
this.getName() || 'ReactCompositeComponent'
|
|
636
|
-
) : null);
|
|
423
|
+
var shouldUpdate = this._pendingForceUpdate || !inst.shouldComponentUpdate || inst.shouldComponentUpdate(nextProps, nextState, nextContext);
|
|
424
|
+
|
|
425
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
426
|
+
'production' !== process.env.NODE_ENV ? warning(typeof shouldUpdate !== 'undefined', '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent') : undefined;
|
|
637
427
|
}
|
|
638
428
|
|
|
639
429
|
if (shouldUpdate) {
|
|
640
430
|
this._pendingForceUpdate = false;
|
|
641
431
|
// Will set `this.props`, `this.state` and `this.context`.
|
|
642
|
-
this._performComponentUpdate(
|
|
643
|
-
nextParentElement,
|
|
644
|
-
nextProps,
|
|
645
|
-
nextState,
|
|
646
|
-
nextContext,
|
|
647
|
-
transaction,
|
|
648
|
-
nextUnmaskedContext
|
|
649
|
-
);
|
|
432
|
+
this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);
|
|
650
433
|
} else {
|
|
651
434
|
// If it's determined that a component should not update, we still want
|
|
652
435
|
// to set props and state but we shortcut the rest of the update.
|
|
@@ -658,7 +441,7 @@ var ReactCompositeComponentMixin = {
|
|
|
658
441
|
}
|
|
659
442
|
},
|
|
660
443
|
|
|
661
|
-
_processPendingState: function(props, context) {
|
|
444
|
+
_processPendingState: function (props, context) {
|
|
662
445
|
var inst = this._instance;
|
|
663
446
|
var queue = this._pendingStateQueue;
|
|
664
447
|
var replace = this._pendingReplaceState;
|
|
@@ -676,12 +459,7 @@ var ReactCompositeComponentMixin = {
|
|
|
676
459
|
var nextState = assign({}, replace ? queue[0] : inst.state);
|
|
677
460
|
for (var i = replace ? 1 : 0; i < queue.length; i++) {
|
|
678
461
|
var partial = queue[i];
|
|
679
|
-
assign(
|
|
680
|
-
nextState,
|
|
681
|
-
typeof partial === 'function' ?
|
|
682
|
-
partial.call(inst, nextState, props, context) :
|
|
683
|
-
partial
|
|
684
|
-
);
|
|
462
|
+
assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);
|
|
685
463
|
}
|
|
686
464
|
|
|
687
465
|
return nextState;
|
|
@@ -699,19 +477,18 @@ var ReactCompositeComponentMixin = {
|
|
|
699
477
|
* @param {?object} unmaskedContext
|
|
700
478
|
* @private
|
|
701
479
|
*/
|
|
702
|
-
_performComponentUpdate: function(
|
|
703
|
-
nextElement,
|
|
704
|
-
nextProps,
|
|
705
|
-
nextState,
|
|
706
|
-
nextContext,
|
|
707
|
-
transaction,
|
|
708
|
-
unmaskedContext
|
|
709
|
-
) {
|
|
480
|
+
_performComponentUpdate: function (nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) {
|
|
710
481
|
var inst = this._instance;
|
|
711
482
|
|
|
712
|
-
var
|
|
713
|
-
var
|
|
714
|
-
var
|
|
483
|
+
var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);
|
|
484
|
+
var prevProps;
|
|
485
|
+
var prevState;
|
|
486
|
+
var prevContext;
|
|
487
|
+
if (hasComponentDidUpdate) {
|
|
488
|
+
prevProps = inst.props;
|
|
489
|
+
prevState = inst.state;
|
|
490
|
+
prevContext = inst.context;
|
|
491
|
+
}
|
|
715
492
|
|
|
716
493
|
if (inst.componentWillUpdate) {
|
|
717
494
|
inst.componentWillUpdate(nextProps, nextState, nextContext);
|
|
@@ -725,11 +502,8 @@ var ReactCompositeComponentMixin = {
|
|
|
725
502
|
|
|
726
503
|
this._updateRenderedComponent(transaction, unmaskedContext);
|
|
727
504
|
|
|
728
|
-
if (
|
|
729
|
-
transaction.getReactMountReady().enqueue(
|
|
730
|
-
inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext),
|
|
731
|
-
inst
|
|
732
|
-
);
|
|
505
|
+
if (hasComponentDidUpdate) {
|
|
506
|
+
transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst);
|
|
733
507
|
}
|
|
734
508
|
},
|
|
735
509
|
|
|
@@ -739,34 +513,20 @@ var ReactCompositeComponentMixin = {
|
|
|
739
513
|
* @param {ReactReconcileTransaction} transaction
|
|
740
514
|
* @internal
|
|
741
515
|
*/
|
|
742
|
-
_updateRenderedComponent: function(transaction, context) {
|
|
516
|
+
_updateRenderedComponent: function (transaction, context) {
|
|
743
517
|
var prevComponentInstance = this._renderedComponent;
|
|
744
518
|
var prevRenderedElement = prevComponentInstance._currentElement;
|
|
745
|
-
var
|
|
746
|
-
var nextRenderedElement = this._renderValidatedComponent(childContext);
|
|
519
|
+
var nextRenderedElement = this._renderValidatedComponent();
|
|
747
520
|
if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
|
|
748
|
-
ReactReconciler.receiveComponent(
|
|
749
|
-
prevComponentInstance,
|
|
750
|
-
nextRenderedElement,
|
|
751
|
-
transaction,
|
|
752
|
-
this._mergeChildContext(context, childContext)
|
|
753
|
-
);
|
|
521
|
+
ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));
|
|
754
522
|
} else {
|
|
755
523
|
// These two IDs are actually the same! But nothing should rely on that.
|
|
756
524
|
var thisID = this._rootNodeID;
|
|
757
525
|
var prevComponentID = prevComponentInstance._rootNodeID;
|
|
758
526
|
ReactReconciler.unmountComponent(prevComponentInstance);
|
|
759
527
|
|
|
760
|
-
this._renderedComponent = this._instantiateReactComponent(
|
|
761
|
-
|
|
762
|
-
this._currentElement.type
|
|
763
|
-
);
|
|
764
|
-
var nextMarkup = ReactReconciler.mountComponent(
|
|
765
|
-
this._renderedComponent,
|
|
766
|
-
thisID,
|
|
767
|
-
transaction,
|
|
768
|
-
this._mergeChildContext(context, childContext)
|
|
769
|
-
);
|
|
528
|
+
this._renderedComponent = this._instantiateReactComponent(nextRenderedElement);
|
|
529
|
+
var nextMarkup = ReactReconciler.mountComponent(this._renderedComponent, thisID, transaction, this._processChildContext(context));
|
|
770
530
|
this._replaceNodeWithMarkupByID(prevComponentID, nextMarkup);
|
|
771
531
|
}
|
|
772
532
|
},
|
|
@@ -774,23 +534,19 @@ var ReactCompositeComponentMixin = {
|
|
|
774
534
|
/**
|
|
775
535
|
* @protected
|
|
776
536
|
*/
|
|
777
|
-
_replaceNodeWithMarkupByID: function(prevComponentID, nextMarkup) {
|
|
778
|
-
ReactComponentEnvironment.replaceNodeWithMarkupByID(
|
|
779
|
-
prevComponentID,
|
|
780
|
-
nextMarkup
|
|
781
|
-
);
|
|
537
|
+
_replaceNodeWithMarkupByID: function (prevComponentID, nextMarkup) {
|
|
538
|
+
ReactComponentEnvironment.replaceNodeWithMarkupByID(prevComponentID, nextMarkup);
|
|
782
539
|
},
|
|
783
540
|
|
|
784
541
|
/**
|
|
785
542
|
* @protected
|
|
786
543
|
*/
|
|
787
|
-
_renderValidatedComponentWithoutOwnerOrContext: function() {
|
|
544
|
+
_renderValidatedComponentWithoutOwnerOrContext: function () {
|
|
788
545
|
var inst = this._instance;
|
|
789
546
|
var renderedComponent = inst.render();
|
|
790
|
-
if (
|
|
547
|
+
if ('production' !== process.env.NODE_ENV) {
|
|
791
548
|
// We allow auto-mocks to proceed as if they're returning null.
|
|
792
|
-
if (typeof renderedComponent === 'undefined' &&
|
|
793
|
-
inst.render._isMockFunction) {
|
|
549
|
+
if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) {
|
|
794
550
|
// This is probably bad practice. Consider warning here and
|
|
795
551
|
// deprecating this convenience.
|
|
796
552
|
renderedComponent = null;
|
|
@@ -803,31 +559,17 @@ var ReactCompositeComponentMixin = {
|
|
|
803
559
|
/**
|
|
804
560
|
* @private
|
|
805
561
|
*/
|
|
806
|
-
_renderValidatedComponent: function(
|
|
562
|
+
_renderValidatedComponent: function () {
|
|
807
563
|
var renderedComponent;
|
|
808
|
-
var previousContext = ReactContext.current;
|
|
809
|
-
ReactContext.current = this._mergeChildContext(
|
|
810
|
-
this._currentElement._context,
|
|
811
|
-
childContext
|
|
812
|
-
);
|
|
813
564
|
ReactCurrentOwner.current = this;
|
|
814
565
|
try {
|
|
815
|
-
renderedComponent =
|
|
816
|
-
this._renderValidatedComponentWithoutOwnerOrContext();
|
|
566
|
+
renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext();
|
|
817
567
|
} finally {
|
|
818
|
-
ReactContext.current = previousContext;
|
|
819
568
|
ReactCurrentOwner.current = null;
|
|
820
569
|
}
|
|
821
|
-
(
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
ReactElement.isValidElement(renderedComponent),
|
|
825
|
-
'%s.render(): A valid ReactComponent must be returned. You may have ' +
|
|
826
|
-
'returned undefined, an array or some other invalid object.',
|
|
827
|
-
this.getName() || 'ReactCompositeComponent'
|
|
828
|
-
) : invariant(// TODO: An `isValidNode` function would probably be more appropriate
|
|
829
|
-
renderedComponent === null || renderedComponent === false ||
|
|
830
|
-
ReactElement.isValidElement(renderedComponent)));
|
|
570
|
+
!(
|
|
571
|
+
// TODO: An `isValidNode` function would probably be more appropriate
|
|
572
|
+
(renderedComponent === null || renderedComponent === false || ReactElement.isValidElement(renderedComponent))) ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s.render(): A valid ReactComponent must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent') : invariant(false) : undefined;
|
|
831
573
|
return renderedComponent;
|
|
832
574
|
},
|
|
833
575
|
|
|
@@ -839,9 +581,9 @@ var ReactCompositeComponentMixin = {
|
|
|
839
581
|
* @final
|
|
840
582
|
* @private
|
|
841
583
|
*/
|
|
842
|
-
attachRef: function(ref, component) {
|
|
584
|
+
attachRef: function (ref, component) {
|
|
843
585
|
var inst = this.getPublicInstance();
|
|
844
|
-
var refs = inst.refs === emptyObject ?
|
|
586
|
+
var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs;
|
|
845
587
|
refs[ref] = component.getPublicInstance();
|
|
846
588
|
},
|
|
847
589
|
|
|
@@ -852,7 +594,7 @@ var ReactCompositeComponentMixin = {
|
|
|
852
594
|
* @final
|
|
853
595
|
* @private
|
|
854
596
|
*/
|
|
855
|
-
detachRef: function(ref) {
|
|
597
|
+
detachRef: function (ref) {
|
|
856
598
|
var refs = this.getPublicInstance().refs;
|
|
857
599
|
delete refs[ref];
|
|
858
600
|
},
|
|
@@ -863,14 +605,10 @@ var ReactCompositeComponentMixin = {
|
|
|
863
605
|
* @return {string} The name or null.
|
|
864
606
|
* @internal
|
|
865
607
|
*/
|
|
866
|
-
getName: function() {
|
|
608
|
+
getName: function () {
|
|
867
609
|
var type = this._currentElement.type;
|
|
868
610
|
var constructor = this._instance && this._instance.constructor;
|
|
869
|
-
return
|
|
870
|
-
type.displayName || (constructor && constructor.displayName) ||
|
|
871
|
-
type.name || (constructor && constructor.name) ||
|
|
872
|
-
null
|
|
873
|
-
);
|
|
611
|
+
return type.displayName || constructor && constructor.displayName || type.name || constructor && constructor.name || null;
|
|
874
612
|
},
|
|
875
613
|
|
|
876
614
|
/**
|
|
@@ -881,7 +619,7 @@ var ReactCompositeComponentMixin = {
|
|
|
881
619
|
* @return {ReactComponent} the public component instance.
|
|
882
620
|
* @internal
|
|
883
621
|
*/
|
|
884
|
-
getPublicInstance: function() {
|
|
622
|
+
getPublicInstance: function () {
|
|
885
623
|
return this._instance;
|
|
886
624
|
},
|
|
887
625
|
|
|
@@ -890,15 +628,11 @@ var ReactCompositeComponentMixin = {
|
|
|
890
628
|
|
|
891
629
|
};
|
|
892
630
|
|
|
893
|
-
ReactPerf.measureMethods(
|
|
894
|
-
|
|
895
|
-
'
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
updateComponent: 'updateComponent',
|
|
899
|
-
_renderValidatedComponent: '_renderValidatedComponent'
|
|
900
|
-
}
|
|
901
|
-
);
|
|
631
|
+
ReactPerf.measureMethods(ReactCompositeComponentMixin, 'ReactCompositeComponent', {
|
|
632
|
+
mountComponent: 'mountComponent',
|
|
633
|
+
updateComponent: 'updateComponent',
|
|
634
|
+
_renderValidatedComponent: '_renderValidatedComponent'
|
|
635
|
+
});
|
|
902
636
|
|
|
903
637
|
var ReactCompositeComponent = {
|
|
904
638
|
|
|
@@ -906,4 +640,4 @@ var ReactCompositeComponent = {
|
|
|
906
640
|
|
|
907
641
|
};
|
|
908
642
|
|
|
909
|
-
module.exports = ReactCompositeComponent;
|
|
643
|
+
module.exports = ReactCompositeComponent;
|