maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move HTML and SVG configs into DOMProperty (#11728) 

* Inline HTML and SVG configs into DOMProperty

* Replace invariants with warnings

These invariants can only happen if *we* mess up, and happen during init time.
So it's safe to make these warnings, as they would fail the tests anyway.

* Clearer variable naming
This commit is contained in:
Dan Abramov 2017-11-30 22:29:58 +00:00 committed by GitHub
parent b3e27b2640
commit 8ec2ed4089
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 265 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-dom/src/client/ReactDOM.js vendored
View File

@ -16,7 +16,6 @@ import type {
} from 'react-reconciler/src/ReactFiberRoot';
import '../shared/checkReact';
import '../shared/ReactDOMInjection';
import './ReactDOMClientInjection';
import ReactFiberReconciler from 'react-reconciler';

1
packages/react-dom/src/server/ReactDOMServerBrowser.js vendored
View File

@ -5,7 +5,6 @@
* LICENSE file in the root directory of this source tree.
*/
import '../shared/ReactDOMInjection';
import ReactVersion from 'shared/ReactVersion';
import invariant from 'fbjs/lib/invariant';

1
packages/react-dom/src/server/ReactDOMServerNode.js vendored
View File

@ -5,7 +5,6 @@
* LICENSE file in the root directory of this source tree.
*/
import '../shared/ReactDOMInjection';
import ReactVersion from 'shared/ReactVersion';
import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';

346
packages/react-dom/src/shared/DOMProperty.js vendored
View File

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import invariant from 'fbjs/lib/invariant';
import warning from 'fbjs/lib/warning';
// These attributes should be all lowercase to allow for
// case insensitive checks
@ -24,46 +24,21 @@ function checkMask(value, bitmask) {
return (value & bitmask) === bitmask;
}
var DOMPropertyInjection = {
/**
* Mapping from normalized, camelcased property names to a configuration that
* specifies how the associated DOM property should be accessed or rendered.
*/
MUST_USE_PROPERTY: 0x1,
HAS_BOOLEAN_VALUE: 0x4,
HAS_NUMERIC_VALUE: 0x8,
HAS_POSITIVE_NUMERIC_VALUE: 0x10 | 0x8,
HAS_OVERLOADED_BOOLEAN_VALUE: 0x20,
HAS_STRING_BOOLEAN_VALUE: 0x40,
const MUST_USE_PROPERTY = 0x1;
const HAS_BOOLEAN_VALUE = 0x4;
const HAS_NUMERIC_VALUE = 0x8;
const HAS_POSITIVE_NUMERIC_VALUE = 0x10 | 0x8;
const HAS_OVERLOADED_BOOLEAN_VALUE = 0x20;
const HAS_STRING_BOOLEAN_VALUE = 0x40;
/**
* Inject some specialized knowledge about the DOM. This takes a config object
* with the following properties:
*
* Properties: object mapping DOM property name to one of the
* DOMPropertyInjection constants or null. If your attribute isn't in here,
* it won't get written to the DOM.
*
* DOMAttributeNames: object mapping React attribute name to the DOM
* attribute name. Attribute names not specified use the **lowercase**
* normalized name.
*
* DOMAttributeNamespaces: object mapping React attribute name to the DOM
* attribute namespace URL. (Attribute names not specified use no namespace.)
*
* DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
* Property names not specified use the normalized name.
*
* @param {object} domPropertyConfig the config as described above.
*/
injectDOMPropertyConfig: function(domPropertyConfig) {
var Injection = DOMPropertyInjection;
var Properties = domPropertyConfig.Properties || {};
var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};
var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
function injectDOMPropertyConfig(domPropertyConfig) {
var Properties = domPropertyConfig.Properties || {};
var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};
var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
for (var propName in Properties) {
invariant(
for (var propName in Properties) {
if (__DEV__) {
warning(
!properties.hasOwnProperty(propName),
"injectDOMPropertyConfig(...): You're trying to inject DOM property " +
"'%s' which has already been injected. You may be accidentally " +
@ -71,32 +46,31 @@ var DOMPropertyInjection = {
'injecting two configs that have conflicting property names.',
propName,
);
}
var lowerCased = propName.toLowerCase();
var propConfig = Properties[propName];
var lowerCased = propName.toLowerCase();
var propConfig = Properties[propName];
var propertyInfo = {
attributeName: lowerCased,
attributeNamespace: null,
propertyName: propName,
var propertyInfo = {
attributeName: lowerCased,
attributeNamespace: null,
propertyName: propName,
mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY),
hasBooleanValue: checkMask(propConfig, Injection.HAS_BOOLEAN_VALUE),
hasNumericValue: checkMask(propConfig, Injection.HAS_NUMERIC_VALUE),
hasPositiveNumericValue: checkMask(
propConfig,
Injection.HAS_POSITIVE_NUMERIC_VALUE,
),
hasOverloadedBooleanValue: checkMask(
propConfig,
Injection.HAS_OVERLOADED_BOOLEAN_VALUE,
),
hasStringBooleanValue: checkMask(
propConfig,
Injection.HAS_STRING_BOOLEAN_VALUE,
),
};
invariant(
mustUseProperty: checkMask(propConfig, MUST_USE_PROPERTY),
hasBooleanValue: checkMask(propConfig, HAS_BOOLEAN_VALUE),
hasNumericValue: checkMask(propConfig, HAS_NUMERIC_VALUE),
hasPositiveNumericValue: checkMask(
propConfig,
HAS_POSITIVE_NUMERIC_VALUE,
),
hasOverloadedBooleanValue: checkMask(
propConfig,
HAS_OVERLOADED_BOOLEAN_VALUE,
),
hasStringBooleanValue: checkMask(propConfig, HAS_STRING_BOOLEAN_VALUE),
};
if (__DEV__) {
warning(
propertyInfo.hasBooleanValue +
propertyInfo.hasNumericValue +
propertyInfo.hasOverloadedBooleanValue <=
@ -105,25 +79,25 @@ var DOMPropertyInjection = {
'numeric value, but not a combination: %s',
propName,
);
if (DOMAttributeNames.hasOwnProperty(propName)) {
var attributeName = DOMAttributeNames[propName];
propertyInfo.attributeName = attributeName;
}
if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName];
}
// Downcase references to whitelist properties to check for membership
// without case-sensitivity. This allows the whitelist to pick up
// `allowfullscreen`, which should be written using the property configuration
// for `allowFullscreen`
properties[propName] = propertyInfo;
}
},
};
if (DOMAttributeNames.hasOwnProperty(propName)) {
var attributeName = DOMAttributeNames[propName];
propertyInfo.attributeName = attributeName;
}
if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName];
}
// Downcase references to whitelist properties to check for membership
// without case-sensitivity. This allows the whitelist to pick up
// `allowfullscreen`, which should be written using the property configuration
// for `allowFullscreen`
properties[propName] = propertyInfo;
}
}
/* eslint-disable max-len */
export const ATTRIBUTE_NAME_START_CHAR =
@ -227,4 +201,214 @@ export function isReservedProp(name) {
return RESERVED_PROPS.hasOwnProperty(name);
}
export const injection = DOMPropertyInjection;
var HTMLDOMPropertyConfig = {
// When adding attributes to this list, be sure to also add them to
// the `possibleStandardNames` module to ensure casing and incorrect
// name warnings.
Properties: {
allowFullScreen: HAS_BOOLEAN_VALUE,
// specifies target context for links with `preload` type
async: HAS_BOOLEAN_VALUE,
// Note: there is a special case that prevents it from being written to the DOM
// on the client side because the browsers are inconsistent. Instead we call focus().
autoFocus: HAS_BOOLEAN_VALUE,
autoPlay: HAS_BOOLEAN_VALUE,
capture: HAS_OVERLOADED_BOOLEAN_VALUE,
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
cols: HAS_POSITIVE_NUMERIC_VALUE,
contentEditable: HAS_STRING_BOOLEAN_VALUE,
controls: HAS_BOOLEAN_VALUE,
default: HAS_BOOLEAN_VALUE,
defer: HAS_BOOLEAN_VALUE,
disabled: HAS_BOOLEAN_VALUE,
download: HAS_OVERLOADED_BOOLEAN_VALUE,
draggable: HAS_STRING_BOOLEAN_VALUE,
formNoValidate: HAS_BOOLEAN_VALUE,
hidden: HAS_BOOLEAN_VALUE,
loop: HAS_BOOLEAN_VALUE,
// 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,
noValidate: HAS_BOOLEAN_VALUE,
open: HAS_BOOLEAN_VALUE,
playsInline: HAS_BOOLEAN_VALUE,
readOnly: HAS_BOOLEAN_VALUE,
required: HAS_BOOLEAN_VALUE,
reversed: HAS_BOOLEAN_VALUE,
rows: HAS_POSITIVE_NUMERIC_VALUE,
rowSpan: HAS_NUMERIC_VALUE,
scoped: HAS_BOOLEAN_VALUE,
seamless: HAS_BOOLEAN_VALUE,
selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
size: HAS_POSITIVE_NUMERIC_VALUE,
start: HAS_NUMERIC_VALUE,
// support for projecting regular DOM Elements via V1 named slots ( shadow dom )
span: HAS_POSITIVE_NUMERIC_VALUE,
spellCheck: HAS_STRING_BOOLEAN_VALUE,
// Style must be explicitly set in the attribute list. React components
// expect a style object
style: 0,
// Keep it in the whitelist because it is case-sensitive for SVG.
tabIndex: 0,
// itemScope is for for Microdata support.
// See http://schema.org/docs/gs.html
itemScope: HAS_BOOLEAN_VALUE,
// These attributes must stay in the white-list because they have
// different attribute names (see DOMAttributeNames below)
acceptCharset: 0,
className: 0,
htmlFor: 0,
httpEquiv: 0,
// Set the string boolean flag to allow the behavior
value: HAS_STRING_BOOLEAN_VALUE,
},
DOMAttributeNames: {
acceptCharset: 'accept-charset',
className: 'class',
htmlFor: 'for',
httpEquiv: 'http-equiv',
},
};
var NS = {
xlink: 'http://www.w3.org/1999/xlink',
xml: 'http://www.w3.org/XML/1998/namespace',
};
/**
* This is a list of all SVG attributes that need special casing,
* namespacing, or boolean value assignment.
*
* When adding attributes to this list, be sure to also add them to
* the `possibleStandardNames` module to ensure casing and incorrect
* name warnings.
*
* SVG Attributes List:
* https://www.w3.org/TR/SVG/attindex.html
* SMIL Spec:
* https://www.w3.org/TR/smil
*/
var SVG_ATTRS = [
'accent-height',
'alignment-baseline',
'arabic-form',
'baseline-shift',
'cap-height',
'clip-path',
'clip-rule',
'color-interpolation',
'color-interpolation-filters',
'color-profile',
'color-rendering',
'dominant-baseline',
'enable-background',
'fill-opacity',
'fill-rule',
'flood-color',
'flood-opacity',
'font-family',
'font-size',
'font-size-adjust',
'font-stretch',
'font-style',
'font-variant',
'font-weight',
'glyph-name',
'glyph-orientation-horizontal',
'glyph-orientation-vertical',
'horiz-adv-x',
'horiz-origin-x',
'image-rendering',
'letter-spacing',
'lighting-color',
'marker-end',
'marker-mid',
'marker-start',
'overline-position',
'overline-thickness',
'paint-order',
'panose-1',
'pointer-events',
'rendering-intent',
'shape-rendering',
'stop-color',
'stop-opacity',
'strikethrough-position',
'strikethrough-thickness',
'stroke-dasharray',
'stroke-dashoffset',
'stroke-linecap',
'stroke-linejoin',
'stroke-miterlimit',
'stroke-opacity',
'stroke-width',
'text-anchor',
'text-decoration',
'text-rendering',
'underline-position',
'underline-thickness',
'unicode-bidi',
'unicode-range',
'units-per-em',
'v-alphabetic',
'v-hanging',
'v-ideographic',
'v-mathematical',
'vector-effect',
'vert-adv-y',
'vert-origin-x',
'vert-origin-y',
'word-spacing',
'writing-mode',
'x-height',
'xlink:actuate',
'xlink:arcrole',
'xlink:href',
'xlink:role',
'xlink:show',
'xlink:title',
'xlink:type',
'xml:base',
'xmlns:xlink',
'xml:lang',
'xml:space',
];
var SVGDOMPropertyConfig = {
Properties: {
autoReverse: HAS_STRING_BOOLEAN_VALUE,
externalResourcesRequired: HAS_STRING_BOOLEAN_VALUE,
preserveAlpha: HAS_STRING_BOOLEAN_VALUE,
},
DOMAttributeNames: {
autoReverse: 'autoReverse',
externalResourcesRequired: 'externalResourcesRequired',
preserveAlpha: 'preserveAlpha',
},
DOMAttributeNamespaces: {
xlinkActuate: NS.xlink,
xlinkArcrole: NS.xlink,
xlinkHref: NS.xlink,
xlinkRole: NS.xlink,
xlinkShow: NS.xlink,
xlinkTitle: NS.xlink,
xlinkType: NS.xlink,
xmlBase: NS.xml,
xmlLang: NS.xml,
xmlSpace: NS.xml,
},
};
var CAMELIZE = /[\-\:]([a-z])/g;
var capitalize = token => token[1].toUpperCase();
SVG_ATTRS.forEach(original => {
var reactName = original.replace(CAMELIZE, capitalize);
SVGDOMPropertyConfig.Properties[reactName] = 0;
SVGDOMPropertyConfig.DOMAttributeNames[reactName] = original;
});
injectDOMPropertyConfig(HTMLDOMPropertyConfig);
injectDOMPropertyConfig(SVGDOMPropertyConfig);

88
packages/react-dom/src/shared/HTMLDOMPropertyConfig.js vendored
View File

@ -1,88 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {injection} from './DOMProperty';
var MUST_USE_PROPERTY = injection.MUST_USE_PROPERTY;
var HAS_BOOLEAN_VALUE = injection.HAS_BOOLEAN_VALUE;
var HAS_NUMERIC_VALUE = injection.HAS_NUMERIC_VALUE;
var HAS_POSITIVE_NUMERIC_VALUE = injection.HAS_POSITIVE_NUMERIC_VALUE;
var HAS_OVERLOADED_BOOLEAN_VALUE = injection.HAS_OVERLOADED_BOOLEAN_VALUE;
var HAS_STRING_BOOLEAN_VALUE = injection.HAS_STRING_BOOLEAN_VALUE;
var HTMLDOMPropertyConfig = {
// When adding attributes to this list, be sure to also add them to
// the `possibleStandardNames` module to ensure casing and incorrect
// name warnings.
Properties: {
allowFullScreen: HAS_BOOLEAN_VALUE,
// specifies target context for links with `preload` type
async: HAS_BOOLEAN_VALUE,
// Note: there is a special case that prevents it from being written to the DOM
// on the client side because the browsers are inconsistent. Instead we call focus().
autoFocus: HAS_BOOLEAN_VALUE,
autoPlay: HAS_BOOLEAN_VALUE,
capture: HAS_OVERLOADED_BOOLEAN_VALUE,
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
cols: HAS_POSITIVE_NUMERIC_VALUE,
contentEditable: HAS_STRING_BOOLEAN_VALUE,
controls: HAS_BOOLEAN_VALUE,
default: HAS_BOOLEAN_VALUE,
defer: HAS_BOOLEAN_VALUE,
disabled: HAS_BOOLEAN_VALUE,
download: HAS_OVERLOADED_BOOLEAN_VALUE,
draggable: HAS_STRING_BOOLEAN_VALUE,
formNoValidate: HAS_BOOLEAN_VALUE,
hidden: HAS_BOOLEAN_VALUE,
loop: HAS_BOOLEAN_VALUE,
// 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,
noValidate: HAS_BOOLEAN_VALUE,
open: HAS_BOOLEAN_VALUE,
playsInline: HAS_BOOLEAN_VALUE,
readOnly: HAS_BOOLEAN_VALUE,
required: HAS_BOOLEAN_VALUE,
reversed: HAS_BOOLEAN_VALUE,
rows: HAS_POSITIVE_NUMERIC_VALUE,
rowSpan: HAS_NUMERIC_VALUE,
scoped: HAS_BOOLEAN_VALUE,
seamless: HAS_BOOLEAN_VALUE,
selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
size: HAS_POSITIVE_NUMERIC_VALUE,
start: HAS_NUMERIC_VALUE,
// support for projecting regular DOM Elements via V1 named slots ( shadow dom )
span: HAS_POSITIVE_NUMERIC_VALUE,
spellCheck: HAS_STRING_BOOLEAN_VALUE,
// Style must be explicitly set in the attribute list. React components
// expect a style object
style: 0,
// Keep it in the whitelist because it is case-sensitive for SVG.
tabIndex: 0,
// itemScope is for for Microdata support.
// See http://schema.org/docs/gs.html
itemScope: HAS_BOOLEAN_VALUE,
// These attributes must stay in the white-list because they have
// different attribute names (see DOMAttributeNames below)
acceptCharset: 0,
className: 0,
htmlFor: 0,
httpEquiv: 0,
// Attributes with mutation methods must be specified in the whitelist
// Set the string boolean flag to allow the behavior
value: HAS_STRING_BOOLEAN_VALUE,
},
DOMAttributeNames: {
acceptCharset: 'accept-charset',
className: 'class',
htmlFor: 'for',
httpEquiv: 'http-equiv',
},
};
export default HTMLDOMPropertyConfig;

13
packages/react-dom/src/shared/ReactDOMInjection.js vendored
View File

@ -1,13 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import * as DOMProperty from './DOMProperty';
import HTMLDOMPropertyConfig from './HTMLDOMPropertyConfig';
import SVGDOMPropertyConfig from './SVGDOMPropertyConfig';
DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig);

151
packages/react-dom/src/shared/SVGDOMPropertyConfig.js vendored
View File

@ -1,151 +0,0 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {injection} from './DOMProperty';
var {HAS_STRING_BOOLEAN_VALUE} = injection;
var NS = {
xlink: 'http://www.w3.org/1999/xlink',
xml: 'http://www.w3.org/XML/1998/namespace',
};
/**
* This is a list of all SVG attributes that need special casing,
* namespacing, or boolean value assignment.
*
* When adding attributes to this list, be sure to also add them to
* the `possibleStandardNames` module to ensure casing and incorrect
* name warnings.
*
* SVG Attributes List:
* https://www.w3.org/TR/SVG/attindex.html
* SMIL Spec:
* https://www.w3.org/TR/smil
*/
var ATTRS = [
'accent-height',
'alignment-baseline',
'arabic-form',
'baseline-shift',
'cap-height',
'clip-path',
'clip-rule',
'color-interpolation',
'color-interpolation-filters',
'color-profile',
'color-rendering',
'dominant-baseline',
'enable-background',
'fill-opacity',
'fill-rule',
'flood-color',
'flood-opacity',
'font-family',
'font-size',
'font-size-adjust',
'font-stretch',
'font-style',
'font-variant',
'font-weight',
'glyph-name',
'glyph-orientation-horizontal',
'glyph-orientation-vertical',
'horiz-adv-x',
'horiz-origin-x',
'image-rendering',
'letter-spacing',
'lighting-color',
'marker-end',
'marker-mid',
'marker-start',
'overline-position',
'overline-thickness',
'paint-order',
'panose-1',
'pointer-events',
'rendering-intent',
'shape-rendering',
'stop-color',
'stop-opacity',
'strikethrough-position',
'strikethrough-thickness',
'stroke-dasharray',
'stroke-dashoffset',
'stroke-linecap',
'stroke-linejoin',
'stroke-miterlimit',
'stroke-opacity',
'stroke-width',
'text-anchor',
'text-decoration',
'text-rendering',
'underline-position',
'underline-thickness',
'unicode-bidi',
'unicode-range',
'units-per-em',
'v-alphabetic',
'v-hanging',
'v-ideographic',
'v-mathematical',
'vector-effect',
'vert-adv-y',
'vert-origin-x',
'vert-origin-y',
'word-spacing',
'writing-mode',
'x-height',
'xlink:actuate',
'xlink:arcrole',
'xlink:href',
'xlink:role',
'xlink:show',
'xlink:title',
'xlink:type',
'xml:base',
'xmlns:xlink',
'xml:lang',
'xml:space',
];
var SVGDOMPropertyConfig = {
Properties: {
autoReverse: HAS_STRING_BOOLEAN_VALUE,
externalResourcesRequired: HAS_STRING_BOOLEAN_VALUE,
preserveAlpha: HAS_STRING_BOOLEAN_VALUE,
},
DOMAttributeNames: {
autoReverse: 'autoReverse',
externalResourcesRequired: 'externalResourcesRequired',
preserveAlpha: 'preserveAlpha',
},
DOMAttributeNamespaces: {
xlinkActuate: NS.xlink,
xlinkArcrole: NS.xlink,
xlinkHref: NS.xlink,
xlinkRole: NS.xlink,
xlinkShow: NS.xlink,
xlinkTitle: NS.xlink,
xlinkType: NS.xlink,
xmlBase: NS.xml,
xmlLang: NS.xml,
xmlSpace: NS.xml,
},
};
var CAMELIZE = /[\-\:]([a-z])/g;
var capitalize = token => token[1].toUpperCase();
ATTRS.forEach(original => {
var reactName = original.replace(CAMELIZE, capitalize);
SVGDOMPropertyConfig.Properties[reactName] = 0;
SVGDOMPropertyConfig.DOMAttributeNames[reactName] = original;
});
export default SVGDOMPropertyConfig;