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

Author: raphamorim

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<any, any>,
@@ -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<any, any>,
   ): 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);
     }

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;

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;
   }

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) {

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.

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();
   }

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 = '<svg>' + html + '</svg>';
-    var svgNode = reusableSVGContainer.firstChild;
+    const svgNode = reusableSVGContainer.firstChild;
     while (node.firstChild) {
       node.removeChild(node.firstChild);
     }

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 &&

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 <tbody> 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)