From 9fc797ddadb0fa130397e79bab56597b76ea601f Mon Sep 17 00:00:00 2001 From: Raphael Amorim Date: Sat, 2 Dec 2017 21:14:19 -0200 Subject: [PATCH 1/5] react-dom: convert packages/react-dom/src/client --- .../src/client/DOMPropertyOperations.js | 26 +-- packages/react-dom/src/client/ReactDOM.js | 10 +- .../src/client/ReactDOMFiberComponent.js | 154 ++++++++++-------- .../src/client/ReactDOMFiberInput.js | 50 +++--- .../src/client/ReactDOMFiberSelect.js | 38 +++-- .../getNodeForCharacterOffset-test.js | 15 +- 6 files changed, 158 insertions(+), 135 deletions(-) diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js index b70c533d2d887..3affbec9086d9 100644 --- a/packages/react-dom/src/client/DOMPropertyOperations.js +++ b/packages/react-dom/src/client/DOMPropertyOperations.js @@ -17,11 +17,11 @@ import warning from 'fbjs/lib/warning'; // isAttributeNameSafe() is currently duplicated in DOMMarkupOperations. // TODO: Find a better place for this. -var VALID_ATTRIBUTE_NAME_REGEX = new RegExp( +const VALID_ATTRIBUTE_NAME_REGEX = new RegExp( '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$', ); -var illegalAttributeNameCache = {}; -var validatedAttributeNameCache = {}; +const illegalAttributeNameCache = {}; +const validatedAttributeNameCache = {}; function isAttributeNameSafe(attributeName) { if (validatedAttributeNameCache.hasOwnProperty(attributeName)) { return true; @@ -71,18 +71,18 @@ export function setAttributeForRoot(node) { */ export function getValueForProperty(node, name, expected) { if (__DEV__) { - var propertyInfo = getPropertyInfo(name); + const propertyInfo = getPropertyInfo(name); if (propertyInfo) { if (propertyInfo.mustUseProperty) { return node[propertyInfo.propertyName]; } else { - var attributeName = propertyInfo.attributeName; + const attributeName = propertyInfo.attributeName; - var stringValue = null; + let stringValue = null; if (propertyInfo.hasOverloadedBooleanValue) { if (node.hasAttribute(attributeName)) { - var value = node.getAttribute(attributeName); + const value = node.getAttribute(attributeName); if (value === '') { return true; } @@ -137,7 +137,7 @@ export function getValueForAttribute(node, name, expected) { if (!node.hasAttribute(name)) { return expected === undefined ? undefined : null; } - var value = node.getAttribute(name); + const value = node.getAttribute(name); if (value === '' + expected) { return expected; } @@ -153,7 +153,7 @@ export function getValueForAttribute(node, name, expected) { * @param {*} value */ export function setValueForProperty(node, name, value) { - var propertyInfo = getPropertyInfo(name); + const propertyInfo = getPropertyInfo(name); if (propertyInfo && shouldSetAttribute(name, value)) { if (shouldIgnoreValue(propertyInfo, value)) { @@ -164,8 +164,8 @@ export function setValueForProperty(node, name, value) { // `toString`ed by IE8/9. node[propertyInfo.propertyName] = value; } else { - var attributeName = propertyInfo.attributeName; - var namespace = propertyInfo.attributeNamespace; + const attributeName = propertyInfo.attributeName; + const namespace = propertyInfo.attributeNamespace; // `setAttribute` with objects becomes only `[object]` in IE8/9, // ('' + value) makes it output the correct toString()-value. if (namespace) { @@ -217,10 +217,10 @@ export function deleteValueForAttribute(node, name) { * @param {string} name */ export function deleteValueForProperty(node, name) { - var propertyInfo = getPropertyInfo(name); + const propertyInfo = getPropertyInfo(name); if (propertyInfo) { if (propertyInfo.mustUseProperty) { - var propName = propertyInfo.propertyName; + const propName = propertyInfo.propertyName; if (propertyInfo.hasBooleanValue) { node[propName] = false; } else { diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 3f1f71d6aebd2..b75cabe96ce54 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -72,8 +72,12 @@ const { const {updatedAncestorInfo} = validateDOMNesting; const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree; +let SUPPRESS_HYDRATION_WARNING; +let topLevelUpdateWarnings; +let warnOnInvalidCallback; + if (__DEV__) { - var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; + SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; if ( typeof Map !== 'function' || Map.prototype == null || @@ -90,7 +94,7 @@ if (__DEV__) { ); } - var topLevelUpdateWarnings = (container: DOMContainer) => { + topLevelUpdateWarnings = (container: DOMContainer) => { if (__DEV__) { if ( container._reactRootContainer && @@ -137,7 +141,7 @@ if (__DEV__) { } }; - var warnOnInvalidCallback = function(callback: mixed, callerName: string) { + warnOnInvalidCallback = function(callback: mixed, callerName: string) { warning( callback === null || typeof callback === 'function', '%s(...): Expected the last optional `callback` argument to be a ' + diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js index 1ed31563d3395..d3e4c85b6b123 100644 --- a/packages/react-dom/src/client/ReactDOMFiberComponent.js +++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js @@ -32,29 +32,42 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook'; import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook'; -var { +const { getCurrentFiberOwnerName, getCurrentFiberStackAddendum, } = ReactDebugCurrentFiber; -var didWarnInvalidHydration = false; -var didWarnShadyDOM = false; +let didWarnInvalidHydration = false; +let didWarnShadyDOM = false; -var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML'; -var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning'; -var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; -var AUTOFOCUS = 'autoFocus'; -var CHILDREN = 'children'; -var STYLE = 'style'; -var HTML = '__html'; +const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML'; +const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning'; +const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; +const AUTOFOCUS = 'autoFocus'; +const CHILDREN = 'children'; +const STYLE = 'style'; +const HTML = '__html'; -var {html: HTML_NAMESPACE} = Namespaces; +const {html: HTML_NAMESPACE} = Namespaces; -var getStack = emptyFunction.thatReturns(''); +let getStack = emptyFunction.thatReturns(''); + +let warnedUnknownTags; +let suppressHydrationWarning; +let extraAttributeNames: Set; + +let validatePropertiesInDevelopment; +let warnForTextDifference; +let warnForPropDifference; +let warnForExtraAttributes; +let warnForInvalidEventListener; + +let normalizeMarkupForTextOrAttribute; +let normalizeHTML; if (__DEV__) { getStack = getCurrentFiberStackAddendum; - var warnedUnknownTags = { + warnedUnknownTags = { // Chrome is the only major browser not shipping