Fix facebook#3596: Moved warning into devtool as per @jimfb suggestio…

…n. Added stack trace and reference to element which causes the warning.

src/renderers/dom/client/ReactMount.js

@@ -25,7 +25,6 @@ var ReactMarkupChecksum = require('ReactMarkupChecksum');
 var ReactReconciler = require('ReactReconciler');
 var ReactUpdateQueue = require('ReactUpdateQueue');
 var ReactUpdates = require('ReactUpdates');
-var ReactDOMFactories = require('ReactDOMFactories');
 
 var emptyObject = require('emptyObject');
 var instantiateReactComponent = require('instantiateReactComponent');
@@ -469,14 +468,6 @@ var ReactMount = {
     var containerHasNonRootReactChild = hasNonRootReactChild(container);
 
     if (__DEV__) {
-      var validElement = typeof nextElement.type === 'string' ?
-      nextElement.type.match(/\-|\s+/) === null &&
-      document.createElement(nextElement.type) instanceof HTMLUnknownElement &&
-      !ReactDOMFactories.hasOwnProperty(nextElement.type) : false;
-
-      warning(!validElement, 'ReactDOM.render(): Invalid component element. ' +
-        'Make sure the component starts with an upper-case letter.');
-
       warning(
         !containerHasNonRootReactChild,
         'render(...): Replacing React-rendered children with a new root ' +

src/renderers/dom/client/__tests__/ReactMount-test.js

@@ -19,6 +19,11 @@ var ReactTestUtils;
 var WebComponents;
 
 describe('ReactMount', function() {
+
+  function normalizeCodeLocInfo(str) {
+    return str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
   beforeEach(function() {
     jest.resetModuleRegistry();
 
@@ -178,9 +183,10 @@ describe('ReactMount', function() {
       ReactDOM.render(mySvg, container);
       ReactDOM.render(<centered/>, container);
       expect(console.error.calls.count()).toBe(1);
-      expect(console.error.calls.argsFor(0)[0]).toBe(
-        'Warning: ReactDOM.render(): Invalid component element. ' +
-        'Make sure the component starts with an upper-case letter.'
+      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+        'Warning: ReactDOM.render(): Invalid component element: `centered`. ' +
+        'Make sure the component starts with an upper-case letter.'+
+        '\n    in centered (at **)'
       );
     });
 

src/renderers/dom/shared/ReactDOMDebugTool.js

@@ -13,6 +13,7 @@
 
 var ReactDOMNullInputValuePropDevtool = require('ReactDOMNullInputValuePropDevtool');
 var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
+var ReactDOMComponentCaseDevtool = require('ReactDOMComponentCaseDevtool');
 var ReactDebugTool = require('ReactDebugTool');
 
 var warning = require('warning');
@@ -70,5 +71,6 @@ var ReactDOMDebugTool = {
 
 ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);
 ReactDOMDebugTool.addDevtool(ReactDOMNullInputValuePropDevtool);
+ReactDOMDebugTool.addDevtool(ReactDOMComponentCaseDevtool);
 
 module.exports = ReactDOMDebugTool;

src/renderers/dom/shared/devtools/ReactDOMComponentCaseDevtool.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMComponentCaseDevtool
+ */
+
+'use strict';
+
+var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
+var warning = require('warning');
+var ReactDOMFactories = require('ReactDOMFactories');
+var didWarnAboutCase = false;
+
+function handleElement(debugID, element) {
+  if (element == null || typeof element.type !== 'string' ||
+    element.type.match(/\-|\s+/) !== null ||
+    ReactDOMFactories.hasOwnProperty(element.type)) {
+    return;
+  }
+
+  var invalidElement = document.createElement(element.type) instanceof
+    HTMLUnknownElement;
+
+  if (!didWarnAboutCase && invalidElement) {
+    warning(false,
+      'ReactDOM.render(): Invalid component element: `%s`. ' +
+      'Make sure the component starts with an upper-case letter.%s',
+      element.type,
+      ReactComponentTreeDevtool.getStackAddendumByID(debugID)
+    );
+    didWarnAboutCase = true;
+  }
+}
+
+var ReactDOMComponentCaseDevtool = {
+  onBeforeMountComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+  onBeforeUpdateComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+};
+module.exports = ReactDOMComponentCaseDevtool;