react-router 3.0.4 → 3.2.0

package/CHANGES.md

@@ -1,3 +1,9 @@
+## [v3.0.5](https://github.com/ReactTraining/react-router/compare/v3.0.4...v3.0.5)
+> Apr 10, 2017
+
+- Manually set displayName for components
+- Async hooks could be removed during simultaneous server requests (#4941 by @s-yadav)
+
 ## [v3.0.4](https://github.com/ReactTraining/react-router/compare/v3.0.3...v3.0.4)
 > Apr 9, 2017
 

package/README.md

@@ -9,11 +9,11 @@ React Router keeps your UI in sync with the URL. It has a simple API with powerf
 [![Codecov][codecov-badge]][codecov]
 [![Discord][discord-badge]][discord]
 
-### v4 Is Coming
+### 4.0 is here!
 
-The next version of React Router (v4) is in beta now.
+The next version of React Router (4.0) has been released! Check out the `master` branch.
 
-[v4 Documentation](https://reacttraining.com/react-router/)
+[4.0 Documentation](https://reacttraining.com/react-router/)
 
 ### Docs & Help
 

package/docs/API.md

@@ -1,4 +1,4 @@
-# API Reference
+# React Router 3 API Reference
 
 - [Components](#components)
   - [`<Router>`](#router)
@@ -159,7 +159,19 @@ Given a route like `<Route path="/users/:userId" />`:
 An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the current route is exactly the linked route. It is equivalent to `<Link>` with the `onlyActiveOnIndex` prop set.
 
 ### `withRouter(Component, [options])`
-A HoC (higher-order component) that wraps another component to provide `props.router`. Pass in your component and it will return the wrapped component.
+A HoC (higher-order component) that wraps another component to enhance its props with router props.
+
+```
+withRouterProps = {
+   ...componentProps,
+   router,
+   params,
+   location,
+   routes
+}
+```
+
+Pass in your component and it will return the wrapped component.
 
 You can explicit specify `router` as a prop to the wrapper component to override the router object from context.
 
@@ -176,7 +188,7 @@ const myInstance = wrapperInstance.getWrappedInstance()
 ```
 
 ### `<RouterContext>`
-A `<RouterContext>` renders the component tree for a given router state. Its used by `<Router>` but also useful for server rendering and integrating in brownfield development.
+A `<RouterContext>` renders the component tree for a given router state. It's used by `<Router>` but also useful for server rendering and integrating in brownfield development.
 
 It also provides a `router` object on [context](https://facebook.github.io/react/docs/context.html).
 

package/docs/Glossary.md

@@ -40,7 +40,7 @@ An *action* describes the type of change to a URL. Possible values are:
 ## Component
 
 ```js
-type Component = ReactClass | string;
+type Component = ReactClass<any> | string;
 ```
 
 A *component* is a React component class or a string (e.g. "div"). Basically, it's anything that can be used as the first argument to [`React.createElement`](https://facebook.github.io/react/docs/top-level-api.html#react.createelement).
@@ -48,7 +48,8 @@ A *component* is a React component class or a string (e.g. "div"). Basically, it
 ## EnterHook
 
 ```js
-type EnterHook = (nextState: RouterState, replace: RedirectFunction, callback?: Function) => any;
+type EnterHook = ((nextState: RouterState, replace: RedirectFunction) => any)
+  | ((nextState: RouterState, replace: RedirectFunction, callback: (error?: ?Error) => any) => any);
 ```
 
 An *enter hook* is a user-defined function that is called when a route is about to be rendered. It receives the next [router state](#routerstate) as its first argument. The [`replace` function](#redirectfunction) may be used to trigger a transition to a different URL.
@@ -89,22 +90,22 @@ A *location* answers two important (philosophical) questions:
   - Where am I?
   - How did I get here?
 
-New locations are typically created each time the URL changes. You can read more about locations in [the `history` docs](https://github.com/mjackson/history/blob/v2.x/docs/Location.md).
+New locations are typically created each time the URL changes. You can read more about locations in [the `history` docs](https://github.com/ReactTraining/history/blob/v3/docs/Location.md).
 
 ### LocationDescriptor
 
     type LocationDescriptorObject = {
       pathname: Pathname;
-      search: Search;
-      query: Query;
-      state: LocationState;
+      search?: Search;
+      query?: Query;
+      state?: LocationState;
     };
 
     type LocationDescriptor = LocationDescriptorObject | Path;
 
 A *location descriptor* is the pushable analogue of a location. Locations tell you where you are; you create location descriptors to say where to go.
 
-You can read more about location descriptors in [the `history` docs](https://github.com/mjackson/history/blob/v2.x/docs/Location.md).
+You can read more about location descriptors in [the `history` docs](https://github.com/ReactTraining/history/blob/v3/docs/Location.md).
 
 ## LocationKey
 
@@ -170,7 +171,7 @@ A *query string* is the portion of the URL that follows the [pathname](#pathname
 ## RedirectFunction
 
 ```js
-type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;
+type RedirectFunction = (location: LocationDescriptor) => void;
 ```
 
 A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a transition to a new URL.
@@ -179,10 +180,10 @@ A *redirect function* is used in [`onEnter` hooks](#enterhook) to trigger a tran
 
 ```js
 type Route = {
-  component: RouteComponent;
-  path: ?RoutePattern;
-  onEnter: ?EnterHook;
-  onLeave: ?LeaveHook;
+  component?: RouteComponent;
+  path?: RoutePattern;
+  onEnter?: EnterHook;
+  onLeave?: LeaveHook;
 };
 ```
 

package/docs/README.md

@@ -1,3 +1,5 @@
+# React Router 3 Documentation
+
 ## Table of Contents
 
 * [Tutorial](https://github.com/reactjs/react-router-tutorial)
@@ -19,5 +21,5 @@
  * [Upgrading to v1.0.0](../upgrade-guides/v1.0.0.md)
  * [Upgrading to v2.0.0](../upgrade-guides/v2.0.0.md)
 * [Troubleshooting](Troubleshooting.md)
-* [API](API.md)
+* [React Router 3 API](API.md)
 * [Glossary](Glossary.md)

package/docs/guides/DynamicRouting.md

@@ -46,4 +46,4 @@ const CourseRoute = {
 
 Now go look at what hacks you have in place to do this. Just kidding, I don't want to make you sad right now.
 
-Run the [huge apps](https://github.com/ReactTraining/react-router/tree/master/examples/huge-apps) example with your web inspector open and watch code get loaded in as you navigate around the demo.
+Run the [huge apps](https://github.com/ReactTraining/react-router/tree/v3/examples/huge-apps) example with your web inspector open and watch code get loaded in as you navigate around the demo.

package/docs/guides/RouteConfiguration.md

@@ -168,7 +168,7 @@ Now when someone clicks on that link to `/inbox/messages/5` they'll automaticall
 
 ### Enter and Leave Hooks
 
-[Route](/docs/Glossary.md#route)s may also define [`onEnter`](/docs/Glossary.md#enterhook) and [`onLeave`](/docs/Glossary.md#leavehook) hooks that are invoked once a transition has been [confirmed](/docs/guides/ConfirmingNavigation.md). These hooks are useful for various things like [requiring auth](https://github.com/ReactTraining/react-router/tree/master/examples/auth-flow) when a route is entered and saving stuff to persistent storage before a route unmounts.
+[Route](/docs/Glossary.md#route)s may also define [`onEnter`](/docs/Glossary.md#enterhook) and [`onLeave`](/docs/Glossary.md#leavehook) hooks that are invoked once a transition has been [confirmed](/docs/guides/ConfirmingNavigation.md). These hooks are useful for various things like [requiring auth](https://github.com/ReactTraining/react-router/tree/v3/examples/auth-flow) when a route is entered and saving stuff to persistent storage before a route unmounts.
 
 During a transition, [`onLeave` hooks](/docs/Glossary.md#leavehook) run first on all routes we are leaving, starting with the leaf route on up to the first common ancestor route. Next, [`onEnter` hooks](/docs/Glossary.md#enterhook) run starting with the first parent route we're entering down to the leaf route.
 

package/docs/guides/Testing.md

@@ -73,7 +73,8 @@ A component:
 ```js
 //../components/BasicPage.js
 
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Button } from 'react-bootstrap'
 import { Link } from 'react-router'
 

package/es/IndexLink.js

@@ -8,6 +8,8 @@ import Link from './Link';
  * An <IndexLink> is used to link to an <IndexRoute>.
  */
 var IndexLink = createReactClass({
+  displayName: 'IndexLink',
+
   render: function render() {
     return React.createElement(Link, _extends({}, this.props, { onlyActiveOnIndex: true }));
   }

package/es/IndexRedirect.js

@@ -10,6 +10,7 @@ import { falsy } from './InternalPropTypes';
  */
 /* eslint-disable react/require-render-return */
 var IndexRedirect = createReactClass({
+  displayName: 'IndexRedirect',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element, parentRoute) {

package/es/IndexRoute.js

@@ -11,6 +11,7 @@ import { component, components, falsy } from './InternalPropTypes';
  */
 /* eslint-disable react/require-render-return */
 var IndexRoute = createReactClass({
+  displayName: 'IndexRoute',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element, parentRoute) {

package/es/Link.js

@@ -42,6 +42,7 @@ function resolveToLocation(to, router) {
  *   <Link to={`/posts/${post.id}`} />
  */
 var Link = createReactClass({
+  displayName: 'Link',
 
   mixins: [ContextSubscriber('router')],
 

package/es/Redirect.js

@@ -14,6 +14,7 @@ import { falsy } from './InternalPropTypes';
  */
 /* eslint-disable react/require-render-return */
 var Redirect = createReactClass({
+  displayName: 'Redirect',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element) {

package/es/Route.js

@@ -16,6 +16,7 @@ import { component, components } from './InternalPropTypes';
  */
 /* eslint-disable react/require-render-return */
 var Route = createReactClass({
+  displayName: 'Route',
 
   statics: {
     createRouteFromReactElement: createRouteFromReactElement

package/es/Router.js

@@ -25,14 +25,14 @@ var propTypes = {
 
   // PRIVATE: For client-side rehydration of server match.
   matchContext: object
-};
-
-/**
- * A <Router> is a high-level API for automatically setting up
- * a router that renders a <RouterContext> with all the props
- * it needs each time the URL changes.
- */
-var Router = createReactClass({
+
+  /**
+   * A <Router> is a high-level API for automatically setting up
+   * a router that renders a <RouterContext> with all the props
+   * it needs each time the URL changes.
+   */
+};var Router = createReactClass({
+  displayName: 'Router',
 
   propTypes: propTypes,
 

package/es/RouterContext.js

@@ -16,6 +16,7 @@ import { isReactChildren } from './RouteUtils';
  * and sets the history object and the current location in context.
  */
 var RouterContext = createReactClass({
+  displayName: 'RouterContext',
 
   mixins: [ContextProvider('router')],
 

package/es/TransitionUtils.js

@@ -28,121 +28,129 @@ var PendingHooks = function PendingHooks() {
   };
 };
 
-var enterHooks = new PendingHooks();
-var changeHooks = new PendingHooks();
+export default function getTransitionUtils() {
+  var enterHooks = new PendingHooks();
+  var changeHooks = new PendingHooks();
 
-function createTransitionHook(hook, route, asyncArity, pendingHooks) {
-  var isSync = hook.length < asyncArity;
+  function createTransitionHook(hook, route, asyncArity, pendingHooks) {
+    var isSync = hook.length < asyncArity;
 
-  var transitionHook = function transitionHook() {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var transitionHook = function transitionHook() {
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-    hook.apply(route, args);
+      hook.apply(route, args);
 
-    if (isSync) {
-      var callback = args[args.length - 1];
-      // Assume hook executes synchronously and
-      // automatically call the callback.
+      if (isSync) {
+        var callback = args[args.length - 1];
+        // Assume hook executes synchronously and
+        // automatically call the callback.
+        callback();
+      }
+    };
+
+    pendingHooks.add(transitionHook);
+
+    return transitionHook;
+  }
+
+  function getEnterHooks(routes) {
+    return routes.reduce(function (hooks, route) {
+      if (route.onEnter) hooks.push(createTransitionHook(route.onEnter, route, 3, enterHooks));
+      return hooks;
+    }, []);
+  }
+
+  function getChangeHooks(routes) {
+    return routes.reduce(function (hooks, route) {
+      if (route.onChange) hooks.push(createTransitionHook(route.onChange, route, 4, changeHooks));
+      return hooks;
+    }, []);
+  }
+
+  function runTransitionHooks(length, iter, callback) {
+    if (!length) {
       callback();
+      return;
     }
-  };
 
-  pendingHooks.add(transitionHook);
-
-  return transitionHook;
-}
-
-function getEnterHooks(routes) {
-  return routes.reduce(function (hooks, route) {
-    if (route.onEnter) hooks.push(createTransitionHook(route.onEnter, route, 3, enterHooks));
-    return hooks;
-  }, []);
-}
-
-function getChangeHooks(routes) {
-  return routes.reduce(function (hooks, route) {
-    if (route.onChange) hooks.push(createTransitionHook(route.onChange, route, 4, changeHooks));
-    return hooks;
-  }, []);
-}
-
-function runTransitionHooks(length, iter, callback) {
-  if (!length) {
-    callback();
-    return;
+    var redirectInfo = void 0;
+    function replace(location) {
+      redirectInfo = location;
+    }
+
+    loopAsync(length, function (index, next, done) {
+      iter(index, replace, function (error) {
+        if (error || redirectInfo) {
+          done(error, redirectInfo); // No need to continue.
+        } else {
+          next();
+        }
+      });
+    }, callback);
   }
 
-  var redirectInfo = void 0;
-  function replace(location) {
-    redirectInfo = location;
+  /**
+   * Runs all onEnter hooks in the given array of routes in order
+   * with onEnter(nextState, replace, callback) and calls
+   * callback(error, redirectInfo) when finished. The first hook
+   * to use replace short-circuits the loop.
+   *
+   * If a hook needs to run asynchronously, it may use the callback
+   * function. However, doing so will cause the transition to pause,
+   * which could lead to a non-responsive UI if the hook is slow.
+   */
+  function runEnterHooks(routes, nextState, callback) {
+    enterHooks.clear();
+    var hooks = getEnterHooks(routes);
+    return runTransitionHooks(hooks.length, function (index, replace, next) {
+      var wrappedNext = function wrappedNext() {
+        if (enterHooks.has(hooks[index])) {
+          next.apply(undefined, arguments);
+          enterHooks.remove(hooks[index]);
+        }
+      };
+      hooks[index](nextState, replace, wrappedNext);
+    }, callback);
   }
 
-  loopAsync(length, function (index, next, done) {
-    iter(index, replace, function (error) {
-      if (error || redirectInfo) {
-        done(error, redirectInfo); // No need to continue.
-      } else {
-        next();
-      }
-    });
-  }, callback);
-}
-
-/**
- * Runs all onEnter hooks in the given array of routes in order
- * with onEnter(nextState, replace, callback) and calls
- * callback(error, redirectInfo) when finished. The first hook
- * to use replace short-circuits the loop.
- *
- * If a hook needs to run asynchronously, it may use the callback
- * function. However, doing so will cause the transition to pause,
- * which could lead to a non-responsive UI if the hook is slow.
- */
-export function runEnterHooks(routes, nextState, callback) {
-  enterHooks.clear();
-  var hooks = getEnterHooks(routes);
-  return runTransitionHooks(hooks.length, function (index, replace, next) {
-    var wrappedNext = function wrappedNext() {
-      if (enterHooks.has(hooks[index])) {
-        next.apply(undefined, arguments);
-        enterHooks.remove(hooks[index]);
-      }
-    };
-    hooks[index](nextState, replace, wrappedNext);
-  }, callback);
-}
-
-/**
- * Runs all onChange hooks in the given array of routes in order
- * with onChange(prevState, nextState, replace, callback) and calls
- * callback(error, redirectInfo) when finished. The first hook
- * to use replace short-circuits the loop.
- *
- * If a hook needs to run asynchronously, it may use the callback
- * function. However, doing so will cause the transition to pause,
- * which could lead to a non-responsive UI if the hook is slow.
- */
-export function runChangeHooks(routes, state, nextState, callback) {
-  changeHooks.clear();
-  var hooks = getChangeHooks(routes);
-  return runTransitionHooks(hooks.length, function (index, replace, next) {
-    var wrappedNext = function wrappedNext() {
-      if (changeHooks.has(hooks[index])) {
-        next.apply(undefined, arguments);
-        changeHooks.remove(hooks[index]);
-      }
-    };
-    hooks[index](state, nextState, replace, wrappedNext);
-  }, callback);
-}
-
-/**
- * Runs all onLeave hooks in the given array of routes in order.
- */
-export function runLeaveHooks(routes, prevState) {
-  for (var i = 0, len = routes.length; i < len; ++i) {
-    if (routes[i].onLeave) routes[i].onLeave.call(routes[i], prevState);
+  /**
+   * Runs all onChange hooks in the given array of routes in order
+   * with onChange(prevState, nextState, replace, callback) and calls
+   * callback(error, redirectInfo) when finished. The first hook
+   * to use replace short-circuits the loop.
+   *
+   * If a hook needs to run asynchronously, it may use the callback
+   * function. However, doing so will cause the transition to pause,
+   * which could lead to a non-responsive UI if the hook is slow.
+   */
+  function runChangeHooks(routes, state, nextState, callback) {
+    changeHooks.clear();
+    var hooks = getChangeHooks(routes);
+    return runTransitionHooks(hooks.length, function (index, replace, next) {
+      var wrappedNext = function wrappedNext() {
+        if (changeHooks.has(hooks[index])) {
+          next.apply(undefined, arguments);
+          changeHooks.remove(hooks[index]);
+        }
+      };
+      hooks[index](state, nextState, replace, wrappedNext);
+    }, callback);
+  }
+
+  /**
+   * Runs all onLeave hooks in the given array of routes in order.
+   */
+  function runLeaveHooks(routes, prevState) {
+    for (var i = 0, len = routes.length; i < len; ++i) {
+      if (routes[i].onLeave) routes[i].onLeave.call(routes[i], prevState);
+    }
   }
+
+  return {
+    runEnterHooks: runEnterHooks,
+    runChangeHooks: runChangeHooks,
+    runLeaveHooks: runLeaveHooks
+  };
 }

package/es/createTransitionManager.js

@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 import warning from './routerWarning';
 import computeChangedRoutes from './computeChangedRoutes';
-import { runEnterHooks, runChangeHooks, runLeaveHooks } from './TransitionUtils';
+import getTransitionUtils from './TransitionUtils';
 import _isActive from './isActive';
 import getComponents from './getComponents';
 import matchRoutes from './matchRoutes';
@@ -16,8 +16,15 @@ function hasAnyProperties(object) {
 export default function createTransitionManager(history, routes) {
   var state = {};
 
+  var _getTransitionUtils = getTransitionUtils(),
+      runEnterHooks = _getTransitionUtils.runEnterHooks,
+      runChangeHooks = _getTransitionUtils.runChangeHooks,
+      runLeaveHooks = _getTransitionUtils.runLeaveHooks;
+
   // Signature should be (location, indexOnly), but needs to support (path,
   // query, indexOnly)
+
+
   function isActive(location, indexOnly) {
     location = history.createLocation(location);
 

package/es/withRouter.js

@@ -15,6 +15,8 @@ export default function withRouter(WrappedComponent, options) {
   var withRef = options && options.withRef;
 
   var WithRouter = createReactClass({
+    displayName: 'WithRouter',
+
     mixins: [ContextSubscriber('router')],
 
     contextTypes: { router: routerShape },

package/lib/IndexLink.js

@@ -22,6 +22,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * An <IndexLink> is used to link to an <IndexRoute>.
  */
 var IndexLink = (0, _createReactClass2.default)({
+  displayName: 'IndexLink',
+
   render: function render() {
     return _react2.default.createElement(_Link2.default, _extends({}, this.props, { onlyActiveOnIndex: true }));
   }

package/lib/IndexRedirect.js

@@ -29,6 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 /* eslint-disable react/require-render-return */
 var IndexRedirect = (0, _createReactClass2.default)({
+  displayName: 'IndexRedirect',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element, parentRoute) {

package/lib/IndexRoute.js

@@ -28,6 +28,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 /* eslint-disable react/require-render-return */
 var IndexRoute = (0, _createReactClass2.default)({
+  displayName: 'IndexRoute',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element, parentRoute) {

package/lib/Link.js

@@ -59,6 +59,7 @@ function resolveToLocation(to, router) {
  *   <Link to={`/posts/${post.id}`} />
  */
 var Link = (0, _createReactClass2.default)({
+  displayName: 'Link',
 
   mixins: [(0, _ContextUtils.ContextSubscriber)('router')],
 

package/lib/Redirect.js

@@ -29,6 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 /* eslint-disable react/require-render-return */
 var Redirect = (0, _createReactClass2.default)({
+  displayName: 'Redirect',
 
   statics: {
     createRouteFromReactElement: function createRouteFromReactElement(element) {

package/lib/Route.js

@@ -30,6 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 /* eslint-disable react/require-render-return */
 var Route = (0, _createReactClass2.default)({
+  displayName: 'Route',
 
   statics: {
     createRouteFromReactElement: _RouteUtils.createRouteFromReactElement

package/lib/Router.js

@@ -51,14 +51,14 @@ var propTypes = {
 
   // PRIVATE: For client-side rehydration of server match.
   matchContext: _propTypes.object
-};
-
-/**
- * A <Router> is a high-level API for automatically setting up
- * a router that renders a <RouterContext> with all the props
- * it needs each time the URL changes.
- */
-var Router = (0, _createReactClass2.default)({
+
+  /**
+   * A <Router> is a high-level API for automatically setting up
+   * a router that renders a <RouterContext> with all the props
+   * it needs each time the URL changes.
+   */
+};var Router = (0, _createReactClass2.default)({
+  displayName: 'Router',
 
   propTypes: propTypes,
 

package/lib/RouterContext.js

@@ -35,6 +35,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * and sets the history object and the current location in context.
  */
 var RouterContext = (0, _createReactClass2.default)({
+  displayName: 'RouterContext',
 
   mixins: [(0, _ContextUtils.ContextProvider)('router')],