Skip to content

Commit 081feeb

Browse files
jimfbjimfb
committed
Added warning if owner-based and parent-based contexts differ.
1 parent fba8be3 commit 081feeb

15 files changed

+254
-93
lines changed

‎src/browser/server/ReactServerRendering.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,17 @@ var ReactMarkupChecksum = require('ReactMarkupChecksum');
1717
var ReactServerRenderingTransaction =
1818
require('ReactServerRenderingTransaction');
1919

20+
var emptyObject = require('emptyObject');
2021
var instantiateReactComponent = require('instantiateReactComponent');
2122
var invariant = require('invariant');
2223

2324
/**
2425
* @param {ReactElement} element
26+
* @param {?object} context
2527
* @return {string} the HTML markup
2628
*/
27-
function renderToString(element) {
29+
function renderToString(element, context) {
30+
if(context === undefined) context = emptyObject;
2831
invariant(
2932
ReactElement.isValidElement(element),
3033
'renderToString(): You must pass a valid ReactElement.'
@@ -37,7 +40,7 @@ function renderToString(element) {
3740

3841
return transaction.perform(function() {
3942
var componentInstance = instantiateReactComponent(element, null);
40-
var markup = componentInstance.mountComponent(id, transaction, 0);
43+
var markup = componentInstance.mountComponent(id, transaction, 0, context);
4144
return ReactMarkupChecksum.addChecksumToMarkup(markup);
4245
}, null);
4346
} finally {
@@ -47,10 +50,12 @@ function renderToString(element) {
4750

4851
/**
4952
* @param {ReactElement} element
53+
* @param {?object} context
5054
* @return {string} the HTML markup, without the extra React ID and checksum
5155
* (for generating static pages)
5256
*/
53-
function renderToStaticMarkup(element) {
57+
function renderToStaticMarkup(element, context) {
58+
if(context === undefined) context = emptyObject;
5459
invariant(
5560
ReactElement.isValidElement(element),
5661
'renderToStaticMarkup(): You must pass a valid ReactElement.'
@@ -63,7 +68,7 @@ function renderToStaticMarkup(element) {
6368

6469
return transaction.perform(function() {
6570
var componentInstance = instantiateReactComponent(element, null);
66-
return componentInstance.mountComponent(id, transaction, 0);
71+
return componentInstance.mountComponent(id, transaction, 0, context);
6772
}, null);
6873
} finally {
6974
ReactServerRenderingTransaction.release(transaction);

‎src/browser/ui/ReactDOMComponent.js

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -168,19 +168,21 @@ ReactDOMComponent.Mixin = {
168168
mountComponent: ReactPerf.measure(
169169
'ReactDOMComponent',
170170
'mountComponent',
171-
function(rootID, transaction, mountDepth) {
171+
function(rootID, transaction, mountDepth, context) {
172+
invariant(context !== undefined, "Context is required parameter");
172173
ReactComponent.Mixin.mountComponent.call(
173174
this,
174175
rootID,
175176
transaction,
176-
mountDepth
177+
mountDepth,
178+
context
177179
);
178180
this._previousStyleCopy = null;
179181
assertValidProps(this._currentElement.props);
180182
var closeTag = omittedCloseTags[this._tag] ? '' : '</' + this._tag + '>';
181183
return (
182184
this._createOpenTagMarkupAndPutListeners(transaction) +
183-
this._createContentMarkup(transaction) +
185+
this._createContentMarkup(transaction, context) +
184186
closeTag
185187
);
186188
}
@@ -242,9 +244,10 @@ ReactDOMComponent.Mixin = {
242244
*
243245
* @private
244246
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
247+
* @param {object} context
245248
* @return {string} Content markup.
246249
*/
247-
_createContentMarkup: function(transaction) {
250+
_createContentMarkup: function(transaction, context) {
248251
var prefix = '';
249252
if (this._tag === 'listing' ||
250253
this._tag === 'pre' ||
@@ -272,15 +275,17 @@ ReactDOMComponent.Mixin = {
272275
} else if (childrenToUse != null) {
273276
var mountImages = this.mountChildren(
274277
childrenToUse,
275-
transaction
278+
transaction,
279+
context
276280
);
277281
return prefix + mountImages.join('');
278282
}
279283
}
280284
return prefix;
281285
},
282286

283-
receiveComponent: function(nextElement, transaction) {
287+
receiveComponent: function(nextElement, transaction, context) {
288+
invariant(context !== undefined, "Context is required parameter");
284289
if (nextElement === this._currentElement &&
285290
nextElement._owner != null) {
286291
// Since elements are immutable after the owner is rendered,
@@ -295,7 +300,7 @@ ReactDOMComponent.Mixin = {
295300

296301
var prevElement = this._currentElement;
297302
this._currentElement = nextElement;
298-
this.updateComponent(transaction, prevElement, nextElement);
303+
this.updateComponent(transaction, prevElement, nextElement, context);
299304
},
300305

301306
/**
@@ -311,16 +316,19 @@ ReactDOMComponent.Mixin = {
311316
updateComponent: ReactPerf.measure(
312317
'ReactDOMComponent',
313318
'updateComponent',
314-
function(transaction, prevElement, nextElement) {
319+
function(transaction, prevElement, nextElement, context) {
320+
if(context === undefined) throw new Error("Context required for mounting");
321+
if(context === null) throw new Error("Assert: context is not null");
315322
assertValidProps(this._currentElement.props);
316323
ReactComponent.Mixin.updateComponent.call(
317324
this,
318325
transaction,
319326
prevElement,
320-
nextElement
327+
nextElement,
328+
context
321329
);
322330
this._updateDOMProperties(prevElement.props, transaction);
323-
this._updateDOMChildren(prevElement.props, transaction);
331+
this._updateDOMChildren(prevElement.props, transaction, context);
324332
}
325333
),
326334

@@ -428,7 +436,8 @@ ReactDOMComponent.Mixin = {
428436
* @param {object} lastProps
429437
* @param {ReactReconcileTransaction} transaction
430438
*/
431-
_updateDOMChildren: function(lastProps, transaction) {
439+
_updateDOMChildren: function(lastProps, transaction, context) {
440+
invariant(context !== undefined, "Context is required parameter");
432441
var nextProps = this._currentElement.props;
433442

434443
var lastContent =
@@ -452,7 +461,7 @@ ReactDOMComponent.Mixin = {
452461
var lastHasContentOrHtml = lastContent != null || lastHtml != null;
453462
var nextHasContentOrHtml = nextContent != null || nextHtml != null;
454463
if (lastChildren != null && nextChildren == null) {
455-
this.updateChildren(null, transaction);
464+
this.updateChildren(null, transaction, context);
456465
} else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
457466
this.updateTextContent('');
458467
}
@@ -469,7 +478,7 @@ ReactDOMComponent.Mixin = {
469478
);
470479
}
471480
} else if (nextChildren != null) {
472-
this.updateChildren(nextChildren, transaction);
481+
this.updateChildren(nextChildren, transaction, context);
473482
}
474483
},
475484

‎src/browser/ui/ReactDOMTextComponent.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ assign(ReactDOMTextComponent.prototype, {
6666
* @return {string} Markup for this text node.
6767
* @internal
6868
*/
69-
mountComponent: function(rootID, transaction, mountDepth) {
69+
mountComponent: function(rootID, transaction, mountDepth, context) {
7070
this._rootNodeID = rootID;
7171
var escapedText = escapeTextForBrowser(this._stringText);
7272

‎src/browser/ui/ReactMount.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ var ReactMarkupChecksum = require('ReactMarkupChecksum');
2222
var ReactPerf = require('ReactPerf');
2323
var ReactUpdates = require('ReactUpdates');
2424

25+
var emptyObject = require('emptyObject');
2526
var containsNode = require('containsNode');
2627
var deprecated = require('deprecated');
2728
var getReactRootElementInContainer = require('getReactRootElementInContainer');
@@ -224,7 +225,7 @@ function mountComponentIntoNode(
224225
container,
225226
transaction,
226227
shouldReuseMarkup) {
227-
var markup = this.mountComponent(rootID, transaction, 0);
228+
var markup = this.mountComponent(rootID, transaction, 0, emptyObject);
228229
ReactMount._mountImageIntoNode(markup, container, shouldReuseMarkup);
229230
}
230231

‎src/browser/ui/__tests__/ReactDOMComponent-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ describe('ReactDOMComponent', function() {
283283

284284
genMarkup = function(props) {
285285
var transaction = new ReactReconcileTransaction();
286-
return (new NodeStub(props))._createContentMarkup(transaction);
286+
return (new NodeStub(props))._createContentMarkup(transaction, {});
287287
};
288288

289289
this.addMatchers({
@@ -328,7 +328,7 @@ describe('ReactDOMComponent', function() {
328328
_owner: null,
329329
_context: null
330330
});
331-
return stubComponent.mountComponent('test', transaction, 0);
331+
return stubComponent.mountComponent('test', transaction, 0, {});
332332
};
333333
});
334334

‎src/browser/ui/dom/__tests__/Danger-test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('Danger', function() {
3232
it('should render markup', function() {
3333
var markup = instantiateReactComponent(
3434
<div />
35-
).mountComponent('.rX', transaction, 0);
35+
).mountComponent('.rX', transaction, 0, {});
3636
var output = Danger.dangerouslyRenderMarkup([markup])[0];
3737

3838
expect(output.nodeName).toBe('DIV');
@@ -44,7 +44,7 @@ describe('Danger', function() {
4444
).mountComponent(
4545
'.rX',
4646
transaction,
47-
0
47+
0, {}
4848
);
4949
var output = Danger.dangerouslyRenderMarkup([markup])[0];
5050

@@ -55,7 +55,7 @@ describe('Danger', function() {
5555
it('should render wrapped markup', function() {
5656
var markup = instantiateReactComponent(
5757
<th />
58-
).mountComponent('.rX', transaction, 0);
58+
).mountComponent('.rX', transaction, 0, {});
5959
var output = Danger.dangerouslyRenderMarkup([markup])[0];
6060

6161
expect(output.nodeName).toBe('TH');

‎src/core/ReactComponent.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ var ReactComponent = {
114114
// We keep the old element and a reference to the pending element
115115
// to track updates.
116116
this._currentElement = element;
117-
118117
this._rootNodeID = null;
119118
this._mountIndex = 0;
120119
this._mountDepth = 0;
@@ -134,7 +133,8 @@ var ReactComponent = {
134133
* @return {?string} Rendered markup to be inserted into the DOM.
135134
* @internal
136135
*/
137-
mountComponent: function(rootID, transaction, mountDepth) {
136+
mountComponent: function(rootID, transaction, mountDepth, context) {
137+
invariant(context !== undefined, "Context is required parameter");
138138
var ref = this._currentElement.ref;
139139
if (ref != null) {
140140
var owner = this._currentElement._owner;
@@ -173,7 +173,8 @@ var ReactComponent = {
173173
* @param {object} nextElement
174174
* @internal
175175
*/
176-
updateComponent: function(transaction, prevElement, nextElement) {
176+
updateComponent: function(transaction, prevElement, nextElement, context) {
177+
invariant(context !== undefined, "Context is required parameter");
177178
// If either the owner or a `ref` has changed, make sure the newest owner
178179
// has stored a reference to `this`, and the previous owner (if different)
179180
// has forgotten the reference to `this`. We use the element instead

0 commit comments

Comments
 (0)