Move SVG attribute deprecation warnings into a devtool
In #5590 a new system was introduced for tracking dev-time warnings. This commit uses it for reporting SVG attribute deprecation warnings.
Dan Abramov committed
Dec 24, 2015 at 17:50 UTC
251d6c30b51c6aa9a406f9076c0f895570a710b3
4 files changed
+83
-43
src/renderers/dom/shared/DOMPropertyOperations.js
+12
-42
@@ -50,32 +50,6 @@ function shouldIgnoreValue(propertyInfo, value) {
50
(propertyInfo.hasOverloadedBooleanValue && value === false);
51
}
52
53
-if (__DEV__) {
54
- var reactProps = {
55
- children: true,
56
- dangerouslySetInnerHTML: true,
57
- key: true,
58
- ref: true,
59
- };
60
- var warnedSVGProperties = {};
61
-
62
- var warnDeprecatedSVGProperty = function(name, attributeName) {
63
- if (reactProps.hasOwnProperty(name) && reactProps[name] ||
64
- warnedSVGProperties.hasOwnProperty(name) && warnedSVGProperties[name]) {
65
- return;
66
- }
67
-
68
- warnedSVGProperties[name] = true;
69
- warning(
70
- false,
71
- 'SVG property %s is deprecated. Use the original attribute name ' +
72
- '%s for SVG tags instead.',
73
- name,
74
- attributeName
75
- );
76
- };
77
-}
78
-
53
/**
54
* Operations for dealing with DOM properties.
55
*/
@@ -158,21 +132,21 @@ var DOMPropertyOperations = {
132
* @return {string} Markup string, or empty string if the property was invalid.
133
*/
134
createMarkupForSVGAttribute: function(name, value) {
135
+ if (__DEV__) {
136
+ ReactDOMInstrumentation.debugTool.onCreateMarkupForSVGAttribute(name, value);
137
+ }
138
if (!isAttributeNameSafe(name) || value == null) {
139
return '';
140
}
141
var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
142
DOMProperty.properties[name] : null;
143
if (propertyInfo) {
167
- var { attributeName, attributeNamespace } = propertyInfo;
168
- if (__DEV__) {
169
- if (!attributeNamespace && name !== attributeName) {
170
- warnDeprecatedSVGProperty(name, attributeName);
171
- }
172
- }
144
+ // Migration path for deprecated camelCase aliases for SVG attributes
145
+ var { attributeName } = propertyInfo;
146
return attributeName + '=' + quoteAttributeValueForBrowser(value);
147
+ } else {
148
+ return name + '=' + quoteAttributeValueForBrowser(value);
149
}
175
- return name + '=' + quoteAttributeValueForBrowser(value);
150
},
151
152
/**
@@ -235,15 +209,11 @@ var DOMPropertyOperations = {
209
},
210
211
setValueForSVGAttribute: function(node, name, value) {
238
- var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
239
- DOMProperty.properties[name] : null;
240
- if (propertyInfo) {
241
- if (__DEV__) {
242
- var { attributeName, attributeNamespace } = propertyInfo;
243
- if (!attributeNamespace && name !== attributeName) {
244
- warnDeprecatedSVGProperty(name, attributeName);
245
- }
246
- }
212
+ if (__DEV__) {
213
+ ReactDOMInstrumentation.debugTool.onSetValueForSVGAttribute(node, name, value);
214
+ }
215
+ if (DOMProperty.properties.hasOwnProperty(name)) {
216
+ // Migration path for deprecated camelCase aliases for SVG attributes
217
DOMPropertyOperations.setValueForProperty(node, name, value);
218
} else {
219
DOMPropertyOperations.setValueForAttribute(node, name, value);
src/renderers/dom/shared/ReactDOMDebugTool.js
+9
@@ -12,6 +12,8 @@
12
'use strict';
13
14
var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
15
+var ReactDOMSVGDeprecatedAttributeDevtool =
16
+ require('ReactDOMSVGDeprecatedAttributeDevtool');
17
18
var warning = require('warning');
19
@@ -53,14 +55,21 @@ var ReactDOMDebugTool = {
55
onCreateMarkupForProperty(name, value) {
56
emitEvent('onCreateMarkupForProperty', name, value);
57
},
58
+ onCreateMarkupForSVGAttribute(name, value) {
59
+ emitEvent('onCreateMarkupForSVGAttribute', name, value);
60
+ },
61
onSetValueForProperty(node, name, value) {
62
emitEvent('onSetValueForProperty', node, name, value);
63
},
64
+ onSetValueForSVGAttribute(node, name, value) {
65
+ emitEvent('onSetValueForSVGAttribute', node, name, value);
66
+ },
67
onDeleteValueForProperty(node, name) {
68
emitEvent('onDeleteValueForProperty', node, name);
69
},
70
};
71
72
ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);
73
+ReactDOMDebugTool.addDevtool(ReactDOMSVGDeprecatedAttributeDevtool);
74
75
module.exports = ReactDOMDebugTool;
src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js
new
+61
@@ -0,0 +1,61 @@
1
+/**
2
+ * Copyright 2013-2015, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @providesModule ReactDOMSVGDeprecatedAttributeDevtool
10
+ */
11
+
12
+'use strict';
13
+
14
+var DOMProperty = require('DOMProperty');
15
+
16
+var warning = require('warning');
17
+
18
+if (__DEV__) {
19
+ var reactProps = {
20
+ children: true,
21
+ dangerouslySetInnerHTML: true,
22
+ key: true,
23
+ ref: true,
24
+ };
25
+ var warnedSVGAttributes = {};
26
+
27
+ var warnDeprecatedSVGAttribute = function(name) {
28
+ if (!DOMProperty.properties.hasOwnProperty(name)) {
29
+ return;
30
+ }
31
+
32
+ if (reactProps.hasOwnProperty(name) && reactProps[name] ||
33
+ warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) {
34
+ return;
35
+ }
36
+
37
+ var { attributeName, attributeNamespace } = DOMProperty.properties[name];
38
+ if (attributeNamespace || name === attributeName) {
39
+ return;
40
+ }
41
+
42
+ warning(
43
+ false,
44
+ 'SVG property %s is deprecated. Use the original attribute name ' +
45
+ '%s for SVG tags instead.',
46
+ name,
47
+ attributeName
48
+ );
49
+ };
50
+}
51
+
52
+var ReactDOMSVGDeprecatedAttributeDevtool = {
53
+ onCreateMarkupForSVGAttribute(name, value) {
54
+ warnDeprecatedSVGAttribute(name);
55
+ },
56
+ onSetValueForSVGAttribute(node, name, value) {
57
+ warnDeprecatedSVGAttribute(name);
58
+ },
59
+};
60
+
61
+module.exports = ReactDOMSVGDeprecatedAttributeDevtool;
src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js
+1
-1
@@ -82,6 +82,6 @@ var ReactDOMUnknownPropertyDevtool = {
82
onDeleteValueForProperty(node, name) {
83
warnUnknownProperty(name);
84
},
85
-}
85
+};
86
87
module.exports = ReactDOMUnknownPropertyDevtool;