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

[eblin]

This adds a warning for when components are mounted with lower case letters rather than uppercase convention used by react.

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
Docs

It should however NOT throw warnings for valid components as stated in the #3596 issue dicussion.

The warning is only triggered on __DEV__ environments.

The warning logic checks the following:

• component being rendered is instanceof HTMLUnknownElement
• component is not a "whitelisted"/supported html tag, like SVG, etc... which are instances of HTMLUnknownElement, React actually already has a list of these supported tags so we just checked against it. ReactDOMFactories.js
• component does not contain a hyphen or space character. Valid custom HTML elements must contain hyphen characters so we should not warn about it (See spec), also whitespace in component tag will throw its own error thanks to the "sanitize tag" tests/code already in react.

Let me know if I missed something obvious. Thanks!

[ghost]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks!

[aweary]

I feel like this should include a reference to which element is causing this warning.

[jimfb]

Yes, probably a full component trace using ReactComponentTreeDevtool.getStackAddendumByID(debugID)

[jimfb]

I might change the message to something like:

'Unknown element %s. Did you misspell an HTML tag name? If you using a custom component, make sure your custom component starts with an upper-case letter.%s', element.type, ReactComponentTreeDevtool.getStackAddendumByID(debugID)

[eblin]

Agree! I was not too happy with the message itself! Thanks for the suggestion, I'll change it to that.

[ghost]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[jimfb]

I think the warning would fire even without this class being defined, right? This is effectively just catching unknown elements?

[jimfb]

I think we can just delete this line.

[eblin]

I added the createClassline to test that the warning was actually triggering but yes feel free to delete it.

This is effectively just catching unknown elements

Correct as long as the element.type passes the criteria:

if (element == null || typeof element.type !== 'string' ||
    element.type.match(/\-|\s+/) !== null ||
    ReactDOMFactories.hasOwnProperty(element.type)) {
    return;
  }

[zpao]

miss-spell

Ironically, this is misspelled. You want "misspell".

[gaearon]

Going to close this out. #9163 looks like a more recent attempt at the same thing.