Merge pull request facebook#6184 from gaearon/fix-svg-warning

Warn about deprecated SVG attributes only once
zpao · Mar 4, 2016 · 36798f7 · 36798f7
2 parents b89e7d2 + 8a9ab75
commit 36798f7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -539,6 +539,39 @@ describe('ReactDOMComponent', function() {
       expect(console.error.argsForCall[0][0]).toContain('clip-path');
     });
 
+    it('should only warn once about deprecated SVG attributes', function() {
+      spyOn(console, 'error');
+      var container = document.createElement('div');
+      ReactDOM.render(
+        <svg clipPath="0 0 100 100">
+          <rect strokeWidth={1} />
+          <rect strokeWidth={10} />
+        </svg>,
+        container
+      );
+      expect(console.error.argsForCall.length).toBe(2);
+      expect(console.error.argsForCall[0][0]).toContain('clipPath');
+      expect(console.error.argsForCall[0][0]).toContain('clip-path');
+      expect(console.error.argsForCall[1][0]).toContain('strokeWidth');
+      expect(console.error.argsForCall[1][0]).toContain('stroke-width');
+
+      ReactDOM.render(
+        <svg clipPath="0 0 100 100">
+          <rect strokeWidth={1} strokeOpacity={0.5} />
+          <rect strokeWidth={10} />
+          <rect strokeWidth={100} />
+        </svg>,
+        container
+      );
+      expect(console.error.argsForCall.length).toBe(3);
+      expect(console.error.argsForCall[0][0]).toContain('clipPath');
+      expect(console.error.argsForCall[0][0]).toContain('clip-path');
+      expect(console.error.argsForCall[1][0]).toContain('strokeWidth');
+      expect(console.error.argsForCall[1][0]).toContain('stroke-width');
+      expect(console.error.argsForCall[2][0]).toContain('strokeOpacity');
+      expect(console.error.argsForCall[2][0]).toContain('stroke-opacity');
+    });
+
     it('should update arbitrary hyphenated attributes for SVG tags', function() {
       var container = document.createElement('div');
 

diff --git a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js
@@ -25,20 +25,23 @@ if (__DEV__) {
   var warnedSVGAttributes = {};
 
   var warnDeprecatedSVGAttribute = function(name) {
-    if (!DOMProperty.properties.hasOwnProperty(name)) {
+    if (reactProps.hasOwnProperty(name) && reactProps[name]) {
       return;
     }
 
-    if (reactProps.hasOwnProperty(name) && reactProps[name] ||
-        warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
+    if (!DOMProperty.properties.hasOwnProperty(name)) {
       return;
     }
-
     var { attributeName, attributeNamespace } = DOMProperty.properties[name];
     if (attributeNamespace || name === attributeName) {
       return;
     }
 
+    if (warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
+      return;
+    }
+    warnedSVGAttributes[name] = true;
+
     warning(
       false,
       'SVG property %s is deprecated. Use the original attribute name ' +