Revert "Merge pull request #5714 from gaearon/passthrough-svg-attributes"
This reverts commit 53dabe748c6817cbb7b43f975e24b61331011077, reversing changes made to 82fe64a4564238f8923020f6f4ab4864d1459533.
Paul O’Shannessy committed
Mar 9, 2016 at 10:56 UTC
9f4f88b21f3477c8ffa2fb91c31c6f8a77a1b2b6
8 files changed
+62
-360
src/renderers/dom/client/__tests__/ReactDOMSVG-test.js
-39
@@ -21,45 +21,6 @@ describe('ReactDOMSVG', function() {
21
ReactDOMServer = require('ReactDOMServer');
22
});
23
24
- it('creates initial markup for known hyphenated attributes', function() {
25
- var markup = ReactDOMServer.renderToString(
26
- <svg clip-path="url(#starlet)" />
27
- );
28
- expect(markup).toContain('clip-path="url(#starlet)"');
29
- });
30
-
31
- it('creates initial markup for camel case attributes', function() {
32
- var markup = ReactDOMServer.renderToString(
33
- <svg viewBox="0 0 100 100" />
34
- );
35
- expect(markup).toContain('viewBox="0 0 100 100"');
36
- });
37
-
38
- it('deprecates camel casing of hyphenated attributes', function() {
39
- spyOn(console, 'error');
40
- var markup = ReactDOMServer.renderToString(
41
- <svg clipPath="url(#starlet)" />
42
- );
43
- expect(markup).toContain('clip-path="url(#starlet)"');
44
- expect(console.error.argsForCall.length).toBe(1);
45
- expect(console.error.argsForCall[0][0]).toContain('clipPath');
46
- expect(console.error.argsForCall[0][0]).toContain('clip-path');
47
- });
48
-
49
- it('creates initial markup for unknown hyphenated attributes', function() {
50
- var markup = ReactDOMServer.renderToString(
51
- <svg the-word="the-bird" />
52
- );
53
- expect(markup).toContain('the-word="the-bird"');
54
- });
55
-
56
- it('creates initial markup for unknown camel case attributes', function() {
57
- var markup = ReactDOMServer.renderToString(
58
- <svg theWord="theBird" />
59
- );
60
- expect(markup).toContain('theWord="theBird"');
61
- });
62
-
24
it('creates initial namespaced markup', function() {
25
var markup = ReactDOMServer.renderToString(
26
<svg>
src/renderers/dom/shared/DOMPropertyOperations.js
-47
@@ -126,31 +126,6 @@ var DOMPropertyOperations = {
126
return name + '=' + quoteAttributeValueForBrowser(value);
127
},
128
129
- /**
130
- * Creates markup for an SVG property.
131
- *
132
- * @param {string} name
133
- * @param {*} value
134
- * @return {string} Markup string, or empty string if the property was invalid.
135
- */
136
- createMarkupForSVGAttribute: function(name, value) {
137
- if (__DEV__) {
138
- ReactDOMInstrumentation.debugTool.onCreateMarkupForSVGAttribute(name, value);
139
- }
140
- if (!isAttributeNameSafe(name) || value == null) {
141
- return '';
142
- }
143
- var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
144
- DOMProperty.properties[name] : null;
145
- if (propertyInfo) {
146
- // Migration path for deprecated camelCase aliases for SVG attributes
147
- var { attributeName } = propertyInfo;
148
- return attributeName + '=' + quoteAttributeValueForBrowser(value);
149
- } else {
150
- return name + '=' + quoteAttributeValueForBrowser(value);
151
- }
152
- },
153
-
129
/**
130
* Sets the value for a property on a node.
131
*
@@ -210,18 +185,6 @@ var DOMPropertyOperations = {
185
}
186
},
187
213
- setValueForSVGAttribute: function(node, name, value) {
214
- if (__DEV__) {
215
- ReactDOMInstrumentation.debugTool.onSetValueForSVGAttribute(node, name, value);
216
- }
217
- if (DOMProperty.properties.hasOwnProperty(name)) {
218
- // Migration path for deprecated camelCase aliases for SVG attributes
219
- DOMPropertyOperations.setValueForProperty(node, name, value);
220
- } else {
221
- DOMPropertyOperations.setValueForAttribute(node, name, value);
222
- }
223
- },
224
-
188
/**
189
* Deletes the value for a property on a node.
190
*
@@ -257,16 +220,6 @@ var DOMPropertyOperations = {
220
}
221
},
222
260
- deleteValueForSVGAttribute: function(node, name) {
261
- var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
262
- DOMProperty.properties[name] : null;
263
- if (propertyInfo) {
264
- DOMPropertyOperations.deleteValueForProperty(node, name);
265
- } else {
266
- node.removeAttribute(name);
267
- }
268
- },
269
-
223
};
224
225
ReactPerf.measureMethods(DOMPropertyOperations, 'DOMPropertyOperations', {
src/renderers/dom/shared/ReactDOMComponent.js
-13
@@ -638,8 +638,6 @@ ReactDOMComponent.Mixin = {
638
if (propKey !== CHILDREN) {
639
markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
640
}
641
- } else if (this._namespaceURI === DOMNamespaces.svg) {
642
- markup = DOMPropertyOperations.createMarkupForSVGAttribute(propKey, propValue);
641
} else {
642
markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
643
}
@@ -851,11 +849,6 @@ ReactDOMComponent.Mixin = {
849
// listener (e.g., onClick={null})
850
deleteListener(this, propKey);
851
}
854
- } else if (this._namespaceURI === DOMNamespaces.svg) {
855
- DOMPropertyOperations.deleteValueForSVGAttribute(
856
- getNode(this),
857
- propKey
858
- );
852
} else if (
853
DOMProperty.properties[propKey] ||
854
DOMProperty.isCustomAttribute(propKey)) {
@@ -922,12 +915,6 @@ ReactDOMComponent.Mixin = {
915
propKey,
916
nextProp
917
);
925
- } else if (this._namespaceURI === DOMNamespaces.svg) {
926
- DOMPropertyOperations.setValueForSVGAttribute(
927
- getNode(this),
928
- propKey,
929
- nextProp
930
- );
918
} else if (
919
DOMProperty.properties[propKey] ||
920
DOMProperty.isCustomAttribute(propKey)) {
src/renderers/dom/shared/ReactDOMDebugTool.js
-9
@@ -12,8 +12,6 @@
12
'use strict';
13
14
var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
15
-var ReactDOMSVGDeprecatedAttributeDevtool =
16
- require('ReactDOMSVGDeprecatedAttributeDevtool');
15
16
var warning = require('warning');
17
@@ -55,21 +53,14 @@ var ReactDOMDebugTool = {
53
onCreateMarkupForProperty(name, value) {
54
emitEvent('onCreateMarkupForProperty', name, value);
55
},
58
- onCreateMarkupForSVGAttribute(name, value) {
59
- emitEvent('onCreateMarkupForSVGAttribute', name, value);
60
- },
56
onSetValueForProperty(node, name, value) {
57
emitEvent('onSetValueForProperty', node, name, value);
58
},
64
- onSetValueForSVGAttribute(node, name, value) {
65
- emitEvent('onSetValueForSVGAttribute', node, name, value);
66
- },
59
onDeleteValueForProperty(node, name) {
60
emitEvent('onDeleteValueForProperty', node, name);
61
},
62
};
63
64
ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);
73
-ReactDOMDebugTool.addDevtool(ReactDOMSVGDeprecatedAttributeDevtool);
65
66
module.exports = ReactDOMDebugTool;
src/renderers/dom/shared/SVGDOMPropertyConfig.js
+61
-24
@@ -18,30 +18,60 @@ var NS = {
18
19
var SVGDOMPropertyConfig = {
20
Properties: {
21
- clipPath: null,
22
- fillOpacity: null,
23
- fontFamily: null,
24
- fontSize: null,
25
- markerEnd: null,
26
- markerMid: null,
27
- markerStart: null,
28
- stopColor: null,
29
- stopOpacity: null,
30
- strokeDasharray: null,
31
- strokeLinecap: null,
32
- strokeOpacity: null,
33
- strokeWidth: null,
34
- textAnchor: null,
35
- xlinkActuate: null,
36
- xlinkArcrole: null,
37
- xlinkHref: null,
38
- xlinkRole: null,
39
- xlinkShow: null,
40
- xlinkTitle: null,
41
- xlinkType: null,
42
- xmlBase: null,
43
- xmlLang: null,
44
- xmlSpace: null,
21
+ clipPath: MUST_USE_ATTRIBUTE,
22
+ cx: MUST_USE_ATTRIBUTE,
23
+ cy: MUST_USE_ATTRIBUTE,
24
+ d: MUST_USE_ATTRIBUTE,
25
+ dx: MUST_USE_ATTRIBUTE,
26
+ dy: MUST_USE_ATTRIBUTE,
27
+ fill: MUST_USE_ATTRIBUTE,
28
+ fillOpacity: MUST_USE_ATTRIBUTE,
29
+ fontFamily: MUST_USE_ATTRIBUTE,
30
+ fontSize: MUST_USE_ATTRIBUTE,
31
+ fx: MUST_USE_ATTRIBUTE,
32
+ fy: MUST_USE_ATTRIBUTE,
33
+ gradientTransform: MUST_USE_ATTRIBUTE,
34
+ gradientUnits: MUST_USE_ATTRIBUTE,
35
+ markerEnd: MUST_USE_ATTRIBUTE,
36
+ markerMid: MUST_USE_ATTRIBUTE,
37
+ markerStart: MUST_USE_ATTRIBUTE,
38
+ offset: MUST_USE_ATTRIBUTE,
39
+ opacity: MUST_USE_ATTRIBUTE,
40
+ patternContentUnits: MUST_USE_ATTRIBUTE,
41
+ patternUnits: MUST_USE_ATTRIBUTE,
42
+ points: MUST_USE_ATTRIBUTE,
43
+ preserveAspectRatio: MUST_USE_ATTRIBUTE,
44
+ r: MUST_USE_ATTRIBUTE,
45
+ rx: MUST_USE_ATTRIBUTE,
46
+ ry: MUST_USE_ATTRIBUTE,
47
+ spreadMethod: MUST_USE_ATTRIBUTE,
48
+ stopColor: MUST_USE_ATTRIBUTE,
49
+ stopOpacity: MUST_USE_ATTRIBUTE,
50
+ stroke: MUST_USE_ATTRIBUTE,
51
+ strokeDasharray: MUST_USE_ATTRIBUTE,
52
+ strokeLinecap: MUST_USE_ATTRIBUTE,
53
+ strokeOpacity: MUST_USE_ATTRIBUTE,
54
+ strokeWidth: MUST_USE_ATTRIBUTE,
55
+ textAnchor: MUST_USE_ATTRIBUTE,
56
+ transform: MUST_USE_ATTRIBUTE,
57
+ version: MUST_USE_ATTRIBUTE,
58
+ viewBox: MUST_USE_ATTRIBUTE,
59
+ x1: MUST_USE_ATTRIBUTE,
60
+ x2: MUST_USE_ATTRIBUTE,
61
+ x: MUST_USE_ATTRIBUTE,
62
+ xlinkActuate: MUST_USE_ATTRIBUTE,
63
+ xlinkArcrole: MUST_USE_ATTRIBUTE,
64
+ xlinkHref: MUST_USE_ATTRIBUTE,
65
+ xlinkRole: MUST_USE_ATTRIBUTE,
66
+ xlinkShow: MUST_USE_ATTRIBUTE,
67
+ xlinkTitle: MUST_USE_ATTRIBUTE,
68
+ xlinkType: MUST_USE_ATTRIBUTE,
69
+ xmlBase: MUST_USE_ATTRIBUTE,
70
+ xmlLang: MUST_USE_ATTRIBUTE,
71
+ xmlSpace: MUST_USE_ATTRIBUTE,
72
+ y1: MUST_USE_ATTRIBUTE,
73
+ y2: MUST_USE_ATTRIBUTE,
74
+ y: MUST_USE_ATTRIBUTE,
75
},
76
DOMAttributeNamespaces: {
77
xlinkActuate: NS.xlink,
@@ -60,9 +90,15 @@ var SVGDOMPropertyConfig = {
90
fillOpacity: 'fill-opacity',
91
fontFamily: 'font-family',
92
fontSize: 'font-size',
93
+ gradientTransform: 'gradientTransform',
94
+ gradientUnits: 'gradientUnits',
95
markerEnd: 'marker-end',
96
markerMid: 'marker-mid',
97
markerStart: 'marker-start',
98
+ patternContentUnits: 'patternContentUnits',
99
+ patternUnits: 'patternUnits',
100
+ preserveAspectRatio: 'preserveAspectRatio',
101
+ spreadMethod: 'spreadMethod',
102
stopColor: 'stop-color',
103
stopOpacity: 'stop-opacity',
104
strokeDasharray: 'stroke-dasharray',
@@ -70,6 +106,7 @@ var SVGDOMPropertyConfig = {
106
strokeOpacity: 'stroke-opacity',
107
strokeWidth: 'stroke-width',
108
textAnchor: 'text-anchor',
109
+ viewBox: 'viewBox',
110
xlinkActuate: 'xlink:actuate',
111
xlinkArcrole: 'xlink:arcrole',
112
xlinkHref: 'xlink:href',
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
-166
@@ -259,79 +259,6 @@ describe('ReactDOMComponent', function() {
259
expect(container.firstChild.hasAttribute('height')).toBe(false);
260
});
261
262
- it('should remove known SVG camel case attributes', function() {
263
- var container = document.createElement('div');
264
- ReactDOM.render(<svg viewBox="0 0 100 100" />, container);
265
-
266
- expect(container.firstChild.hasAttribute('viewBox')).toBe(true);
267
- ReactDOM.render(<svg />, container);
268
- expect(container.firstChild.hasAttribute('viewBox')).toBe(false);
269
- });
270
-
271
- it('should remove known SVG hyphenated attributes', function() {
272
- var container = document.createElement('div');
273
- ReactDOM.render(<svg clip-path="0 0 100 100" />, container);
274
-
275
- expect(container.firstChild.hasAttribute('clip-path')).toBe(true);
276
- ReactDOM.render(<svg />, container);
277
- expect(container.firstChild.hasAttribute('clip-path')).toBe(false);
278
- });
279
-
280
- it('should remove arbitrary SVG hyphenated attributes', function() {
281
- var container = document.createElement('div');
282
- ReactDOM.render(<svg the-word="the-bird" />, container);
283
-
284
- expect(container.firstChild.hasAttribute('the-word')).toBe(true);
285
- ReactDOM.render(<svg />, container);
286
- expect(container.firstChild.hasAttribute('the-word')).toBe(false);
287
- });
288
-
289
- it('should remove arbitrary SVG camel case attributes', function() {
290
- var container = document.createElement('div');
291
- ReactDOM.render(<svg theWord="theBird" />, container);
292
-
293
- if (ReactDOMFeatureFlags.useCreateElement) {
294
- // jsdom's svg parsing makes attributes lowercase, so only assert this
295
- // in createElement mode...
296
- expect(container.firstChild.hasAttribute('theWord')).toBe(true);
297
- }
298
- ReactDOM.render(<svg />, container);
299
- expect(container.firstChild.hasAttribute('theWord')).toBe(false);
300
- });
301
-
302
- it('should remove SVG attributes that should have been hyphenated', function() {
303
- spyOn(console, 'error');
304
- var container = document.createElement('div');
305
- ReactDOM.render(<svg clipPath="0 0 100 100" />, container);
306
- expect(console.error.argsForCall.length).toBe(1);
307
- expect(console.error.argsForCall[0][0]).toContain('clipPath');
308
- expect(console.error.argsForCall[0][0]).toContain('clip-path');
309
-
310
- expect(container.firstChild.hasAttribute('clip-path')).toBe(true);
311
- ReactDOM.render(<svg />, container);
312
- expect(container.firstChild.hasAttribute('clip-path')).toBe(false);
313
- });
314
-
315
- it('should remove namespaced SVG attributes', function() {
316
- var container = document.createElement('div');
317
- ReactDOM.render(
318
- <svg>
319
- <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
320
- </svg>,
321
- container
322
- );
323
-
324
- expect(container.firstChild.firstChild.hasAttributeNS(
325
- 'http://www.w3.org/1999/xlink',
326
- 'href'
327
- )).toBe(true);
328
- ReactDOM.render(<svg><image /></svg>, container);
329
- expect(container.firstChild.firstChild.hasAttributeNS(
330
- 'http://www.w3.org/1999/xlink',
331
- 'href'
332
- )).toBe(false);
333
- });
334
-
262
it('should remove properties', function() {
263
var container = document.createElement('div');
264
ReactDOM.render(<div className="monkey" />, container);
@@ -403,99 +330,6 @@ describe('ReactDOMComponent', function() {
330
expect(container.childNodes[0].getAttribute('myattr')).toBe('myval');
331
});
332
406
- it('should update known hyphenated attributes for SVG tags', function() {
407
- var container = document.createElement('div');
408
-
409
- var beforeUpdate = <svg />;
410
- ReactDOM.render(beforeUpdate, container);
411
-
412
- var afterUpdate = <svg clip-path="url(#starlet)" />;
413
- ReactDOM.render(afterUpdate, container);
414
-
415
- expect(container.childNodes[0].getAttribute('clip-path')).toBe(
416
- 'url(#starlet)'
417
- );
418
- });
419
-
420
- it('should update camel case attributes for SVG tags', function() {
421
- var container = document.createElement('div');
422
-
423
- var beforeUpdate = <svg />;
424
- ReactDOM.render(beforeUpdate, container);
425
-
426
- var afterUpdate = <svg viewBox="0 0 100 100" />;
427
- ReactDOM.render(afterUpdate, container);
428
-
429
- expect(container.childNodes[0].getAttribute('viewBox')).toBe(
430
- '0 0 100 100'
431
- );
432
- });
433
-
434
- it('should warn camel casing hyphenated attributes for SVG tags', function() {
435
- spyOn(console, 'error');
436
- var container = document.createElement('div');
437
-
438
- var beforeUpdate = <svg />;
439
- ReactDOM.render(beforeUpdate, container);
440
-
441
- var afterUpdate = <svg clipPath="url(#starlet)" />;
442
- ReactDOM.render(afterUpdate, container);
443
-
444
- expect(container.childNodes[0].getAttribute('clip-path')).toBe(
445
- 'url(#starlet)'
446
- );
447
- expect(console.error.argsForCall.length).toBe(1);
448
- expect(console.error.argsForCall[0][0]).toContain('clipPath');
449
- expect(console.error.argsForCall[0][0]).toContain('clip-path');
450
- });
451
-
452
- it('should update arbitrary hyphenated attributes for SVG tags', function() {
453
- var container = document.createElement('div');
454
-
455
- var beforeUpdate = <svg />;
456
- ReactDOM.render(beforeUpdate, container);
457
-
458
- var afterUpdate = <svg the-word="the-bird" />;
459
- ReactDOM.render(afterUpdate, container);
460
-
461
- expect(container.childNodes[0].getAttribute('the-word')).toBe('the-bird');
462
- });
463
-
464
- it('should update arbitrary camel case attributes for SVG tags', function() {
465
- var container = document.createElement('div');
466
-
467
- var beforeUpdate = <svg />;
468
- ReactDOM.render(beforeUpdate, container);
469
-
470
- var afterUpdate = <svg theWord="theBird" />;
471
- ReactDOM.render(afterUpdate, container);
472
-
473
- expect(container.childNodes[0].getAttribute('theWord')).toBe('theBird');
474
- });
475
-
476
- it('should update namespaced SVG attributes', function() {
477
- var container = document.createElement('div');
478
-
479
- var beforeUpdate = (
480
- <svg>
481
- <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
482
- </svg>
483
- );
484
- ReactDOM.render(beforeUpdate, container);
485
-
486
- var afterUpdate = (
487
- <svg>
488
- <image xlinkHref="http://i.imgur.com/JvqCM2p.png" />
489
- </svg>
490
- );
491
- ReactDOM.render(afterUpdate, container);
492
-
493
- expect(container.firstChild.firstChild.getAttributeNS(
494
- 'http://www.w3.org/1999/xlink',
495
- 'href'
496
- )).toBe('http://i.imgur.com/JvqCM2p.png');
497
- });
498
-
333
it('should clear all the styles when removing `style`', function() {
334
var styles = {display: 'none', color: 'red'};
335
var container = document.createElement('div');
src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js
deleted
-61
@@ -1,61 +0,0 @@
1
-/**
2
- * Copyright 2013-present, 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;