refactor(utilities): memoize constant PRESERVE_CUSTOM_ATTRIBUTES

Replace `utilities.reactSupportsUnknownAttributes()` with constant
`utilities.PRESERVE_CUSTOM_ATTRIBUTES` to optimize performance.

And update tests.

Author: remarkablemark

lib/attributes-to-props.js

@@ -49,7 +49,7 @@ function attributesToProps(attributes) {
     reactProperty = config.svg[propertyName];
     if (reactProperty) {
       props[reactProperty] = propertyValue;
-    } else if (utilities.reactSupportsUnknownAttributes()) {
+    } else if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
       props[propertyName] = propertyValue;
     }
   }

lib/dom-to-react.js

@@ -90,7 +90,7 @@ function domToReact(nodes, options) {
 
 function shouldPassAttributesUnaltered(node) {
   return (
-    utilities.reactSupportsUnknownAttributes() &&
+    utilities.PRESERVE_CUSTOM_ATTRIBUTES &&
     node.type === 'tag' &&
     utilities.isCustomComponent(node.name, node.attribs)
   );

lib/utilities.js

@@ -65,7 +65,8 @@ function invertObject(obj, override) {
 /**
  * Check if a given tag is a custom component.
  *
- * @see https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/isCustomComponent.js
+ * @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
+ *
  * @param {string} tagName - The name of the html tag.
  * @param {Object} props   - The props being passed to the element.
  * @return {boolean}
@@ -74,6 +75,7 @@ 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.
@@ -94,20 +96,14 @@ function isCustomComponent(tagName, props) {
 }
 
 /**
- * Check if the installed React version supports setting unknown attributes
- * on elements.
- *
- * @return {boolean}
+ * @constant {Boolean}
+ * @see {@link https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html}
  */
-function reactSupportsUnknownAttributes() {
-  const majorStr = React.version.split('.')[0];
-  const major = parseInt(majorStr);
-  return major >= 16;
-}
+var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
 
 module.exports = {
+  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
   camelCase: camelCase,
   invertObject: invertObject,
-  isCustomComponent: isCustomComponent,
-  reactSupportsUnknownAttributes: reactSupportsUnknownAttributes
+  isCustomComponent: isCustomComponent
 };

test/attributes-to-props.js

@@ -1,17 +1,8 @@
-const React = require('react');
 const assert = require('assert');
 const attributesToProps = require('../lib/attributes-to-props');
+const utilities = require('../lib/utilities');
 
 describe('attributesToProps', () => {
-  let actualReactVersion;
-  beforeEach(() => {
-    actualReactVersion = React.version;
-  });
-
-  afterEach(() => {
-    React.version = actualReactVersion;
-  });
-
   describe('HTML DOM', () => {
     it('converts attributes to React props', () => {
       assert.deepEqual(
@@ -118,16 +109,6 @@ describe('attributesToProps', () => {
         }
       );
     });
-
-    it('does not include unknown attributes for older react versions', () => {
-      React.version = '0.14';
-      assert.deepEqual(
-        attributesToProps({
-          unknownAttribute: 'someValue'
-        }),
-        {}
-      );
-    });
   });
 
   describe('SVG DOM properties', () => {
@@ -168,18 +149,6 @@ describe('attributesToProps', () => {
         }
       );
     });
-
-    it('does not include incorrectly capitalized properties on older React versions', () => {
-      React.version = '0.14';
-      assert.deepEqual(
-        attributesToProps({
-          'XLINK:HREF': '#',
-          ychannelselector: 'G',
-          ZoomAndPan: 'disable'
-        }),
-        {}
-      );
-    });
   });
 
   describe('style', () => {
@@ -249,4 +218,36 @@ describe('attributesToProps', () => {
       );
     });
   });
+
+  describe('when utilties.PRESERVE_CUSTOM_ATTRIBUTES=false', () => {
+    const { PRESERVE_CUSTOM_ATTRIBUTES } = utilities;
+
+    before(() => {
+      utilities.PRESERVE_CUSTOM_ATTRIBUTES = false;
+    });
+
+    after(() => {
+      utilities.PRESERVE_CUSTOM_ATTRIBUTES = PRESERVE_CUSTOM_ATTRIBUTES;
+    });
+
+    it('does not include unknown attributes', () => {
+      assert.deepEqual(
+        attributesToProps({
+          unknownAttribute: 'someValue'
+        }),
+        {}
+      );
+    });
+
+    it('does not include incorrectly capitalized properties', () => {
+      assert.deepEqual(
+        attributesToProps({
+          'XLINK:HREF': '#',
+          ychannelselector: 'G',
+          ZoomAndPan: 'disable'
+        }),
+        {}
+      );
+    });
+  });
 });

test/dom-to-react.js

@@ -3,6 +3,7 @@ const React = require('react');
 const htmlToDOM = require('html-dom-parser');
 const domToReact = require('../lib/dom-to-react');
 const { data, render } = require('./helpers/');
+const utilities = require('../lib/utilities');
 
 describe('dom-to-react parser', () => {
   let actualReactVersion;
@@ -141,7 +142,7 @@ describe('dom-to-react parser', () => {
     );
   });
 
-  it('passes props unaltered for custom elements', () => {
+  it('does not modify attributes on custom elements', () => {
     const html = data.html.customElement;
     const reactElement = domToReact(htmlToDOM(html));
 
@@ -158,14 +159,25 @@ describe('dom-to-react parser', () => {
     );
   });
 
-  it('handles custom element the same as everything else with older reacts', () => {
-    React.version = '0.14';
-    const html = data.html.customElement;
-    const reactElement = domToReact(htmlToDOM(html));
+  describe('when React <16', () => {
+    const { PRESERVE_CUSTOM_ATTRIBUTES } = utilities;
 
-    assert.deepEqual(
-      reactElement,
-      React.createElement('custom-button', { className: 'myClass' }, null)
-    );
+    before(() => {
+      utilities.PRESERVE_CUSTOM_ATTRIBUTES = false;
+    });
+
+    after(() => {
+      utilities.PRESERVE_CUSTOM_ATTRIBUTES = PRESERVE_CUSTOM_ATTRIBUTES;
+    });
+
+    it('modifies attributes on custom elements', () => {
+      const html = data.html.customElement;
+      const reactElement = domToReact(htmlToDOM(html));
+
+      assert.deepEqual(
+        reactElement,
+        React.createElement('custom-button', { className: 'myClass' }, null)
+      );
+    });
   });
 });

test/utilities.js

@@ -1,10 +1,10 @@
-const React = require('react');
 const assert = require('assert');
+const React = require('react');
 const {
+  PRESERVE_CUSTOM_ATTRIBUTES,
   camelCase,
   invertObject,
-  isCustomComponent,
-  reactSupportsUnknownAttributes
+  isCustomComponent
 } = require('../lib/utilities');
 
 describe('utilties.camelCase', () => {
@@ -86,44 +86,28 @@ describe('utilities.invertObject', () => {
       );
     });
   });
+});
 
-  describe('utilities.isCustomComponent', () => {
-    it('returns true if the tag contains a hyphen and is not in the whitelist', () => {
-      assert.equal(isCustomComponent('my-custom-element'), true);
-    });
-
-    it('returns false if the tag is in the whitelist', () => {
-      assert.equal(isCustomComponent('annotation-xml'), false);
-      assert.equal(isCustomComponent('color-profile'), false);
-      assert.equal(isCustomComponent('font-face'), false);
-    });
-
-    it('returns true if the props contains an `is` key', () => {
-      assert.equal(isCustomComponent('button', { is: 'custom-button' }), true);
-    });
+describe('utilities.isCustomComponent', () => {
+  it('returns true if the tag contains a hyphen and is not in the whitelist', () => {
+    assert.equal(isCustomComponent('my-custom-element'), true);
   });
 
-  describe('utilities.reactSupportsUnknownAttributes', () => {
-    let actualVersion;
-    beforeEach(() => {
-      actualVersion = React.version;
-    });
-
-    afterEach(() => {
-      React.version = actualVersion;
-    });
+  it('returns false if the tag is in the whitelist', () => {
+    assert.equal(isCustomComponent('annotation-xml'), false);
+    assert.equal(isCustomComponent('color-profile'), false);
+    assert.equal(isCustomComponent('font-face'), false);
+  });
 
-    it('should return true for React 16 and above', () => {
-      React.version = '16.6.0';
-      assert.equal(reactSupportsUnknownAttributes(), true);
-    });
+  it('returns true if the props contains an `is` key', () => {
+    assert.equal(isCustomComponent('button', { is: 'custom-button' }), true);
+  });
+});
 
-    it('should return false for React < 16', () => {
-      React.version = '15.1.2';
-      assert.equal(reactSupportsUnknownAttributes(), false);
+describe('utilities.PRESERVE_CUSTOM_ATTRIBUTES', () => {
+  const isReact16AndUp = Number(React.version.match(/^\d./)[0]) >= 16;
 
-      React.version = '0.14';
-      assert.equal(reactSupportsUnknownAttributes(), false);
-    });
+  it(`is ${isReact16AndUp} when React.version="${React.version}"`, () => {
+    assert.equal(PRESERVE_CUSTOM_ATTRIBUTES, isReact16AndUp);
   });
 });