Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Merge pull request #5714 from gaearon/passthrough-svg-attributes"

Browse Source 
This reverts commit 53dabe748c, reversing
changes made to 82fe64a456.
This commit is contained in:
Paul O’Shannessy
2016-03-11 11:08:56 -08:00
parent 2fb74cd1ac
commit 9f4f88b21f
8 changed files with 62 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderers/dom/client/__tests__/ReactDOMSVG-test.js
-39
View File
@@ -21,45 +21,6 @@ describe('ReactDOMSVG', function() {
ReactDOMServer = require('ReactDOMServer');
});
it('creates initial markup for known hyphenated attributes', function() {
var markup = ReactDOMServer.renderToString(
<svg clip-path="url(#starlet)" />
);
expect(markup).toContain('clip-path="url(#starlet)"');
});
it('creates initial markup for camel case attributes', function() {
var markup = ReactDOMServer.renderToString(
<svg viewBox="0 0 100 100" />
);
expect(markup).toContain('viewBox="0 0 100 100"');
});
it('deprecates camel casing of hyphenated attributes', function() {
spyOn(console, 'error');
var markup = ReactDOMServer.renderToString(
<svg clipPath="url(#starlet)" />
);
expect(markup).toContain('clip-path="url(#starlet)"');
expect(console.error.argsForCall.length).toBe(1);
expect(console.error.argsForCall[0][0]).toContain('clipPath');
expect(console.error.argsForCall[0][0]).toContain('clip-path');
});
it('creates initial markup for unknown hyphenated attributes', function() {
var markup = ReactDOMServer.renderToString(
<svg the-word="the-bird" />
);
expect(markup).toContain('the-word="the-bird"');
});
it('creates initial markup for unknown camel case attributes', function() {
var markup = ReactDOMServer.renderToString(
<svg theWord="theBird" />
);
expect(markup).toContain('theWord="theBird"');
});
it('creates initial namespaced markup', function() {
var markup = ReactDOMServer.renderToString(
<svg>
src/renderers/dom/shared/DOMPropertyOperations.js
-47
View File
@@ -126,31 +126,6 @@ var DOMPropertyOperations = {
return name + '=' + quoteAttributeValueForBrowser(value);
},
/**
* Creates markup for an SVG property.
*
* @param {string} name
* @param {*} value
* @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) {
// Migration path for deprecated camelCase aliases for SVG attributes
var { attributeName } = propertyInfo;
return attributeName + '=' + quoteAttributeValueForBrowser(value);
} else {
return name + '=' + quoteAttributeValueForBrowser(value);
}
},
/**
* Sets the value for a property on a node.
*
@@ -210,18 +185,6 @@ var DOMPropertyOperations = {
}
},
setValueForSVGAttribute: function(node, name, value) {
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);
}
},
/**
* Deletes the value for a property on a node.
*
@@ -257,16 +220,6 @@ var DOMPropertyOperations = {
}
},
deleteValueForSVGAttribute: function(node, name) {
var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
DOMProperty.properties[name] : null;
if (propertyInfo) {
DOMPropertyOperations.deleteValueForProperty(node, name);
} else {
node.removeAttribute(name);
}
},
};
ReactPerf.measureMethods(DOMPropertyOperations, 'DOMPropertyOperations', {
src/renderers/dom/shared/ReactDOMComponent.js
-13
View File
@@ -638,8 +638,6 @@ ReactDOMComponent.Mixin = {
if (propKey !== CHILDREN) {
markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
}
} else if (this._namespaceURI === DOMNamespaces.svg) {
markup = DOMPropertyOperations.createMarkupForSVGAttribute(propKey, propValue);
} else {
markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
}
@@ -851,11 +849,6 @@ ReactDOMComponent.Mixin = {
// listener (e.g., onClick={null})
deleteListener(this, propKey);
}
} else if (this._namespaceURI === DOMNamespaces.svg) {
DOMPropertyOperations.deleteValueForSVGAttribute(
getNode(this),
propKey
);
} else if (
DOMProperty.properties[propKey] ||
DOMProperty.isCustomAttribute(propKey)) {
@@ -922,12 +915,6 @@ ReactDOMComponent.Mixin = {
propKey,
nextProp
);
} else if (this._namespaceURI === DOMNamespaces.svg) {
DOMPropertyOperations.setValueForSVGAttribute(
getNode(this),
propKey,
nextProp
);
} else if (
DOMProperty.properties[propKey] ||
DOMProperty.isCustomAttribute(propKey)) {
src/renderers/dom/shared/ReactDOMDebugTool.js
-9
View File
@@ -12,8 +12,6 @@
'use strict';
var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
var ReactDOMSVGDeprecatedAttributeDevtool =
require('ReactDOMSVGDeprecatedAttributeDevtool');
var warning = require('warning');
@@ -55,21 +53,14 @@ 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/SVGDOMPropertyConfig.js
+61 -24
View File
@@ -18,30 +18,60 @@ var NS = {
var SVGDOMPropertyConfig = {
Properties: {
clipPath: null,
fillOpacity: null,
fontFamily: null,
fontSize: null,
markerEnd: null,
markerMid: null,
markerStart: null,
stopColor: null,
stopOpacity: null,
strokeDasharray: null,
strokeLinecap: null,
strokeOpacity: null,
strokeWidth: null,
textAnchor: null,
xlinkActuate: null,
xlinkArcrole: null,
xlinkHref: null,
xlinkRole: null,
xlinkShow: null,
xlinkTitle: null,
xlinkType: null,
xmlBase: null,
xmlLang: null,
xmlSpace: null,
clipPath: MUST_USE_ATTRIBUTE,
cx: MUST_USE_ATTRIBUTE,
cy: MUST_USE_ATTRIBUTE,
d: MUST_USE_ATTRIBUTE,
dx: MUST_USE_ATTRIBUTE,
dy: MUST_USE_ATTRIBUTE,
fill: MUST_USE_ATTRIBUTE,
fillOpacity: MUST_USE_ATTRIBUTE,
fontFamily: MUST_USE_ATTRIBUTE,
fontSize: MUST_USE_ATTRIBUTE,
fx: MUST_USE_ATTRIBUTE,
fy: MUST_USE_ATTRIBUTE,
gradientTransform: MUST_USE_ATTRIBUTE,
gradientUnits: MUST_USE_ATTRIBUTE,
markerEnd: MUST_USE_ATTRIBUTE,
markerMid: MUST_USE_ATTRIBUTE,
markerStart: MUST_USE_ATTRIBUTE,
offset: MUST_USE_ATTRIBUTE,
opacity: MUST_USE_ATTRIBUTE,
patternContentUnits: MUST_USE_ATTRIBUTE,
patternUnits: MUST_USE_ATTRIBUTE,
points: MUST_USE_ATTRIBUTE,
preserveAspectRatio: MUST_USE_ATTRIBUTE,
r: MUST_USE_ATTRIBUTE,
rx: MUST_USE_ATTRIBUTE,
ry: MUST_USE_ATTRIBUTE,
spreadMethod: MUST_USE_ATTRIBUTE,
stopColor: MUST_USE_ATTRIBUTE,
stopOpacity: MUST_USE_ATTRIBUTE,
stroke: MUST_USE_ATTRIBUTE,
strokeDasharray: MUST_USE_ATTRIBUTE,
strokeLinecap: MUST_USE_ATTRIBUTE,
strokeOpacity: MUST_USE_ATTRIBUTE,
strokeWidth: MUST_USE_ATTRIBUTE,
textAnchor: MUST_USE_ATTRIBUTE,
transform: MUST_USE_ATTRIBUTE,
version: MUST_USE_ATTRIBUTE,
viewBox: MUST_USE_ATTRIBUTE,
x1: MUST_USE_ATTRIBUTE,
x2: MUST_USE_ATTRIBUTE,
x: MUST_USE_ATTRIBUTE,
xlinkActuate: MUST_USE_ATTRIBUTE,
xlinkArcrole: MUST_USE_ATTRIBUTE,
xlinkHref: MUST_USE_ATTRIBUTE,
xlinkRole: MUST_USE_ATTRIBUTE,
xlinkShow: MUST_USE_ATTRIBUTE,
xlinkTitle: MUST_USE_ATTRIBUTE,
xlinkType: MUST_USE_ATTRIBUTE,
xmlBase: MUST_USE_ATTRIBUTE,
xmlLang: MUST_USE_ATTRIBUTE,
xmlSpace: MUST_USE_ATTRIBUTE,
y1: MUST_USE_ATTRIBUTE,
y2: MUST_USE_ATTRIBUTE,
y: MUST_USE_ATTRIBUTE,
},
DOMAttributeNamespaces: {
xlinkActuate: NS.xlink,
@@ -60,9 +90,15 @@ var SVGDOMPropertyConfig = {
fillOpacity: 'fill-opacity',
fontFamily: 'font-family',
fontSize: 'font-size',
gradientTransform: 'gradientTransform',
gradientUnits: 'gradientUnits',
markerEnd: 'marker-end',
markerMid: 'marker-mid',
markerStart: 'marker-start',
patternContentUnits: 'patternContentUnits',
patternUnits: 'patternUnits',
preserveAspectRatio: 'preserveAspectRatio',
spreadMethod: 'spreadMethod',
stopColor: 'stop-color',
stopOpacity: 'stop-opacity',
strokeDasharray: 'stroke-dasharray',
@@ -70,6 +106,7 @@ var SVGDOMPropertyConfig = {
strokeOpacity: 'stroke-opacity',
strokeWidth: 'stroke-width',
textAnchor: 'text-anchor',
viewBox: 'viewBox',
xlinkActuate: 'xlink:actuate',
xlinkArcrole: 'xlink:arcrole',
xlinkHref: 'xlink:href',
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
-166
View File
@@ -259,79 +259,6 @@ describe('ReactDOMComponent', function() {
expect(container.firstChild.hasAttribute('height')).toBe(false);
});
it('should remove known SVG camel case attributes', function() {
var container = document.createElement('div');
ReactDOM.render(<svg viewBox="0 0 100 100" />, container);
expect(container.firstChild.hasAttribute('viewBox')).toBe(true);
ReactDOM.render(<svg />, container);
expect(container.firstChild.hasAttribute('viewBox')).toBe(false);
});
it('should remove known SVG hyphenated attributes', function() {
var container = document.createElement('div');
ReactDOM.render(<svg clip-path="0 0 100 100" />, container);
expect(container.firstChild.hasAttribute('clip-path')).toBe(true);
ReactDOM.render(<svg />, container);
expect(container.firstChild.hasAttribute('clip-path')).toBe(false);
});
it('should remove arbitrary SVG hyphenated attributes', function() {
var container = document.createElement('div');
ReactDOM.render(<svg the-word="the-bird" />, container);
expect(container.firstChild.hasAttribute('the-word')).toBe(true);
ReactDOM.render(<svg />, container);
expect(container.firstChild.hasAttribute('the-word')).toBe(false);
});
it('should remove arbitrary SVG camel case attributes', function() {
var container = document.createElement('div');
ReactDOM.render(<svg theWord="theBird" />, container);
if (ReactDOMFeatureFlags.useCreateElement) {
// jsdom's svg parsing makes attributes lowercase, so only assert this
// in createElement mode...
expect(container.firstChild.hasAttribute('theWord')).toBe(true);
}
ReactDOM.render(<svg />, container);
expect(container.firstChild.hasAttribute('theWord')).toBe(false);
});
it('should remove SVG attributes that should have been hyphenated', function() {
spyOn(console, 'error');
var container = document.createElement('div');
ReactDOM.render(<svg clipPath="0 0 100 100" />, container);
expect(console.error.argsForCall.length).toBe(1);
expect(console.error.argsForCall[0][0]).toContain('clipPath');
expect(console.error.argsForCall[0][0]).toContain('clip-path');
expect(container.firstChild.hasAttribute('clip-path')).toBe(true);
ReactDOM.render(<svg />, container);
expect(container.firstChild.hasAttribute('clip-path')).toBe(false);
});
it('should remove namespaced SVG attributes', function() {
var container = document.createElement('div');
ReactDOM.render(
<svg>
<image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
</svg>,
container
);
expect(container.firstChild.firstChild.hasAttributeNS(
'http://www.w3.org/1999/xlink',
'href'
)).toBe(true);
ReactDOM.render(<svg><image /></svg>, container);
expect(container.firstChild.firstChild.hasAttributeNS(
'http://www.w3.org/1999/xlink',
'href'
)).toBe(false);
});
it('should remove properties', function() {
var container = document.createElement('div');
ReactDOM.render(<div className="monkey" />, container);
@@ -403,99 +330,6 @@ describe('ReactDOMComponent', function() {
expect(container.childNodes[0].getAttribute('myattr')).toBe('myval');
});
it('should update known hyphenated attributes for SVG tags', function() {
var container = document.createElement('div');
var beforeUpdate = <svg />;
ReactDOM.render(beforeUpdate, container);
var afterUpdate = <svg clip-path="url(#starlet)" />;
ReactDOM.render(afterUpdate, container);
expect(container.childNodes[0].getAttribute('clip-path')).toBe(
'url(#starlet)'
);
});
it('should update camel case attributes for SVG tags', function() {
var container = document.createElement('div');
var beforeUpdate = <svg />;
ReactDOM.render(beforeUpdate, container);
var afterUpdate = <svg viewBox="0 0 100 100" />;
ReactDOM.render(afterUpdate, container);
expect(container.childNodes[0].getAttribute('viewBox')).toBe(
'0 0 100 100'
);
});
it('should warn camel casing hyphenated attributes for SVG tags', function() {
spyOn(console, 'error');
var container = document.createElement('div');
var beforeUpdate = <svg />;
ReactDOM.render(beforeUpdate, container);
var afterUpdate = <svg clipPath="url(#starlet)" />;
ReactDOM.render(afterUpdate, container);
expect(container.childNodes[0].getAttribute('clip-path')).toBe(
'url(#starlet)'
);
expect(console.error.argsForCall.length).toBe(1);
expect(console.error.argsForCall[0][0]).toContain('clipPath');
expect(console.error.argsForCall[0][0]).toContain('clip-path');
});
it('should update arbitrary hyphenated attributes for SVG tags', function() {
var container = document.createElement('div');
var beforeUpdate = <svg />;
ReactDOM.render(beforeUpdate, container);
var afterUpdate = <svg the-word="the-bird" />;
ReactDOM.render(afterUpdate, container);
expect(container.childNodes[0].getAttribute('the-word')).toBe('the-bird');
});
it('should update arbitrary camel case attributes for SVG tags', function() {
var container = document.createElement('div');
var beforeUpdate = <svg />;
ReactDOM.render(beforeUpdate, container);
var afterUpdate = <svg theWord="theBird" />;
ReactDOM.render(afterUpdate, container);
expect(container.childNodes[0].getAttribute('theWord')).toBe('theBird');
});
it('should update namespaced SVG attributes', function() {
var container = document.createElement('div');
var beforeUpdate = (
<svg>
<image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
</svg>
);
ReactDOM.render(beforeUpdate, container);
var afterUpdate = (
<svg>
<image xlinkHref="http://i.imgur.com/JvqCM2p.png" />
</svg>
);
ReactDOM.render(afterUpdate, container);
expect(container.firstChild.firstChild.getAttributeNS(
'http://www.w3.org/1999/xlink',
'href'
)).toBe('http://i.imgur.com/JvqCM2p.png');
});
it('should clear all the styles when removing `style`', function() {
var styles = {display: 'none', color: 'red'};
var container = document.createElement('div');
src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js
-61
View File
@@ -1,61 +0,0 @@
/**
* Copyright 2013-present, 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
+1 -1
View File
@@ -82,6 +82,6 @@ var ReactDOMUnknownPropertyDevtool = {
onDeleteValueForProperty(node, name) {
warnUnknownProperty(name);
},
};
}
module.exports = ReactDOMUnknownPropertyDevtool;