From 0229f48815f5169f052d8935dc9fa8b3104c2d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 10:50:13 -0800 Subject: [PATCH 01/10] Revert "Merge pull request #5736 from gaearon/document-svg-passthrough" This reverts commit 713401f2eb4b892f872ec61b15fdb597c4eeaae6, reversing changes made to 53dabe748c6817cbb7b43f975e24b61331011077. --- docs/docs/ref-04-tags-and-attributes.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md index 8481c75b1c4..6cb7207239a 100644 --- a/docs/docs/ref-04-tags-and-attributes.md +++ b/docs/docs/ref-04-tags-and-attributes.md @@ -86,6 +86,13 @@ There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here ### SVG Attributes -Any attributes passed to SVG tags are passed through without changes. - -React used to support special camelCase aliases for certain SVG attributes, such as `clipPath`. If you use them now you'll see a deprecation warning. These aliases will be removed in the next version in favor of their real names from the SVG specification, such as `clip-path`. Attributes that have a camelCase name in the spec, such as `gradientTransform`, will keep their names. +``` +clipPath cx cy d dx dy fill fillOpacity fontFamily +fontSize fx fy gradientTransform gradientUnits markerEnd +markerMid markerStart offset opacity patternContentUnits +patternUnits points preserveAspectRatio r rx ry spreadMethod +stopColor stopOpacity stroke strokeDasharray strokeLinecap +strokeOpacity strokeWidth textAnchor transform version +viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole +xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y +``` From e8005bf01a28b864d9468b0cbd68dcd8f03562e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 10:50:29 -0800 Subject: [PATCH 02/10] Revert "Merge pull request #6164 from gaearon/fix-svg" This reverts commit 4bbd8d25e19e42533ba69c8fc995bb0cd74427bf, reversing changes made to 56c423afd66f7f1363dee87d25795418d5e74a30. --- src/renderers/dom/shared/ReactDOMComponent.js | 37 +++----- .../__tests__/ReactDOMComponent-test.js | 94 +------------------ 2 files changed, 20 insertions(+), 111 deletions(-) diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index 244d80b94fa..f7bf1bb122a 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -53,13 +53,9 @@ var registrationNameModules = EventPluginRegistry.registrationNameModules; // For quickly matching children type, to test if can be treated as content. var CONTENT_TYPES = {'string': true, 'number': true}; +var CHILDREN = keyOf({children: null}); var STYLE = keyOf({style: null}); var HTML = keyOf({__html: null}); -var RESERVED_PROPS = { - children: null, - dangerouslySetInnerHTML: null, - suppressContentEditableWarning: null, -}; function getDeclarationErrorAddendum(internalInstance) { if (internalInstance) { @@ -639,13 +635,11 @@ ReactDOMComponent.Mixin = { } var markup = null; if (this._tag != null && isCustomComponent(this._tag, props)) { - if (!RESERVED_PROPS.hasOwnProperty(propKey)) { + if (propKey !== CHILDREN) { markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue); } } else if (this._namespaceURI === DOMNamespaces.svg) { - if (!RESERVED_PROPS.hasOwnProperty(propKey)) { - markup = DOMPropertyOperations.createMarkupForSVGAttribute(propKey, propValue); - } + markup = DOMPropertyOperations.createMarkupForSVGAttribute(propKey, propValue); } else { markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue); } @@ -920,21 +914,20 @@ ReactDOMComponent.Mixin = { deleteListener(this, propKey); } } else if (isCustomComponent(this._tag, nextProps)) { - if (!RESERVED_PROPS.hasOwnProperty(propKey)) { - DOMPropertyOperations.setValueForAttribute( - getNode(this), - propKey, - nextProp - ); + if (propKey === CHILDREN) { + nextProp = null; } + DOMPropertyOperations.setValueForAttribute( + getNode(this), + propKey, + nextProp + ); } else if (this._namespaceURI === DOMNamespaces.svg) { - if (!RESERVED_PROPS.hasOwnProperty(propKey)) { - DOMPropertyOperations.setValueForSVGAttribute( - getNode(this), - propKey, - nextProp - ); - } + DOMPropertyOperations.setValueForSVGAttribute( + getNode(this), + propKey, + nextProp + ); } else if ( DOMProperty.properties[propKey] || DOMProperty.isCustomAttribute(propKey)) { diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 1e07d5a4c20..53e68defe51 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -238,100 +238,16 @@ describe('ReactDOMComponent', function() { expect(stubStyle.display).toEqual(''); }); - it('should skip reserved props on web components', function() { + it('should skip child object attribute on web components', function() { var container = document.createElement('div'); - ReactDOM.render( - , - container - ); + // Test initial render to null + ReactDOM.render(, container); expect(container.firstChild.hasAttribute('children')).toBe(false); - expect( - container.firstChild.hasAttribute('suppressContentEditableWarning') - ).toBe(false); - ReactDOM.render( - , - container - ); + // Test updates to null + ReactDOM.render(, container); expect(container.firstChild.hasAttribute('children')).toBe(false); - expect( - container.firstChild.hasAttribute('suppressContentEditableWarning') - ).toBe(false); - }); - - it('should skip dangerouslySetInnerHTML on web components', function() { - var container = document.createElement('div'); - - ReactDOM.render( - , - container - ); - expect( - container.firstChild.hasAttribute('dangerouslySetInnerHTML') - ).toBe(false); - - ReactDOM.render( - , - container - ); - expect( - container.firstChild.hasAttribute('dangerouslySetInnerHTML') - ).toBe(false); - }); - - it('should skip reserved props on SVG components', function() { - var container = document.createElement('div'); - - ReactDOM.render( - , - container - ); - expect(container.firstChild.hasAttribute('children')).toBe(false); - expect( - container.firstChild.hasAttribute('suppressContentEditableWarning') - ).toBe(false); - - ReactDOM.render( - , - container - ); - expect(container.firstChild.hasAttribute('children')).toBe(false); - expect( - container.firstChild.hasAttribute('suppressContentEditableWarning') - ).toBe(false); - }); - - it('should skip dangerouslySetInnerHTML on SVG components', function() { - var container = document.createElement('div'); - - ReactDOM.render( - , - container - ); - expect( - container.firstChild.hasAttribute('dangerouslySetInnerHTML') - ).toBe(false); - - ReactDOM.render( - , - container - ); - expect( - container.firstChild.hasAttribute('dangerouslySetInnerHTML') - ).toBe(false); }); it('should remove attributes', function() { From 2fb74cd1acdc785aa8b2560fb892f316a992dc2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 10:50:34 -0800 Subject: [PATCH 03/10] Revert "Merge pull request #6184 from gaearon/fix-svg-warning" This reverts commit 36798f7395d9b2e1cfaed988133d11fa88afa8f1, reversing changes made to b89e7d25d5695952f7d201f516451c4dc241c023. --- .../__tests__/ReactDOMComponent-test.js | 33 ------------------- .../ReactDOMSVGDeprecatedAttributeDevtool.js | 11 +++---- 2 files changed, 4 insertions(+), 40 deletions(-) diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 53e68defe51..974e6b4a8ce 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -449,39 +449,6 @@ 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( - - - - , - 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( - - - - - , - 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 index 164340c7a70..0bfd77f8fe7 100644 --- a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js +++ b/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js @@ -25,23 +25,20 @@ if (__DEV__) { var warnedSVGAttributes = {}; var warnDeprecatedSVGAttribute = function(name) { - if (reactProps.hasOwnProperty(name) && reactProps[name]) { + if (!DOMProperty.properties.hasOwnProperty(name)) { return; } - if (!DOMProperty.properties.hasOwnProperty(name)) { + if (reactProps.hasOwnProperty(name) && reactProps[name] || + warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[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 ' + From 9f4f88b21f3477c8ffa2fb91c31c6f8a77a1b2b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 10:56:30 -0800 Subject: [PATCH 04/10] Revert "Merge pull request #5714 from gaearon/passthrough-svg-attributes" This reverts commit 53dabe748c6817cbb7b43f975e24b61331011077, reversing changes made to 82fe64a4564238f8923020f6f4ab4864d1459533. --- .../dom/client/__tests__/ReactDOMSVG-test.js | 39 ---- .../dom/shared/DOMPropertyOperations.js | 47 ----- src/renderers/dom/shared/ReactDOMComponent.js | 13 -- src/renderers/dom/shared/ReactDOMDebugTool.js | 9 - .../dom/shared/SVGDOMPropertyConfig.js | 85 ++++++--- .../__tests__/ReactDOMComponent-test.js | 166 ------------------ .../ReactDOMSVGDeprecatedAttributeDevtool.js | 61 ------- .../ReactDOMUnknownPropertyDevtool.js | 2 +- 8 files changed, 62 insertions(+), 360 deletions(-) delete mode 100644 src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js diff --git a/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js b/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js index ed24ad4acae..84fb2711f42 100644 --- a/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js +++ b/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js @@ -21,45 +21,6 @@ describe('ReactDOMSVG', function() { ReactDOMServer = require('ReactDOMServer'); }); - it('creates initial markup for known hyphenated attributes', function() { - var markup = ReactDOMServer.renderToString( - - ); - expect(markup).toContain('clip-path="url(#starlet)"'); - }); - - it('creates initial markup for camel case attributes', function() { - var markup = ReactDOMServer.renderToString( - - ); - expect(markup).toContain('viewBox="0 0 100 100"'); - }); - - it('deprecates camel casing of hyphenated attributes', function() { - spyOn(console, 'error'); - var markup = ReactDOMServer.renderToString( - - ); - 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( - - ); - expect(markup).toContain('the-word="the-bird"'); - }); - - it('creates initial markup for unknown camel case attributes', function() { - var markup = ReactDOMServer.renderToString( - - ); - expect(markup).toContain('theWord="theBird"'); - }); - it('creates initial namespaced markup', function() { var markup = ReactDOMServer.renderToString( diff --git a/src/renderers/dom/shared/DOMPropertyOperations.js b/src/renderers/dom/shared/DOMPropertyOperations.js index dc0c3fb7f9e..1ce9e29b753 100644 --- a/src/renderers/dom/shared/DOMPropertyOperations.js +++ b/src/renderers/dom/shared/DOMPropertyOperations.js @@ -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', { diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index f7bf1bb122a..21a43102300 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -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)) { diff --git a/src/renderers/dom/shared/ReactDOMDebugTool.js b/src/renderers/dom/shared/ReactDOMDebugTool.js index 6933080298b..9fcc3763fad 100644 --- a/src/renderers/dom/shared/ReactDOMDebugTool.js +++ b/src/renderers/dom/shared/ReactDOMDebugTool.js @@ -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; diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index effa92f7695..88fecca249c 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -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', diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 974e6b4a8ce..279692a1997 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -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(, container); - - expect(container.firstChild.hasAttribute('viewBox')).toBe(true); - ReactDOM.render(, container); - expect(container.firstChild.hasAttribute('viewBox')).toBe(false); - }); - - it('should remove known SVG hyphenated attributes', function() { - var container = document.createElement('div'); - ReactDOM.render(, container); - - expect(container.firstChild.hasAttribute('clip-path')).toBe(true); - ReactDOM.render(, container); - expect(container.firstChild.hasAttribute('clip-path')).toBe(false); - }); - - it('should remove arbitrary SVG hyphenated attributes', function() { - var container = document.createElement('div'); - ReactDOM.render(, container); - - expect(container.firstChild.hasAttribute('the-word')).toBe(true); - ReactDOM.render(, 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(, 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(, 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(, 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(, container); - expect(container.firstChild.hasAttribute('clip-path')).toBe(false); - }); - - it('should remove namespaced SVG attributes', function() { - var container = document.createElement('div'); - ReactDOM.render( - - - , - container - ); - - expect(container.firstChild.firstChild.hasAttributeNS( - 'http://www.w3.org/1999/xlink', - 'href' - )).toBe(true); - ReactDOM.render(, 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(
, 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 = ; - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ; - 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 = ; - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ; - 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 = ; - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ; - 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 = ; - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ; - 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 = ; - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ; - 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 = ( - - - - ); - ReactDOM.render(beforeUpdate, container); - - var afterUpdate = ( - - - - ); - 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'); diff --git a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js deleted file mode 100644 index 0bfd77f8fe7..00000000000 --- a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js +++ /dev/null @@ -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; diff --git a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js index 5adc359063e..b83082dfa6d 100644 --- a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js +++ b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js @@ -82,6 +82,6 @@ var ReactDOMUnknownPropertyDevtool = { onDeleteValueForProperty(node, name) { warnUnknownProperty(name); }, -}; +} module.exports = ReactDOMUnknownPropertyDevtool; From b7e8b7f23970be7a764a3fea9bbc1a8957b13893 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 11:03:19 -0800 Subject: [PATCH 05/10] Stop specifying MUST_USE_ATTRIBUTE again (bring back null) --- .../dom/shared/SVGDOMPropertyConfig.js | 108 +++++++++--------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index 88fecca249c..c7c035c1d1f 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -18,60 +18,60 @@ var NS = { var SVGDOMPropertyConfig = { Properties: { - 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, + clipPath: null, + cx: null, + cy: null, + d: null, + dx: null, + dy: null, + fill: null, + fillOpacity: null, + fontFamily: null, + fontSize: null, + fx: null, + fy: null, + gradientTransform: null, + gradientUnits: null, + markerEnd: null, + markerMid: null, + markerStart: null, + offset: null, + opacity: null, + patternContentUnits: null, + patternUnits: null, + points: null, + preserveAspectRatio: null, + r: null, + rx: null, + ry: null, + spreadMethod: null, + stopColor: null, + stopOpacity: null, + stroke: null, + strokeDasharray: null, + strokeLinecap: null, + strokeOpacity: null, + strokeWidth: null, + textAnchor: null, + transform: null, + version: null, + viewBox: null, + x1: null, + x2: null, + x: null, + xlinkActuate: null, + xlinkArcrole: null, + xlinkHref: null, + xlinkRole: null, + xlinkShow: null, + xlinkTitle: null, + xlinkType: null, + xmlBase: null, + xmlLang: null, + xmlSpace: null, + y1: null, + y2: null, + y: null, }, DOMAttributeNamespaces: { xlinkActuate: NS.xlink, From afda226cb974975aca68096e586211a74415da9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 11:10:47 -0800 Subject: [PATCH 06/10] Scrape MDN for latest SVG --- .../dom/shared/SVGDOMPropertyConfig.js | 313 +++++++++++++++++- 1 file changed, 311 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index c7c035c1d1f..3ca1b94d9b3 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -18,47 +18,239 @@ var NS = { var SVGDOMPropertyConfig = { Properties: { + accentHeight: null, + accumulate: null, + additive: null, + alignmentBaseline: null, + allowReorder: null, + alphabetic: null, + amplitude: null, + arabicForm: null, + ascent: null, + attributeName: null, + attributeType: null, + autoReverse: null, + azimuth: null, + baseFrequency: null, + baselineShift: null, + baseProfile: null, + bbox: null, + begin: null, + bias: null, + by: null, + calcMode: null, + capHeight: null, + class: null, + clip: null, clipPath: null, + clipPathUnits: null, + clipRule: null, + color: null, + colorInterpolation: null, + colorInterpolationFilters: null, + colorProfile: null, + colorRendering: null, + contentScriptType: null, + contentStyleType: null, + cursor: null, cx: null, cy: null, d: null, + decelerate: null, + descent: null, + diffuseConstant: null, + direction: null, + display: null, + divisor: null, + dominantBaseline: null, + dur: null, dx: null, dy: null, + edgeMode: null, + elevation: null, + enableBackground: null, + end: null, + exponent: null, + externalResourcesRequired: null, fill: null, fillOpacity: null, + fillRule: null, + filter: null, + filterRes: null, + filterUnits: null, + floodColor: null, + floodOpacity: null, fontFamily: null, fontSize: null, + fontSizeAdjust: null, + fontStretch: null, + fontStyle: null, + fontVariant: null, + fontWeight: null, + format: null, + from: null, fx: null, fy: null, + g1: null, + g2: null, + glyphName: null, + glyphOrientationHorizontal: null, + glyphOrientationVertical: null, + glyphRef: null, gradientTransform: null, gradientUnits: null, + hanging: null, + height: null, + horizAdvX: null, + horizOriginX: null, + id: null, + ideographic: null, + imageRendering: null, + in: null, + in2: null, + intercept: null, + k: null, + k1: null, + k2: null, + k3: null, + k4: null, + kernelMatrix: null, + kernelUnitLength: null, + kerning: null, + keyPoints: null, + keySplines: null, + keyTimes: null, + lang: null, + lengthAdjust: null, + letterSpacing: null, + lightingColor: null, + limitingConeAngle: null, + local: null, markerEnd: null, + markerHeight: null, markerMid: null, markerStart: null, + markerUnits: null, + markerWidth: null, + mask: null, + maskContentUnits: null, + maskUnits: null, + mathematical: null, + max: null, + media: null, + method: null, + min: null, + mode: null, + name: null, + numOctaves: null, offset: null, opacity: null, + operator: null, + order: null, + orient: null, + orientation: null, + origin: null, + overflow: null, + overlinePosition: null, + overlineThickness: null, + paintOrder: null, + panose1: null, + pathLength: null, patternContentUnits: null, + patternTransform: null, patternUnits: null, + pointerEvents: null, points: null, + pointsAtX: null, + pointsAtY: null, + pointsAtZ: null, + preserveAlpha: null, preserveAspectRatio: null, + primitiveUnits: null, r: null, + radius: null, + refX: null, + refY: null, + renderingIntent: null, + repeatCount: null, + repeatDur: null, + requiredExtensions: null, + requiredFeatures: null, + restart: null, + result: null, + rotate: null, rx: null, ry: null, + scale: null, + seed: null, + shapeRendering: null, + slope: null, + spacing: null, + specularConstant: null, + specularExponent: null, + speed: null, spreadMethod: null, + startOffset: null, + stdDeviation: null, + stemh: null, + stemv: null, + stitchTiles: null, stopColor: null, stopOpacity: null, + strikethroughPosition: null, + strikethroughThickness: null, + string: null, stroke: null, strokeDasharray: null, + strokeDashoffset: null, strokeLinecap: null, + strokeLinejoin: null, + strokeMiterlimit: null, strokeOpacity: null, strokeWidth: null, + style: null, + surfaceScale: null, + systemLanguage: null, + tableValues: null, + target: null, + targetX: null, + targetY: null, textAnchor: null, + textDecoration: null, + textLength: null, + textRendering: null, + to: null, transform: null, + type: null, + u1: null, + u2: null, + underlinePosition: null, + underlineThickness: null, + unicode: null, + unicodeBidi: null, + unicodeRange: null, + unitsPerEm: null, + vAlphabetic: null, + values: null, version: null, + vertAdvY: null, + vertOriginX: null, + vertOriginY: null, + vHanging: null, + vIdeographic: null, viewBox: null, + viewTarget: null, + visibility: null, + vMathematical: null, + width: null, + widths: null, + wordSpacing: null, + writingMode: null, + x: null, x1: null, x2: null, - x: null, + xChannelSelector: null, + xHeight: null, xlinkActuate: null, xlinkArcrole: null, xlinkHref: null, @@ -69,9 +261,12 @@ var SVGDOMPropertyConfig = { xmlBase: null, xmlLang: null, xmlSpace: null, + y: null, y1: null, y2: null, - y: null, + yChannelSelector: null, + z: null, + zoomAndPan: null, }, DOMAttributeNamespaces: { xlinkActuate: NS.xlink, @@ -86,27 +281,139 @@ var SVGDOMPropertyConfig = { xmlSpace: NS.xml, }, DOMAttributeNames: { + accentHeight: 'accent-height', + alignmentBaseline: 'alignment-baseline', + allowReorder: 'allowReorder', + arabicForm: 'arabic-form', + attributeName: 'attributeName', + attributeType: 'attributeType', + autoReverse: 'autoReverse', + baseFrequency: 'baseFrequency', + baselineShift: 'baseline-shift', + baseProfile: 'baseProfile', + calcMode: 'calcMode', + capHeight: 'cap-height', clipPath: 'clip-path', + clipPathUnits: 'clipPathUnits', + clipRule: 'clip-rule', + colorInterpolation: 'color-interpolation', + colorInterpolationFilters: 'color-interpolation-filters', + colorProfile: 'color-profile', + colorRendering: 'color-rendering', + contentScriptType: 'contentScriptType', + contentStyleType: 'contentStyleType', + diffuseConstant: 'diffuseConstant', + dominantBaseline: 'dominant-baseline', + edgeMode: 'edgeMode', + enableBackground: 'enable-background', + externalResourcesRequired: 'externalResourcesRequired', fillOpacity: 'fill-opacity', + fillRule: 'fill-rule', + filterRes: 'filterRes', + filterUnits: 'filterUnits', + floodColor: 'flood-color', + floodOpacity: 'flood-opacity', fontFamily: 'font-family', fontSize: 'font-size', + fontSizeAdjust: 'font-size-adjust', + fontStretch: 'font-stretch', + fontStyle: 'font-style', + fontVariant: 'font-variant', + fontWeight: 'font-weight', + glyphName: 'glyph-name', + glyphOrientationHorizontal: 'glyph-orientation-horizontal', + glyphOrientationVertical: 'glyph-orientation-vertical', + glyphRef: 'glyphRef', gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', + horizAdvX: 'horiz-adv-x', + horizOriginX: 'horiz-origin-x', + imageRendering: 'image-rendering', + kernelMatrix: 'kernelMatrix', + kernelUnitLength: 'kernelUnitLength', + keyPoints: 'keyPoints', + keySplines: 'keySplines', + keyTimes: 'keyTimes', + lengthAdjust: 'lengthAdjust', + letterSpacing: 'letter-spacing', + lightingColor: 'lighting-color', + limitingConeAngle: 'limitingConeAngle', markerEnd: 'marker-end', + markerHeight: 'markerHeight', markerMid: 'marker-mid', markerStart: 'marker-start', + markerUnits: 'markerUnits', + markerWidth: 'markerWidth', + maskContentUnits: 'maskContentUnits', + maskUnits: 'maskUnits', + numOctaves: 'numOctaves', + overlinePosition: 'overline-position', + overlineThickness: 'overline-thickness', + paintOrder: 'paint-order', + panose1: 'panose-1', + pathLength: 'pathLength', patternContentUnits: 'patternContentUnits', + patternTransform: 'patternTransform', patternUnits: 'patternUnits', + pointerEvents: 'pointer-events', + pointsAtX: 'pointsAtX', + pointsAtY: 'pointsAtY', + pointsAtZ: 'pointsAtZ', + preserveAlpha: 'preserveAlpha', preserveAspectRatio: 'preserveAspectRatio', + primitiveUnits: 'primitiveUnits', + refX: 'refX', + refY: 'refY', + renderingIntent: 'rendering-intent', + repeatCount: 'repeatCount', + repeatDur: 'repeatDur', + requiredExtensions: 'requiredExtensions', + requiredFeatures: 'requiredFeatures', + shapeRendering: 'shape-rendering', + specularConstant: 'specularConstant', + specularExponent: 'specularExponent', spreadMethod: 'spreadMethod', + startOffset: 'startOffset', + stdDeviation: 'stdDeviation', + stitchTiles: 'stitchTiles', stopColor: 'stop-color', stopOpacity: 'stop-opacity', + strikethroughPosition: 'strikethrough-position', + strikethroughThickness: 'strikethrough-thickness', strokeDasharray: 'stroke-dasharray', + strokeDashoffset: 'stroke-dashoffset', strokeLinecap: 'stroke-linecap', + strokeLinejoin: 'stroke-linejoin', + strokeMiterlimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity', strokeWidth: 'stroke-width', + surfaceScale: 'surfaceScale', + systemLanguage: 'systemLanguage', + tableValues: 'tableValues', + targetX: 'targetX', + targetY: 'targetY', textAnchor: 'text-anchor', + textDecoration: 'text-decoration', + textLength: 'textLength', + textRendering: 'text-rendering', + underlinePosition: 'underline-position', + underlineThickness: 'underline-thickness', + unicodeBidi: 'unicode-bidi', + unicodeRange: 'unicode-range', + unitsPerEm: 'units-per-em', + vAlphabetic: 'v-alphabetic', + vertAdvY: 'vert-adv-y', + vertOriginX: 'vert-origin-x', + vertOriginY: 'vert-origin-y', + vHanging: 'v-hanging', + vIdeographic: 'v-ideographic', viewBox: 'viewBox', + viewTarget: 'viewTarget', + vMathematical: 'v-mathematical', + wordSpacing: 'word-spacing', + writingMode: 'writing-mode', + xChannelSelector: 'xChannelSelector', + xHeight: 'x-height', xlinkActuate: 'xlink:actuate', xlinkArcrole: 'xlink:arcrole', xlinkHref: 'xlink:href', @@ -117,6 +424,8 @@ var SVGDOMPropertyConfig = { xmlBase: 'xml:base', xmlLang: 'xml:lang', xmlSpace: 'xml:space', + yChannelSelector: 'yChannelSelector', + zoomAndPan: 'zoomAndPan', }, }; From 79a62b09eac4de5b19aa9e9858a23be7aecec310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 13:41:37 -0800 Subject: [PATCH 07/10] Consolidate SVG config to avoid some duplication --- .../dom/shared/SVGDOMPropertyConfig.js | 662 +++++++----------- 1 file changed, 264 insertions(+), 398 deletions(-) diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index 3ca1b94d9b3..73908bc694d 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -16,258 +16,263 @@ var NS = { xml: 'http://www.w3.org/XML/1998/namespace', }; +// We use attributes for everything SVG so let's avoid some duplication and run +// code instead. + +var ATTRS = { + accentHeight: 'accent-height', + accumulate: null, + additive: null, + alignmentBaseline: 'alignment-baseline', + allowReorder: 'allowReorder', + alphabetic: null, + amplitude: null, + arabicForm: 'arabic-form', + ascent: null, + attributeName: 'attributeName', + attributeType: 'attributeType', + autoReverse: 'autoReverse', + azimuth: null, + baseFrequency: 'baseFrequency', + baseProfile: 'baseProfile', + baselineShift: 'baseline-shift', + bbox: null, + begin: null, + bias: null, + by: null, + calcMode: 'calcMode', + capHeight: 'cap-height', + class: null, + clip: null, + clipPath: 'clip-path', + clipRule: 'clip-rule', + clipPathUnits: 'clipPathUnits', + color: null, + colorInterpolation: 'color-interpolation', + colorInterpolationFilters: 'color-interpolation-filters', + colorProfile: 'color-profile', + colorRendering: 'color-rendering', + contentScriptType: 'contentScriptType', + contentStyleType: 'contentStyleType', + cursor: null, + cx: null, + cy: null, + d: null, + decelerate: null, + descent: null, + diffuseConstant: 'diffuseConstant', + direction: null, + display: null, + divisor: null, + dominantBaseline: 'dominant-baseline', + dur: null, + dx: null, + dy: null, + edgeMode: 'edgeMode', + elevation: null, + enableBackground: 'enable-background', + end: null, + exponent: null, + externalResourcesRequired: 'externalResourcesRequired', + fill: null, + fillOpacity: 'fill-opacity', + fillRule: 'fill-rule', + filter: null, + filterRes: 'filterRes', + filterUnits: 'filterUnits', + floodColor: 'flood-color', + floodOpacity: 'flood-opacity', + fontFamily: 'font-family', + fontSize: 'font-size', + fontSizeAdjust: 'font-size-adjust', + fontStretch: 'font-stretch', + fontStyle: 'font-style', + fontVariant: 'font-variant', + fontWeight: 'font-weight', + format: null, + from: null, + fx: null, + fy: null, + g1: null, + g2: null, + glyphName: 'glyph-name', + glyphOrientationHorizontal: 'glyph-orientation-horizontal', + glyphOrientationVertical: 'glyph-orientation-vertical', + glyphRef: 'glyphRef', + gradientTransform: 'gradientTransform', + gradientUnits: 'gradientUnits', + hanging: null, + height: null, + horizAdvX: 'horiz-adv-x', + horizOriginX: 'horiz-origin-x', + id: null, + ideographic: null, + imageRendering: 'image-rendering', + in: null, + in2: null, + intercept: null, + k: null, + k1: null, + k2: null, + k3: null, + k4: null, + kernelMatrix: 'kernelMatrix', + kernelUnitLength: 'kernelUnitLength', + kerning: null, + keyPoints: 'keyPoints', + keySplines: 'keySplines', + keyTimes: 'keyTimes', + lang: null, + lengthAdjust: 'lengthAdjust', + letterSpacing: 'letter-spacing', + lightingColor: 'lighting-color', + limitingConeAngle: 'limitingConeAngle', + local: null, + markerEnd: 'marker-end', + markerMid: 'marker-mid', + markerStart: 'marker-start', + markerHeight: 'markerHeight', + markerUnits: 'markerUnits', + markerWidth: 'markerWidth', + mask: null, + maskContentUnits: 'maskContentUnits', + maskUnits: 'maskUnits', + mathematical: null, + max: null, + media: null, + method: null, + min: null, + mode: null, + name: null, + numOctaves: 'numOctaves', + offset: null, + opacity: null, + operator: null, + order: null, + orient: null, + orientation: null, + origin: null, + overflow: null, + overlinePosition: 'overline-position', + overlineThickness: 'overline-thickness', + paintOrder: 'paint-order', + panose1: 'panose-1', + pathLength: 'pathLength', + patternContentUnits: 'patternContentUnits', + patternTransform: 'patternTransform', + patternUnits: 'patternUnits', + pointerEvents: 'pointer-events', + points: null, + pointsAtX: 'pointsAtX', + pointsAtY: 'pointsAtY', + pointsAtZ: 'pointsAtZ', + preserveAlpha: 'preserveAlpha', + preserveAspectRatio: 'preserveAspectRatio', + primitiveUnits: 'primitiveUnits', + r: null, + radius: null, + refX: 'refX', + refY: 'refY', + renderingIntent: 'rendering-intent', + repeatCount: 'repeatCount', + repeatDur: 'repeatDur', + requiredExtensions: 'requiredExtensions', + requiredFeatures: 'requiredFeatures', + restart: null, + result: null, + rotate: null, + rx: null, + ry: null, + scale: null, + seed: null, + shapeRendering: 'shape-rendering', + slope: null, + spacing: null, + specularConstant: 'specularConstant', + specularExponent: 'specularExponent', + speed: null, + spreadMethod: 'spreadMethod', + startOffset: 'startOffset', + stdDeviation: 'stdDeviation', + stemh: null, + stemv: null, + stitchTiles: 'stitchTiles', + stopColor: 'stop-color', + stopOpacity: 'stop-opacity', + strikethroughPosition: 'strikethrough-position', + strikethroughThickness: 'strikethrough-thickness', + string: null, + stroke: null, + strokeDasharray: 'stroke-dasharray', + strokeDashoffset: 'stroke-dashoffset', + strokeLinecap: 'stroke-linecap', + strokeLinejoin: 'stroke-linejoin', + strokeMiterlimit: 'stroke-miterlimit', + strokeOpacity: 'stroke-opacity', + strokeWidth: 'stroke-width', + style: null, + surfaceScale: 'surfaceScale', + systemLanguage: 'systemLanguage', + tableValues: 'tableValues', + target: null, + targetX: 'targetX', + targetY: 'targetY', + textAnchor: 'text-anchor', + textDecoration: 'text-decoration', + textRendering: 'text-rendering', + textLength: 'textLength', + to: null, + transform: null, + type: null, + u1: null, + u2: null, + underlinePosition: 'underline-position', + underlineThickness: 'underline-thickness', + unicode: null, + unicodeBidi: 'unicode-bidi', + unicodeRange: 'unicode-range', + unitsPerEm: 'units-per-em', + vAlphabetic: 'v-alphabetic', + vHanging: 'v-hanging', + vIdeographic: 'v-ideographic', + vMathematical: 'v-mathematical', + values: null, + version: null, + vertAdvY: 'vert-adv-y', + vertOriginX: 'vert-origin-x', + vertOriginY: 'vert-origin-y', + viewBox: 'viewBox', + viewTarget: 'viewTarget', + visibility: null, + width: null, + widths: null, + wordSpacing: 'word-spacing', + writingMode: 'writing-mode', + x: null, + xHeight: 'x-height', + x1: null, + x2: null, + xChannelSelector: 'xChannelSelector', + xlinkActuate: 'xlink:actuate', + xlinkArcrole: 'xlink:arcrole', + xlinkHref: 'xlink:href', + xlinkRole: 'xlink:role', + xlinkShow: 'xlink:show', + xlinkTitle: 'xlink:title', + xlinkType: 'xlink:type', + xmlBase: 'xml:base', + xmlLang: 'xml:lang', + xmlSpace: 'xml:space', + y: null, + y1: null, + y2: null, + yChannelSelector: 'yChannelSelector', + z: null, + zoomAndPan: 'zoomAndPan', +}; + var SVGDOMPropertyConfig = { - Properties: { - accentHeight: null, - accumulate: null, - additive: null, - alignmentBaseline: null, - allowReorder: null, - alphabetic: null, - amplitude: null, - arabicForm: null, - ascent: null, - attributeName: null, - attributeType: null, - autoReverse: null, - azimuth: null, - baseFrequency: null, - baselineShift: null, - baseProfile: null, - bbox: null, - begin: null, - bias: null, - by: null, - calcMode: null, - capHeight: null, - class: null, - clip: null, - clipPath: null, - clipPathUnits: null, - clipRule: null, - color: null, - colorInterpolation: null, - colorInterpolationFilters: null, - colorProfile: null, - colorRendering: null, - contentScriptType: null, - contentStyleType: null, - cursor: null, - cx: null, - cy: null, - d: null, - decelerate: null, - descent: null, - diffuseConstant: null, - direction: null, - display: null, - divisor: null, - dominantBaseline: null, - dur: null, - dx: null, - dy: null, - edgeMode: null, - elevation: null, - enableBackground: null, - end: null, - exponent: null, - externalResourcesRequired: null, - fill: null, - fillOpacity: null, - fillRule: null, - filter: null, - filterRes: null, - filterUnits: null, - floodColor: null, - floodOpacity: null, - fontFamily: null, - fontSize: null, - fontSizeAdjust: null, - fontStretch: null, - fontStyle: null, - fontVariant: null, - fontWeight: null, - format: null, - from: null, - fx: null, - fy: null, - g1: null, - g2: null, - glyphName: null, - glyphOrientationHorizontal: null, - glyphOrientationVertical: null, - glyphRef: null, - gradientTransform: null, - gradientUnits: null, - hanging: null, - height: null, - horizAdvX: null, - horizOriginX: null, - id: null, - ideographic: null, - imageRendering: null, - in: null, - in2: null, - intercept: null, - k: null, - k1: null, - k2: null, - k3: null, - k4: null, - kernelMatrix: null, - kernelUnitLength: null, - kerning: null, - keyPoints: null, - keySplines: null, - keyTimes: null, - lang: null, - lengthAdjust: null, - letterSpacing: null, - lightingColor: null, - limitingConeAngle: null, - local: null, - markerEnd: null, - markerHeight: null, - markerMid: null, - markerStart: null, - markerUnits: null, - markerWidth: null, - mask: null, - maskContentUnits: null, - maskUnits: null, - mathematical: null, - max: null, - media: null, - method: null, - min: null, - mode: null, - name: null, - numOctaves: null, - offset: null, - opacity: null, - operator: null, - order: null, - orient: null, - orientation: null, - origin: null, - overflow: null, - overlinePosition: null, - overlineThickness: null, - paintOrder: null, - panose1: null, - pathLength: null, - patternContentUnits: null, - patternTransform: null, - patternUnits: null, - pointerEvents: null, - points: null, - pointsAtX: null, - pointsAtY: null, - pointsAtZ: null, - preserveAlpha: null, - preserveAspectRatio: null, - primitiveUnits: null, - r: null, - radius: null, - refX: null, - refY: null, - renderingIntent: null, - repeatCount: null, - repeatDur: null, - requiredExtensions: null, - requiredFeatures: null, - restart: null, - result: null, - rotate: null, - rx: null, - ry: null, - scale: null, - seed: null, - shapeRendering: null, - slope: null, - spacing: null, - specularConstant: null, - specularExponent: null, - speed: null, - spreadMethod: null, - startOffset: null, - stdDeviation: null, - stemh: null, - stemv: null, - stitchTiles: null, - stopColor: null, - stopOpacity: null, - strikethroughPosition: null, - strikethroughThickness: null, - string: null, - stroke: null, - strokeDasharray: null, - strokeDashoffset: null, - strokeLinecap: null, - strokeLinejoin: null, - strokeMiterlimit: null, - strokeOpacity: null, - strokeWidth: null, - style: null, - surfaceScale: null, - systemLanguage: null, - tableValues: null, - target: null, - targetX: null, - targetY: null, - textAnchor: null, - textDecoration: null, - textLength: null, - textRendering: null, - to: null, - transform: null, - type: null, - u1: null, - u2: null, - underlinePosition: null, - underlineThickness: null, - unicode: null, - unicodeBidi: null, - unicodeRange: null, - unitsPerEm: null, - vAlphabetic: null, - values: null, - version: null, - vertAdvY: null, - vertOriginX: null, - vertOriginY: null, - vHanging: null, - vIdeographic: null, - viewBox: null, - viewTarget: null, - visibility: null, - vMathematical: null, - width: null, - widths: null, - wordSpacing: null, - writingMode: null, - x: null, - x1: null, - x2: null, - xChannelSelector: null, - xHeight: null, - xlinkActuate: null, - xlinkArcrole: null, - xlinkHref: null, - xlinkRole: null, - xlinkShow: null, - xlinkTitle: null, - xlinkType: null, - xmlBase: null, - xmlLang: null, - xmlSpace: null, - y: null, - y1: null, - y2: null, - yChannelSelector: null, - z: null, - zoomAndPan: null, - }, + Properties: {}, DOMAttributeNamespaces: { xlinkActuate: NS.xlink, xlinkArcrole: NS.xlink, @@ -280,153 +285,14 @@ var SVGDOMPropertyConfig = { xmlLang: NS.xml, xmlSpace: NS.xml, }, - DOMAttributeNames: { - accentHeight: 'accent-height', - alignmentBaseline: 'alignment-baseline', - allowReorder: 'allowReorder', - arabicForm: 'arabic-form', - attributeName: 'attributeName', - attributeType: 'attributeType', - autoReverse: 'autoReverse', - baseFrequency: 'baseFrequency', - baselineShift: 'baseline-shift', - baseProfile: 'baseProfile', - calcMode: 'calcMode', - capHeight: 'cap-height', - clipPath: 'clip-path', - clipPathUnits: 'clipPathUnits', - clipRule: 'clip-rule', - colorInterpolation: 'color-interpolation', - colorInterpolationFilters: 'color-interpolation-filters', - colorProfile: 'color-profile', - colorRendering: 'color-rendering', - contentScriptType: 'contentScriptType', - contentStyleType: 'contentStyleType', - diffuseConstant: 'diffuseConstant', - dominantBaseline: 'dominant-baseline', - edgeMode: 'edgeMode', - enableBackground: 'enable-background', - externalResourcesRequired: 'externalResourcesRequired', - fillOpacity: 'fill-opacity', - fillRule: 'fill-rule', - filterRes: 'filterRes', - filterUnits: 'filterUnits', - floodColor: 'flood-color', - floodOpacity: 'flood-opacity', - fontFamily: 'font-family', - fontSize: 'font-size', - fontSizeAdjust: 'font-size-adjust', - fontStretch: 'font-stretch', - fontStyle: 'font-style', - fontVariant: 'font-variant', - fontWeight: 'font-weight', - glyphName: 'glyph-name', - glyphOrientationHorizontal: 'glyph-orientation-horizontal', - glyphOrientationVertical: 'glyph-orientation-vertical', - glyphRef: 'glyphRef', - gradientTransform: 'gradientTransform', - gradientUnits: 'gradientUnits', - horizAdvX: 'horiz-adv-x', - horizOriginX: 'horiz-origin-x', - imageRendering: 'image-rendering', - kernelMatrix: 'kernelMatrix', - kernelUnitLength: 'kernelUnitLength', - keyPoints: 'keyPoints', - keySplines: 'keySplines', - keyTimes: 'keyTimes', - lengthAdjust: 'lengthAdjust', - letterSpacing: 'letter-spacing', - lightingColor: 'lighting-color', - limitingConeAngle: 'limitingConeAngle', - markerEnd: 'marker-end', - markerHeight: 'markerHeight', - markerMid: 'marker-mid', - markerStart: 'marker-start', - markerUnits: 'markerUnits', - markerWidth: 'markerWidth', - maskContentUnits: 'maskContentUnits', - maskUnits: 'maskUnits', - numOctaves: 'numOctaves', - overlinePosition: 'overline-position', - overlineThickness: 'overline-thickness', - paintOrder: 'paint-order', - panose1: 'panose-1', - pathLength: 'pathLength', - patternContentUnits: 'patternContentUnits', - patternTransform: 'patternTransform', - patternUnits: 'patternUnits', - pointerEvents: 'pointer-events', - pointsAtX: 'pointsAtX', - pointsAtY: 'pointsAtY', - pointsAtZ: 'pointsAtZ', - preserveAlpha: 'preserveAlpha', - preserveAspectRatio: 'preserveAspectRatio', - primitiveUnits: 'primitiveUnits', - refX: 'refX', - refY: 'refY', - renderingIntent: 'rendering-intent', - repeatCount: 'repeatCount', - repeatDur: 'repeatDur', - requiredExtensions: 'requiredExtensions', - requiredFeatures: 'requiredFeatures', - shapeRendering: 'shape-rendering', - specularConstant: 'specularConstant', - specularExponent: 'specularExponent', - spreadMethod: 'spreadMethod', - startOffset: 'startOffset', - stdDeviation: 'stdDeviation', - stitchTiles: 'stitchTiles', - stopColor: 'stop-color', - stopOpacity: 'stop-opacity', - strikethroughPosition: 'strikethrough-position', - strikethroughThickness: 'strikethrough-thickness', - strokeDasharray: 'stroke-dasharray', - strokeDashoffset: 'stroke-dashoffset', - strokeLinecap: 'stroke-linecap', - strokeLinejoin: 'stroke-linejoin', - strokeMiterlimit: 'stroke-miterlimit', - strokeOpacity: 'stroke-opacity', - strokeWidth: 'stroke-width', - surfaceScale: 'surfaceScale', - systemLanguage: 'systemLanguage', - tableValues: 'tableValues', - targetX: 'targetX', - targetY: 'targetY', - textAnchor: 'text-anchor', - textDecoration: 'text-decoration', - textLength: 'textLength', - textRendering: 'text-rendering', - underlinePosition: 'underline-position', - underlineThickness: 'underline-thickness', - unicodeBidi: 'unicode-bidi', - unicodeRange: 'unicode-range', - unitsPerEm: 'units-per-em', - vAlphabetic: 'v-alphabetic', - vertAdvY: 'vert-adv-y', - vertOriginX: 'vert-origin-x', - vertOriginY: 'vert-origin-y', - vHanging: 'v-hanging', - vIdeographic: 'v-ideographic', - viewBox: 'viewBox', - viewTarget: 'viewTarget', - vMathematical: 'v-mathematical', - wordSpacing: 'word-spacing', - writingMode: 'writing-mode', - xChannelSelector: 'xChannelSelector', - xHeight: 'x-height', - xlinkActuate: 'xlink:actuate', - xlinkArcrole: 'xlink:arcrole', - xlinkHref: 'xlink:href', - xlinkRole: 'xlink:role', - xlinkShow: 'xlink:show', - xlinkTitle: 'xlink:title', - xlinkType: 'xlink:type', - xmlBase: 'xml:base', - xmlLang: 'xml:lang', - xmlSpace: 'xml:space', - yChannelSelector: 'yChannelSelector', - zoomAndPan: 'zoomAndPan', - }, + DOMAttributeNames: {}, }; +Object.keys(ATTRS).map((key) => { + SVGDOMPropertyConfig.Properties[key] = null; + if (ATTRS[key]) { + SVGDOMPropertyConfig.DOMAttributeNames[key] = ATTRS[key]; + } +}); + module.exports = SVGDOMPropertyConfig; From 37fc21f1e899622633d6f5e3cb069f1541631874 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 9 Mar 2016 13:45:26 -0800 Subject: [PATCH 08/10] Use 0 instead of null in property config We're using this value to check bits and null is 0 in that sense anyway. This shaves off a few bytes (though as expected, gzip is virtually unchanged) --- .../dom/shared/HTMLDOMPropertyConfig.js | 222 +++++++++--------- .../dom/shared/SVGDOMPropertyConfig.js | 210 ++++++++--------- 2 files changed, 216 insertions(+), 216 deletions(-) diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js index b71aafc78a3..ce5e93cea6e 100644 --- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js +++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js @@ -30,176 +30,176 @@ var HTMLDOMPropertyConfig = { /** * Standard Properties */ - accept: null, - acceptCharset: null, - accessKey: null, - action: null, + accept: 0, + acceptCharset: 0, + accessKey: 0, + action: 0, allowFullScreen: HAS_BOOLEAN_VALUE, - allowTransparency: null, - alt: null, + allowTransparency: 0, + alt: 0, async: HAS_BOOLEAN_VALUE, - autoComplete: null, + autoComplete: 0, // autoFocus is polyfilled/normalized by AutoFocusUtils // autoFocus: HAS_BOOLEAN_VALUE, autoPlay: HAS_BOOLEAN_VALUE, capture: HAS_BOOLEAN_VALUE, - cellPadding: null, - cellSpacing: null, - charSet: null, - challenge: null, + cellPadding: 0, + cellSpacing: 0, + charSet: 0, + challenge: 0, checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - cite: null, - classID: null, - className: null, + cite: 0, + classID: 0, + className: 0, cols: HAS_POSITIVE_NUMERIC_VALUE, - colSpan: null, - content: null, - contentEditable: null, - contextMenu: null, + colSpan: 0, + content: 0, + contentEditable: 0, + contextMenu: 0, controls: HAS_BOOLEAN_VALUE, - coords: null, - crossOrigin: null, - data: null, // For `` acts as `src`. - dateTime: null, + coords: 0, + crossOrigin: 0, + data: 0, // For `` acts as `src`. + dateTime: 0, default: HAS_BOOLEAN_VALUE, defer: HAS_BOOLEAN_VALUE, - dir: null, + dir: 0, disabled: HAS_BOOLEAN_VALUE, download: HAS_OVERLOADED_BOOLEAN_VALUE, - draggable: null, - encType: null, - form: null, - formAction: null, - formEncType: null, - formMethod: null, + draggable: 0, + encType: 0, + form: 0, + formAction: 0, + formEncType: 0, + formMethod: 0, formNoValidate: HAS_BOOLEAN_VALUE, - formTarget: null, - frameBorder: null, - headers: null, - height: null, + formTarget: 0, + frameBorder: 0, + headers: 0, + height: 0, hidden: HAS_BOOLEAN_VALUE, - high: null, - href: null, - hrefLang: null, - htmlFor: null, - httpEquiv: null, - icon: null, - id: null, - inputMode: null, - integrity: null, - is: null, - keyParams: null, - keyType: null, - kind: null, - label: null, - lang: null, - list: null, + high: 0, + href: 0, + hrefLang: 0, + htmlFor: 0, + httpEquiv: 0, + icon: 0, + id: 0, + inputMode: 0, + integrity: 0, + is: 0, + keyParams: 0, + keyType: 0, + kind: 0, + label: 0, + lang: 0, + list: 0, loop: HAS_BOOLEAN_VALUE, - low: null, - manifest: null, - marginHeight: null, - marginWidth: null, - max: null, - maxLength: null, - media: null, - mediaGroup: null, - method: null, - min: null, - minLength: null, + low: 0, + manifest: 0, + marginHeight: 0, + marginWidth: 0, + max: 0, + maxLength: 0, + media: 0, + mediaGroup: 0, + method: 0, + min: 0, + minLength: 0, // Caution; `option.selected` is not updated if `select.multiple` is // disabled with `removeAttribute`. multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - name: null, - nonce: null, + name: 0, + nonce: 0, noValidate: HAS_BOOLEAN_VALUE, open: HAS_BOOLEAN_VALUE, - optimum: null, - pattern: null, - placeholder: null, - poster: null, - preload: null, - profile: null, - radioGroup: null, + optimum: 0, + pattern: 0, + placeholder: 0, + poster: 0, + preload: 0, + profile: 0, + radioGroup: 0, readOnly: HAS_BOOLEAN_VALUE, - rel: null, + rel: 0, required: HAS_BOOLEAN_VALUE, reversed: HAS_BOOLEAN_VALUE, - role: null, + role: 0, rows: HAS_POSITIVE_NUMERIC_VALUE, rowSpan: HAS_NUMERIC_VALUE, - sandbox: null, - scope: null, + sandbox: 0, + scope: 0, scoped: HAS_BOOLEAN_VALUE, - scrolling: null, + scrolling: 0, seamless: HAS_BOOLEAN_VALUE, selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - shape: null, + shape: 0, size: HAS_POSITIVE_NUMERIC_VALUE, - sizes: null, + sizes: 0, span: HAS_POSITIVE_NUMERIC_VALUE, - spellCheck: null, - src: null, - srcDoc: null, - srcLang: null, - srcSet: null, + spellCheck: 0, + src: 0, + srcDoc: 0, + srcLang: 0, + srcSet: 0, start: HAS_NUMERIC_VALUE, - step: null, - style: null, - summary: null, - tabIndex: null, - target: null, - title: null, + step: 0, + style: 0, + summary: 0, + tabIndex: 0, + target: 0, + title: 0, // Setting .type throws on non- tags - type: null, - useMap: null, + type: 0, + useMap: 0, value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS, - width: null, - wmode: null, - wrap: null, + width: 0, + wmode: 0, + wrap: 0, /** * RDFa Properties */ - about: null, - datatype: null, - inlist: null, - prefix: null, + about: 0, + datatype: 0, + inlist: 0, + prefix: 0, // property is also supported for OpenGraph in meta tags. - property: null, - resource: null, - typeof: null, - vocab: null, + property: 0, + resource: 0, + typeof: 0, + vocab: 0, /** * Non-standard Properties */ // autoCapitalize and autoCorrect are supported in Mobile Safari for // keyboard hints. - autoCapitalize: null, - autoCorrect: null, + autoCapitalize: 0, + autoCorrect: 0, // autoSave allows WebKit/Blink to persist values of input fields on page reloads - autoSave: null, + autoSave: 0, // color is for Safari mask-icon link - color: null, + color: 0, // itemProp, itemScope, itemType are for // Microdata support. See http://schema.org/docs/gs.html - itemProp: null, + itemProp: 0, itemScope: HAS_BOOLEAN_VALUE, - itemType: null, + itemType: 0, // itemID and itemRef are for Microdata support as well but // only specified in the WHATWG spec document. See // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api - itemID: null, - itemRef: null, + itemID: 0, + itemRef: 0, // results show looking glass icon and recent searches on input // search fields in WebKit/Blink - results: null, + results: 0, // IE-only attribute that specifies security restrictions on an iframe // as an alternative to the sandbox attribute on IE<10 - security: null, + security: 0, // IE-only attribute that controls focus behavior - unselectable: null, + unselectable: 0, }, DOMAttributeNames: { acceptCharset: 'accept-charset', diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index 73908bc694d..e818715035e 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -21,63 +21,63 @@ var NS = { var ATTRS = { accentHeight: 'accent-height', - accumulate: null, - additive: null, + accumulate: 0, + additive: 0, alignmentBaseline: 'alignment-baseline', allowReorder: 'allowReorder', - alphabetic: null, - amplitude: null, + alphabetic: 0, + amplitude: 0, arabicForm: 'arabic-form', - ascent: null, + ascent: 0, attributeName: 'attributeName', attributeType: 'attributeType', autoReverse: 'autoReverse', - azimuth: null, + azimuth: 0, baseFrequency: 'baseFrequency', baseProfile: 'baseProfile', baselineShift: 'baseline-shift', - bbox: null, - begin: null, - bias: null, - by: null, + bbox: 0, + begin: 0, + bias: 0, + by: 0, calcMode: 'calcMode', capHeight: 'cap-height', - class: null, - clip: null, + class: 0, + clip: 0, clipPath: 'clip-path', clipRule: 'clip-rule', clipPathUnits: 'clipPathUnits', - color: null, + color: 0, colorInterpolation: 'color-interpolation', colorInterpolationFilters: 'color-interpolation-filters', colorProfile: 'color-profile', colorRendering: 'color-rendering', contentScriptType: 'contentScriptType', contentStyleType: 'contentStyleType', - cursor: null, - cx: null, - cy: null, - d: null, - decelerate: null, - descent: null, + cursor: 0, + cx: 0, + cy: 0, + d: 0, + decelerate: 0, + descent: 0, diffuseConstant: 'diffuseConstant', - direction: null, - display: null, - divisor: null, + direction: 0, + display: 0, + divisor: 0, dominantBaseline: 'dominant-baseline', - dur: null, - dx: null, - dy: null, + dur: 0, + dx: 0, + dy: 0, edgeMode: 'edgeMode', - elevation: null, + elevation: 0, enableBackground: 'enable-background', - end: null, - exponent: null, + end: 0, + exponent: 0, externalResourcesRequired: 'externalResourcesRequired', - fill: null, + fill: 0, fillOpacity: 'fill-opacity', fillRule: 'fill-rule', - filter: null, + filter: 0, filterRes: 'filterRes', filterUnits: 'filterUnits', floodColor: 'flood-color', @@ -89,70 +89,70 @@ var ATTRS = { fontStyle: 'font-style', fontVariant: 'font-variant', fontWeight: 'font-weight', - format: null, - from: null, - fx: null, - fy: null, - g1: null, - g2: null, + format: 0, + from: 0, + fx: 0, + fy: 0, + g1: 0, + g2: 0, glyphName: 'glyph-name', glyphOrientationHorizontal: 'glyph-orientation-horizontal', glyphOrientationVertical: 'glyph-orientation-vertical', glyphRef: 'glyphRef', gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', - hanging: null, - height: null, + hanging: 0, + height: 0, horizAdvX: 'horiz-adv-x', horizOriginX: 'horiz-origin-x', - id: null, - ideographic: null, + id: 0, + ideographic: 0, imageRendering: 'image-rendering', - in: null, - in2: null, - intercept: null, - k: null, - k1: null, - k2: null, - k3: null, - k4: null, + in: 0, + in2: 0, + intercept: 0, + k: 0, + k1: 0, + k2: 0, + k3: 0, + k4: 0, kernelMatrix: 'kernelMatrix', kernelUnitLength: 'kernelUnitLength', - kerning: null, + kerning: 0, keyPoints: 'keyPoints', keySplines: 'keySplines', keyTimes: 'keyTimes', - lang: null, + lang: 0, lengthAdjust: 'lengthAdjust', letterSpacing: 'letter-spacing', lightingColor: 'lighting-color', limitingConeAngle: 'limitingConeAngle', - local: null, + local: 0, markerEnd: 'marker-end', markerMid: 'marker-mid', markerStart: 'marker-start', markerHeight: 'markerHeight', markerUnits: 'markerUnits', markerWidth: 'markerWidth', - mask: null, + mask: 0, maskContentUnits: 'maskContentUnits', maskUnits: 'maskUnits', - mathematical: null, - max: null, - media: null, - method: null, - min: null, - mode: null, - name: null, + mathematical: 0, + max: 0, + media: 0, + method: 0, + min: 0, + mode: 0, + name: 0, numOctaves: 'numOctaves', - offset: null, - opacity: null, - operator: null, - order: null, - orient: null, - orientation: null, - origin: null, - overflow: null, + offset: 0, + opacity: 0, + operator: 0, + order: 0, + orient: 0, + orientation: 0, + origin: 0, + overflow: 0, overlinePosition: 'overline-position', overlineThickness: 'overline-thickness', paintOrder: 'paint-order', @@ -162,15 +162,15 @@ var ATTRS = { patternTransform: 'patternTransform', patternUnits: 'patternUnits', pointerEvents: 'pointer-events', - points: null, + points: 0, pointsAtX: 'pointsAtX', pointsAtY: 'pointsAtY', pointsAtZ: 'pointsAtZ', preserveAlpha: 'preserveAlpha', preserveAspectRatio: 'preserveAspectRatio', primitiveUnits: 'primitiveUnits', - r: null, - radius: null, + r: 0, + radius: 0, refX: 'refX', refY: 'refY', renderingIntent: 'rendering-intent', @@ -178,31 +178,31 @@ var ATTRS = { repeatDur: 'repeatDur', requiredExtensions: 'requiredExtensions', requiredFeatures: 'requiredFeatures', - restart: null, - result: null, - rotate: null, - rx: null, - ry: null, - scale: null, - seed: null, + restart: 0, + result: 0, + rotate: 0, + rx: 0, + ry: 0, + scale: 0, + seed: 0, shapeRendering: 'shape-rendering', - slope: null, - spacing: null, + slope: 0, + spacing: 0, specularConstant: 'specularConstant', specularExponent: 'specularExponent', - speed: null, + speed: 0, spreadMethod: 'spreadMethod', startOffset: 'startOffset', stdDeviation: 'stdDeviation', - stemh: null, - stemv: null, + stemh: 0, + stemv: 0, stitchTiles: 'stitchTiles', stopColor: 'stop-color', stopOpacity: 'stop-opacity', strikethroughPosition: 'strikethrough-position', strikethroughThickness: 'strikethrough-thickness', - string: null, - stroke: null, + string: 0, + stroke: 0, strokeDasharray: 'stroke-dasharray', strokeDashoffset: 'stroke-dashoffset', strokeLinecap: 'stroke-linecap', @@ -210,25 +210,25 @@ var ATTRS = { strokeMiterlimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity', strokeWidth: 'stroke-width', - style: null, + style: 0, surfaceScale: 'surfaceScale', systemLanguage: 'systemLanguage', tableValues: 'tableValues', - target: null, + target: 0, targetX: 'targetX', targetY: 'targetY', textAnchor: 'text-anchor', textDecoration: 'text-decoration', textRendering: 'text-rendering', textLength: 'textLength', - to: null, - transform: null, - type: null, - u1: null, - u2: null, + to: 0, + transform: 0, + type: 0, + u1: 0, + u2: 0, underlinePosition: 'underline-position', underlineThickness: 'underline-thickness', - unicode: null, + unicode: 0, unicodeBidi: 'unicode-bidi', unicodeRange: 'unicode-range', unitsPerEm: 'units-per-em', @@ -236,22 +236,22 @@ var ATTRS = { vHanging: 'v-hanging', vIdeographic: 'v-ideographic', vMathematical: 'v-mathematical', - values: null, - version: null, + values: 0, + version: 0, vertAdvY: 'vert-adv-y', vertOriginX: 'vert-origin-x', vertOriginY: 'vert-origin-y', viewBox: 'viewBox', viewTarget: 'viewTarget', - visibility: null, - width: null, - widths: null, + visibility: 0, + width: 0, + widths: 0, wordSpacing: 'word-spacing', writingMode: 'writing-mode', - x: null, + x: 0, xHeight: 'x-height', - x1: null, - x2: null, + x1: 0, + x2: 0, xChannelSelector: 'xChannelSelector', xlinkActuate: 'xlink:actuate', xlinkArcrole: 'xlink:arcrole', @@ -263,11 +263,11 @@ var ATTRS = { xmlBase: 'xml:base', xmlLang: 'xml:lang', xmlSpace: 'xml:space', - y: null, - y1: null, - y2: null, + y: 0, + y1: 0, + y2: 0, yChannelSelector: 'yChannelSelector', - z: null, + z: 0, zoomAndPan: 'zoomAndPan', }; @@ -289,7 +289,7 @@ var SVGDOMPropertyConfig = { }; Object.keys(ATTRS).map((key) => { - SVGDOMPropertyConfig.Properties[key] = null; + SVGDOMPropertyConfig.Properties[key] = 0; if (ATTRS[key]) { SVGDOMPropertyConfig.DOMAttributeNames[key] = ATTRS[key]; } From 48a1cc52d72c13dc5312f5e4730fbfa6597db8d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 10 Mar 2016 16:24:56 -0800 Subject: [PATCH 09/10] Remove attributes already specified in the HTML config --- .../dom/shared/SVGDOMPropertyConfig.js | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index e818715035e..bd90451c092 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -18,7 +18,21 @@ var NS = { // We use attributes for everything SVG so let's avoid some duplication and run // code instead. - +// The following are all specified in the HTML config already so we exclude here. +// - class (as className) +// - color +// - height +// - id +// - lang +// - max +// - media +// - method +// - min +// - name +// - style +// - target +// - type +// - width var ATTRS = { accentHeight: 'accent-height', accumulate: 0, @@ -42,12 +56,10 @@ var ATTRS = { by: 0, calcMode: 'calcMode', capHeight: 'cap-height', - class: 0, clip: 0, clipPath: 'clip-path', clipRule: 'clip-rule', clipPathUnits: 'clipPathUnits', - color: 0, colorInterpolation: 'color-interpolation', colorInterpolationFilters: 'color-interpolation-filters', colorProfile: 'color-profile', @@ -102,10 +114,8 @@ var ATTRS = { gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', hanging: 0, - height: 0, horizAdvX: 'horiz-adv-x', horizOriginX: 'horiz-origin-x', - id: 0, ideographic: 0, imageRendering: 'image-rendering', in: 0, @@ -122,7 +132,6 @@ var ATTRS = { keyPoints: 'keyPoints', keySplines: 'keySplines', keyTimes: 'keyTimes', - lang: 0, lengthAdjust: 'lengthAdjust', letterSpacing: 'letter-spacing', lightingColor: 'lighting-color', @@ -138,12 +147,7 @@ var ATTRS = { maskContentUnits: 'maskContentUnits', maskUnits: 'maskUnits', mathematical: 0, - max: 0, - media: 0, - method: 0, - min: 0, mode: 0, - name: 0, numOctaves: 'numOctaves', offset: 0, opacity: 0, @@ -210,11 +214,9 @@ var ATTRS = { strokeMiterlimit: 'stroke-miterlimit', strokeOpacity: 'stroke-opacity', strokeWidth: 'stroke-width', - style: 0, surfaceScale: 'surfaceScale', systemLanguage: 'systemLanguage', tableValues: 'tableValues', - target: 0, targetX: 'targetX', targetY: 'targetY', textAnchor: 'text-anchor', @@ -223,7 +225,6 @@ var ATTRS = { textLength: 'textLength', to: 0, transform: 0, - type: 0, u1: 0, u2: 0, underlinePosition: 'underline-position', @@ -244,7 +245,6 @@ var ATTRS = { viewBox: 'viewBox', viewTarget: 'viewTarget', visibility: 0, - width: 0, widths: 0, wordSpacing: 'word-spacing', writingMode: 'writing-mode', From a0a72004e50d06b5eac5bdd6e9f54617b0b85f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Fri, 11 Mar 2016 11:17:01 -0800 Subject: [PATCH 10/10] Fix lint warnings due to backouts --- src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js | 2 -- .../dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 279692a1997..d349620b471 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -17,14 +17,12 @@ describe('ReactDOMComponent', function() { var React; var ReactDOM; - var ReactDOMFeatureFlags; var ReactDOMServer; beforeEach(function() { jest.resetModuleRegistry(); React = require('React'); ReactDOM = require('ReactDOM'); - ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); ReactDOMServer = require('ReactDOMServer'); }); diff --git a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js index b83082dfa6d..5adc359063e 100644 --- a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js +++ b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js @@ -82,6 +82,6 @@ var ReactDOMUnknownPropertyDevtool = { onDeleteValueForProperty(node, name) { warnUnknownProperty(name); }, -} +}; module.exports = ReactDOMUnknownPropertyDevtool;