From a270e03bdf3ef57292f1666b5b5e89d5f3932132 Mon Sep 17 00:00:00 2001
From: Dan Abramov <gaearon@fb.com>
Date: Tue, 29 Aug 2017 09:48:34 -0700
Subject: [PATCH] Ignore and warn about non-string `is` attribute

---
 .../dom/fiber/ReactDOMFiberComponent.js         |  2 +-
 .../shared/__tests__/ReactDOMComponent-test.js  | 14 +++++++++++++-
 .../shared/hooks/ReactDOMUnknownPropertyHook.js | 17 +++++++++++++++++
 .../dom/shared/utils/isCustomComponent.js       |  2 +-
 .../dom/stack/client/ReactDOMComponent.js       |  2 +-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
index fd10cf0e99995..b1a7bc1919f86 100644
--- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js
+++ b/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 {
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index 050c31317b5e0..13f1fd2e00ba5 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/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);
diff --git a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
index 574969b6a9a7c..099b615dd56c9 100644
--- a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
+++ b/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,
diff --git a/src/renderers/dom/shared/utils/isCustomComponent.js b/src/renderers/dom/shared/utils/isCustomComponent.js
index f12b50af4e1ee..05156574cd068 100644
--- a/src/renderers/dom/shared/utils/isCustomComponent.js
+++ b/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;
diff --git a/src/renderers/dom/stack/client/ReactDOMComponent.js b/src/renderers/dom/stack/client/ReactDOMComponent.js
index 85a2c21d5f8cc..5f7a5a1e9b5da 100644
--- a/src/renderers/dom/stack/client/ReactDOMComponent.js
+++ b/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.