Fix #3596: Add warning for components not following proper case convention

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();
 
@@ -163,6 +168,29 @@ describe('ReactMount', function() {
     );
   });
 
+  it('should warn when component does not follow proper case convention',
+    function() {
+      var container = document.createElement('container');
+      var myDiv = <div>React</div>;
+      var mySvg = <svg><polygon points="-145.6 556.9 104.8-145.6 429"/></svg>;
+      var centered = React.createClass({
+        render: function() {
+          return <div/>;
+        },
+      });
+      spyOn(console, 'error');
+      ReactDOM.render(myDiv, container);
+      ReactDOM.render(mySvg, container);
+      ReactDOM.render(<centered/>, container);
+      expect(console.error.calls.count()).toBe(1);
+      expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+        'Warning: Unknown element centered. Did you miss-spell an HTML tag name? ' +
+        'If you are using a custom component, make sure your custom component ' +
+        'starts with an upper-case letter.' +
+        '\n    in centered (at **)'
+      );
+    });
+
   it('should account for escaping on a checksum mismatch', function() {
     var div = document.createElement('div');
     var markup = ReactDOMServer.renderToString(

src/renderers/dom/shared/ReactDOMDebugTool.js

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

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

@@ -0,0 +1,49 @@
+/**
+ * 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 ReactDOMUnknownComponentDevtool
+ */
+
+'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,
+      'Unknown element %s. Did you miss-spell an HTML tag name? ' +
+      'If you are using a custom component, make sure your custom component ' +
+      'starts with an upper-case letter.%s',
+      element.type,
+      ReactComponentTreeDevtool.getStackAddendumByID(debugID)
+    );
+    didWarnAboutCase = true;
+  }
+}
+
+var ReactDOMUnknownComponentDevtool = {
+  onBeforeMountComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+  onBeforeUpdateComponent(debugID, element) {
+    handleElement(debugID, element);
+  },
+};
+module.exports = ReactDOMUnknownComponentDevtool;