[added] useRoutes history enhancer

[added] RoutingContext component
[added] RouteContext mixin
[added] Lifecycle mixin

Author: mjackson

modules/AsyncUtils.js

@@ -12,8 +12,7 @@ export function loopAsync(turns, work, callback) {
       return;
 
     if (currentTurn < turns) {
-      currentTurn += 1;
-      work.call(this, currentTurn - 1, next, done);
+      work.call(this, currentTurn++, next, done);
     } else {
       done.apply(this, arguments);
     }

modules/Lifecycle.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import invariant from 'invariant';
+
+var { object } = React.PropTypes;
+
+/**
+ * The Lifecycle mixin adds the routerWillLeave lifecycle method
+ * to a component that may be used to cancel a transition or prompt
+ * the user for confirmation.
+ * 
+ * On standard transitions, routerWillLeave receives a single argument: the
+ * location we're transitioning to. To cancel the transition, return false.
+ * To prompt the user for confirmation, return a prompt message (string).
+ *
+ * routerWillLeave does not receive a location object during the beforeunload
+ * event in web browsers (assuming you're using the useBeforeUnload history
+ * enhancer). In this case, it is not possible for us to know the location
+ * we're transitioning to so routerWillLeave must return a prompt message to
+ * prevent the user from closing the tab.
+ */
+var Lifecycle = {
+
+  propTypes: {
+    // Route components receive the route object as a prop.
+    route: object
+  },
+
+  contextTypes: {
+    router: object.isRequired,
+    // Nested children receive the route as context, either
+    // set by the route component using the RouteContext mixin
+    // or by some other ancestor.
+    route: object
+  },
+
+  _getRoute() {
+    var route = this.props.route || this.context.route;
+
+    invariant(
+      route,
+      'The Lifecycle mixin needs to be used either on 1) a <Route component> or ' +
+      '2) a descendant of a <Route component> that uses the RouteContext mixin'
+    );
+
+    return route;
+  },
+  
+  componentWillMount() {
+    invariant(
+      this.routerWillLeave,
+      'The Lifecycle mixin requires you to define a routerWillLeave method'
+    );
+
+    this.context.router.registerRouteHook(
+      this._getRoute(),
+      this.routerWillLeave
+    );
+  },
+
+  componentWillUnmount() {
+    this.context.router.unregisterRouteHook(
+      this._getRoute(),
+      this.routerWillLeave
+    );
+  }
+
+};
+
+export default Lifecycle;

modules/Link.js

@@ -1,6 +1,7 @@
-import { createClass, createElement, PropTypes } from 'react';
+import React from 'react';
+import warning from 'warning';
 
-var { object, string, func } = PropTypes;
+var { object, string, func } = React.PropTypes;
 
 function isLeftClickEvent(event) {
   return event.button === 0;
@@ -11,24 +12,24 @@ function isModifiedEvent(event) {
 }
 
 /**
- * <Link> components are used to create an <a> element that links to a route.
- * When that route is active, the link gets an "active" class name (or the
- * value of its `activeClassName` prop).
+ * A <Link> is used to create an <a> element that links to a route.
+ * When that route is active, the link gets an "active" class name
+ * (or the value of its `activeClassName` prop).
  *
  * For example, assuming you have the following route:
  *
- *   <Route name="showPost" path="/posts/:postID" handler={Post}/>
+ *   <Route path="/posts/:postID" component={Post} />
  *
  * You could use the following component to link to that route:
  *
  *   <Link to={`/posts/${post.id}`} />
  *
- * Links may pass along query string parameters
- * using the `query` prop.
+ * Links may pass along location state and/or query string parameters
+ * in the state/query props, respectively.
  *
- *   <Link to="/posts/123" query={{ show: true }}/>
+ *   <Link ... query={{ show: true }} state={{ the: 'state' }} />
  */
-var Link = createClass({
+var Link = React.createClass({
 
   contextTypes: {
     router: object
@@ -67,33 +68,43 @@ var Link = createClass({
     event.preventDefault();
 
     if (allowTransition)
-      this.context.router.transitionTo(this.props.to, this.props.query, this.props.state);
+      this.context.router.pushState(this.props.state, this.props.to, this.props.query);
+  },
+
+  componentWillMount() {
+    warning(
+      this.context.router,
+      'A <Link> should not be rendered outside the context of a router; ' +
+      'some features including real hrefs, active styling, and navigation ' +
+      'will not function correctly'
+    );
   },
 
   render() {
-    var { router } = this.context;
+    var { to, query } = this.props;
 
-    var props = Object.assign({}, this.props, {
+    var props = {
+      ...this.props,
       onClick: this.handleClick
-    });
+    };
 
-    // Ignore if rendered outside of the context of a
-    // router, simplifies unit testing.
-    if (router) {
-      var { to, query } = this.props;
+    var { router } = this.context;
 
+    // Ignore if rendered outside the context
+    // of a router, simplifies unit testing.
+    if (router) {
       props.href = router.createHref(to, query);
 
       if (router.isActive(to, query)) {
         if (props.activeClassName)
           props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
 
         if (props.activeStyle)
-          props.style = Object.assign({}, props.style, props.activeStyle);
+          props.style = { ...props.style, ...props.activeStyle };
       }
     }
 
-    return createElement('a', props);
+    return React.createElement('a', props);
   }
 
 });

modules/Navigation.js

@@ -3,7 +3,8 @@ import React from 'react';
 var { object } = React.PropTypes;
 
 /**
- * A mixin for components that modify the URL.
+ * The Navigation mixin provides methods for components
+ * that need to modify the URL.
  *
  * Example:
  *
@@ -26,15 +27,21 @@ var Navigation = {
 
   contextTypes: {
     router: object.isRequired
+  },
+
+  transitionTo(pathname, query, state) {
+    return this.context.router.pushState(state, pathname, query);
+  },
+
+  replaceWith(pathname, query, state) {
+    return this.context.router.replaceState(state, pathname, query);
   }
 
 };
 
 var RouterNavigationMethods = [
   'createPath',
   'createHref',
-  'transitionTo',
-  'replaceWith',
   'go',
   'goBack',
   'goForward'

modules/NavigationMixin.js

@@ -1,10 +1,10 @@
+import React from 'react';
 import invariant from 'invariant';
-import { createClass, PropTypes } from 'react';
 import { createRouteFromReactElement } from './RouteUtils';
 import { formatPattern } from './PatternUtils';
 import { falsy } from './PropTypes';
 
-var { string, object } = PropTypes;
+var { string, object } = React.PropTypes;
 
 /**
  * A <Redirect> is used to declare another URL path a client should be sent
@@ -13,7 +13,7 @@ var { string, object } = PropTypes;
  * Redirects are placed alongside routes in the route configuration and are
  * traversed in the same manner.
  */
-var Redirect = createClass({
+var Redirect = React.createClass({
 
   statics: {
 

modules/NavigationTypes.js

@@ -1,10 +1,10 @@
+import React from 'react';
 import warning from 'warning';
 import invariant from 'invariant';
-import { createClass, PropTypes } from 'react';
 import { createRouteFromReactElement } from './RouteUtils';
 import { component, components } from './PropTypes';
 
-var { string, bool, func } = PropTypes;
+var { string, bool, func } = React.PropTypes;
 
 /**
  * A <Route> is used to declare which components are rendered to the page when
@@ -16,15 +16,19 @@ var { string, bool, func } = PropTypes;
  * "active" and their components are rendered into the DOM, nested in the same
  * order as they are in the tree.
  */
-var Route = createClass({
+var Route = React.createClass({
 
   statics: {
 
     createRouteFromReactElement(element) {
       var route = createRouteFromReactElement(element);
 
       if (route.handler) {
-        warning(false, '<Route handler> is deprecated, use <Route component> instead');
+        warning(
+          false,
+          '<Route handler> is deprecated, use <Route component> instead'
+        );
+
         route.component = route.handler;
         delete route.handler;
       }