From bb3c22c66f84e4a69ce99ccce2701db48a84df08 Mon Sep 17 00:00:00 2001 From: Raphael Amorim Date: Mon, 6 Nov 2017 09:30:03 -0200 Subject: [PATCH] Use const/let in more places (#11467) * Convert ReactDOM to const/let * Convert ReactDOMComponentTree to const/let * Convert ReactDOMComponentTree to const/let * Convert getNodeForCharacterOffset to const/let * Convert getTextContentAccessor to const/let * Convert inputValueTracking to const/let * Convert setInnerHTML to const/let * Convert setTextContent to const/let * Convert validateDOMNesting to const/let --- packages/react-dom/src/client/ReactDOM.js | 21 +++++++------- .../src/client/ReactDOMComponentTree.js | 14 +++++----- .../src/client/ReactInputSelection.js | 15 +++++----- .../src/client/getNodeForCharacterOffset.js | 6 ++-- .../src/client/getTextContentAccessor.js | 2 +- .../src/client/inputValueTracking.js | 22 +++++++-------- packages/react-dom/src/client/setInnerHTML.js | 7 +++-- .../react-dom/src/client/setTextContent.js | 2 +- .../src/client/validateDOMNesting.js | 28 +++++++++---------- 9 files changed, 59 insertions(+), 58 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index d89497a079..ea6a589de7 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -49,7 +49,7 @@ import { DOCUMENT_FRAGMENT_NODE, } from '../shared/HTMLNodeType'; import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty'; -var { +const { createElement, createTextNode, setInitialProperties, @@ -63,8 +63,8 @@ var { warnForInsertedHydratedElement, warnForInsertedHydratedText, } = ReactDOMFiberComponent; -var {updatedAncestorInfo} = validateDOMNesting; -var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree; +const {updatedAncestorInfo} = validateDOMNesting; +const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree; if (__DEV__) { var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning'; @@ -163,7 +163,7 @@ function shouldAutoFocusHostComponent(type: string, props: Props): boolean { return false; } -var DOMRenderer = ReactFiberReconciler({ +const DOMRenderer = ReactFiberReconciler({ getRootHostContext(rootContainerInstance: Container): HostContext { let type; let namespace; @@ -343,7 +343,7 @@ var DOMRenderer = ReactFiberReconciler({ const hostContextDev = ((hostContext: any): HostContextDev); validateDOMNesting(null, text, hostContextDev.ancestorInfo); } - var textNode: TextInstance = createTextNode(text, rootContainerInstance); + const textNode: TextInstance = createTextNode(text, rootContainerInstance); precacheFiberNode(internalInstanceHandle, textNode); return textNode; }, @@ -640,7 +640,7 @@ ReactGenericBatching.injection.injectFiberBatchedUpdates( DOMRenderer.batchedUpdates, ); -var warnedAboutHydrateAPI = false; +let warnedAboutHydrateAPI = false; function renderSubtreeIntoContainer( parentComponent: ?React$Component, @@ -785,16 +785,17 @@ ReactRoot.prototype.unmount = function(callback) { DOMRenderer.updateContainer(null, root, null, callback); }; -var ReactDOM: Object = { +const ReactDOM: Object = { createPortal, findDOMNode( componentOrElement: Element | ?React$Component, ): null | Element | Text { if (__DEV__) { - var owner = (ReactCurrentOwner.current: any); + let owner = (ReactCurrentOwner.current: any); if (owner !== null) { - var warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender; + const warnedAboutRefsInRender = + owner.stateNode._warnedAboutRefsInRender; warning( warnedAboutRefsInRender, '%s is accessing findDOMNode inside its render(). ' + @@ -814,7 +815,7 @@ var ReactDOM: Object = { return (componentOrElement: any); } - var inst = ReactInstanceMap.get(componentOrElement); + const inst = ReactInstanceMap.get(componentOrElement); if (inst) { return DOMRenderer.findHostInstance(inst); } diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js index 687b510101..cf6d27e77c 100644 --- a/packages/react-dom/src/client/ReactDOMComponentTree.js +++ b/packages/react-dom/src/client/ReactDOMComponentTree.js @@ -8,9 +8,9 @@ import {HostComponent, HostText} from 'shared/ReactTypeOfWork'; import invariant from 'fbjs/lib/invariant'; -var randomKey = Math.random().toString(36).slice(2); -var internalInstanceKey = '__reactInternalInstance$' + randomKey; -var internalEventHandlersKey = '__reactEventHandlers$' + randomKey; +const randomKey = Math.random().toString(36).slice(2); +const internalInstanceKey = '__reactInternalInstance$' + randomKey; +const internalEventHandlersKey = '__reactEventHandlers$' + randomKey; export function precacheFiberNode(hostInst, node) { node[internalInstanceKey] = hostInst; @@ -26,7 +26,7 @@ export function getClosestInstanceFromNode(node) { } // Walk up the tree until we find an ancestor whose instance we have cached. - var parents = []; + let parents = []; while (!node[internalInstanceKey]) { parents.push(node); if (node.parentNode) { @@ -38,8 +38,8 @@ export function getClosestInstanceFromNode(node) { } } - var closest; - var inst = node[internalInstanceKey]; + let closest; + let inst = node[internalInstanceKey]; if (inst.tag === HostComponent || inst.tag === HostText) { // In Fiber, this will always be the deepest root. return inst; @@ -56,7 +56,7 @@ export function getClosestInstanceFromNode(node) { * instance, or null if the node was not rendered by this React. */ export function getInstanceFromNode(node) { - var inst = node[internalInstanceKey]; + const inst = node[internalInstanceKey]; if (inst) { if (inst.tag === HostComponent || inst.tag === HostText) { return inst; diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js index 00fcc3a839..88e2d13eaa 100644 --- a/packages/react-dom/src/client/ReactInputSelection.js +++ b/packages/react-dom/src/client/ReactInputSelection.js @@ -24,7 +24,7 @@ function isInDocument(node) { */ export function hasSelectionCapabilities(elem) { - var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase(); + const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase(); return ( nodeName && ((nodeName === 'input' && elem.type === 'text') || @@ -34,7 +34,7 @@ export function hasSelectionCapabilities(elem) { } export function getSelectionInformation() { - var focusedElem = getActiveElement(); + const focusedElem = getActiveElement(); return { focusedElem: focusedElem, selectionRange: hasSelectionCapabilities(focusedElem) @@ -49,9 +49,9 @@ export function getSelectionInformation() { * nodes and place them back in, resulting in focus being lost. */ export function restoreSelection(priorSelectionInformation) { - var curFocusedElem = getActiveElement(); - var priorFocusedElem = priorSelectionInformation.focusedElem; - var priorSelectionRange = priorSelectionInformation.selectionRange; + const curFocusedElem = getActiveElement(); + const priorFocusedElem = priorSelectionInformation.focusedElem; + const priorSelectionRange = priorSelectionInformation.selectionRange; if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) { if (hasSelectionCapabilities(priorFocusedElem)) { setSelection(priorFocusedElem, priorSelectionRange); @@ -87,7 +87,7 @@ export function restoreSelection(priorSelectionInformation) { * -@return {start: selectionStart, end: selectionEnd} */ export function getSelection(input) { - var selection; + let selection; if ('selectionStart' in input) { // Modern browser with input or textarea. @@ -110,8 +110,7 @@ export function getSelection(input) { * -@offsets Object of same form that is returned from get* */ export function setSelection(input, offsets) { - var start = offsets.start; - var end = offsets.end; + let {start, end} = offsets; if (end === undefined) { end = start; } diff --git a/packages/react-dom/src/client/getNodeForCharacterOffset.js b/packages/react-dom/src/client/getNodeForCharacterOffset.js index 3fceffba7e..4ebc3451e3 100644 --- a/packages/react-dom/src/client/getNodeForCharacterOffset.js +++ b/packages/react-dom/src/client/getNodeForCharacterOffset.js @@ -44,9 +44,9 @@ function getSiblingNode(node) { * @return {?object} */ function getNodeForCharacterOffset(root, offset) { - var node = getLeafNode(root); - var nodeStart = 0; - var nodeEnd = 0; + let node = getLeafNode(root); + let nodeStart = 0; + let nodeEnd = 0; while (node) { if (node.nodeType === TEXT_NODE) { diff --git a/packages/react-dom/src/client/getTextContentAccessor.js b/packages/react-dom/src/client/getTextContentAccessor.js index d58a428f71..0575925bc0 100644 --- a/packages/react-dom/src/client/getTextContentAccessor.js +++ b/packages/react-dom/src/client/getTextContentAccessor.js @@ -7,7 +7,7 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -var contentKey = null; +let contentKey = null; /** * Gets the key used to access text content on a DOM node. diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js index 124855411b..55ee638654 100644 --- a/packages/react-dom/src/client/inputValueTracking.js +++ b/packages/react-dom/src/client/inputValueTracking.js @@ -16,8 +16,8 @@ type WrapperState = {_valueTracker: ?ValueTracker}; type ElementWithValueTracker = HTMLInputElement & WrapperState; function isCheckable(elem: HTMLInputElement) { - var type = elem.type; - var nodeName = elem.nodeName; + const type = elem.type; + const nodeName = elem.nodeName; return ( nodeName && nodeName.toLowerCase() === 'input' && @@ -34,7 +34,7 @@ function detachTracker(node: ElementWithValueTracker) { } function getValueFromNode(node: HTMLInputElement): string { - var value = ''; + let value = ''; if (!node) { return value; } @@ -49,13 +49,13 @@ function getValueFromNode(node: HTMLInputElement): string { } function trackValueOnNode(node: any): ?ValueTracker { - var valueField = isCheckable(node) ? 'checked' : 'value'; - var descriptor = Object.getOwnPropertyDescriptor( + const valueField = isCheckable(node) ? 'checked' : 'value'; + const descriptor = Object.getOwnPropertyDescriptor( node.constructor.prototype, valueField, ); - var currentValue = '' + node[valueField]; + let currentValue = '' + node[valueField]; // if someone has already defined a value or Safari, then bail // and don't track value will cause over reporting of changes, @@ -81,7 +81,7 @@ function trackValueOnNode(node: any): ?ValueTracker { }, }); - var tracker = { + const tracker = { getValue() { return currentValue; }, @@ -115,15 +115,15 @@ export function updateValueIfChanged(node: ElementWithValueTracker) { return false; } - var tracker = getTracker(node); + const tracker = getTracker(node); // if there is no tracker at this point it's unlikely // that trying again will succeed if (!tracker) { return true; } - var lastValue = tracker.getValue(); - var nextValue = getValueFromNode(node); + const lastValue = tracker.getValue(); + const nextValue = getValueFromNode(node); if (nextValue !== lastValue) { tracker.setValue(nextValue); return true; @@ -132,7 +132,7 @@ export function updateValueIfChanged(node: ElementWithValueTracker) { } export function stopTracking(node: ElementWithValueTracker) { - var tracker = getTracker(node); + const tracker = getTracker(node); if (tracker) { tracker.stopTracking(); } diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js index cc6d57f3b3..9e698831be 100644 --- a/packages/react-dom/src/client/setInnerHTML.js +++ b/packages/react-dom/src/client/setInnerHTML.js @@ -10,7 +10,7 @@ import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction'; // SVG temp container for IE lacking innerHTML -var reusableSVGContainer; +let reusableSVGContainer; /** * Set the innerHTML property of a node @@ -19,15 +19,16 @@ var reusableSVGContainer; * @param {string} html * @internal */ -var setInnerHTML = createMicrosoftUnsafeLocalFunction(function(node, html) { +const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(node, html) { // IE does not have innerHTML for SVG nodes, so instead we inject the // new markup in a temp node and then move the child nodes across into // the target node + if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) { reusableSVGContainer = reusableSVGContainer || document.createElement('div'); reusableSVGContainer.innerHTML = '' + html + ''; - var svgNode = reusableSVGContainer.firstChild; + const svgNode = reusableSVGContainer.firstChild; while (node.firstChild) { node.removeChild(node.firstChild); } diff --git a/packages/react-dom/src/client/setTextContent.js b/packages/react-dom/src/client/setTextContent.js index fbec3aa442..cc246a52eb 100644 --- a/packages/react-dom/src/client/setTextContent.js +++ b/packages/react-dom/src/client/setTextContent.js @@ -23,7 +23,7 @@ import {TEXT_NODE} from '../shared/HTMLNodeType'; */ var setTextContent = function(node, text) { if (text) { - var firstChild = node.firstChild; + let firstChild = node.firstChild; if ( firstChild && diff --git a/packages/react-dom/src/client/validateDOMNesting.js b/packages/react-dom/src/client/validateDOMNesting.js index 5d53cb752b..a368abe95e 100644 --- a/packages/react-dom/src/client/validateDOMNesting.js +++ b/packages/react-dom/src/client/validateDOMNesting.js @@ -11,7 +11,7 @@ import warning from 'fbjs/lib/warning'; import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber'; -var {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber; +const {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber; var validateDOMNesting = emptyFunction; if (__DEV__) { @@ -406,8 +406,8 @@ if (__DEV__) { validateDOMNesting = function(childTag, childText, ancestorInfo) { ancestorInfo = ancestorInfo || emptyAncestorInfo; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; + const parentInfo = ancestorInfo.current; + const parentTag = parentInfo && parentInfo.tag; if (childText != null) { warning( @@ -417,29 +417,29 @@ if (__DEV__) { childTag = '#text'; } - var invalidParent = isTagValidWithParent(childTag, parentTag) + const invalidParent = isTagValidWithParent(childTag, parentTag) ? null : parentInfo; - var invalidAncestor = invalidParent + const invalidAncestor = invalidParent ? null : findInvalidAncestorForTag(childTag, ancestorInfo); - var invalidParentOrAncestor = invalidParent || invalidAncestor; + const invalidParentOrAncestor = invalidParent || invalidAncestor; if (!invalidParentOrAncestor) { return; } - var ancestorTag = invalidParentOrAncestor.tag; - var addendum = getCurrentFiberStackAddendum(); + const ancestorTag = invalidParentOrAncestor.tag; + const addendum = getCurrentFiberStackAddendum(); - var warnKey = + const warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag + '|' + addendum; if (didWarn[warnKey]) { return; } didWarn[warnKey] = true; - var tagDisplayName = childTag; - var whitespaceInfo = ''; + let tagDisplayName = childTag; + let whitespaceInfo = ''; if (childTag === '#text') { if (/\S/.test(childText)) { tagDisplayName = 'Text nodes'; @@ -454,7 +454,7 @@ if (__DEV__) { } if (invalidParent) { - var info = ''; + let info = ''; if (ancestorTag === 'table' && childTag === 'tr') { info += ' Add a to your code to match the DOM tree generated by ' + @@ -487,8 +487,8 @@ if (__DEV__) { // For testing validateDOMNesting.isTagValidInContext = function(tag, ancestorInfo) { ancestorInfo = ancestorInfo || emptyAncestorInfo; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; + const parentInfo = ancestorInfo.current; + const parentTag = parentInfo && parentInfo.tag; return ( isTagValidWithParent(tag, parentTag) && !findInvalidAncestorForTag(tag, ancestorInfo)