react 0.13.2 → 0.14.0-alpha3

package/lib/ReactMultiChild.js

@@ -134,10 +134,7 @@ function enqueueTextContent(parentID, textContent) {
  */
 function processQueue() {
   if (updateQueue.length) {
-    ReactComponentEnvironment.processChildrenUpdates(
-      updateQueue,
-      markupQueue
-    );
+    ReactComponentEnvironment.processChildrenUpdates(updateQueue, markupQueue);
     clearQueue();
   }
 }
@@ -177,10 +174,8 @@ var ReactMultiChild = {
      * @return {array} An array of mounted representations.
      * @internal
      */
-    mountChildren: function(nestedChildren, transaction, context) {
-      var children = ReactChildReconciler.instantiateChildren(
-        nestedChildren, transaction, context
-      );
+    mountChildren: function (nestedChildren, transaction, context) {
+      var children = ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context);
       this._renderedChildren = children;
       var mountImages = [];
       var index = 0;
@@ -189,12 +184,7 @@ var ReactMultiChild = {
           var child = children[name];
           // Inlined for performance, see `ReactInstanceHandles.createReactID`.
           var rootID = this._rootNodeID + name;
-          var mountImage = ReactReconciler.mountComponent(
-            child,
-            rootID,
-            transaction,
-            context
-          );
+          var mountImage = ReactReconciler.mountComponent(child, rootID, transaction, context);
           child._mountIndex = index;
           mountImages.push(mountImage);
           index++;
@@ -209,7 +199,7 @@ var ReactMultiChild = {
      * @param {string} nextContent String of content.
      * @internal
      */
-    updateTextContent: function(nextContent) {
+    updateTextContent: function (nextContent) {
       updateDepth++;
       var errorThrown = true;
       try {
@@ -244,7 +234,7 @@ var ReactMultiChild = {
      * @param {ReactReconcileTransaction} transaction
      * @internal
      */
-    updateChildren: function(nextNestedChildren, transaction, context) {
+    updateChildren: function (nextNestedChildren, transaction, context) {
       updateDepth++;
       var errorThrown = true;
       try {
@@ -259,7 +249,6 @@ var ReactMultiChild = {
             processQueue();
           }
         }
-
       }
     },
 
@@ -272,11 +261,9 @@ var ReactMultiChild = {
      * @final
      * @protected
      */
-    _updateChildren: function(nextNestedChildren, transaction, context) {
+    _updateChildren: function (nextNestedChildren, transaction, context) {
       var prevChildren = this._renderedChildren;
-      var nextChildren = ReactChildReconciler.updateChildren(
-        prevChildren, nextNestedChildren, transaction, context
-      );
+      var nextChildren = ReactChildReconciler.updateChildren(prevChildren, nextNestedChildren, transaction, context);
       this._renderedChildren = nextChildren;
       if (!nextChildren && !prevChildren) {
         return;
@@ -303,16 +290,13 @@ var ReactMultiChild = {
             this._unmountChildByName(prevChild, name);
           }
           // The child must be instantiated before it's mounted.
-          this._mountChildByNameAtIndex(
-            nextChild, name, nextIndex, transaction, context
-          );
+          this._mountChildByNameAtIndex(nextChild, name, nextIndex, transaction, context);
         }
         nextIndex++;
       }
       // Remove children that are no longer present.
       for (name in prevChildren) {
-        if (prevChildren.hasOwnProperty(name) &&
-            !(nextChildren && nextChildren.hasOwnProperty(name))) {
+        if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) {
           this._unmountChildByName(prevChildren[name], name);
         }
       }
@@ -324,7 +308,7 @@ var ReactMultiChild = {
      *
      * @internal
      */
-    unmountChildren: function() {
+    unmountChildren: function () {
       var renderedChildren = this._renderedChildren;
       ReactChildReconciler.unmountChildren(renderedChildren);
       this._renderedChildren = null;
@@ -338,7 +322,7 @@ var ReactMultiChild = {
      * @param {number} lastIndex Last index visited of the siblings of `child`.
      * @protected
      */
-    moveChild: function(child, toIndex, lastIndex) {
+    moveChild: function (child, toIndex, lastIndex) {
       // If the index of `child` is less than `lastIndex`, then it needs to
       // be moved. Otherwise, we do not need to move it because a child will be
       // inserted or moved before `child`.
@@ -354,7 +338,7 @@ var ReactMultiChild = {
      * @param {string} mountImage Markup to insert.
      * @protected
      */
-    createChild: function(child, mountImage) {
+    createChild: function (child, mountImage) {
       enqueueMarkup(this._rootNodeID, mountImage, child._mountIndex);
     },
 
@@ -364,7 +348,7 @@ var ReactMultiChild = {
      * @param {ReactComponent} child Child to remove.
      * @protected
      */
-    removeChild: function(child) {
+    removeChild: function (child) {
       enqueueRemove(this._rootNodeID, child._mountIndex);
     },
 
@@ -374,7 +358,7 @@ var ReactMultiChild = {
      * @param {string} textContent Text content to set.
      * @protected
      */
-    setTextContent: function(textContent) {
+    setTextContent: function (textContent) {
       enqueueTextContent(this._rootNodeID, textContent);
     },
 
@@ -389,20 +373,10 @@ var ReactMultiChild = {
      * @param {ReactReconcileTransaction} transaction
      * @private
      */
-    _mountChildByNameAtIndex: function(
-      child,
-      name,
-      index,
-      transaction,
-      context) {
+    _mountChildByNameAtIndex: function (child, name, index, transaction, context) {
       // Inlined for performance, see `ReactInstanceHandles.createReactID`.
       var rootID = this._rootNodeID + name;
-      var mountImage = ReactReconciler.mountComponent(
-        child,
-        rootID,
-        transaction,
-        context
-      );
+      var mountImage = ReactReconciler.mountComponent(child, rootID, transaction, context);
       child._mountIndex = index;
       this.createChild(child, mountImage);
     },
@@ -416,7 +390,7 @@ var ReactMultiChild = {
      * @param {string} name Name of the child in `this._renderedChildren`.
      * @private
      */
-    _unmountChildByName: function(child, name) {
+    _unmountChildByName: function (child, name) {
       this.removeChild(child);
       child._mountIndex = null;
     }
@@ -425,4 +399,4 @@ var ReactMultiChild = {
 
 };
 
-module.exports = ReactMultiChild;
+module.exports = ReactMultiChild;

package/lib/ReactMultiChildUpdateTypes.js

@@ -28,4 +28,4 @@ var ReactMultiChildUpdateTypes = keyMirror({
   TEXT_CONTENT: null
 });
 
-module.exports = ReactMultiChildUpdateTypes;
+module.exports = ReactMultiChildUpdateTypes;

package/lib/ReactNativeComponent.js

@@ -16,29 +16,29 @@ var invariant = require("./invariant");
 
 var autoGenerateWrapperClass = null;
 var genericComponentClass = null;
-// This registry keeps track of wrapper classes around native tags
+// This registry keeps track of wrapper classes around native tags.
 var tagToComponentClass = {};
 var textComponentClass = null;
 
 var ReactNativeComponentInjection = {
   // This accepts a class that receives the tag string. This is a catch all
   // that can render any kind of tag.
-  injectGenericComponentClass: function(componentClass) {
+  injectGenericComponentClass: function (componentClass) {
     genericComponentClass = componentClass;
   },
   // This accepts a text component class that takes the text string to be
   // rendered as props.
-  injectTextComponentClass: function(componentClass) {
+  injectTextComponentClass: function (componentClass) {
     textComponentClass = componentClass;
   },
   // This accepts a keyed object with classes as values. Each key represents a
   // tag. That particular tag will use this class instead of the generic one.
-  injectComponentClasses: function(componentClasses) {
+  injectComponentClasses: function (componentClasses) {
     assign(tagToComponentClass, componentClasses);
   },
   // Temporary hack since we expect DOM refs to behave like composites,
   // for this release.
-  injectAutoWrapper: function(wrapperFactory) {
+  injectAutoWrapper: function (wrapperFactory) {
     autoGenerateWrapperClass = wrapperFactory;
   }
 };
@@ -68,11 +68,7 @@ function getComponentClassForElement(element) {
  * @return {function} The internal class constructor function.
  */
 function createInternalComponent(element) {
-  ("production" !== process.env.NODE_ENV ? invariant(
-    genericComponentClass,
-    'There is no registered component for the tag %s',
-    element.type
-  ) : invariant(genericComponentClass));
+  !genericComponentClass ? 'production' !== process.env.NODE_ENV ? invariant(false, 'There is no registered component for the tag %s', element.type) : invariant(false) : undefined;
   return new genericComponentClass(element.type, element.props);
 }
 
@@ -100,4 +96,4 @@ var ReactNativeComponent = {
   injection: ReactNativeComponentInjection
 };
 
-module.exports = ReactNativeComponent;
+module.exports = ReactNativeComponent;

package/lib/ReactOwner.js

@@ -50,11 +50,8 @@ var ReactOwner = {
    * @return {boolean} True if `object` is a valid owner.
    * @final
    */
-  isValidOwner: function(object) {
-    return !!(
-      (object &&
-      typeof object.attachRef === 'function' && typeof object.detachRef === 'function')
-    );
+  isValidOwner: function (object) {
+    return !!(object && typeof object.attachRef === 'function' && typeof object.detachRef === 'function');
   },
 
   /**
@@ -66,15 +63,8 @@ var ReactOwner = {
    * @final
    * @internal
    */
-  addComponentAsRefTo: function(component, ref, owner) {
-    ("production" !== process.env.NODE_ENV ? invariant(
-      ReactOwner.isValidOwner(owner),
-      'addComponentAsRefTo(...): Only a ReactOwner can have refs. This ' +
-      'usually means that you\'re trying to add a ref to a component that ' +
-      'doesn\'t have an owner (that is, was not created inside of another ' +
-      'component\'s `render` method). Try rendering this component inside of ' +
-      'a new top-level component which will hold the ref.'
-    ) : invariant(ReactOwner.isValidOwner(owner)));
+  addComponentAsRefTo: function (component, ref, owner) {
+    !ReactOwner.isValidOwner(owner) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'addComponentAsRefTo(...): Only a ReactOwner can have refs. This ' + 'usually means that you\'re trying to add a ref to a component that ' + 'doesn\'t have an owner (that is, was not created inside of another ' + 'component\'s `render` method). Try rendering this component inside of ' + 'a new top-level component which will hold the ref.') : invariant(false) : undefined;
     owner.attachRef(ref, component);
   },
 
@@ -87,15 +77,8 @@ var ReactOwner = {
    * @final
    * @internal
    */
-  removeComponentAsRefFrom: function(component, ref, owner) {
-    ("production" !== process.env.NODE_ENV ? invariant(
-      ReactOwner.isValidOwner(owner),
-      'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This ' +
-      'usually means that you\'re trying to remove a ref to a component that ' +
-      'doesn\'t have an owner (that is, was not created inside of another ' +
-      'component\'s `render` method). Try rendering this component inside of ' +
-      'a new top-level component which will hold the ref.'
-    ) : invariant(ReactOwner.isValidOwner(owner)));
+  removeComponentAsRefFrom: function (component, ref, owner) {
+    !ReactOwner.isValidOwner(owner) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This ' + 'usually means that you\'re trying to remove a ref to a component that ' + 'doesn\'t have an owner (that is, was not created inside of another ' + 'component\'s `render` method). Try rendering this component inside of ' + 'a new top-level component which will hold the ref.') : invariant(false) : undefined;
     // Check that `component` is still the current ref because we do not want to
     // detach the ref if another component stole it.
     if (owner.getPublicInstance().refs[ref] === component.getPublicInstance()) {
@@ -105,4 +88,4 @@ var ReactOwner = {
 
 };
 
-module.exports = ReactOwner;
+module.exports = ReactOwner;

package/lib/ReactPerf.js

@@ -34,17 +34,13 @@ var ReactPerf = {
    * @param {string} objectName
    * @param {object<string>} methodNames
    */
-  measureMethods: function(object, objectName, methodNames) {
-    if ("production" !== process.env.NODE_ENV) {
+  measureMethods: function (object, objectName, methodNames) {
+    if ('production' !== process.env.NODE_ENV) {
       for (var key in methodNames) {
         if (!methodNames.hasOwnProperty(key)) {
           continue;
         }
-        object[key] = ReactPerf.measure(
-          objectName,
-          methodNames[key],
-          object[key]
-        );
+        object[key] = ReactPerf.measure(objectName, methodNames[key], object[key]);
       }
     }
   },
@@ -57,10 +53,10 @@ var ReactPerf = {
    * @param {function} func
    * @return {function}
    */
-  measure: function(objName, fnName, func) {
-    if ("production" !== process.env.NODE_ENV) {
+  measure: function (objName, fnName, func) {
+    if ('production' !== process.env.NODE_ENV) {
       var measuredFunc = null;
-      var wrapper = function() {
+      var wrapper = function () {
         if (ReactPerf.enableMeasure) {
           if (!measuredFunc) {
             measuredFunc = ReactPerf.storedMeasure(objName, fnName, func);
@@ -79,7 +75,7 @@ var ReactPerf = {
     /**
      * @param {function} measure
      */
-    injectMeasure: function(measure) {
+    injectMeasure: function (measure) {
       ReactPerf.storedMeasure = measure;
     }
   }
@@ -97,4 +93,4 @@ function _noMeasure(objName, fnName, func) {
   return func;
 }
 
-module.exports = ReactPerf;
+module.exports = ReactPerf;

package/lib/ReactPropTransferer.js

@@ -23,7 +23,7 @@ var joinClasses = require("./joinClasses");
  * @return {function}
  */
 function createTransferStrategy(mergeStrategy) {
-  return function(props, key, value) {
+  return function (props, key, value) {
     if (!props.hasOwnProperty(key)) {
       props[key] = value;
     } else {
@@ -32,7 +32,7 @@ function createTransferStrategy(mergeStrategy) {
   };
 }
 
-var transferStrategyMerge = createTransferStrategy(function(a, b) {
+var transferStrategyMerge = createTransferStrategy(function (a, b) {
   // `merge` overrides the first object's (`props[key]` above) keys using the
   // second object's (`value`) keys. An object's style's existing `propA` would
   // get overridden. Flip the order here.
@@ -99,10 +99,10 @@ var ReactPropTransferer = {
    * @param {object} newProps new props to merge in
    * @return {object} a new object containing both sets of props merged.
    */
-  mergeProps: function(oldProps, newProps) {
+  mergeProps: function (oldProps, newProps) {
     return transferInto(assign({}, oldProps), newProps);
   }
 
 };
 
-module.exports = ReactPropTransferer;
+module.exports = ReactPropTransferer;

package/lib/ReactPropTypeLocationNames.js

@@ -13,7 +13,7 @@
 
 var ReactPropTypeLocationNames = {};
 
-if ("production" !== process.env.NODE_ENV) {
+if ('production' !== process.env.NODE_ENV) {
   ReactPropTypeLocationNames = {
     prop: 'prop',
     context: 'context',
@@ -21,4 +21,4 @@ if ("production" !== process.env.NODE_ENV) {
   };
 }
 
-module.exports = ReactPropTypeLocationNames;
+module.exports = ReactPropTypeLocationNames;

package/lib/ReactPropTypeLocations.js

@@ -19,4 +19,4 @@ var ReactPropTypeLocations = keyMirror({
   childContext: null
 });
 
-module.exports = ReactPropTypeLocations;
+module.exports = ReactPropTypeLocations;

package/lib/ReactPropTypes.js

@@ -66,9 +66,6 @@ var emptyFunction = require("./emptyFunction");
 
 var ANONYMOUS = '<<anonymous>>';
 
-var elementTypeChecker = createElementTypeChecker();
-var nodeTypeChecker = createNodeChecker();
-
 var ReactPropTypes = {
   array: createPrimitiveTypeChecker('array'),
   bool: createPrimitiveTypeChecker('boolean'),
@@ -79,9 +76,9 @@ var ReactPropTypes = {
 
   any: createAnyTypeChecker(),
   arrayOf: createArrayOfTypeChecker,
-  element: elementTypeChecker,
+  element: createElementTypeChecker(),
   instanceOf: createInstanceTypeChecker,
-  node: nodeTypeChecker,
+  node: createNodeChecker(),
   objectOf: createObjectOfTypeChecker,
   oneOf: createEnumTypeChecker,
   oneOfType: createUnionTypeChecker,
@@ -89,19 +86,17 @@ var ReactPropTypes = {
 };
 
 function createChainableTypeChecker(validate) {
-  function checkType(isRequired, props, propName, componentName, location) {
+  function checkType(isRequired, props, propName, componentName, location, propFullName) {
     componentName = componentName || ANONYMOUS;
+    propFullName = propFullName || propName;
     if (props[propName] == null) {
       var locationName = ReactPropTypeLocationNames[location];
       if (isRequired) {
-        return new Error(
-          ("Required " + locationName + " `" + propName + "` was not specified in ") +
-          ("`" + componentName + "`.")
-        );
+        return new Error('Required ' + locationName + ' `' + propFullName + '` was not specified in ' + ('`' + componentName + '`.'));
       }
       return null;
     } else {
-      return validate(props, propName, componentName, location);
+      return validate(props, propName, componentName, location, propFullName);
     }
   }
 
@@ -112,7 +107,7 @@ function createChainableTypeChecker(validate) {
 }
 
 function createPrimitiveTypeChecker(expectedType) {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     var propValue = props[propName];
     var propType = getPropType(propValue);
     if (propType !== expectedType) {
@@ -122,10 +117,7 @@ function createPrimitiveTypeChecker(expectedType) {
       // 'of type `object`'.
       var preciseType = getPreciseType(propValue);
 
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` of type `" + preciseType + "` ") +
-        ("supplied to `" + componentName + "`, expected `" + expectedType + "`.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
     }
     return null;
   }
@@ -137,18 +129,15 @@ function createAnyTypeChecker() {
 }
 
 function createArrayOfTypeChecker(typeChecker) {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     var propValue = props[propName];
     if (!Array.isArray(propValue)) {
       var locationName = ReactPropTypeLocationNames[location];
       var propType = getPropType(propValue);
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` of type ") +
-        ("`" + propType + "` supplied to `" + componentName + "`, expected an array.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
     }
     for (var i = 0; i < propValue.length; i++) {
-      var error = typeChecker(propValue, i, componentName, location);
+      var error = typeChecker(propValue, i, componentName, location, '' + propFullName + '[' + i + ']');
       if (error instanceof Error) {
         return error;
       }
@@ -159,13 +148,10 @@ function createArrayOfTypeChecker(typeChecker) {
 }
 
 function createElementTypeChecker() {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     if (!ReactElement.isValidElement(props[propName])) {
       var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` supplied to ") +
-        ("`" + componentName + "`, expected a ReactElement.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a single ReactElement.'));
     }
     return null;
   }
@@ -173,14 +159,11 @@ function createElementTypeChecker() {
 }
 
 function createInstanceTypeChecker(expectedClass) {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     if (!(props[propName] instanceof expectedClass)) {
       var locationName = ReactPropTypeLocationNames[location];
       var expectedClassName = expectedClass.name || ANONYMOUS;
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` supplied to ") +
-        ("`" + componentName + "`, expected instance of `" + expectedClassName + "`.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected instance of `' + expectedClassName + '`.'));
     }
     return null;
   }
@@ -188,7 +171,13 @@ function createInstanceTypeChecker(expectedClass) {
 }
 
 function createEnumTypeChecker(expectedValues) {
-  function validate(props, propName, componentName, location) {
+  if (!Array.isArray(expectedValues)) {
+    return createChainableTypeChecker(function () {
+      return new Error('Invalid argument supplied to oneOf, expected an instance of array.');
+    });
+  }
+
+  function validate(props, propName, componentName, location, propFullName) {
     var propValue = props[propName];
     for (var i = 0; i < expectedValues.length; i++) {
       if (propValue === expectedValues[i]) {
@@ -198,28 +187,22 @@ function createEnumTypeChecker(expectedValues) {
 
     var locationName = ReactPropTypeLocationNames[location];
     var valuesString = JSON.stringify(expectedValues);
-    return new Error(
-      ("Invalid " + locationName + " `" + propName + "` of value `" + propValue + "` ") +
-      ("supplied to `" + componentName + "`, expected one of " + valuesString + ".")
-    );
+    return new Error('Invalid ' + locationName + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
   }
   return createChainableTypeChecker(validate);
 }
 
 function createObjectOfTypeChecker(typeChecker) {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     var propValue = props[propName];
     var propType = getPropType(propValue);
     if (propType !== 'object') {
       var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` of type ") +
-        ("`" + propType + "` supplied to `" + componentName + "`, expected an object.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
     }
     for (var key in propValue) {
       if (propValue.hasOwnProperty(key)) {
-        var error = typeChecker(propValue, key, componentName, location);
+        var error = typeChecker(propValue, key, componentName, location, '' + propFullName + '.' + key);
         if (error instanceof Error) {
           return error;
         }
@@ -231,31 +214,31 @@ function createObjectOfTypeChecker(typeChecker) {
 }
 
 function createUnionTypeChecker(arrayOfTypeCheckers) {
-  function validate(props, propName, componentName, location) {
+  if (!Array.isArray(arrayOfTypeCheckers)) {
+    return createChainableTypeChecker(function () {
+      return new Error('Invalid argument supplied to oneOfType, expected an instance of array.');
+    });
+  }
+
+  function validate(props, propName, componentName, location, propFullName) {
     for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
       var checker = arrayOfTypeCheckers[i];
-      if (checker(props, propName, componentName, location) == null) {
+      if (checker(props, propName, componentName, location, propFullName) == null) {
         return null;
       }
     }
 
     var locationName = ReactPropTypeLocationNames[location];
-    return new Error(
-      ("Invalid " + locationName + " `" + propName + "` supplied to ") +
-      ("`" + componentName + "`.")
-    );
+    return new Error('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
   }
   return createChainableTypeChecker(validate);
 }
 
 function createNodeChecker() {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     if (!isNode(props[propName])) {
       var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` supplied to ") +
-        ("`" + componentName + "`, expected a ReactNode.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
     }
     return null;
   }
@@ -263,22 +246,19 @@ function createNodeChecker() {
 }
 
 function createShapeTypeChecker(shapeTypes) {
-  function validate(props, propName, componentName, location) {
+  function validate(props, propName, componentName, location, propFullName) {
     var propValue = props[propName];
     var propType = getPropType(propValue);
     if (propType !== 'object') {
       var locationName = ReactPropTypeLocationNames[location];
-      return new Error(
-        ("Invalid " + locationName + " `" + propName + "` of type `" + propType + "` ") +
-        ("supplied to `" + componentName + "`, expected `object`.")
-      );
+      return new Error('Invalid ' + locationName + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
     }
     for (var key in shapeTypes) {
       var checker = shapeTypes[key];
       if (!checker) {
         continue;
       }
-      var error = checker(propValue, key, componentName, location);
+      var error = checker(propValue, key, componentName, location, '' + propFullName + '.' + key);
       if (error) {
         return error;
       }
@@ -344,4 +324,4 @@ function getPreciseType(propValue) {
   return propType;
 }
 
-module.exports = ReactPropTypes;
+module.exports = ReactPropTypes;