Support contexts for easier integration with React Router

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Upcoming...
 
+- [Contexts](https://github.com/ericclemmons/react-resolver/pull/21)
 - [Error Handling](https://github.com/ericclemmons/react-resolver/issues/2)
 - [React Native](https://github.com/ericclemmons/react-resolver/issues/18)
 

dist/resolver.js

@@ -142,12 +142,12 @@ var Resolver = (function () {
 
       var promises = asyncKeys.map(function (prop) {
         var valueOf = container.props.resolve[prop];
-        var value = container.props.hasOwnProperty(prop) ? container.props[prop] : valueOf(container.props);
+        var value = container.props.hasOwnProperty(prop) ? container.props[prop] : valueOf(container.props.props, container.props.context);
 
-        return Promise.resolve(value).then(function (value) {
-          state.values[prop] = value;
+        return Promise.resolve(value).then(function (resolved) {
+          state.values[prop] = resolved;
 
-          return value;
+          return resolved;
         });
       });
 
@@ -181,14 +181,18 @@ var Resolver = (function () {
           key: "render",
           value: function render() {
             return _React2["default"].createElement(_Container2["default"], _extends({
-              component: Component
-            }, props, this.props));
+              component: Component,
+              context: this.context,
+              props: this.props
+            }, props));
           }
         }]);
 
         return ComponentContainer;
       })(_React2["default"].Component);
 
+      ComponentContainer.childContextTypes = props.childContextTypes;
+      ComponentContainer.contextTypes = props.contextTypes;
       ComponentContainer.displayName = "" + Component.displayName + "Container";
 
       return ComponentContainer;

examples/stargazers/components/Stargazers.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import React from "react";
-
 import { Resolver } from "react-resolver";
+import { Link } from "react-router";
 
 class Stargazers extends React.Component {
   render() {
@@ -42,11 +42,11 @@ class Stargazers extends React.Component {
   renderUser(user) {
     return (
       <div key={user.id} className="center-align">
-        <a href={`https://github.com/${user.login}`} target="_blank">
+        <Link to="user" params={{ login: user.login }}>
           <img src={user.avatar_url} alt="" className="circle responsive-img z-depth-1" />
           <br />
           {user.login}
-        </a>
+        </Link>
       </div>
     );
   }

examples/stargazers/handlers/User.js

@@ -0,0 +1,64 @@
+import axios from "axios";
+import { Link } from "react-router";
+import React from "react";
+import { Resolver } from "react-resolver";
+
+class User extends React.Component {
+  render() {
+    const user = this.props.user;
+
+    return (
+      <div className="container">
+        <div className="card blue-grey darken-1">
+          <div className="card-content">
+            <span className="card-title">
+              {user.login}
+            </span>
+
+            <ul className="collection z-depth-1">
+              <li className="collection-item avatar">
+                <img src={user.avatar_url} className="circle" />
+                <span className="title">
+                  {user.name}
+                </span>
+                <p>
+                  {user.company}
+                  <br />
+                  {user.location}
+                </p>
+              </li>
+            </ul>
+          </div>
+
+          <div className="card-action">
+            <Link to="home" className="align-right">
+              <i className="mdi-navigation-chevron-left" />
+              Back
+            </Link>
+
+            <a href={user.html_url} target="_blank">
+              View on Github
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+User.displayName = "User";
+
+export default Resolver.createContainer(User, {
+  contextTypes: {
+    router: React.PropTypes.func.isRequired,
+  },
+
+  resolve: {
+    user: (props, context) => {
+      const { login } = context.router.getCurrentParams();
+      const url = `https://api.github.com/users/${login}`;
+
+      return axios.get(url).then(response => response.data);
+    },
+  },
+});

examples/stargazers/routes.js

@@ -3,9 +3,11 @@ import { DefaultRoute, Route } from "react-router";
 
 import App from "./handlers/App";
 import Home from "./handlers/Home";
+import User from "./handlers/User";
 
 export default (
   <Route path="/" handler={App}>
     <DefaultRoute name="home" handler={Home} />
+    <Route path="/users/:login" name="user" handler={User} />
   </Route>
-)
+);

package.json

@@ -20,7 +20,7 @@
   },
   "scripts": {
     "build": "babel --out-dir dist/ src/",
-    "lint": "eslint src",
+    "lint": "eslint src test",
     "prepublish": "npm run build",
     "test": "npm run build && mocha"
   },

src/Resolver.js

@@ -107,12 +107,15 @@ export default class Resolver {
 
     const promises = asyncKeys.map((prop) => {
       const valueOf = container.props.resolve[prop];
-      const value = container.props.hasOwnProperty(prop) ? container.props[prop]: valueOf(container.props);
+      const value = container.props.hasOwnProperty(prop)
+        ? container.props[prop]
+        : valueOf(container.props.props, container.props.context)
+      ;
 
-      return Promise.resolve(value).then((value) => {
-        state.values[prop] = value;
+      return Promise.resolve(value).then((resolved) => {
+        state.values[prop] = resolved;
 
-        return value;
+        return resolved;
       });
     });
 
@@ -132,13 +135,16 @@ export default class Resolver {
         return (
           <Container
             component={Component}
+            context={this.context}
+            props={this.props}
             {...props}
-            {...this.props}
           />
         );
       }
     }
 
+    ComponentContainer.childContextTypes = props.childContextTypes;
+    ComponentContainer.contextTypes = props.contextTypes;
     ComponentContainer.displayName = `${Component.displayName}Container`;
 
     return ComponentContainer;

test/Resolver.createContainer.test.js

@@ -1,7 +1,8 @@
 import assert from "assert";
-import { Container } from "../dist";
 import React from "react";
+import { Resolver } from "../dist";
 
+import Fixture from "./support/Fixture";
 import FixtureContainer from "./support/FixtureContainer";
 
 describe("Resolver", function() {
@@ -29,5 +30,77 @@ describe("Resolver", function() {
         assert.equal(FixtureContainer.propTypes, undefined);
       });
     });
+
+    context("when resolving values", function() {
+      describe("props", function() {
+        beforeEach(function() {
+          this.Spy = Resolver.createContainer(Fixture, {
+            resolve: { test: (props) => this.actual = props },
+          });
+        });
+
+        it("should not include internal props", function(done) {
+          Resolver
+            .renderToStaticMarkup(<this.Spy />)
+            .then((markup) => {
+              assert.deepEqual(this.actual, []);
+              done();
+            }).catch(done)
+          ;
+        });
+
+        it("should include external props", function(done) {
+          Resolver
+            .renderToStaticMarkup(<this.Spy foo="bar" />)
+            .then((markup) => {
+              assert.deepEqual(this.actual, { foo: "bar" });
+              done();
+            }).catch(done)
+          ;
+        });
+      });
+
+      describe("context", function() {
+        beforeEach(function() {
+          this.Spy = Resolver.createContainer(Fixture, {
+            contextTypes: { foo: React.PropTypes.any },
+            resolve: { test: (props, context) => this.actual = context },
+          });
+        });
+
+        it("should not include internal context", function(done) {
+          Resolver
+            .renderToStaticMarkup(<this.Spy />)
+            .then((markup) => {
+              assert.deepEqual(this.actual, { foo: undefined });
+              done();
+            }).catch(done)
+          ;
+        });
+
+        it("should include external context", function(done) {
+          class Context extends React.Component {
+            getChildContext() {
+              return { foo: "bar" };
+            }
+
+            render() {
+              return <this.props.component />;
+            }
+          }
+
+          Context.childContextTypes = { foo: React.PropTypes.any };
+          Context.displayName = "Context";
+
+          Resolver
+            .renderToStaticMarkup(<Context component={this.Spy} />)
+            .then((markup) => {
+              assert.deepEqual(this.actual, { foo: "bar" });
+              done();
+            }).catch(done)
+          ;
+        });
+      });
+    });
   });
 });

test/Resolver.renderToString.test.js

@@ -1,8 +1,7 @@
 import assert from "assert";
 import React from "react";
-import { Container, Resolver } from "../dist";
+import { Resolver } from "../dist";
 
-import PropsFixture from "./support/PropsFixture";
 import PropsFixtureContainer from "./support/PropsFixtureContainer";
 
 describe("Resolver", function() {