pass data attributes through as data prop

Author: jdeal

src/createElementPortal.js

@@ -2,6 +2,31 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import invariant from 'invariant';
 
+const reDataAttr = /^data\-(.+)$/;
+
+export const getNodeData = (node) => {
+  // fallback
+  if (!node.datset) {
+    const result = {};
+    const attributes = node.attributes;
+    for (let i = 0; i < attributes.length; i++) {
+      const attr = attributes[i];
+      const match = attr.name.match(reDataAttr);
+      if (match) {
+        const key = match[1];
+        result[key] = attr.value;
+      }
+    }
+    return result;
+  }
+
+  return Object.keys(node.dataset)
+    .reduce((result, key) => {
+      result[key] = node.dataset[key];
+      return result;
+    }, {});
+};
+
 const createElementPortal = (Provider, contextKeys) => {
 
   invariant(
@@ -63,7 +88,7 @@ const createElementPortal = (Provider, contextKeys) => {
         const View = this.props.view;
 
         const children = View ?
-          <View domNode={node}/> :
+          <View domNode={node} data={getNodeData(node)}/> :
           React.Children.only(this.props.children);
 
         ReactDOM.render(

test/ElementPortal.js

@@ -85,6 +85,35 @@ test('can render to ElementPortal using selector with custom component', t => {
   t.is(elements[1].textContent, 'Hello Mary');
 });
 
+test('can pass along data attributes', t => {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  const headerId = uniqueId();
+  const appId = uniqueId();
+  node.innerHTML = `
+    <div id="${headerId}" data-name="Joe">
+    </div>
+    <div id="${appId}">
+    </div>
+  `;
+  const Greeting = ({data}) => (<div>Hello {data.name}</div>);
+  render(
+    <div>
+      <ElementPortal id={headerId} view={Greeting}/>
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(document.getElementById(headerId).textContent, 'Hello Joe');
+  // Another render should get same data.
+  render(
+    <div>
+      <ElementPortal id={headerId} view={Greeting}/>
+    </div>,
+    document.getElementById(appId)
+  );
+  t.is(document.getElementById(headerId).textContent, 'Hello Joe');
+});
+
 test('erases classes and styles', t => {
   const node = document.createElement('div');
   document.body.appendChild(node);