react-router-component.js

;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['react', 'react-async'], factory);
  } else {
    root.ReactRouter = factory(root.React, root.ReactAsync);
  }
})(this, function(React, ReactAsync) {

  var __ReactShim = window.__ReactShim = window.__ReactShim || {};

  __ReactShim.React = React;

  __ReactShim.cloneWithProps = React.addons.cloneWithProps;

  __ReactShim.invariant = function(check, msg) {
    if (!check) {
      throw new Error(msg);
    }
  }

  var mergeInto = __ReactShim.mergeInto = function(dst, src) {
    for (var k in src) {
      if (src.hasOwnProperty(k)) {
        dst[k] = src[k];
      }
    }
  }

  __ReactShim.merge = function(a, b) {
    var c = {};
    mergeInto(c, a);
    mergeInto(c, b);
    return c;
  }

  __ReactShim.emptyFunction = function() {
  }

  __ReactShim.ExecutionEnvironment = {
    canUseDOM: true
  };

  __ReactShim.ReactUpdates = {
    batchedUpdates: function(cb) { cb(); }
  };

  var __ReactAsyncShim = window.__ReactAsyncShim = window.__ReactAsyncShim || {};
  __ReactAsyncShim.isAsyncComponent = ReactAsync.isAsyncComponent;
  __ReactAsyncShim.prefetchAsyncState = ReactAsync.prefetchAsyncState;

  return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++) return s(r[o]);return s})({1:[function(__browserify__,module,exports){
"use strict";

var Router                    = __browserify__('./lib/Router');
var Route                     = __browserify__('./lib/Route');
var Link                      = __browserify__('./lib/Link');

var RouterMixin               = __browserify__('./lib/RouterMixin');
var AsyncRouteRenderingMixin  = __browserify__('./lib/AsyncRouteRenderingMixin');
var RouteRenderingMixin       = __browserify__('./lib/RouteRenderingMixin');

var NavigatableMixin          = __browserify__('./lib/NavigatableMixin');

var Environment               = __browserify__('./lib/Environment');

module.exports = {
  Locations: Router.Locations,
  Pages: Router.Pages,

  Location: Route.Route,
  Page: Route.Route,
  NotFound: Route.NotFound,

  Link: Link,

  Environment: Environment,

  RouterMixin: RouterMixin,
  RouteRenderingMixin: RouteRenderingMixin,
  AsyncRouteRenderingMixin: AsyncRouteRenderingMixin,

  NavigatableMixin: NavigatableMixin
};

},{"./lib/AsyncRouteRenderingMixin":2,"./lib/Environment":3,"./lib/Link":4,"./lib/NavigatableMixin":5,"./lib/Route":6,"./lib/RouteRenderingMixin":7,"./lib/Router":8,"./lib/RouterMixin":9}],2:[function(__browserify__,module,exports){
"use strict";

var prefetchAsyncState  = (window.__ReactAsyncShim.prefetchAsyncState);
var isAsyncComponent    = (window.__ReactAsyncShim.isAsyncComponent);
var cloneWithProps      = (window.__ReactShim.cloneWithProps);

/**
 * Mixin for router components which prefetches state of async components
 * (as in react-async).
 */
var AsyncRouteRenderingMixin = {

  shouldComponentUpdate: function(nextProps, nextState) {

    if (nextState.pendingChildren) {
      return true;
    }

    var match = nextState.match;
    var handler = match.getHandler(true);

    if (handler && isAsyncComponent(handler)) {

      prefetchAsyncState(handler, function(err, handler) {
        // check if we router is still mounted and have the same match in state
        // as we started fetching state with
        if (this.isMounted() && this.state.match === match) {

          this.replaceState({
            match: this.state.match,
            prefix: this.state.prefix,
            navigation: this.state.navigation,
            pendingChildren: handler
          });

        }
      }.bind(this));

      return false;
    }

    return true;
  },

  renderRouteHandler: function() {
    if (this.state.pendingChildren) {
      var ref = this.state.match.route && this.state.match.route.ref;
      return cloneWithProps(this.state.pendingChildren, {ref: ref});
    } else {
      return this.state.match.getHandler();
    }
  }

};

module.exports = AsyncRouteRenderingMixin;

},{}],3:[function(__browserify__,module,exports){
"use strict";
/**
 * Routing environment.
 *
 * It specifies how routers read its state from DOM and synchronise it back.
 */

var ReactUpdates          = (window.__ReactShim.ReactUpdates);
var emptyFunction         = (window.__ReactShim.emptyFunction);
var ExecutionEnvironment  = (window.__ReactShim.ExecutionEnvironment);

/**
 * Base abstract class for a routing environment.
 *
 * @private
 */
function Environment() {
  this.routers = [];
  this.path = this.getPath();
}

/**
 * Notify routers about the change.
 *
 * @param {Object} navigation
 * @param {Function} cb
 */
Environment.prototype.notify = function notify(navigation, cb) {
  var latch = this.routers.length;

  if (latch === 0) {
    return cb && cb();
  }

  function callback() {
    latch -= 1;
    if (cb && latch === 0) {
      cb();
    }
  }

  ReactUpdates.batchedUpdates(function() {
    for (var i = 0, len = this.routers.length; i < len; i++) {
      this.routers[i].setPath(this.path, navigation, callback);
    }
  }.bind(this));
}

Environment.prototype.makeHref = function makeHref(path) {
  return path;
}

Environment.prototype.navigate = function navigate(path, navigation, cb) {
  if (typeof navigation === 'function' && cb === undefined) {
    cb = navigation;
    navigation = {};
  }
  return this.setPath(path, navigation, cb);
}

Environment.prototype.setPath = function(path, navigation, cb) {
  if (!navigation.isPopState) {
    if (navigation.replace) {
      this.replaceState(path, navigation);
    } else {
      this.pushState(path, navigation);
    }
  }
  this.path = path;
  this.notify(navigation, cb);
}

/**
 * Register router with an environment.
 */
Environment.prototype.register = function register(router) {
  if (this.routers.length === 0) {
    this.start();
  }

  if (!router.getParentRouter()) {
    this.routers.push(router);
  }
}

/**
 * Unregister router from an environment.
 */
Environment.prototype.unregister = function unregister(router) {
  if (this.routers.indexOf(router) > -1) {
    this.routers.splice(this.routers.indexOf(router), 1);
  }

  if (this.routers.length === 0) {
    this.stop();
  }
}

/**
 * Routing environment which routes by `location.pathname`.
 */
function PathnameEnvironment() {
  Environment.call(this);
}

PathnameEnvironment.prototype = Object.create(Environment.prototype);
PathnameEnvironment.prototype.constructor = PathnameEnvironment;

PathnameEnvironment.prototype.getPath = function() {
  return window.location.pathname;
}

PathnameEnvironment.prototype.pushState = function(path, navigation) {
  window.history.pushState({}, '', path);
}

PathnameEnvironment.prototype.replaceState = function(path, navigation) {
  window.history.replaceState({}, '', path);
}

PathnameEnvironment.prototype.start = function() {
  window.addEventListener('popstate', this.onPopState.bind(this));
};

PathnameEnvironment.prototype.stop = function() {
  window.removeEventListener('popstate', this.onPopState.bind(this));
};

PathnameEnvironment.prototype.onPopState = function(e) {
  var path = window.location.pathname;

  if (this.path !== path) {
    this.setPath(path, {isPopState: true});
  }
};

/**
 * Routing environment which routes by `location.hash`.
 */
function HashEnvironment() {
  Environment.call(this);
}

HashEnvironment.prototype = Object.create(Environment.prototype);
HashEnvironment.prototype.constructor = HashEnvironment;

HashEnvironment.prototype.getPath = function() {
  return window.location.hash.slice(1) || '/';
};

HashEnvironment.prototype.pushState = function(path, navigation) {
  window.location.hash = path;
}

HashEnvironment.prototype.replaceState = function(path, navigation) {
  var href = window.location.href.replace(/(javascript:|#).*$/, '');
  window.location.replace(href + '#' + path);
}

HashEnvironment.prototype.start = function() {
  window.addEventListener('hashchange', this.onHashChange.bind(this));
};

HashEnvironment.prototype.stop = function() {
  window.removeEventListener('hashchange', this.onHashChange.bind(this));
};

HashEnvironment.prototype.onHashChange = function() {
  var path = this.getPath();

  if (this.path !== path) {
    this.setPath(path, {isPopState: true});
  }
};

/**
 * Dummy routing environment which provides no path.
 *
 * Should be used on server or in WebWorker.
 */
function DummyEnvironment() {
  Environment.call(this);
}

DummyEnvironment.prototype = Object.create(Environment.prototype);
DummyEnvironment.prototype.constructor = DummyEnvironment;

DummyEnvironment.prototype.getPath = emptyFunction.thatReturnsNull;

DummyEnvironment.prototype.setPath = function(path, cb) {
  this.path = path;
  cb();
};

DummyEnvironment.prototype.start = emptyFunction;

DummyEnvironment.prototype.stop = emptyFunction;

/**
 * Mixin for routes to keep attached to an environment.
 *
 * This mixin assumes the environment is passed via props.
 */
var Mixin = {

  componentDidMount: function() {
    this.getEnvironment().register(this);
  },

  componentWillUnmount: function() {
    this.getEnvironment().unregister(this);
  }
};

var pathnameEnvironment;
var hashEnvironment;
var defaultEnvironment;
var dummyEnvironment;

if (ExecutionEnvironment.canUseDOM) {

  pathnameEnvironment = new PathnameEnvironment();
  hashEnvironment     = new HashEnvironment();
  defaultEnvironment  = (window.history !== undefined) ?
                        pathnameEnvironment :
                        hashEnvironment; 

} else {

  dummyEnvironment    = new DummyEnvironment();
  pathnameEnvironment = dummyEnvironment;
  hashEnvironment     = dummyEnvironment;
  defaultEnvironment  = dummyEnvironment;

}

module.exports = {
  pathnameEnvironment: pathnameEnvironment,
  hashEnvironment: hashEnvironment,
  defaultEnvironment: defaultEnvironment,
  dummyEnvironment: dummyEnvironment,

  Environment: Environment,
  PathnameEnvironment: PathnameEnvironment,
  HashEnvironment: HashEnvironment,

  Mixin: Mixin
};

},{}],4:[function(__browserify__,module,exports){
"use strict";

var React             = (window.__ReactShim.React);
var NavigatableMixin  = __browserify__('./NavigatableMixin');
var Environment       = __browserify__('./Environment');

/**
 * Link.
 *
 * A basic navigatable component which renders into <a> DOM element and handles
 * onClick event by transitioning onto different route (defined by
 * this.props.href).
 */
var Link = React.createClass({
  mixins: [NavigatableMixin],

  displayName: 'Link',

  propTypes: {
    href: React.PropTypes.string.isRequired,
    global: React.PropTypes.bool,
    globalHash: React.PropTypes.bool
  },

  onClick: function(e) {
    if (this.props.onClick) {
      this.props.onClick(e);
    }
    if (!e.defaultPrevented) {
      e.preventDefault();
      this._navigate(this.props.href, function(err) {
        if (err) {
          throw err;
        }
      });
    }
  },

  _navigationParams: function() {
    var params = {};
    for (var k in this.props) {
      if (!this.constructor.propTypes[k]) {
        params[k] = this.props[k];
      }
    }
    return params;
  },

  _createHref: function() {
    return this.props.global ?
      Environment.defaultEnvironment.makeHref(this.props.href) :
      this.makeHref(this.props.href);
  },

  _navigate: function(path, cb) {
    if (this.props.globalHash) {
      return Environment.hashEnvironment.navigate(path, cb);
    }

    if (this.props.global) {
      return Environment.defaultEnvironment.navigate(path, cb);
    }

    return this.navigate(path, this._navigationParams(), cb);
  },

  render: function() {
    var props = {
      onClick: this.onClick,
      href: this._createHref()
    };
    return this.transferPropsTo(React.DOM.a(props, this.props.children));
  }
});

module.exports = Link;

},{"./Environment":3,"./NavigatableMixin":5}],5:[function(__browserify__,module,exports){
"use strict";

var React       = (window.__ReactShim.React);
var Environment = __browserify__('./Environment');


/**
 * NavigatableMixin
 *
 * A mixin for a component which operates in context of a router and can
 * navigate to a different route using `navigate(path, cb)` method.
 */
var NavigatableMixin = {

  contextTypes: {
    router: React.PropTypes.component,
  },

  /**
   * @private
   */
  _getNavigable: function() {
    return this.context.router || Environment.defaultEnvironment;
  },

  getPath: function() {
    return this._getNavigable().getPath();
  },

  navigate: function(path, cb) {
    return this._getNavigable().navigate(path, cb);
  },

  makeHref: function(path) {
    return this._getNavigable().makeHref(path);
  }
};

module.exports = NavigatableMixin;

},{"./Environment":3}],6:[function(__browserify__,module,exports){
"use strict";

var invariant = (window.__ReactShim.invariant);
var merge     = (window.__ReactShim.merge);
var mergeInto = (window.__ReactShim.mergeInto);

/**
 * Create a new route descriptor from a specification.
 *
 * @param {Object} spec
 * @param {?Object} defaults
 */
function createRoute(spec, defaults) {

  var handler = spec.handler;
  var path = spec.path;
  var ref = spec.ref;
  var props = merge({}, spec);

  delete props.path;
  delete props.handler;
  delete props.ref;

  var route = {
    path: path,
    handler: handler,
    props: props,
    ref: ref
  };

  if (defaults) {
    mergeInto(route, defaults);
  }

  invariant(
    typeof route.handler === 'function',
    "Route handler should be a component or a function but got: %s", handler
  );

  invariant(
    route.path !== undefined,
    "Route should have an URL pattern specified: %s", handler
  );

  return route;
}

/**
 * Regular route descriptor.
 *
 * @param {Object} spec
 */
function Route(spec) {
  return createRoute(spec);
}

/**
 * Catch all route descriptor.
 *
 * @param {Object} spec
 */
function NotFound(spec) {
  return createRoute(spec, {path: null});
}

module.exports = {
  Route: Route,
  NotFound: NotFound
};

},{}],7:[function(__browserify__,module,exports){
"use strict";

/**
 * Mixin for routers which implements the simplest rendering strategy.
 */
var RouteRenderingMixin = {

  renderRouteHandler: function() {
    return this.state.match.getHandler();
  }

};

module.exports = RouteRenderingMixin;

},{}],8:[function(__browserify__,module,exports){
"use strict";

var React                     = (window.__ReactShim.React);
var RouterMixin               = __browserify__('./RouterMixin');
var AsyncRouteRenderingMixin  = __browserify__('./AsyncRouteRenderingMixin');

/**
 * Create a new router class
 *
 * @param {String} name
 * @param {ReactComponent} component
 */
function createRouter(name, component) {

  return React.createClass({

    mixins: [RouterMixin, AsyncRouteRenderingMixin],

    displayName: name,

    getRoutes: function(props) {
      return props.children;
    },

    getDefaultProps: function() {
      return {
        component: component
      }
    },

    render: function() {
      var handler = this.renderRouteHandler();
      return this.transferPropsTo(this.props.component(null, handler));
    }
  });
}

module.exports = {
  createRouter: createRouter,
  Locations: createRouter('Locations', React.DOM.div),
  Pages: createRouter('Pages', React.DOM.body),
}

},{"./AsyncRouteRenderingMixin":2,"./RouterMixin":9}],9:[function(__browserify__,module,exports){
"use strict";

var React         = (window.__ReactShim.React);
var invariant     = (window.__ReactShim.invariant);
var emptyFunction = (window.__ReactShim.emptyFunction);
var matchRoutes   = __browserify__('./matchRoutes');
var Environment   = __browserify__('./Environment');

var RouterMixin = {
  mixins: [Environment.Mixin],

  propTypes: {
    path: React.PropTypes.string,
    contextual: React.PropTypes.bool,
    onBeforeNavigation: React.PropTypes.func,
    onNavigation: React.PropTypes.func
  },

  getDefaultProps: function() {
    return {
      onBeforeNavigation: emptyFunction,
      onNavigation: emptyFunction
    };
  },

  childContextTypes: {
    router: React.PropTypes.component
  },

  getChildContext: function() {
    return {
      router: this
    };
  },

  contextTypes: {
    router: React.PropTypes.component
  },

  getInitialState: function() {
    return this.getRouterState(this.props);
  },

  componentWillReceiveProps: function(nextProps) {
    var nextState = this.getRouterState(nextProps);
    this.replaceState(nextState);
  },

  getRouterState: function(props) {
    var path;
    var prefix;

    var parent = this.getParentRouter();

    if (props.contextual && parent) {

      var match = parent.getMatch();

      invariant(
        props.path || isString(match.unmatchedPath),
        "contextual router has nothing to match on: %s", match.unmatchedPath
      );

      path = props.path || match.unmatchedPath;
      prefix = match.matchedPath;
    } else {

      path = props.path || this.getEnvironment().getPath();

      invariant(
        isString(path),
        ("router operate in environment which cannot provide path, " +
         "pass it a path prop; or probably you want to make it contextual")
      );

      prefix = '';
    }

    if (path[0] !== '/') {
      path = '/' + path;
    }

    return {
      match: matchRoutes(this.getRoutes(props), path),
      prefix: prefix,
      navigation: {}
    };
  },

  getEnvironment: function() {
    if (this.props.environment) {
      return this.props.environment;
    }
    if (this.props.hash) {
      return Environment.hashEnvironment;
    }
    if (this.props.contextual && this.context.router) {
      return this.context.router.getEnvironment();
    }
    return Environment.defaultEnvironment;
  },

  /**
   * Return parent router or undefined.
   */
  getParentRouter: function() {
    var current = this.context.router;
    var environment = this.getEnvironment();

    while (current) {
      if (current.getEnvironment() === environment) {
        return current;
      }
    }
  },

  /**
   * Return current match.
   */
  getMatch: function() {
    return this.state.match;
  },

  /**
   * Make href scoped for the current router.
   */
  makeHref: function(href) {
    return join(this.state.prefix, href);
  },

  /**
   * Navigate to a path
   *
   * @param {String} path
   * @param {Callback} cb
   */
  navigate: function(path, navigation, cb) {
    if (typeof navigation === 'function' && cb === undefined) {
      cb = navigation;
      navigation = {};
    }
    navigation = navigation || {};
    path = join(this.state.prefix, path);
    this.getEnvironment().setPath(path, navigation, cb);
  },

  /**
   * Set new path.
   *
   * This function is called by environment.
   *
   * @private
   *
   * @param {String} path
   * @param {String} path
   * @param {Callback} cb
   */
  setPath: function(path, navigation, cb) {
    this.props.onBeforeNavigation(path, navigation);
    this.replaceState({
      match: matchRoutes(this.getRoutes(this.props), path),
      prefix: this.state.prefix,
      navigation: navigation
    }, function() {
      this.props.onNavigation();
      cb();
    }.bind(this));
  },

  /**
   * Return the current path
   */
  getPath: function () {
    return this.state.match.path;
  }

};

function join(a, b) {
  return (a + b).replace(/\/\//g, '/');
}

function isString(o) {
  return Object.prototype.toString.call(o) === '[object String]';
}

module.exports = RouterMixin;

},{"./Environment":3,"./matchRoutes":10}],10:[function(__browserify__,module,exports){
"use strict";

var pattern   = __browserify__('url-pattern');
var mergeInto = (window.__ReactShim.mergeInto);
var invariant = (window.__ReactShim.invariant);

/**
 * Match rotues against a path
 *
 * @param {Array.<Route>} routes
 * @param {String} path
 */
function matchRoutes(routes, path) {
  var match, page, notFound;

  if (!Array.isArray(routes)) {
    routes = [routes];
  }

  for (var i = 0, len = routes.length; i < len; i++) {
    var current = routes[i];

    if ("development" !== "production") {
      invariant(
        current.handler !== undefined && current.path !== undefined,
        "Router should contain either Route or NotFound components " +
        "as routes")
    }

    if (current.path) {
      current.pattern = current.pattern || pattern(current.path);
      if (!page) {
        match = current.pattern.match(path);
        if (match) {
          page = current;
        }
      }
    }
    if (!notFound && current.path === null) {
      notFound = current;
    }
  }

  return new Match(
    path,
    page ? page : notFound ? notFound : null,
    match
  );
}

/**
 * Match object
 *
 * @private
 */
function Match(path, route, match) {
  this.path = path;
  this.route = route;
  this.match = match;

  this.unmatchedPath = this.match && this.match._ ?
    this.match._[0] :
    null;

  this.matchedPath = this.unmatchedPath ?
    this.path.substring(0, this.path.length - this.unmatchedPath.length) :
    this.path;
}

Match.prototype.getHandler = function(ignoreRef) {
  var props = {
    ref: !ignoreRef && this.route ? this.route.ref : undefined
  };
  if (this.route && this.match) {
    mergeInto(props, this.match);
    mergeInto(props, this.route.props);
  }
  return this.route ? this.route.handler(props) : undefined;
}

module.exports = matchRoutes;

},{"url-pattern":12}],11:[function(__browserify__,module,exports){
// Generated by CoffeeScript 1.7.1
var common,
  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

module.exports = common = {
  getNames: function(arg) {
    var name, names, regex, results;
    if (arg instanceof RegExp) {
      return [];
    }
    regex = /((:?:[^\/]+)|(?:[\*]))/g;
    names = [];
    results = regex.exec(arg);
    while (results != null) {
      name = results[1].slice(1);
      if (name === '_') {
        throw new TypeError(":_ can't be used as a pattern name in pattern " + arg);
      }
      if (__indexOf.call(names, name) >= 0) {
        throw new TypeError("duplicate pattern name :" + name + " in pattern " + arg);
      }
      names.push(name || '_');
      results = regex.exec(arg);
    }
    return names;
  },
  toRegexString: function(arg) {
    common.getNames(arg).forEach(function(name) {
      return arg = arg.replace(':' + name, '([^\/]+)');
    });
    return '^' + arg.replace(/\*/g, '(.*)') + '$';
  }
};

},{}],12:[function(__browserify__,module,exports){
// Generated by CoffeeScript 1.7.1
var common, patternPrototype;

common = __browserify__('./common');

patternPrototype = {
  match: function(url) {
    var bound, captured, i, match, name, value, _i, _len;
    match = this.regex.exec(url);
    if (match == null) {
      return null;
    }
    captured = match.slice(1);
    if (this.isRegex) {
      return captured;
    }
    bound = {};
    for (i = _i = 0, _len = captured.length; _i < _len; i = ++_i) {
      value = captured[i];
      name = this.names[i];
      if (name === '_') {
        if (bound._ == null) {
          bound._ = [];
        }
        bound._.push(value);
      } else {
        bound[name] = value;
      }
    }
    return bound;
  }
};

module.exports = function(arg) {
  var isRegex, p;
  isRegex = arg instanceof RegExp;
  if (!(('string' === typeof arg) || isRegex)) {
    throw new TypeError('argument must be a regex or a string');
  }
  p = Object.create(patternPrototype);
  p.isRegex = isRegex;
  p.regex = isRegex ? arg : new RegExp(common.toRegexString(arg));
  if (!isRegex) {
    p.names = common.getNames(arg);
  }
  return p;
};

},{"./common":11}]},{},[1])
});