Merge pull request #3 from vitorbal/unstable-render

Breaking: use `renderSubtreeIntoContainer` for passing context

Author: jdeal

.gitignore

@@ -25,7 +25,3 @@ coverage
 
 # Build directory
 /lib
-/react-redux-element-portal/lib
-/react-redux-element-portal/package.json
-/react-redux-element-portal/node_modules
-/test/helpers/ReduxElementPortal.js

.npmignore

@@ -14,6 +14,3 @@ coverage
 
 # Optional REPL history
 .node_repl_history
-
-# Sub packages
-/react-redux-element-portal

README.md

@@ -14,12 +14,6 @@ If you're making a shiny new React app where you use React everywhere, for every
 npm install react-element-portal --save
 ```
 
-To get an ElementPortal bound to Redux Provider, you can use `react-redux-element-portal`.
-
-```bash
-npm install react-redux-element-portal --save
-```
-
 ## Usage with vanilla React
 
 Let's say we get this from the server:
@@ -80,56 +74,41 @@ You can also use a selector instead of an id.
 </ElementPortal>
 ```
 
-## Passing context to your ElementPortal
-
-When we render outside your main tree, context will be lost. For example, if you use with Redux, the `store` context gets lost, so `connect` won't work on children of your `ElementPortal`. You can use `createElementPortal` to create a custom ElementPortal that passes along context.
-
-An example with Redux:
+## Additional features
+The `shouldReset` prop can be used to remove any classes and styles from the DOM node we are rendering to:
 
 ```js
-import { createElementPortal } from 'redux-element-portal';
-import { Provider } from 'react-redux';
-
-// Bind an ElementPortal to a Provider component and pass 'store' context into that provider.
-const ElementPortal = createElementPortal(Provider, ['store']);
-
-const UserMenu = ({user}) => (
+// All styles and classes from the node with id "header" will be cleared
+<ElementPortal id="header" shouldReset>
   <div>
-    <Menu>
-      <Label>{user.firstName}</Label>
-      <Items>
-        <Item>Upgrade</Item>
-        <Item>Settings</Item>
-        <Item>Support</Item>
-      </Items>
-    </Menu>
+    ...
   </div>
-);
+</ElementPortal>
+```
 
-const UserMenuContainer = connect(state => ({
-  user: state.user
-}))(UserMenu);
+`ElementPortal` also accepts an optional `view` prop that takes a component, to be rendered inside the portal:
 
-ReactDOM.render(
-  <Provider store={store}>
-    <div>
-      <ElementPortal id="user">
-        <UserMenuContainer/>
-      </ElementPortal>
-    </div>
-  </Provider>,
-  document.getElementById('app')
-);
+```js
+<ElementPortal id="header" view="CoolHeaderComponent" />
 ```
 
-Redux is just an example here. You can pass along any context with your own custom component like `Provider`. Look at the [source for Provider](https://github.com/reactjs/react-redux/blob/master/src/components/Provider.js) for reference. It's pretty simple. Just define some context that gets transferred from props to child context. Combine that with `createElementPortal` to customize your ElementPortal. If you want to use Redux _and_ some other custom context, just compose them together, creating your own Provider that internally also uses Redux's `Provider`.
+One advantage of using the `view` prop to specify a component is that any `data-` attributes from the DOM node the portal is rendering to will be passed along to our component as a `data` prop.
+For example, if the DOM node we are rendering to looks like this:
 
-## React Redux Element Portal
+```html
+<div id="header" data-user-id="26742" data-name="Joe">
+  ...
+</div>
+```
 
-For Redux, you don't actually have to use `createElementPortal` at all, because there's already an npm package you can use that does it for you.
+Then our `CoolHeaderComponent` from the example above would receive the following `data` prop:
 
 ```js
-import ElementPortal from 'react-redux-element-portal';
-
-// ElementPortal is already bound to Provider.
+{
+  'user-id': '26742',
+  name: 'Joe'
+}
 ```
+
+## Passing context to your ElementPortal
+Context from your main tree is passed down automatically to your `ElementPortal`. For example, if you use Redux, the `store` context will not get lost, and using `connect` will behave as expected in the children of your `ElementPortal`.

build-packages.js

@@ -4,14 +4,10 @@
   "description": "Render a React component inline, but target a DOM element (or elements) by id or selector.",
   "main": "lib/ElementPortal.js",
   "scripts": {
-    "pretest": "cp react-redux-element-portal/src/ElementPortal.js test/helpers/ReduxElementPortal.js",
     "test": "ava test",
     "prebuild": "rm -rf lib && mkdir -p lib",
     "build": "babel src --out-dir lib",
-    "build-packages": "babel-node build-packages.js",
-    "publish-packages": "babel-node publish-packages.js",
     "prepublish": "npm run build",
-    "postpublish": "npm run build-packages && npm run publish-packages",
     "patch-release": "npm version patch && npm publish && git push --follow-tags"
   },
   "repository": {
@@ -68,7 +64,5 @@
       "./test/helpers/setup-browser-env.js"
     ]
   },
-  "dependencies": {
-    "invariant": "^2.0.0"
-  }
+  "dependencies": {}
 }

package.json

@@ -1,7 +1,80 @@
-import createElementPortal from './createElementPortal';
+import React, { PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 
-export { createElementPortal };
+const reDataAttr = /^data\-(.+)$/;
 
-const ElementPortal = createElementPortal();
+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 ElementPortal = React.createClass({
+
+  propTypes: {
+    id: PropTypes.string,
+    selector: PropTypes.string,
+    // Remove styles and classes from node.
+    shouldReset: PropTypes.bool,
+    view: PropTypes.func
+  },
+
+  componentDidMount() {
+    this.renderToNodes();
+  },
+
+  componentDidUpdate() {
+    this.renderToNodes();
+  },
+
+  renderToNodes() {
+    const nodeById = this.props.id && document.getElementById(this.props.id);
+    const nodesById = nodeById ? [nodeById] : [];
+    const nodesBySelector = (this.props.selector && [].slice.call(document.querySelectorAll(this.props.selector))) || [];
+    const nodes = nodesById.concat(nodesBySelector);
+
+    nodes.forEach(node => {
+      if (this.props.shouldReset) {
+        node.className = '';
+        node.removeAttribute('style');
+      }
+
+      const View = this.props.view;
+
+      const children = View ?
+        <View domNode={node} data={getNodeData(node)}/> :
+        React.Children.only(this.props.children);
+
+      // This will become `ReactDOM.unstable_createPortal()` once the new Fiber implementation lands in React:
+      // https://github.com/facebook/react/pull/8386
+      ReactDOM.unstable_renderSubtreeIntoContainer(
+        this,
+        children,
+        node
+      );
+    });
+  },
+
+  render() {
+    return null;
+  }
+});
 
 export default ElementPortal;