Merge pull request #1003 from ssi02014/refac/utilities

refactor(utilities): refactoring Utilities constants

Author: remarkablemark

lib/utilities.js

@@ -13,14 +13,12 @@ function invertObject(obj, override) {
     throw new TypeError('First argument must be an object');
   }
 
-  var key;
-  var value;
   var isOverridePresent = typeof override === 'function';
   var overrides = {};
   var result = {};
 
-  for (key in obj) {
-    value = obj[key];
+  for (var key in obj) {
+    var value = obj[key];
 
     if (isOverridePresent) {
       overrides = override(key, value);
@@ -47,31 +45,34 @@ function invertObject(obj, override) {
  * @param {object} props - The props being passed to the element.
  * @returns - Whether tag is custom component.
  */
+
+var RESERVED_SVG_MATHML_ELEMENTS = new Set([
+  'annotation-xml',
+  'color-profile',
+  'font-face',
+  'font-face-src',
+  'font-face-uri',
+  'font-face-format',
+  'font-face-name',
+  'missing-glyph'
+]);
+
 function isCustomComponent(tagName, props) {
   if (tagName.indexOf('-') === -1) {
     return props && typeof props.is === 'string';
   }
-
-  switch (tagName) {
-    // These are reserved SVG and MathML elements.
-    // We don't mind this whitelist too much because we expect it to never grow.
-    // The alternative is to track the namespace in a few places which is convoluted.
-    // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
-    case 'annotation-xml':
-    case 'color-profile':
-    case 'font-face':
-    case 'font-face-src':
-    case 'font-face-uri':
-    case 'font-face-format':
-    case 'font-face-name':
-    case 'missing-glyph':
-      return false;
-    default:
-      return true;
+  // These are reserved SVG and MathML elements.
+  // We don't mind this whitelist too much because we expect it to never grow.
+  // The alternative is to track the namespace in a few places which is convoluted.
+  // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
+  if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
+    return false;
   }
+  return true;
 }
 
-var styleToJSOptions = { reactCompat: true };
+// styleToJSOptions
+var STYLE_TO_JS_OPTIONS = { reactCompat: true };
 
 /**
  * Sets style prop.
@@ -84,7 +85,7 @@ function setStyleProp(style, props) {
     return;
   }
   try {
-    props.style = styleToJS(style, styleToJSOptions);
+    props.style = styleToJS(style, STYLE_TO_JS_OPTIONS);
   } catch (err) {
     props.style = {};
   }
@@ -98,7 +99,7 @@ var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
 
 // Taken from
 // https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
-var elementsWithNoTextChildren = new Set([
+var ELEMENTS_WITH_NO_TEXT_CHILDREN = new Set([
   'tr',
   'tbody',
   'thead',
@@ -117,7 +118,7 @@ var elementsWithNoTextChildren = new Set([
  * @returns - Whether node can contain text nodes.
  */
 function canTextBeChildOfNode(node) {
-  return !elementsWithNoTextChildren.has(node.name);
+  return !ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
 }
 
 function returnFirstArg(arg) {
@@ -126,10 +127,10 @@ function returnFirstArg(arg) {
 
 module.exports = {
   PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
+  ELEMENTS_WITH_NO_TEXT_CHILDREN: ELEMENTS_WITH_NO_TEXT_CHILDREN,
   invertObject: invertObject,
   isCustomComponent: isCustomComponent,
   setStyleProp: setStyleProp,
   canTextBeChildOfNode: canTextBeChildOfNode,
-  elementsWithNoTextChildren: elementsWithNoTextChildren,
   returnFirstArg: returnFirstArg
 };

test/utilities.test.js

@@ -1,10 +1,10 @@
 const React = require('react');
 const {
   PRESERVE_CUSTOM_ATTRIBUTES,
+  ELEMENTS_WITH_NO_TEXT_CHILDREN,
   invertObject,
   isCustomComponent,
   setStyleProp,
-  elementsWithNoTextChildren,
   canTextBeChildOfNode
 } = require('../lib/utilities');
 
@@ -141,7 +141,7 @@ describe('setStyleProp', () => {
 });
 
 describe('canTextBeChildOfNode', () => {
-  it.each(Array.from(elementsWithNoTextChildren))(
+  it.each(Array.from(ELEMENTS_WITH_NO_TEXT_CHILDREN))(
     'returns false since text node cannot be child of %s',
     nodeName => {
       const node = {