Fixed all unit tests for issue facebook#2112

Author: jimfb

src/browser/ReactTextComponent.js

@@ -51,12 +51,13 @@ assign(ReactTextComponent.prototype, ReactComponent.Mixin, {
    * @return {string} Markup for this text node.
    * @internal
    */
-  mountComponent: function(rootID, transaction, mountDepth) {
+  mountComponent: function(rootID, transaction, mountDepth, context) {
     ReactComponent.Mixin.mountComponent.call(
       this,
       rootID,
       transaction,
-      mountDepth
+      mountDepth,
+      context
     );
 
     var escapedText = escapeTextForBrowser(this.props);

src/browser/server/ReactServerRendering.js

@@ -17,14 +17,17 @@ var ReactMarkupChecksum = require('ReactMarkupChecksum');
 var ReactServerRenderingTransaction =
   require('ReactServerRenderingTransaction');
 
+var emptyObject = require('emptyObject');
 var instantiateReactComponent = require('instantiateReactComponent');
 var invariant = require('invariant');
 
 /**
  * @param {ReactElement} element
+ * @param {?object} context
  * @return {string} the HTML markup
  */
-function renderToString(element) {
+function renderToString(element, context) {
+  if(context === undefined) context = emptyObject;
   invariant(
     ReactElement.isValidElement(element),
     'renderToString(): You must pass a valid ReactElement.'
@@ -37,7 +40,7 @@ function renderToString(element) {
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element, null);
-      var markup = componentInstance.mountComponent(id, transaction, 0);
+      var markup = componentInstance.mountComponent(id, transaction, 0, context);
       return ReactMarkupChecksum.addChecksumToMarkup(markup);
     }, null);
   } finally {
@@ -47,10 +50,12 @@ function renderToString(element) {
 
 /**
  * @param {ReactElement} element
+ * @param {?object} context
  * @return {string} the HTML markup, without the extra React ID and checksum
  * (for generating static pages)
  */
-function renderToStaticMarkup(element) {
+function renderToStaticMarkup(element, context) {
+  if(context === undefined) context = emptyObject;
   invariant(
     ReactElement.isValidElement(element),
     'renderToStaticMarkup(): You must pass a valid ReactElement.'
@@ -63,7 +68,7 @@ function renderToStaticMarkup(element) {
 
     return transaction.perform(function() {
       var componentInstance = instantiateReactComponent(element, null);
-      return componentInstance.mountComponent(id, transaction, 0);
+      return componentInstance.mountComponent(id, transaction, 0, context);
     }, null);
   } finally {
     ReactServerRenderingTransaction.release(transaction);

src/browser/ui/ReactDOMComponent.js

@@ -168,18 +168,20 @@ ReactDOMComponent.Mixin = {
   mountComponent: ReactPerf.measure(
     'ReactDOMComponent',
     'mountComponent',
-    function(rootID, transaction, mountDepth) {
+    function(rootID, transaction, mountDepth, context) {
+    invariant(context !== undefined, "Context is required parameter");
       ReactComponent.Mixin.mountComponent.call(
         this,
         rootID,
         transaction,
-        mountDepth
+        mountDepth,
+        context
       );
       assertValidProps(this.props);
       var closeTag = omittedCloseTags[this._tag] ? '' : '</' + this._tag + '>';
       return (
         this._createOpenTagMarkupAndPutListeners(transaction) +
-        this._createContentMarkup(transaction) +
+        this._createContentMarkup(transaction, context) +
         closeTag
       );
     }
@@ -241,9 +243,10 @@ ReactDOMComponent.Mixin = {
    *
    * @private
    * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+   * @param {object} context
    * @return {string} Content markup.
    */
-  _createContentMarkup: function(transaction) {
+  _createContentMarkup: function(transaction, context) {
     var prefix = '';
     if (this._tag === 'listing' ||
         this._tag === 'pre' ||
@@ -269,15 +272,17 @@ ReactDOMComponent.Mixin = {
       } else if (childrenToUse != null) {
         var mountImages = this.mountChildren(
           childrenToUse,
-          transaction
+          transaction,
+          context
         );
         return prefix + mountImages.join('');
       }
     }
     return prefix;
   },
 
-  receiveComponent: function(nextElement, transaction) {
+  receiveComponent: function(nextElement, transaction, context) {
+    invariant(context !== undefined, "Context is required parameter");
     if (nextElement === this._currentElement &&
         nextElement._owner != null) {
       // Since elements are immutable after the owner is rendered,
@@ -293,7 +298,8 @@ ReactDOMComponent.Mixin = {
     ReactComponent.Mixin.receiveComponent.call(
       this,
       nextElement,
-      transaction
+      transaction,
+      context
     );
   },
 
@@ -310,16 +316,19 @@ ReactDOMComponent.Mixin = {
   updateComponent: ReactPerf.measure(
     'ReactDOMComponent',
     'updateComponent',
-    function(transaction, prevElement, nextElement) {
+    function(transaction, prevElement, nextElement, context) {
+      if(context === undefined) throw new Error("Context required for mounting");
+      if(context === null) context = this._context;
       assertValidProps(this._currentElement.props);
       ReactComponent.Mixin.updateComponent.call(
         this,
         transaction,
         prevElement,
-        nextElement
+        nextElement,
+        context
       );
       this._updateDOMProperties(prevElement.props, transaction);
-      this._updateDOMChildren(prevElement.props, transaction);
+      this._updateDOMChildren(prevElement.props, transaction, context);
     }
   ),
 
@@ -425,7 +434,8 @@ ReactDOMComponent.Mixin = {
    * @param {object} lastProps
    * @param {ReactReconcileTransaction} transaction
    */
-  _updateDOMChildren: function(lastProps, transaction) {
+  _updateDOMChildren: function(lastProps, transaction, context) {
+    invariant(context !== undefined, "Context is required parameter");
     var nextProps = this.props;
 
     var lastContent =
@@ -449,7 +459,7 @@ ReactDOMComponent.Mixin = {
     var lastHasContentOrHtml = lastContent != null || lastHtml != null;
     var nextHasContentOrHtml = nextContent != null || nextHtml != null;
     if (lastChildren != null && nextChildren == null) {
-      this.updateChildren(null, transaction);
+      this.updateChildren(null, transaction, context);
     } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
       this.updateTextContent('');
     }
@@ -466,7 +476,7 @@ ReactDOMComponent.Mixin = {
         );
       }
     } else if (nextChildren != null) {
-      this.updateChildren(nextChildren, transaction);
+      this.updateChildren(nextChildren, transaction, context);
     }
   },
 

src/browser/ui/ReactMount.js

@@ -20,6 +20,7 @@ var ReactInstanceHandles = require('ReactInstanceHandles');
 var ReactInstanceMap = require('ReactInstanceMap');
 var ReactPerf = require('ReactPerf');
 
+var emptyObject = require('emptyObject');
 var containsNode = require('containsNode');
 var deprecated = require('deprecated');
 var getReactRootElementInContainer = require('getReactRootElementInContainer');
@@ -327,10 +328,12 @@ var ReactMount = {
         componentInstance,
         container
       );
+
       componentInstance.mountComponentIntoNode(
         reactRootID,
         container,
-        shouldReuseMarkup
+        shouldReuseMarkup,
+        emptyObject
       );
 
       if (__DEV__) {

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

@@ -281,7 +281,7 @@ describe('ReactDOMComponent', function() {
 
       genMarkup = function(props) {
         var transaction = new ReactReconcileTransaction();
-        return (new NodeStub(props))._createContentMarkup(transaction);
+        return (new NodeStub(props))._createContentMarkup(transaction, {});
       };
 
       this.addMatchers({
@@ -326,7 +326,7 @@ describe('ReactDOMComponent', function() {
           _owner: null,
           _context: null
         });
-        return stubComponent.mountComponent('test', transaction, 0);
+        return stubComponent.mountComponent('test', transaction, 0, {});
       };
     });
 

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

@@ -32,7 +32,7 @@ describe('Danger', function() {
     it('should render markup', function() {
       var markup = instantiateReactComponent(
         <div />
-      ).mountComponent('.rX', transaction, 0);
+      ).mountComponent('.rX', transaction, 0, {});
       var output = Danger.dangerouslyRenderMarkup([markup])[0];
 
       expect(output.nodeName).toBe('DIV');
@@ -44,7 +44,7 @@ describe('Danger', function() {
       ).mountComponent(
         '.rX',
         transaction,
-        0
+        0, {}
       );
       var output = Danger.dangerouslyRenderMarkup([markup])[0];
 
@@ -55,7 +55,7 @@ describe('Danger', function() {
     it('should render wrapped markup', function() {
       var markup = instantiateReactComponent(
         <th />
-      ).mountComponent('.rX', transaction, 0);
+      ).mountComponent('.rX', transaction, 0, {});
       var output = Danger.dangerouslyRenderMarkup([markup])[0];
 
       expect(output.nodeName).toBe('TH');

src/core/ReactComponent.js

@@ -238,13 +238,18 @@ var ReactComponent = {
       // All components start unmounted.
       this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
 
+      // Object/map containing variables defined in the mount context.
+      // Value is null iff ComponentLifeCycle.UNMOUNTED
+      this._context = null;
+
       // See ReactUpdates.
       this._pendingCallbacks = null;
 
       // We keep the old element and a reference to the pending element
       // to track updates.
       this._currentElement = element;
       this._pendingElement = null;
+      this._pendingContext = null;
     },
 
     /**
@@ -261,7 +266,8 @@ var ReactComponent = {
      * @return {?string} Rendered markup to be inserted into the DOM.
      * @internal
      */
-    mountComponent: function(rootID, transaction, mountDepth) {
+    mountComponent: function(rootID, transaction, mountDepth, context) {
+      invariant(context !== undefined, "Context is required parameter");
       invariant(
         !this.isMounted(),
         'mountComponent(%s, ...): Can only mount an unmounted component. ' +
@@ -276,6 +282,7 @@ var ReactComponent = {
       }
       this._rootNodeID = rootID;
       this._lifeCycleState = ComponentLifeCycle.MOUNTED;
+      this._context = context;
       this._mountDepth = mountDepth;
       // Effectively: return '';
     },
@@ -302,6 +309,7 @@ var ReactComponent = {
       unmountIDFromEnvironment(this._rootNodeID);
       this._rootNodeID = null;
       this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
+      this._context = null;
     },
 
     /**
@@ -315,13 +323,15 @@ var ReactComponent = {
      * @param {ReactReconcileTransaction} transaction
      * @internal
      */
-    receiveComponent: function(nextElement, transaction) {
+    receiveComponent: function(nextElement, transaction, context) {
+      invariant(context !== undefined, "Context is required parameter");
       invariant(
         this.isMounted(),
         'receiveComponent(...): Can only update a mounted component.'
       );
       this._pendingElement = nextElement;
-      this.performUpdateIfNecessary(transaction);
+      this._context = context;
+      this.performUpdateIfNecessary(transaction, context);
     },
 
     /**
@@ -336,11 +346,12 @@ var ReactComponent = {
       }
       var prevElement = this._currentElement;
       var nextElement = this._pendingElement;
+      var nextContext = this._pendingContext;
       this._currentElement = nextElement;
       this.props = nextElement.props;
       this._owner = nextElement._owner;
       this._pendingElement = null;
-      this.updateComponent(transaction, prevElement, nextElement);
+      this.updateComponent(transaction, prevElement, nextElement, nextContext);
     },
 
     /**
@@ -351,7 +362,8 @@ var ReactComponent = {
      * @param {object} nextElement
      * @internal
      */
-    updateComponent: function(transaction, prevElement, nextElement) {
+    updateComponent: function(transaction, prevElement, nextElement, context) {
+      invariant(context !== undefined, "Context is required parameter");
       // If either the owner or a `ref` has changed, make sure the newest owner
       // has stored a reference to `this`, and the previous owner (if different)
       // has forgotten the reference to `this`. We use the element instead
@@ -386,15 +398,21 @@ var ReactComponent = {
      * @internal
      * @see {ReactMount.render}
      */
-    mountComponentIntoNode: function(rootID, container, shouldReuseMarkup) {
+    mountComponentIntoNode: function(
+      rootID,
+      container,
+      shouldReuseMarkup,
+      context) {
+      invariant(context !== undefined, "Context is required parameter");
       var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
       transaction.perform(
         this._mountComponentIntoNode,
         this,
         rootID,
         container,
         transaction,
-        shouldReuseMarkup
+        shouldReuseMarkup,
+        context
       );
       ReactUpdates.ReactReconcileTransaction.release(transaction);
     },
@@ -411,8 +429,10 @@ var ReactComponent = {
         rootID,
         container,
         transaction,
-        shouldReuseMarkup) {
-      var markup = this.mountComponent(rootID, transaction, 0);
+        shouldReuseMarkup,
+        context) {
+      invariant(context !== undefined, "Context is required parameter");
+      var markup = this.mountComponent(rootID, transaction, 0, context);
       mountImageIntoNode(markup, container, shouldReuseMarkup);
     },