feat: support custom elements in React 16

Author: bschlenk

lib/attributes-to-props.js

@@ -15,8 +15,7 @@ DOMProperty.injection.injectDOMPropertyConfig(
  * @param  {Object} attributes - The attributes.
  * @return {Object}            - The props.
  */
-function attributesToProps(attributes) {
-  attributes = attributes || {};
+function attributesToProps(attributes = {}) {
   var props = {};
   var propertyName;
   var propertyValue;
@@ -49,6 +48,8 @@ function attributesToProps(attributes) {
     reactProperty = config.svg[propertyName];
     if (reactProperty) {
       props[reactProperty] = propertyValue;
+    } else if (utilities.reactSupportsUnknownAttributes()) {
+      props[propertyName] = propertyValue;
     }
   }
 

lib/dom-to-react.js

@@ -1,5 +1,6 @@
 var React = require('react');
 var attributesToProps = require('./attributes-to-props');
+var utilities = require('./utilities');
 
 /**
  * Converts DOM nodes to React elements.
@@ -41,8 +42,12 @@ function domToReact(nodes, options) {
       continue;
     }
 
-    // update values
-    props = attributesToProps(node.attribs);
+    props = node.attribs;
+    if (!shouldPassAttributesUnaltered(node)) {
+      // update values
+      props = attributesToProps(node.attribs);
+    }
+
     children = null;
 
     // node type for <script> is "script"
@@ -83,4 +88,12 @@ function domToReact(nodes, options) {
   return result.length === 1 ? result[0] : result;
 }
 
+function shouldPassAttributesUnaltered(node) {
+  return (
+    utilities.reactSupportsUnknownAttributes() &&
+    node.type === 'tag' &&
+    utilities.isCustomComponent(node.name, node.attribs)
+  );
+}
+
 module.exports = domToReact;

lib/utilities.js

@@ -1,3 +1,4 @@
+var React = require('react');
 var hyphenPatternRegex = /-([a-z])/g;
 
 /**
@@ -61,7 +62,52 @@ function invertObject(obj, override) {
   return result;
 }
 
+/**
+ * Check if a given tag is a custom component.
+ *
+ * @see https://github.com/facebook/react/blob/master/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}
+ */
+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;
+  }
+}
+
+/**
+ * Check if the installed React version supports setting unknown attributes
+ * on elements.
+ *
+ * @return {boolean}
+ */
+function reactSupportsUnknownAttributes() {
+  const majorStr = React.version.split('.')[0];
+  const major = parseInt(majorStr);
+  return major >= 16;
+}
+
 module.exports = {
   camelCase: camelCase,
-  invertObject: invertObject
+  invertObject: invertObject,
+  isCustomComponent: isCustomComponent,
+  reactSupportsUnknownAttributes: reactSupportsUnknownAttributes
 };

test/attributes-to-props.js

@@ -1,7 +1,17 @@
+const React = require('react');
 const assert = require('assert');
 const attributesToProps = require('../lib/attributes-to-props');
 
 describe('attributesToProps', () => {
+  let actualReactVersion;
+  beforeEach(() => {
+    actualReactVersion = React.version;
+  });
+
+  afterEach(() => {
+    React.version = actualReactVersion;
+  });
+
   describe('HTML DOM', () => {
     it('converts attributes to React props', () => {
       assert.deepEqual(
@@ -108,6 +118,16 @@ 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', () => {
@@ -134,22 +154,32 @@ describe('attributesToProps', () => {
       );
     });
 
-    it('does not convert incorrectly capitalized properties', () => {
+    it('includes but does not convert incorrectly capitalized properties', () => {
       assert.deepEqual(
         attributesToProps({
           'XLINK:HREF': '#',
           ychannelselector: 'G',
           ZoomAndPan: 'disable'
         }),
         {
-          /*
-          xlinkHref: '#',
-          yChannelSelector: 'G',
-          zoomAndPan: 'disable'
-          */
+          'XLINK:HREF': '#',
+          ychannelselector: 'G',
+          ZoomAndPan: 'disable'
         }
       );
     });
+
+    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', () => {

test/dom-to-react.js

@@ -5,6 +5,15 @@ const domToReact = require('../lib/dom-to-react');
 const { data, render } = require('./helpers/');
 
 describe('dom-to-react parser', () => {
+  let actualReactVersion;
+  beforeEach(() => {
+    actualReactVersion = React.version;
+  });
+
+  afterEach(() => {
+    React.version = actualReactVersion;
+  });
+
   it('converts single DOM node to React', () => {
     const html = data.html.single;
     const reactElement = domToReact(htmlToDOM(html));
@@ -131,4 +140,32 @@ describe('dom-to-react parser', () => {
       React.createElement('svg', { viewBox: '0 0 512 512', id: 'foo' }, 'Inner')
     );
   });
+
+  it('passes props unaltered for custom elements', () => {
+    const html = data.html.customElement;
+    const reactElement = domToReact(htmlToDOM(html));
+
+    assert.deepEqual(
+      reactElement,
+      React.createElement(
+        'custom-button',
+        {
+          class: 'myClass',
+          'custom-attribute': 'value'
+        },
+        null
+      )
+    );
+  });
+
+  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));
+
+    assert.deepEqual(
+      reactElement,
+      React.createElement('custom-button', { className: 'myClass' }, null)
+    );
+  });
 });

test/helpers/data.json

@@ -11,7 +11,8 @@
     "img": "<img src=\"http://stat.ic/img.jpg\" alt=\"Image\"/>",
     "void": "<link/><meta/><img/><br/><hr/><input/>",
     "comment": "<!-- comment -->",
-    "doctype": "<!DOCTYPE html>"
+    "doctype": "<!DOCTYPE html>",
+    "customElement": "<custom-button class=\"myClass\" custom-attribute=\"value\"></custom-button>"
   },
   "svg": {
     "simple": "<svg viewBox=\"0 0 512 512\" id=\"foo\">Inner</svg>",

test/utilities.js

@@ -1,5 +1,11 @@
+const React = require('react');
 const assert = require('assert');
-const { camelCase, invertObject } = require('../lib/utilities');
+const {
+  camelCase,
+  invertObject,
+  isCustomComponent,
+  reactSupportsUnknownAttributes
+} = require('../lib/utilities');
 
 describe('utilties.camelCase', () => {
   [undefined, null, 1337, {}, []].forEach(value => {
@@ -80,4 +86,44 @@ 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.reactSupportsUnknownAttributes', () => {
+    let actualVersion;
+    beforeEach(() => {
+      actualVersion = React.version;
+    });
+
+    afterEach(() => {
+      React.version = actualVersion;
+    });
+
+    it('should return true for React 16 and above', () => {
+      React.version = '16.6.0';
+      assert.equal(reactSupportsUnknownAttributes(), true);
+    });
+
+    it('should return false for React < 16', () => {
+      React.version = '15.1.2';
+      assert.equal(reactSupportsUnknownAttributes(), false);
+
+      React.version = '0.14';
+      assert.equal(reactSupportsUnknownAttributes(), false);
+    });
+  });
 });