Make nodeType into constant for readability and reuse (facebook#9113)

* Make nodeType into constant for readability and reuse

* Fix eslint line length warning

* Delete unused nodeType values

* Destructure HTMLNodeType constant

* Make nodeType into constant for readability and reuse

* Fix eslint line length warning

* Delete unused nodeType values

* Destructure HTMLNodeType constant

* Fix test

* Format using prettier

Author: Sung Won Cho

eslint-rules/__tests__/no-primitive-constructors-test.js

@@ -34,8 +34,10 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
       code: 'String(obj)',
       errors: [
         {
-          message: 'Do not use the String constructor. To cast a value to a string, ' +
-            'concat it with the empty string (unless it\'s a symbol, which has different semantics): \'\' + value',
+          message:
+            'Do not use the String constructor. ' +
+            'To cast a value to a string, concat it with the empty string ' +
+            '(unless it\'s a symbol, which has different semantics): \'\' + value',
         },
       ],
     },

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -30,6 +30,11 @@ var ReactInstanceMap = require('ReactInstanceMap');
 var ReactPortal = require('ReactPortal');
 var {isValidElement} = require('react');
 var {injectInternals} = require('ReactFiberDevToolsHook');
+var {
+  ELEMENT_NODE,
+  DOCUMENT_NODE,
+  DOCUMENT_FRAGMENT_NODE,
+} = require('HTMLNodeType');
 
 var findDOMNode = require('findDOMNode');
 var invariant = require('fbjs/lib/invariant');
@@ -52,8 +57,6 @@ if (__DEV__) {
   var {updatedAncestorInfo} = validateDOMNesting;
 }
 
-const DOCUMENT_NODE = 9;
-
 ReactDOMInjection.inject();
 ReactControlledComponent.injection.injectFiberControlledHostComponent(
   ReactDOMFiberComponent,
@@ -83,10 +86,6 @@ type HostContext = HostContextDev | HostContextProd;
 let eventsEnabled: ?boolean = null;
 let selectionInformation: ?mixed = null;
 
-var ELEMENT_NODE_TYPE = 1;
-var DOC_NODE_TYPE = 9;
-var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
-
 /**
  * True if the supplied DOM node is a valid node element.
  *
@@ -96,9 +95,9 @@ var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
  */
 function isValidContainer(node) {
   return !!(node &&
-    (node.nodeType === ELEMENT_NODE_TYPE ||
-      node.nodeType === DOC_NODE_TYPE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE));
+    (node.nodeType === ELEMENT_NODE ||
+      node.nodeType === DOCUMENT_NODE ||
+      node.nodeType === DOCUMENT_FRAGMENT_NODE));
 }
 
 function validateContainer(container) {
@@ -112,7 +111,7 @@ function getReactRootElementInContainer(container: any) {
     return null;
   }
 
-  if (container.nodeType === DOC_NODE_TYPE) {
+  if (container.nodeType === DOCUMENT_NODE) {
     return container.documentElement;
   } else {
     return container.firstChild;

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -25,6 +25,7 @@ var ReactDOMFiberOption = require('ReactDOMFiberOption');
 var ReactDOMFiberSelect = require('ReactDOMFiberSelect');
 var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea');
 var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber');
+var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType');
 
 var emptyFunction = require('fbjs/lib/emptyFunction');
 var invariant = require('fbjs/lib/invariant');
@@ -63,9 +64,6 @@ var {
   mathml: MATH_NAMESPACE,
 } = DOMNamespaces;
 
-// Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE).
-var DOC_FRAGMENT_TYPE = 11;
-
 function getDeclarationErrorAddendum() {
   if (__DEV__) {
     var ownerName = getCurrentFiberOwnerName();
@@ -144,7 +142,8 @@ if (__DEV__) {
 }
 
 function ensureListeningTo(rootContainerElement, registrationName) {
-  var isDocumentFragment = rootContainerElement.nodeType === DOC_FRAGMENT_TYPE;
+  var isDocumentFragment = rootContainerElement.nodeType ===
+    DOCUMENT_FRAGMENT_NODE;
   var doc = isDocumentFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;

src/renderers/dom/shared/HTMLNodeType.js

@@ -0,0 +1,26 @@
+/**
+ * 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 HTMLNodeType
+ */
+
+'use strict';
+
+/**
+ * HTML nodeType values that represent the type of the node
+ */
+
+var HTMLNodeType = {
+  ELEMENT_NODE: 1,
+  TEXT_NODE: 3,
+  COMMENT_NODE: 8,
+  DOCUMENT_NODE: 9,
+  DOCUMENT_FRAGMENT_NODE: 11,
+};
+
+module.exports = HTMLNodeType;

src/renderers/dom/shared/ReactDOMComponentTree.js

@@ -14,6 +14,7 @@
 var DOMProperty = require('DOMProperty');
 var ReactDOMComponentFlags = require('ReactDOMComponentFlags');
 var {HostComponent, HostText} = require('ReactTypeOfWork');
+var {ELEMENT_NODE, COMMENT_NODE} = require('HTMLNodeType');
 
 var invariant = require('fbjs/lib/invariant');
 
@@ -30,11 +31,12 @@ var internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
  * Check if a given node should be cached.
  */
 function shouldPrecacheNode(node, nodeID) {
-  return (node.nodeType === 1 &&
+  return (node.nodeType === ELEMENT_NODE &&
     node.getAttribute(ATTR_NAME) === '' + nodeID) ||
-    (node.nodeType === 8 &&
+    (node.nodeType === COMMENT_NODE &&
       node.nodeValue === ' react-text: ' + nodeID + ' ') ||
-    (node.nodeType === 8 && node.nodeValue === ' react-empty: ' + nodeID + ' ');
+    (node.nodeType === COMMENT_NODE &&
+      node.nodeValue === ' react-empty: ' + nodeID + ' ');
 }
 
 /**

src/renderers/dom/shared/ReactInputSelection.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var ReactDOMSelection = require('ReactDOMSelection');
+var {ELEMENT_NODE} = require('HTMLNodeType');
 
 var containsNode = require('fbjs/lib/containsNode');
 var focusNode = require('fbjs/lib/focusNode');
@@ -64,7 +65,7 @@ var ReactInputSelection = {
       const ancestors = [];
       let ancestor = priorFocusedElem;
       while ((ancestor = ancestor.parentNode)) {
-        if (ancestor.nodeType === 1) {
+        if (ancestor.nodeType === ELEMENT_NODE) {
           ancestors.push({
             element: ancestor,
             left: ancestor.scrollLeft,

src/renderers/dom/shared/eventPlugins/SelectEventPlugin.js

@@ -17,6 +17,7 @@ var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var ReactInputSelection = require('ReactInputSelection');
 var SyntheticEvent = require('SyntheticEvent');
+var {DOCUMENT_NODE} = require('HTMLNodeType');
 
 var getActiveElement = require('fbjs/lib/getActiveElement');
 var isTextInputElement = require('isTextInputElement');
@@ -148,7 +149,7 @@ var SelectEventPlugin = {
   ) {
     var doc = nativeEventTarget.window === nativeEventTarget
       ? nativeEventTarget.document
-      : nativeEventTarget.nodeType === 9
+      : nativeEventTarget.nodeType === DOCUMENT_NODE
           ? nativeEventTarget
           : nativeEventTarget.ownerDocument;
     if (!doc || !isListeningToAllDependencies('onSelect', doc)) {

src/renderers/dom/shared/findDOMNode.js

@@ -11,6 +11,7 @@
  */
 
 var ReactInstanceMap = require('ReactInstanceMap');
+var {ELEMENT_NODE} = require('HTMLNodeType');
 var {ReactCurrentOwner} = require('ReactGlobalSharedState');
 
 var getComponentName = require('getComponentName');
@@ -53,7 +54,7 @@ const findDOMNode = function(
   if (componentOrElement == null) {
     return null;
   }
-  if ((componentOrElement: any).nodeType === 1) {
+  if ((componentOrElement: any).nodeType === ELEMENT_NODE) {
     return (componentOrElement: any);
   }
 

src/renderers/dom/shared/setTextContent.js

@@ -14,6 +14,7 @@
 var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
 var setInnerHTML = require('setInnerHTML');
+var {TEXT_NODE} = require('HTMLNodeType');
 
 /**
  * Set the textContent property of a node, ensuring that whitespace is preserved
@@ -30,7 +31,9 @@ var setTextContent = function(node, text) {
     var firstChild = node.firstChild;
 
     if (
-      firstChild && firstChild === node.lastChild && firstChild.nodeType === 3
+      firstChild &&
+      firstChild === node.lastChild &&
+      firstChild.nodeType === TEXT_NODE
     ) {
       firstChild.nodeValue = text;
       return;
@@ -42,7 +45,7 @@ var setTextContent = function(node, text) {
 if (ExecutionEnvironment.canUseDOM) {
   if (!('textContent' in document.documentElement)) {
     setTextContent = function(node, text) {
-      if (node.nodeType === 3) {
+      if (node.nodeType === TEXT_NODE) {
         node.nodeValue = text;
         return;
       }

src/renderers/dom/shared/utils/getEventTarget.js

@@ -11,6 +11,8 @@
 
 'use strict';
 
+var {TEXT_NODE} = require('HTMLNodeType');
+
 /**
  * Gets the target node from a native browser event by accounting for
  * inconsistencies in browser DOM APIs.
@@ -28,7 +30,7 @@ function getEventTarget(nativeEvent) {
 
   // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
   // @see http://www.quirksmode.org/js/events_properties.html
-  return target.nodeType === 3 ? target.parentNode : target;
+  return target.nodeType === TEXT_NODE ? target.parentNode : target;
 }
 
 module.exports = getEventTarget;

src/renderers/dom/shared/utils/getNodeForCharacterOffset.js

@@ -11,6 +11,8 @@
 
 'use strict';
 
+var {TEXT_NODE} = require('HTMLNodeType');
+
 /**
  * Given any node return the first leaf node without children.
  *
@@ -53,7 +55,7 @@ function getNodeForCharacterOffset(root, offset) {
   var nodeEnd = 0;
 
   while (node) {
-    if (node.nodeType === 3) {
+    if (node.nodeType === TEXT_NODE) {
       nodeEnd = nodeStart + node.textContent.length;
 
       if (nodeStart <= offset && nodeEnd >= offset) {

src/renderers/dom/stack/client/DOMLazyTree.js

@@ -13,13 +13,10 @@
 
 var DOMNamespaces = require('DOMNamespaces');
 var setInnerHTML = require('setInnerHTML');
-
+var {DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE} = require('HTMLNodeType');
 var createMicrosoftUnsafeLocalFunction = require('createMicrosoftUnsafeLocalFunction');
 var setTextContent = require('setTextContent');
 
-var ELEMENT_NODE_TYPE = 1;
-var DOCUMENT_FRAGMENT_NODE_TYPE = 11;
-
 /**
  * In IE (8-11) and Edge, appending nodes with no children is dramatically
  * faster than appending a full subtree, so we essentially queue up the
@@ -63,8 +60,8 @@ var insertTreeBefore = createMicrosoftUnsafeLocalFunction(
     // <param> nodes immediately upon insertion into the DOM, so <object>
     // must also be populated prior to insertion into the DOM.
     if (
-      tree.node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE ||
-      (tree.node.nodeType === ELEMENT_NODE_TYPE &&
+      tree.node.nodeType === DOCUMENT_FRAGMENT_NODE ||
+      (tree.node.nodeType === ELEMENT_NODE &&
         tree.node.nodeName.toLowerCase() === 'object' &&
         (tree.node.namespaceURI == null ||
           tree.node.namespaceURI === DOMNamespaces.html))

src/renderers/dom/stack/client/ReactDOMComponent.js

@@ -30,6 +30,7 @@ var ReactDOMTextarea = require('ReactDOMTextarea');
 var ReactInstrumentation = require('ReactInstrumentation');
 var ReactMultiChild = require('ReactMultiChild');
 var ReactServerRenderingTransaction = require('ReactServerRenderingTransaction');
+var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType');
 
 var emptyFunction = require('fbjs/lib/emptyFunction');
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
@@ -55,9 +56,6 @@ var RESERVED_PROPS = {
   suppressContentEditableWarning: null,
 };
 
-// Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE).
-var DOC_FRAGMENT_TYPE = 11;
-
 function getDeclarationErrorAddendum(internalInstance) {
   if (internalInstance) {
     var owner = internalInstance._currentElement._owner || null;
@@ -139,7 +137,7 @@ function ensureListeningTo(inst, registrationName, transaction) {
   }
   var containerInfo = inst._hostContainerInfo;
   var isDocumentFragment = containerInfo._node &&
-    containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
+    containerInfo._node.nodeType === DOCUMENT_FRAGMENT_NODE;
   var doc = isDocumentFragment
     ? containerInfo._node
     : containerInfo._ownerDocument;

src/renderers/dom/stack/client/ReactDOMContainerInfo.js

@@ -12,15 +12,14 @@
 'use strict';
 
 var validateDOMNesting = require('validateDOMNesting');
-
-var DOC_NODE_TYPE = 9;
+var {DOCUMENT_NODE} = require('HTMLNodeType');
 
 function ReactDOMContainerInfo(topLevelWrapper, node) {
   var info = {
     _topLevelWrapper: topLevelWrapper,
     _idCounter: 1,
     _ownerDocument: node
-      ? node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument
+      ? node.nodeType === DOCUMENT_NODE ? node : node.ownerDocument
       : null,
     _node: node,
     _tag: node ? node.nodeName.toLowerCase() : null,

src/renderers/dom/stack/client/ReactDOMTextComponent.js

@@ -14,6 +14,7 @@
 var DOMChildrenOperations = require('DOMChildrenOperations');
 var DOMLazyTree = require('DOMLazyTree');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
+var {COMMENT_NODE} = require('HTMLNodeType');
 
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
 var invariant = require('fbjs/lib/invariant');
@@ -159,7 +160,9 @@ Object.assign(ReactDOMTextComponent.prototype, {
           'Missing closing comment for text component %s',
           this._domID,
         );
-        if (node.nodeType === 8 && node.nodeValue === ' /react-text ') {
+        if (
+          node.nodeType === COMMENT_NODE && node.nodeValue === ' /react-text '
+        ) {
           this._closingComment = node;
           break;
         }