Move SVG attribute deprecation warnings into a devtool

In facebook#5590 a new system was introduced for tracking dev-time warnings.
This commit uses it for reporting SVG attribute deprecation warnings.

Author: gaearon

src/renderers/dom/shared/DOMPropertyOperations.js

@@ -50,32 +50,6 @@ function shouldIgnoreValue(propertyInfo, value) {
     (propertyInfo.hasOverloadedBooleanValue && value === false);
 }
 
-if (__DEV__) {
-  var reactProps = {
-    children: true,
-    dangerouslySetInnerHTML: true,
-    key: true,
-    ref: true,
-  };
-  var warnedSVGProperties = {};
-
-  var warnDeprecatedSVGProperty = function(name, attributeName) {
-    if (reactProps.hasOwnProperty(name) && reactProps[name] ||
-        warnedSVGProperties.hasOwnProperty(name) && warnedSVGProperties[name]) {
-      return;
-    }
-
-    warnedSVGProperties[name] = true;
-    warning(
-      false,
-      'SVG property %s is deprecated. Use the original attribute name ' +
-      '%s for SVG tags instead.',
-      name,
-      attributeName
-    );
-  };
-}
-
 /**
  * Operations for dealing with DOM properties.
  */
@@ -158,21 +132,21 @@ var DOMPropertyOperations = {
    * @return {string} Markup string, or empty string if the property was invalid.
    */
   createMarkupForSVGAttribute: function(name, value) {
+    if (__DEV__) {
+      ReactDOMInstrumentation.debugTool.onCreateMarkupForSVGAttribute(name, value);
+    }
     if (!isAttributeNameSafe(name) || value == null) {
       return '';
     }
     var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
         DOMProperty.properties[name] : null;
     if (propertyInfo) {
-      var { attributeName, attributeNamespace } = propertyInfo;
-      if (__DEV__) {
-        if (!attributeNamespace && name !== attributeName) {
-          warnDeprecatedSVGProperty(name, attributeName);
-        }
-      }
+      // Migration path for deprecated camelCase aliases for SVG attributes
+      var { attributeName } = propertyInfo;
       return attributeName + '=' + quoteAttributeValueForBrowser(value);
+    } else {
+      return name + '=' + quoteAttributeValueForBrowser(value);
     }
-    return name + '=' + quoteAttributeValueForBrowser(value);
   },
 
   /**
@@ -235,15 +209,11 @@ var DOMPropertyOperations = {
   },
 
   setValueForSVGAttribute: function(node, name, value) {
-    var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
-        DOMProperty.properties[name] : null;
-    if (propertyInfo) {
-      if (__DEV__) {
-        var { attributeName, attributeNamespace } = propertyInfo;
-        if (!attributeNamespace && name !== attributeName) {
-          warnDeprecatedSVGProperty(name, attributeName);
-        }
-      }
+    if (__DEV__) {
+      ReactDOMInstrumentation.debugTool.onSetValueForSVGAttribute(node, name, value);
+    }
+    if (DOMProperty.properties.hasOwnProperty(name)) {
+      // Migration path for deprecated camelCase aliases for SVG attributes
       DOMPropertyOperations.setValueForProperty(node, name, value);
     } else {
       DOMPropertyOperations.setValueForAttribute(node, name, value);

src/renderers/dom/shared/ReactDOMDebugTool.js

@@ -12,6 +12,8 @@
 'use strict';
 
 var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
+var ReactDOMSVGDeprecatedAttributeDevtool =
+  require('ReactDOMSVGDeprecatedAttributeDevtool');
 
 var warning = require('warning');
 
@@ -53,14 +55,21 @@ var ReactDOMDebugTool = {
   onCreateMarkupForProperty(name, value) {
     emitEvent('onCreateMarkupForProperty', name, value);
   },
+  onCreateMarkupForSVGAttribute(name, value) {
+    emitEvent('onCreateMarkupForSVGAttribute', name, value);
+  },
   onSetValueForProperty(node, name, value) {
     emitEvent('onSetValueForProperty', node, name, value);
   },
+  onSetValueForSVGAttribute(node, name, value) {
+    emitEvent('onSetValueForSVGAttribute', node, name, value);
+  },
   onDeleteValueForProperty(node, name) {
     emitEvent('onDeleteValueForProperty', node, name);
   },
 };
 
 ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);
+ReactDOMDebugTool.addDevtool(ReactDOMSVGDeprecatedAttributeDevtool);
 
 module.exports = ReactDOMDebugTool;

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

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2013-2015, 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 ReactDOMSVGDeprecatedAttributeDevtool
+ */
+
+'use strict';
+
+var DOMProperty = require('DOMProperty');
+
+var warning = require('warning');
+
+if (__DEV__) {
+  var reactProps = {
+    children: true,
+    dangerouslySetInnerHTML: true,
+    key: true,
+    ref: true,
+  };
+  var warnedSVGAttributes = {};
+
+  var warnDeprecatedSVGAttribute = function(name) {
+    if (!DOMProperty.properties.hasOwnProperty(name)) {
+      return;
+    }
+
+    if (reactProps.hasOwnProperty(name) && reactProps[name] ||
+        warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
+      return;
+    }
+
+    var { attributeName, attributeNamespace } = DOMProperty.properties[name];
+    if (attributeNamespace || name === attributeName) {
+      return;
+    }
+
+    warning(
+      false,
+      'SVG property %s is deprecated. Use the original attribute name ' +
+      '%s for SVG tags instead.',
+      name,
+      attributeName
+    );
+  };
+}
+
+var ReactDOMSVGDeprecatedAttributeDevtool = {
+  onCreateMarkupForSVGAttribute(name, value) {
+    warnDeprecatedSVGAttribute(name);
+  },
+  onSetValueForSVGAttribute(node, name, value) {
+    warnDeprecatedSVGAttribute(name);
+  },
+};
+
+module.exports = ReactDOMSVGDeprecatedAttributeDevtool;

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

@@ -82,6 +82,6 @@ var ReactDOMUnknownPropertyDevtool = {
   onDeleteValueForProperty(node, name) {
     warnUnknownProperty(name);
   },
-}
+};
 
 module.exports = ReactDOMUnknownPropertyDevtool;