Ignore and warn about non-string is attribute

Author: gaearon

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -326,7 +326,7 @@ var ReactDOMFiberComponent = {
         // This is guaranteed to yield a script element.
         var firstChild = ((div.firstChild: any): HTMLScriptElement);
         domElement = div.removeChild(firstChild);
-      } else if (props.is) {
+      } else if (typeof props.is === 'string') {
         // $FlowIssue `createElement` should be updated for Web Components
         domElement = ownerDocument.createElement(type, {is: props.is});
       } else {

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -635,12 +635,24 @@ describe('ReactDOMComponent', () => {
       expect(nodeValueSetter.mock.calls.length).toBe(3);
     });
 
-    it('should ignore attribute whitelist for elements with the "is: attribute', () => {
+    it('should ignore attribute whitelist for elements with the "is" attribute', () => {
       var container = document.createElement('div');
       ReactDOM.render(<button is="test" cowabunga="chevynova" />, container);
       expect(container.firstChild.hasAttribute('cowabunga')).toBe(true);
     });
 
+    it('should warn about non-string "is" attribute', () => {
+      spyOn(console, 'error');
+      var container = document.createElement('div');
+      ReactDOM.render(<button is={function() {}} />, container);
+
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'Received a `function` for string attribute `is`. If this is expected, cast ' +
+          'the value to a string.',
+      );
+    });
+
     it('should not update when switching between null/undefined', () => {
       var container = document.createElement('div');
       var node = ReactDOM.render(<div />, container);

src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js

@@ -105,6 +105,23 @@ if (__DEV__) {
       return true;
     }
 
+    if (
+      lowerCasedName === 'is' &&
+      value !== null &&
+      value !== undefined &&
+      typeof value !== 'string'
+    ) {
+      warning(
+        false,
+        'Received a `%s` for string attribute `is`. If this is expected, cast ' +
+          'the value to a string.%s',
+        typeof value,
+        getStackAddendum(debugID),
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
     if (typeof value === 'number' && isNaN(value)) {
       warning(
         false,

src/renderers/dom/shared/utils/isCustomComponent.js

@@ -15,7 +15,7 @@ var DOMNamespaces = require('DOMNamespaces');
 var HTML_NAMESPACE = DOMNamespaces.Namespaces.html;
 
 function isCustomComponent(tagName, props, namespace) {
-  if (tagName.indexOf('-') >= 0 || props.is != null) {
+  if (tagName.indexOf('-') >= 0 || typeof props.is === 'string') {
     // TODO: We always have a namespace with fiber. Drop the first
     // check when Stack is removed.
     return namespace == null || namespace === HTML_NAMESPACE;

src/renderers/dom/stack/client/ReactDOMComponent.js

@@ -552,7 +552,7 @@ ReactDOMComponent.Mixin = {
           var div = ownerDocument.createElement('div');
           div.innerHTML = `<${type}></${type}>`;
           el = div.removeChild(div.firstChild);
-        } else if (props.is) {
+        } else if (typeof props.is === 'string') {
           el = ownerDocument.createElement(type, {is: props.is});
         } else {
           // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.