├── examples
    ├── index.js
    ├── simple.css
    ├── master-detail.js
    ├── redux.js
    ├── animated.js
    ├── dynamic.js
    ├── auth-flow.js
    ├── server.js
    ├── tables.js
    ├── counter.js
    ├── sandbox.js
    └── simple.js
├── tests
    ├── prelude.js
    ├── server.js
    └── index.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── karma.conf.js
├── LICENSE.txt
├── todo.md
├── sandbox.js
├── package.json
├── README.md
├── src
    └── index.js
└── lib
    └── index.js


/examples/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/examples/simple.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/tests/prelude.js:
--------------------------------------------------------------------------------
1 | require('babel-register')();
2 | 


--------------------------------------------------------------------------------
/examples/master-detail.js:
--------------------------------------------------------------------------------
1 | // standard master detail view
2 | 


--------------------------------------------------------------------------------
/examples/redux.js:
--------------------------------------------------------------------------------
1 | // integrate with redux-simple-router
2 | 


--------------------------------------------------------------------------------
/examples/animated.js:
--------------------------------------------------------------------------------
1 | // animate while transitioning between urls
2 | 


--------------------------------------------------------------------------------
/examples/dynamic.js:
--------------------------------------------------------------------------------
1 | // load modules dynamically via require.ensure/webpack
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-0", "react"],
3 |   "plugins": ["transform-decorators-legacy"]
4 | }


--------------------------------------------------------------------------------
/examples/auth-flow.js:
--------------------------------------------------------------------------------
1 | // shirt circuit transition to a url, change url, resolve a task, and then resume transition to previous url
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint-config-rackt",
 3 |   "rules": {
 4 |     "valid-jsdoc": 2,
 5 |     "react/jsx-uses-react": 1,
 6 |     "react/jsx-no-undef": 2,
 7 |     "react/jsx-uses-vars": 2,
 8 |     "jsx-quotes": 0
 9 |   },
10 |   "plugins": [
11 |     "react"
12 |   ]
13 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # osx noise
 2 | .DS_Store
 3 | profile
 4 | 
 5 | # xcode noise
 6 | build/*
 7 | *.mode1
 8 | *.mode1v3
 9 | *.mode2v3
10 | *.perspective
11 | *.perspectivev3
12 | *.pbxuser
13 | *.xcworkspace
14 | xcuserdata
15 | 
16 | # svn & cvs
17 | .svn
18 | CVS
19 | node_modules
20 | coverage
21 | 


--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { renderToString } from 'react-dom/server'
 3 | import { Router, Route, Link } from '../src'
 4 | 
 5 | class App extends Component {
 6 |   render() {
 7 |     return <div>
 8 |       <Route path='/foo'>{
 9 |         () => <div>foo</div>
10 |       }</Route>
11 |       <Route path='/bar' component={Bar}/>
12 |     </div>
13 |   }
14 | }
15 | 
16 | function Bar() {
17 |   return <div>bar</div>
18 | }
19 | 
20 | console.log(renderToString(<Router url='/bar'><App/></Router>))
21 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // this doesn't pass through babel, so no fancy js pls
 2 | module.exports = function(config){
 3 |   config.set({
 4 |     browsers: ['Chrome'],
 5 |     files: ['./tests/index.js'],
 6 |     reporters: ['mocha', 'coverage'],
 7 |     mochaReporter: {
 8 |       output: 'autowatch'
 9 |     },
10 |     preprocessors: {
11 |       '**/src/*.js': ['coverage'],
12 |       './tests/index.js': ['webpack'],
13 |     },
14 |     webpack: {
15 |       module: {
16 |         loaders: [{
17 |           test: /\.js$/,
18 |           exclude: /node_modules/,
19 |           loader: 'babel'
20 |         }, {
21 |           test: /\.js$/,
22 |           include: require('path').resolve('src/'),
23 |           loader: 'isparta'
24 |         }]
25 |       }
26 |     },
27 |     webpackMiddleware: {
28 |       noInfo: true
29 |     },
30 |     frameworks: ['mocha', 'expect']
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/examples/tables.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import { Route, Router } from '../lib'
 3 | 
 4 | function times(n, fn) {
 5 |   let arr = []
 6 |   for (let i = 0; i < n; i++) {
 7 |     arr.push(fn(i))
 8 |   }
 9 |   return arr
10 | }
11 | 
12 | let ctr = 0
13 | 
14 | class App extends Component {
15 |   static contextTypes = {
16 |     history: PropTypes.object
17 |   }
18 |   componentDidMount() {
19 |     setInterval(() => {
20 |       this.context.history.push('/' + ctr)
21 |       ctr++
22 |     }, 10)
23 |   }
24 |   render() {
25 |     return <table>
26 |       <tbody>
27 |         {times(20, i =>
28 |           <tr>
29 |           {times(20, j =>
30 |             <td>
31 |             <Route>{loc =>
32 |               <span>{i}:{j}:{loc.pathname}</span>
33 |             }</Route>
34 |             </td>)}
35 |           </tr>)}
36 |       </tbody>
37 |     </table>
38 |   }
39 | }
40 | 
41 | 
42 | export default <Router><App/></Router>
43 | 


--------------------------------------------------------------------------------
/examples/counter.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { render } from 'react-dom'
 3 | import { Router, Route, Link } from '../src'
 4 | 
 5 | const active = {
 6 |   border: '1px solid red'
 7 | }
 8 | 
 9 | class Counter extends Component {
10 |   state = {
11 |     count: 0
12 |   }
13 |   onClick = () => {
14 |     this.setState({
15 |       count: this.state.count + 1
16 |     })
17 |   }
18 |   render() {
19 |     return <div>
20 |       <ul>
21 |         <li><Link activeStyle={active} to='/1'>1</Link></li>
22 |         <li><Link activeStyle={active} to='/2'>2</Link></li>
23 |         <li><Link activeStyle={active} to='/3'>3</Link></li>
24 |       </ul>
25 |       <Route>{location =>
26 |         <div onClick={this.onClick}>
27 |           clicked {this.state.count} times <br/>
28 |           you are at {location.pathname}
29 |         </div>}
30 |       </Route>
31 |     </div>
32 |   }
33 | }
34 | 
35 | render(<Router><Counter/></Router>, document.getElementById('app'))
36 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2016 Sunil Pai
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
 1 | - properly 'nest' urls
 2 | - examples
 3 | - comparisons should/shouldn't include querystring?
 4 | - webpack dev flow
 5 | - handle multiple redirects on the same render tree
 6 | - cache path regexps
 7 | - a11y
 8 | - test query string matching etc
 9 | - perfffff
10 | 
11 | (via rr)
12 | - stringifyQuery
13 | - parseQuery
14 | - expose history helpers
15 | 
16 | - ~ transitions / leave / enter, onBeforeUnload * todo: authWare flow
17 | - ~ animations between urls * use hooks/springs?
18 | - ~ scroll states * use rackt/scroll-behavior, after historyV2 compat
19 | - ~ redirects * todo: server side handling
20 | - ~ testsssss
21 | 
22 | - ✓ expose context.routah
23 | - ✓ dynamic routing * require.ensure should just work
24 | - ✓ redux-simple-router * it just works!
25 | 
26 | - ✓ default browser history object
27 | - ✓ default node history object
28 | - ✓ path-to-regexp for matching
29 | - ✓ server side rendering
30 | - ✓ `<NotFound/>` via RouteStack
31 | - ✓ overwrite context.history for a subtree
32 | 
33 | - x `<IndexRoute />`? * not needed, just use a `<Route path='/' />`
34 | - x async data * not a concern of this library (or fetch prop? or falcor?)
35 | - x activeClass / activeStyle - removed - wasn't 'right'
36 | 


--------------------------------------------------------------------------------
/examples/sandbox.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import { render } from 'react-dom'
 3 | import { Router, Link, Route, Redirect } from '../src'
 4 | 
 5 | 
 6 | class App extends Component {
 7 |   static contextTypes = {
 8 |     routah: PropTypes.object
 9 |   }
10 |   render() {
11 |     return <Route onEnter={(l, cb) => console.log('enter', l.pathname) || cb() } onLeave={(l, cb) => console.log('leave', l.pathname) || cb()}>{
12 |       location => {
13 |         let dest1 = Math.round(Math.random() * 1000)
14 |         return <div>
15 |           you're at {location.pathname} <br/>
16 |           <Route path={location.pathname}>{
17 |             () => <span>inside</span>
18 |           }</Route>
19 |           <Route path='/secret' onEnter={(l, cb) => console.log('enter', l.pathname) || cb() } onLeave={(l, cb) => console.log('leave', l.pathname) || cb()} onUnload={() => 'are you sure'}>{
20 |             () => <div>matched!</div>
21 |           }</Route>
22 |           <Link to={`/${dest1}`}>/{dest1}</Link> <br/>
23 |           or else <span onClick={() => console.log(this, 'this') || this.context.routah.history.push(`/secret`)}>secret</span> <br/>
24 |           and here's a <Link to='/secret' activeStyle={{ border: '1px solid red' }}>secret link</Link>
25 |         </div>
26 |       }
27 |     }</Route>
28 |   }
29 | }
30 | 
31 | 
32 | render(<Router><App/></Router>, document.getElementById('app'))
33 | 


--------------------------------------------------------------------------------
/examples/simple.js:
--------------------------------------------------------------------------------
 1 | // x - active links
 2 | // breadcrumbs
 3 | // passing props to children
 4 | // query params
 5 | // sidebar
 6 | 
 7 | import React, { Component } from 'react'
 8 | import { render } from 'react-dom'
 9 | import { Router, Route, Link, RouteStack, Redirect } from '../src'
10 | 
11 | 
12 | class App extends Component {
13 |   render() {
14 |     return <div>
15 |       <ul>
16 |         <li><Link to='/about'>about</Link></li>
17 |         <li><Link to='/inbox'>inbox</Link></li>
18 |         <li><Link to='/'>home</Link></li>
19 |       </ul>
20 |       <div>
21 |         <Route path='/about'>{
22 |           () => <div>about us</div>
23 |         }</Route>
24 |         <Route path='/inbox'>{
25 |           () => <div>inbox</div>
26 |         }</Route>
27 |         <Route path='/dashboard'>{
28 |           () => <div>dashboard</div>
29 |         }</Route>
30 |         <Route path='/'>{
31 |           () => <Redirect to='/dashboard' />
32 |         }</Route>
33 |         <RouteStack>
34 |           <Route path='/about'>{() => <div>stack about</div>}</Route>
35 |           <Route path='/inbox'>{() => <div>stack inbox</div>}</Route>
36 |           <Route path='/bababooey'>{() => <div>stack bababooey</div>}</Route>
37 |           <Route>{() => <div>stack default</div>}</Route>
38 |         </RouteStack>
39 |       </div>
40 |     </div>
41 |   }
42 | }
43 | 
44 | render(<Router><App/></Router>, document.getElementById('app'))
45 | 


--------------------------------------------------------------------------------
/sandbox.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import {render} from 'react-dom';
 3 | import {Router, Link, Route, Redirect} from './src';
 4 | 
 5 | 
 6 | class App extends Component{
 7 |   static contextTypes = {
 8 |     routah: PropTypes.object
 9 |   };
10 |   render(){
11 |     console.log(this.context);
12 |     return <Route onEnter={(l, cb) => console.log('enter', l.pathname) || cb() } onLeave={(l, cb) => console.log('leave', l.pathname) || cb()}>{
13 |       location => {
14 |         let dest1 = Math.round(Math.random() * 1000);
15 |         return <div>
16 |           you're at {location.pathname} <br/>
17 |           <Route path={location.pathname}>{
18 |             loc => <span>inside</span>
19 |           }</Route>
20 |           <Route path='/secret' onEnter={(l, cb) => console.log('enter', l.pathname) || cb() } onLeave={(l, cb) => console.log('leave', l.pathname) || cb()} onUnload={() => 'are you sure'}>{
21 |             () => <div>matched!</div>
22 |           }</Route>
23 |           <Link to={`/${dest1}`}>/{dest1}</Link> <br/>
24 |           or else <span onClick={() => console.log(this, 'this') || this.context.routah.history.push(`/secret`)}>secret</span> <br/>
25 |           and here's a <Link to='/secret' activeStyle={{border: '1px solid red'}}>secret link</Link>
26 |         </div>;
27 |       }
28 |     }</Route>;
29 |   }
30 | }
31 | 
32 | 
33 | render(<Router><App/></Router>, document.getElementById('app'));
34 | 


--------------------------------------------------------------------------------
/tests/server.js:
--------------------------------------------------------------------------------
 1 | /* global describe, it */
 2 | import React, {Component, PropTypes} from 'react';
 3 | import {Router, Route} from '../src';
 4 | import {renderToString, renderToStaticMarkup} from 'react-dom/server';
 5 | import {createMemoryHistory} from 'history';
 6 | 
 7 | import expect from 'expect';
 8 | import expectJSX from 'expect-jsx';
 9 | expect.extend(expectJSX);
10 | 
11 | describe('server side routah', () => {
12 |   it('prop: history', done => {
13 |     class App extends Component{
14 |       static contextTypes = {
15 |         history: PropTypes.object
16 |       };
17 |       componentWillMount(){
18 |         this.context.history.listen(l => expect(l.pathname).toEqual('/xyz'))();
19 |         done();
20 |       }
21 |       render(){
22 |         return null;
23 |       }
24 |     }
25 | 
26 |     renderToString(<Router history={createMemoryHistory('/xyz')}><App/></Router>);
27 |   });
28 |   it('prop: url', done => {
29 |     class App extends Component{
30 |       static contextTypes = {
31 |         history: PropTypes.object
32 |       };
33 |       componentWillMount(){
34 |         this.context.history.listen(l => expect(l.pathname).toEqual('/xyz'))();
35 |         done();
36 |       }
37 |       render(){
38 |         return null;
39 |       }
40 |     }
41 | 
42 |     renderToString(<Router url='/xyz'><App/></Router>);
43 | 
44 |   });
45 |   it('should render to string/markup');
46 |   it('should catch redirects');
47 | 
48 | 
49 | });
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "routah",
 3 |   "version": "1.3.3",
 4 |   "description": "simple routing for react ",
 5 |   "main": "./lib/index.js",
 6 |   "scripts": {
 7 |     "build": "babel src -d lib",
 8 |     "dev": " ./node_modules/.bin/babel-node ./node_modules/.bin/karma start karma.conf.js",
 9 |     "test": " ./node_modules/.bin/babel-node ./node_modules/.bin/karma start karma.conf.js --single-run",
10 |     "test:server": "./node_modules/.bin/mocha tests/server.js --require tests/prelude.js"
11 |   },
12 |   "author": "",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "babel-cli": "^6.7.5",
16 |     "babel-core": "^6.7.6",
17 |     "babel-eslint": "^6.0.2",
18 |     "babel-loader": "^6.2.4",
19 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
20 |     "babel-preset-es2015": "^6.6.0",
21 |     "babel-preset-react": "^6.5.0",
22 |     "babel-preset-stage-0": "^6.5.0",
23 |     "babel-register": "^6.7.2",
24 |     "css-loader": "^0.23.1",
25 |     "eslint": "^2.8.0",
26 |     "eslint-config-rackt": "^1.1.1",
27 |     "eslint-plugin-react": "^5.0.1",
28 |     "expect": "^1.18.0",
29 |     "expect-jsx": "^2.5.1",
30 |     "isparta-loader": "^2.0.0",
31 |     "karma": "^0.13.22",
32 |     "karma-chrome-launcher": "^0.2.3",
33 |     "karma-coverage": "^0.5.5",
34 |     "karma-expect": "^1.1.2",
35 |     "karma-mocha": "^0.2.2",
36 |     "karma-mocha-reporter": "^2.0.1",
37 |     "karma-webpack": "^1.7.0",
38 |     "mocha": "^2.4.5",
39 |     "react": "^15.0.1",
40 |     "react-dom": "^15.0.1",
41 |     "style-loader": "^0.13.1",
42 |     "webpack": "^1.13.0"
43 |   },
44 |   "dependencies": {
45 |     "history": "^2.1.0",
46 |     "path-to-regexp": "^1.2.1"
47 |   },
48 |   "peerDependencies": {
49 |     "react": "*"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | routah
  2 | ---
  3 | 
  4 | ** DEPRECATED - USE REACT ROUTER v4 **
  5 | 
  6 | `npm install routah --save`
  7 | 
  8 | - heavily inspired by [react-router](https://github.com/rackt/react-router) and [react-motion](https://github.com/chenglou/react-motion)
  9 | - render `<Route />` elements anywhere in your app
 10 | - [express](http://expressjs.com/)-style pattern matching
 11 | - server-side friendly
 12 | - tests
 13 | - more!
 14 | 
 15 | ```jsx
 16 | 
 17 | import {Router, Route, Link, Redirect} from 'routah';
 18 | 
 19 | function App(){
 20 |   return <div>
 21 |     <ul>
 22 |       {/* link across the app */}
 23 |       <li><Link to='/1'>Page 1</Link></li>
 24 |       <li><Link to='/2'>Page 2</Link></li>
 25 |       <li><Link to='/p/1e536f'>Page 3</Link></li>
 26 |       <li><Link to='/4'>Page 4</Link></li>
 27 |     </ul>
 28 | 
 29 |     {/* renders when the browser url is /1 */}
 30 |     <Route path='/1' component={Page1} />
 31 |     {/* and similarly when /2 */}
 32 |     <Route path='/2' component={Page2} passProps={{more: data}}/>
 33 | 
 34 |     {/* match across paths */}
 35 |     <Route path={['/p/:id', 'para/:id']}>{
 36 |       location => // you can use a render callback
 37 |         <div>
 38 |           <MyApp section={location.params.id} sub={location.query.sub} />
 39 |           {/* render routes wherever */}
 40 |           <Route path='/p/special'
 41 |             component={Special} onEnter={::console.log} />
 42 |         </div>
 43 |     }</Route>
 44 | 
 45 |     {/* you can also redirect to other portions of the app */}
 46 |     <Route path='/3'>{
 47 |       location => <Redirect to='/2' /> // triggers a `history.push`
 48 |     }</Route>
 49 | 
 50 |     {/* read the docs/examples for more! */}
 51 |   </div>;
 52 | }
 53 | 
 54 | ReactDOM.render(<Router><App/></Router>, document.body)
 55 | ```
 56 | 
 57 | 
 58 | Router
 59 | ---
 60 | 
 61 | Wrap your application in a `<Router>` element to start the router
 62 | ```jsx
 63 | render(<Router><App/></Router>, element);
 64 | ```
 65 | 
 66 | - `history` - (optional) [history](https://github.com/rackt/history) object
 67 | 
 68 | Route
 69 | ---
 70 | 
 71 | A `<Route path={...}>` element renders only when the current url matches the `path` expression.
 72 | ```jsx
 73 | // you can use a render-callback
 74 | <Route path='/about'>{
 75 |   () => <div>About Us</div>
 76 | }</Route>
 77 | 
 78 | // or pass the component and optionally props
 79 | <Route path={['/inbox', '/inbox/:id']} component={Inbox} passProps={{some: data}} />
 80 | ```
 81 | 
 82 | - `path` - an [express-style](https://github.com/pillarjs/path-to-regexp) path matcher
 83 | - `path` - an array of the above
 84 | - render via `children (location, history)` - a [render-callback](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626)
 85 | - render via `component` - a `React.Component` which will receive *{location, history}* as props
 86 | - `passProps` - additional props to transfer when using `component`
 87 | - `onMount (location)`
 88 | - `onEnter (location, callback)`
 89 | - `onLeave (location, callback)`
 90 | - `onUnload (location)`
 91 | - `notFound (location)`  - a render-callback when `path` doesn't match. defaults to `() => null`
 92 | 
 93 | Link
 94 | ---
 95 | 
 96 | A `<Link to={...}>` is a replacement for `<a>` elements
 97 | ```jsx
 98 | <Link to={{path: '/inbox', query: {id}}}>message {id}</Link>
 99 | ```
100 | 
101 | - `to` - url
102 | - `to` - a [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
103 | - `onClick`, `className`, `style` - analogous to ReactDOM props
104 | 
105 | Redirect
106 | ---
107 | 
108 | A `<Redirect to={...} />` triggers a redirect to `to` whenever/wherever rendered.
109 | ```jsx
110 | <Route path='/old'>{
111 |   () => <Redirect to='/new'/>
112 | }<Route>
113 | ```
114 | 
115 | - `to` - url
116 | - `to` - a [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
117 | 
118 | RouteStack
119 | ---
120 | 
121 | This emulates a behavior from react-router - given one or more `<Routes/>`, render only the first matching element. This makes it easy to make Index/NotFound pages. eg -
122 | ```jsx
123 | <RouteStack notFound={() => <NotFound/> }>
124 |   <Route path='/about' component={About} />
125 |   <Route path='/inbox' component={Inbox} />
126 |   <Route component={Default} />
127 | </RouteStack>
128 | ```
129 | 
130 | - `children` - one or more `<Route/>` elements
131 | - `notFound (location)` - when no child matches. good for 404s!
132 | 
133 | context.history
134 | ---
135 | 
136 | The `history` object is passed via `context` to all its descendants. Use it to trigger actions on the url -
137 | 
138 | - `push` - url
139 | - `push` - [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
140 | - `replace` - url
141 | - `replace` - [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
142 | - `go(n)`
143 | - `goBack()`
144 | - `goForward()`
145 | - [more](https://github.com/rackt/history/blob/master/docs/GettingStarted.md)
146 | 
147 | 
148 | differences from react-router
149 | ---
150 | 
151 | - `Route` accepts a 'children as a function' [render-callback]([render-callback](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626)) (as an alternative to `component`/`passProps` props)
152 | - `<Route />` elements can be rendered anywhere in the app
153 | - urls don't get 'nested', no activeClass/activeStyle - [issue #1](https://github.com/threepointone/routah/issues/1)
154 | - sibling `<Route />` elements don't depend on each other (use `<RouteStack />` for similar behavior)
155 | - no async data/components/routes loading - consider using a lib like [AsyncProps](https://github.com/rackt/async-props), [react-resolver](http://ericclemmons.com/react-resolver/), etc
156 | 


--------------------------------------------------------------------------------
/tests/index.js:
--------------------------------------------------------------------------------
  1 | /* global describe, it, beforeEach, afterEach */
  2 | 
  3 | import React, { Component, PropTypes } from 'react'
  4 | import { render, unmountComponentAtNode } from 'react-dom'
  5 | import { findRenderedDOMComponentWithTag, Simulate } from 'react-addons-test-utils'
  6 | import { Route, Router, Link, Redirect, RouteStack, connectHistory } from '../src'
  7 | import { createMemoryHistory } from 'history'
  8 | 
  9 | import expect from 'expect'
 10 | import expectJSX from 'expect-jsx'
 11 | expect.extend(expectJSX)
 12 | 
 13 | 
 14 | describe('Router', () => {
 15 |   let node
 16 |   beforeEach(() => node = document.createElement('div'))
 17 |   afterEach(() => unmountComponentAtNode(node))
 18 | 
 19 |   it('will introduce a `history` context', done => {
 20 |     class App extends Component {
 21 |       static contextTypes = {
 22 |         history: PropTypes.object
 23 |       }
 24 |       componentDidMount() {
 25 |         expect(this.context.history).toExist()
 26 |         done()
 27 |       }
 28 |       render() {
 29 |         return null
 30 |       }
 31 |     }
 32 | 
 33 |     render(<Router>
 34 |       <App />
 35 |     </Router>, node)
 36 |   })
 37 | 
 38 |   it('prop: default history object', () => {
 39 |     class App extends Component {
 40 |       static contextTypes = {
 41 |         history: PropTypes.object
 42 |       }
 43 |       componentDidMount() {
 44 |         this.context.history.listen(l => expect(l.pathname).toEqual(window.location.pathname))()
 45 |       }
 46 |       render() {
 47 |         return null
 48 |       }
 49 |     }
 50 | 
 51 |     render(<Router>
 52 |       <App />
 53 |     </Router>, node)
 54 |   })
 55 | 
 56 |   it('prop: custom history object', () => {
 57 |     class App extends Component {
 58 |       static contextTypes = {
 59 |         history: PropTypes.object
 60 |       }
 61 |       componentDidMount() {
 62 |         this.context.history.listen(l => expect(l.pathname).toEqual('/123'))()
 63 |       }
 64 |       render() {
 65 |         return null
 66 |       }
 67 |     }
 68 |     let h = createMemoryHistory('/123')
 69 |     render(<Router history={h}>
 70 |       <App />
 71 |     </Router>, node)
 72 | 
 73 |   })
 74 | 
 75 |   it('does not render multiple children', () => {
 76 |     function App() {
 77 |       return <noscript/>
 78 |     }
 79 | 
 80 |     expect(() => render(<Router>
 81 |       <App />
 82 |       <App />
 83 |       <App />
 84 |     </Router>, node)).toThrow()
 85 |   })
 86 | 
 87 |   it('can override context when nested', () => {
 88 |     let h = createMemoryHistory('/')
 89 | 
 90 |     class App extends Component {
 91 |       static contextTypes = {
 92 |         history: PropTypes.object
 93 |       }
 94 |       render() {
 95 |         return <div>
 96 |           <Router history={h}><Inner onCtx={ctx => expect(ctx.history).toEqual(h)}/></Router>
 97 |           <Inner onCtx={ctx => expect(ctx.history).toEqual(this.context.history)} />
 98 |         </div>
 99 |       }
100 |     }
101 | 
102 |     class Inner extends Component {
103 |       static contextTypes = {
104 |         history: PropTypes.object
105 |       }
106 |       componentDidMount() {
107 |         this.props.onCtx(this.context)
108 |       }
109 |       render() {
110 |         return null
111 |       }
112 |     }
113 | 
114 |     render(<Router>
115 |       <App/>
116 |     </Router>, node)
117 |   })
118 | 
119 | })
120 | 
121 | describe('@connectHistory', () => {
122 |   let node
123 |   beforeEach(() => node = document.createElement('div'))
124 |   afterEach(() => unmountComponentAtNode(node))
125 | 
126 |   it('expects context.history', () => {
127 |     @connectHistory
128 |     class X extends Component {
129 |       render() {
130 |         return null
131 |       }
132 |     }
133 | 
134 |     expect(() => render(<X/>, node)).toThrow()
135 | 
136 |     node = document.createElement('div')
137 |     unmountComponentAtNode(node)
138 | 
139 |     expect(() => render(<Router><X/></Router>, node)).toNotThrow()
140 | 
141 |   })
142 |   it('receives the current location', () => {
143 |     @connectHistory
144 |     class X extends Component {
145 |       render() {
146 |         return <div>{this.props.location.pathname}</div>
147 |       }
148 |     }
149 | 
150 |     let h = createMemoryHistory('/babbabooey')
151 | 
152 |     render(<Router history={h}><X/></Router>, node)
153 |     expect(node.innerText).toEqual('/babbabooey')
154 | 
155 |   })
156 | 
157 |   it('refreshes when the url changes', () => {
158 |     @connectHistory
159 |     class X extends Component {
160 |       render() {
161 |         return <div>{this.props.location.pathname}</div>
162 |       }
163 |     }
164 | 
165 |     let h = createMemoryHistory('/babbabooey')
166 | 
167 |     render(<Router history={h}><X/></Router>, node)
168 |     h.push('/hueylewis')
169 |     expect(node.innerText).toEqual('/hueylewis')
170 |   })
171 | 
172 | })
173 | 
174 | describe('Route', () => {
175 |   let node
176 |   beforeEach(() => node = document.createElement('div'))
177 |   afterEach(() => unmountComponentAtNode(node))
178 | 
179 |   it('requires a Router parent / history context', () => {
180 |     expect(() => render(<Route/>, node)).toThrow()
181 |   })
182 | 
183 |   it('prop: children()', () => {
184 | 
185 |     render(<Router>
186 |       <Route>{ () => <div>test123</div> }</Route>
187 |     </Router>, node)
188 | 
189 |     expect(node.innerText).toEqual('test123')
190 |   })
191 | 
192 |   it('renders with the current url', () => {
193 |     render(<Router history={createMemoryHistory('/babbabooey')}>
194 |       <Route>{ location => <div>{location.pathname}</div> }</Route>
195 |     </Router>, node)
196 | 
197 |     expect(node.innerText).toEqual('/babbabooey')
198 |   })
199 | 
200 |   it('prop: path', () => {
201 |     class Inner extends Component {
202 |       render() {
203 |         return <div>{this.props.location.pathname}:{this.props.x}</div>
204 |       }
205 |     }
206 |     render(<Router history={createMemoryHistory('/babba/booey?x=1')}>
207 |       <div>
208 |         {/* renders with current location */}
209 |         <Route>{ location => <div>{location.pathname}</div>}</Route>
210 | 
211 | 
212 |         {/* can also pass component / passProps */}
213 |         <Route component={Inner} passProps={{ x: 'whoo' }} />
214 | 
215 |         {/* non-matching path won't render */}
216 |         <Route path='/hueylewis'>{ () => { throw new Error('won\'t throw') }}</Route>
217 | 
218 |         {/* express style matching */}
219 |         <Route path='/babba/:huh'>{ location => {
220 |           expect(location.params.huh === 'booey')
221 |           return <div>huhpassed</div>
222 |         }}</Route>
223 | 
224 |         {/* pass multiple paths as an array  */}
225 |         <Route path={[ '/notmatching/:huh', '/:matching/booey' ]}>{ location => {
226 |           expect(location.params.matching === 'babba')
227 |           return <div>huhpassed</div>
228 |         }}</Route>
229 | 
230 |         {/* custom notFound render */}
231 |         <Route path='/notmatching' notFound={() => <div>notfound</div>}>{ () => { throw new Error('won\'t render') } }</Route>
232 | 
233 |         {/* can be nested */}
234 |         <Route path='/babba/:id'>{
235 |           () => {
236 |             return <div>
237 |               <Route path='/babba/booey'>{() => <div>x</div>}</Route>
238 |               <Route path='/babba/gabba'>{() => { throw new Error('won\'t throw') }}</Route>
239 |             </div>
240 |           }
241 |         }</Route>
242 | 
243 |       </div>
244 |     </Router>, node)
245 | 
246 |     expect(node.innerText).toEqual('/babba/booey/babba/booey:whoohuhpassedhuhpassednotfoundx')
247 |   })
248 | 
249 | 
250 |   it('does not render multiple children', () => {
251 |     expect(() => render(<Router><Route>{() => [ <div/>, <div/> ]}</Route></Router>, node)).toThrow()
252 |   })
253 | 
254 |   it('prop: onMount onEnter onLeave onUnload')
255 | 
256 |   it('refreshes when the url changes', () => {
257 |     let h = createMemoryHistory('/x')
258 |     render(<Router history={h}><Route>{l => <div>{l.pathname}</div>}</Route></Router>, node)
259 |     expect(node.innerText).toEqual('/x')
260 |     h.push('/y')
261 |     expect(node.innerText).toEqual('/y')
262 |   })
263 | 
264 | })
265 | 
266 | describe('Link', () => {
267 |   let node
268 |   beforeEach(() => node = document.createElement('div'))
269 |   afterEach(() => unmountComponentAtNode(node))
270 | 
271 |   it('requires a Router parent / history context', () => {
272 |     expect(() => render(<Link/>, node)).toThrow()
273 |   })
274 | 
275 |   it('prop: to', () => {
276 |     let tree = render(<Router>
277 |       <Link to='/x'>go where?</Link>
278 |     </Router>, node)
279 | 
280 |     expect(findRenderedDOMComponentWithTag(tree, 'a').pathname).toEqual('/x')
281 |   })
282 | 
283 |   it('prop: onClick className style', done => {
284 |     let h = createMemoryHistory()
285 |     let tree = render(<Router history={h}>
286 |       <Link to='/x' className='some thing here' onClick={e => (e.preventDefault(), done())}>go where?</Link>
287 |     </Router>, node)
288 |     let a = findRenderedDOMComponentWithTag(tree, 'a')
289 |     expect(a.pathname).toEqual('/x')
290 |     expect([ ...a.classList ]).toEqual([ 'some', 'thing', 'here' ])
291 |     Simulate.click(a)
292 | 
293 |   })
294 | 
295 | 
296 |   it('refreshes when the url changes', () => {
297 |     // previous set
298 |   })
299 | 
300 | 
301 | })
302 | 
303 | describe('Redirect', ()=> {
304 |   let node
305 |   beforeEach(() => node = document.createElement('div'))
306 |   afterEach(() => unmountComponentAtNode(node))
307 | 
308 |   it('requires a Router parent / history context', () => {
309 |     expect(() => render(<Redirect/>, node)).toThrow()
310 |   })
311 | 
312 |   it('prop: to', () => {
313 |     let h = createMemoryHistory('/x')
314 |     render(<Router history={h}>
315 |       <Redirect to={'/y'} />
316 |     </Router>, node)
317 |     h.listen(l => expect(l.pathname).toEqual('/y'))()
318 |   })
319 | 
320 | })
321 | 
322 | describe('RouteStack', ()=> {
323 |   let node
324 |   beforeEach(() => node = document.createElement('div'))
325 |   afterEach(() => unmountComponentAtNode(node))
326 | 
327 |   it('requires a Router parent / history context', () => {
328 |     expect(() => render(<RouteStack/>, node)).toThrow()
329 |   })
330 | 
331 |   it('only accepts <Route/> elements as children', () => {
332 |     expect(() => render(<Router>
333 |         <RouteStack>
334 |           <div />
335 |           <Route path='/xyz'/>
336 |           <Route />
337 |         </RouteStack>
338 |       </Router>, node)).toThrow()
339 |     // ugh
340 |     node = document.createElement('div')
341 |     unmountComponentAtNode(node)
342 | 
343 |     render(<Router>
344 |         <RouteStack>
345 |           <Route path='/xyz'/>
346 |           <Route path='/123'/>
347 |           <Route />
348 |         </RouteStack>
349 |       </Router>, node)
350 |   })
351 | 
352 |   it('only renders the first matching <Route/>', () => {
353 |     let h = createMemoryHistory('/3')
354 |     render(<Router history={h}>
355 |       <RouteStack>
356 |         <Route path='/xyz'>{() => <span> yay again! </span> }</Route>
357 |         <Route path='/3'>{() => <span> yay! </span> }</Route>
358 |         <Route path='/3'>{() => <span> boo :( </span> }</Route>
359 |       </RouteStack>
360 |     </Router>, node)
361 |     expect(node.innerText).toEqual(' yay! ')
362 |     h.push('/xyz')
363 |     expect(node.innerText).toEqual(' yay again! ')
364 |   })
365 | 
366 |   it('refreshes when the url changes', () => {
367 |     // above set
368 |   })
369 | 
370 |   it('prop: notFound', () => {
371 |     render(<Router>
372 |       <RouteStack notFound={() => <div>here!</div>}>
373 |         <Route path='/xyz'>{() => <span> yay again! </span> }</Route>
374 |         <Route path='/3'>{() => <span> yay! </span> }</Route>
375 |         <Route path='/3'>{() => <span> boo :( </span> }</Route>
376 |       </RouteStack>
377 |     </Router>, node)
378 |     expect(node.innerText).toEqual('here!')
379 |   })
380 | })
381 | 
382 | describe('util', () => {
383 |   it('path matching')
384 | })
385 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | // the usual suspects
  2 | import React, { Component, Children, PropTypes } from 'react'
  3 | 
  4 | // express.js path matching
  5 | import pathToRegexp from 'path-to-regexp'
  6 | 
  7 | // history utils
  8 | import { createHistory, createMemoryHistory, useBeforeUnload } from 'history'
  9 | 
 10 | const isBrowser = typeof window !== 'undefined'
 11 | 
 12 | // setup a hidden singleton history object. a good default.
 13 | const HISTORY = isBrowser ? useBeforeUnload(createHistory)() : null
 14 | 
 15 | const has = {}.hasOwnProperty
 16 | 
 17 | // top level component. (optional) pass in a history object.
 18 | // <Router history={history}>
 19 | //   <App/>
 20 | // </Router>
 21 | export class Router extends Component {
 22 |   static propTypes = {
 23 |     history: PropTypes.object,
 24 |     url: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),  // shortcut, only for server side
 25 |     children: React.PropTypes.element.isRequired
 26 |   }
 27 | 
 28 |   static defaultProps = {
 29 |     url: !isBrowser ? '/' : null
 30 |   }
 31 | 
 32 |   static contextTypes = {
 33 |     // discover if we're nested in another <Router/> / some other provider
 34 |     history: PropTypes.object
 35 |   }
 36 | 
 37 |   static childContextTypes = {
 38 |     history: PropTypes.object.isRequired
 39 |   }
 40 | 
 41 |   // default history. on server, this is a new instance with every element
 42 |   __history__ = isBrowser ? HISTORY : useBeforeUnload(createMemoryHistory)(this.props.url)
 43 | 
 44 |   getChildContext() {
 45 |     return {
 46 |       history:
 47 |         this.props.history ||
 48 |         this.context.history ||
 49 |         this.__history__
 50 |     }
 51 |   }
 52 | 
 53 |   render() {
 54 |     return Children.only(this.props.children)
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | // for an array, run fn on every element and break on the first truthy return value
 60 | function find(arr, fn) {
 61 |   for (let i = 0; i < arr.length; i++) {
 62 |     let res = fn(arr[i])
 63 |     if (res) {
 64 |       return res
 65 |     }
 66 |   }
 67 | }
 68 | 
 69 | 
 70 | // a helper to get the current location from the history object
 71 | // (this was way more useful before the refactor)
 72 | function currentLocation(h) {
 73 |   let loc
 74 |   h.listen(location => loc = location)() // don't forget to  dispose!
 75 |   return loc
 76 | }
 77 | 
 78 | function decodeParam(val) {
 79 |   if (typeof val !== 'string' || val.length === 0) {
 80 |     return val
 81 |   }
 82 | 
 83 |   try {
 84 |     return decodeURIComponent(val)
 85 |   } catch (err) {
 86 |     if (err instanceof URIError) {
 87 |       err.message = 'Failed to decode param \'' + val + '\''
 88 |       err.status = err.statusCode = 400
 89 |     }
 90 | 
 91 |     throw err
 92 |   }
 93 | }
 94 | 
 95 | 
 96 | // pattern matching for urls
 97 | function pathMatch(pattern, path, end = true) {
 98 |   let keys = [], params = {},
 99 |   // _path,
100 |     regexp = pathToRegexp(pattern, keys, { end }), m = regexp.exec(path)
101 |   if (!m) {
102 |     return false
103 |   }
104 |   // _path = m[0]
105 | 
106 |   for (let i = 1; i < m.length; i++) {
107 |     let key = keys[i - 1]
108 |     let prop = key.name
109 |     let val = decodeParam(m[i])
110 | 
111 |     if (val !== undefined || !params::has(prop)) {
112 |       params[prop] = val
113 |     }
114 |   }
115 |   return params
116 | }
117 | 
118 | 
119 | // given pattern | [pattern] and a url, tell if pattern matches
120 | function matches(patterns, url) {
121 |   if (!patterns) {
122 |     return true
123 |   }
124 |   if (!Array.isArray(patterns)) {
125 |     return pathMatch(patterns, url)
126 |   }
127 | 
128 |   return find(patterns, p => pathMatch(p, url))
129 | }
130 | 
131 | 
132 | // decorator for a component to hook up to the history object
133 | // to get location passed to it as a prop every time it changes
134 | // not really a public api, though we export it for testability
135 | export function connectHistory(Target) {
136 |   return class History extends Component {
137 |     static displayName = 'history:(' + (Target.displayName || Target.name) + ')'
138 | 
139 |     static contextTypes = {
140 |       history: PropTypes.object
141 |     }
142 | 
143 |     state = {
144 |       location: currentLocation(this.context.history)  // start with the initial location
145 |     }
146 | 
147 |     componentWillMount() {
148 |       if (!this.context.history) {
149 |         throw new Error('did you forget a parent <Router>?')
150 |       }
151 |     }
152 | 
153 |     componentDidMount() {
154 |       let started = false
155 |       this.dispose = this.context.history.listen(location => {
156 |         // discard first (sync) response since we already have it
157 |         if (!started) {
158 |           started = true
159 |           return
160 |         }
161 |         // sometimes (esp. when nested) - this throws saying its already unmounted
162 |         // must understand what's going on
163 |         this.setState({ location })
164 |       })
165 |     }
166 | 
167 |     componentWillUnmount() {
168 |       // clean up
169 |       this.dispose()
170 |     }
171 | 
172 |     render() {
173 |       // add location to originally passed props, and send down
174 |       return React.createElement(Target, { ...this.props, location: this.state.location }, this.props.children)
175 |     }
176 |   }
177 | }
178 | 
179 | 
180 | // The big idea -
181 | // `<Route path={...} .../>` will render only when `path` matches the current browser url
182 | // that's it.
183 | // we introduce some lifecycle hooks and customizability for ease of dev
184 | @connectHistory
185 | export class Route extends Component {
186 |   static propTypes = {
187 |     // path | [path], where path follows [path-to-regexp](https://github.com/pillarjs/path-to-regexp)
188 |     path: PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string) ]),
189 |     // a render callback
190 |     children: PropTypes.func,
191 |     // an alternative to the render callback
192 |     component: PropTypes.func,
193 |     passProps: PropTypes.object,
194 | 
195 |     // hooks
196 |     onMount: PropTypes.func,
197 |     onEnter: PropTypes.func,
198 |     onLeave: PropTypes.func,
199 |     onUnload: PropTypes.func,
200 | 
201 |     // render when nothing matches
202 |     notFound: PropTypes.func
203 |   }
204 | 
205 |   static defaultProps = {
206 |     notFound: () => null,
207 |     passProps: {},
208 |     children: () => {},
209 |     onMount: () => {},
210 |     onEnter: (l, cb) => cb(),
211 |     onLeave: (l, cb) => cb()
212 |   }
213 | 
214 |   static contextTypes = {
215 |     history: PropTypes.object
216 |   }
217 | 
218 |   // start with initial data
219 |   state = this.compute(this.props.location, this.props.path)
220 | 
221 |   // return an enhanced location object
222 |   compute(location, path) {
223 |     let doesMatch = true, match
224 |     if (path) {
225 |       // pull out params etc
226 |       match = matches(path, this.context.history.createPath(location.pathname))
227 |       doesMatch = !!match
228 |     }
229 | 
230 |     return {
231 |       location: {
232 |         ...location,
233 |         params: match || {}
234 |       },
235 |       matches: doesMatch
236 |     }
237 |   }
238 | 
239 |   componentDidMount() {
240 |     let h = this.context.history
241 | 
242 |     // hooks
243 | 
244 |     // onMount
245 |     if (matches(this.props.path,  h.createPath(this.state.location.pathname))) {
246 |       this.props.onMount(this.state.location)
247 |     }
248 | 
249 |     // onEnter / onLeave
250 |     this.disposeBefore = h.listenBefore((location, callback) => {
251 |       let matchesCurrent = matches(this.props.path,  h.createPath(this.state.location.pathname))
252 |       let matchesNext = matches(this.props.path,  h.createPath(location.pathname))
253 |       if (!matchesCurrent && matchesNext) {
254 |         return this.props.onEnter(location, callback)
255 |       }
256 |       if (matchesCurrent && !matchesNext) {
257 |         return this.props.onLeave(location, callback)
258 |       }
259 | 
260 |       return callback()
261 |     })
262 | 
263 |     // onUnload
264 |     if (this.props.onUnload && !h.listenBeforeUnload) {
265 |       throw new Error('you have an unload listener, but haven\'t wrapped your history object with useBeforeUnload')
266 |     }
267 | 
268 |     if (h.listenBeforeUnload) {
269 |       this.disposeUnload = h.listenBeforeUnload(() => {
270 |         if (this.props.onUnload && matches(this.props.path,  h.createPath(this.state.location.pathname))) {
271 |           return this.props.onUnload(this.state.location)
272 |         }
273 |       })
274 |     }
275 |   }
276 | 
277 |   componentWillReceiveProps(next) {
278 |     // refresh on new location / path
279 |     this.setState(this.compute(next.location, next.path))
280 |   }
281 | 
282 |   componentWillUnmount() {
283 |     // cleanup
284 |     this.disposeBefore()
285 |     if (this.disposeUnload) {
286 |       this.disposeUnload()
287 |     }
288 |   }
289 | 
290 |   render() {
291 | 
292 |     let el
293 | 
294 |     if (this.state.matches) {
295 |       if (this.props.component) {
296 |         // components / props flavor
297 |         el = React.createElement(this.props.component, { ...this.props.passProps, location: this.state.location })
298 |       }
299 |       else {
300 |         // render callback
301 |         el = this.props.children(this.state.location)
302 |       }
303 |     }
304 | 
305 |     return el || this.props.notFound(this.state.location)
306 |   }
307 | }
308 | 
309 | 
310 | // a useful replacement for <a> elements.
311 | // includes clickjacking
312 | @connectHistory
313 | export class Link extends Component {
314 |   static contextTypes = {
315 |     history: PropTypes.object
316 |   }
317 | 
318 |   static propTypes = {
319 |     // a location descriptor, via rackt/history
320 |     to: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
321 |     onClick: PropTypes.func,
322 |     className: PropTypes.string,
323 |     style: PropTypes.object
324 |   }
325 | 
326 |   static defaultProps = {
327 |     onClick: () => {},
328 |     className: '',
329 |     style: {}
330 |   }
331 | 
332 |   onClick = e => {
333 |     this.props.onClick(e)
334 |     if (!this.props._target) {
335 |       e.preventDefault()
336 |       this.context.history.push(this.props.to)
337 |     }
338 |   }
339 | 
340 |   render() {
341 |     let h = this.context.history
342 |     let href = h.createHref(this.props.to)
343 | 
344 |     return <a
345 |       href={href}
346 |       {...this.props}
347 |       className={this.props.className}
348 |       style={this.props.style}
349 |       onClick={this.onClick}>
350 |       {this.props.children}
351 |     </a>
352 |   }
353 | 
354 | }
355 | 
356 | 
357 | // `<Redirect to={...}/>` simply triggers `history.push()` when rendered
358 | // todo - handle server side redirect
359 | export class Redirect extends Component {
360 |   static contextTypes = {
361 |     history: PropTypes.object
362 |   }
363 | 
364 |   componentWillMount() {
365 |     // calling it here ensures it'll be 'called' on server side as well
366 |     this.context.history.push(this.props.to)
367 |   }
368 | 
369 |   render() {
370 |     return null
371 |   }
372 | }
373 | 
374 | 
375 | // a la react-router, only the first-matching `<Route/>` child is rendered.
376 | @connectHistory
377 | export class RouteStack extends Component {
378 |   static contextTypes = {
379 |     history: PropTypes.object
380 |   }
381 | 
382 |   static propTypes = {
383 |     notFound: PropTypes.func,
384 |     children(props) {
385 |       // ensure children are only <Route/>s
386 |       return find(Children.toArray(props.children), c => c.type !== Route) ?
387 |         new Error('<RouteStack/> only accepts <Route/>s as children.') :
388 |         null
389 |     }
390 |   }
391 | 
392 |   static defaultProps = {
393 |     notFound: () => null
394 |   }
395 | 
396 |   render() {
397 |     let url = this.context.history.createPath(this.props.location.pathname)
398 |     return find(Children.toArray(this.props.children), c => {
399 |       if (c.type !== Route) {
400 |         throw new Error('<RouteStack> only accepts <Route/> elements as children')
401 |       }
402 |       return matches(c.props.path, url) ? c : false
403 |     }) || this.props.notFound(this.props.location)
404 |   }
405 | }
406 | 
407 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  4 | 
  5 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  6 | 
  7 | var _class, _temp2, _class3, _class4, _temp6, _class5, _class6, _temp8, _class7, _temp9, _class8, _class9, _temp10; // the usual suspects
  8 | 
  9 | // express.js path matching
 10 | 
 11 | // history utils
 12 | 
 13 | Object.defineProperty(exports, "__esModule", {
 14 |   value: true
 15 | });
 16 | exports.RouteStack = exports.Redirect = exports.Link = exports.Route = exports.Router = undefined;
 17 | exports.connectHistory = connectHistory;
 18 | 
 19 | var _react = require('react');
 20 | 
 21 | var _react2 = _interopRequireDefault(_react);
 22 | 
 23 | var _pathToRegexp = require('path-to-regexp');
 24 | 
 25 | var _pathToRegexp2 = _interopRequireDefault(_pathToRegexp);
 26 | 
 27 | var _history = require('history');
 28 | 
 29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 30 | 
 31 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 32 | 
 33 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 34 | 
 35 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 36 | 
 37 | var isBrowser = typeof window !== 'undefined';
 38 | 
 39 | // setup a hidden singleton history object. a good default.
 40 | var HISTORY = isBrowser ? (0, _history.useBeforeUnload)(_history.createHistory)() : null;
 41 | 
 42 | var has = {}.hasOwnProperty;
 43 | 
 44 | // top level component. (optional) pass in a history object.
 45 | // <Router history={history}>
 46 | //   <App/>
 47 | // </Router>
 48 | var Router = exports.Router = (_temp2 = _class = function (_Component) {
 49 |   _inherits(Router, _Component);
 50 | 
 51 |   function Router() {
 52 |     var _Object$getPrototypeO;
 53 | 
 54 |     var _temp, _this, _ret;
 55 | 
 56 |     _classCallCheck(this, Router);
 57 | 
 58 |     for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 59 |       args[_key] = arguments[_key];
 60 |     }
 61 | 
 62 |     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Router)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.__history__ = isBrowser ? HISTORY : (0, _history.useBeforeUnload)(_history.createMemoryHistory)(_this.props.url), _temp), _possibleConstructorReturn(_this, _ret);
 63 |   }
 64 |   // default history. on server, this is a new instance with every element
 65 | 
 66 |   _createClass(Router, [{
 67 |     key: 'getChildContext',
 68 |     value: function getChildContext() {
 69 |       return {
 70 |         history: this.props.history || this.context.history || this.__history__
 71 |       };
 72 |     }
 73 |   }, {
 74 |     key: 'render',
 75 |     value: function render() {
 76 |       return _react.Children.only(this.props.children);
 77 |     }
 78 |   }]);
 79 | 
 80 |   return Router;
 81 | }(_react.Component), _class.propTypes = {
 82 |   history: _react.PropTypes.object,
 83 |   url: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]), // shortcut, only for server side
 84 |   children: _react2.default.PropTypes.element.isRequired
 85 | }, _class.defaultProps = {
 86 |   url: !isBrowser ? '/' : null
 87 | }, _class.contextTypes = {
 88 |   // discover if we're nested in another <Router/> / some other provider
 89 |   history: _react.PropTypes.object
 90 | }, _class.childContextTypes = {
 91 |   history: _react.PropTypes.object.isRequired
 92 | }, _temp2);
 93 | 
 94 | // for an array, run fn on every element and break on the first truthy return value
 95 | 
 96 | function find(arr, fn) {
 97 |   for (var i = 0; i < arr.length; i++) {
 98 |     var res = fn(arr[i]);
 99 |     if (res) {
100 |       return res;
101 |     }
102 |   }
103 | }
104 | 
105 | // a helper to get the current location from the history object
106 | // (this was way more useful before the refactor)
107 | function currentLocation(h) {
108 |   var loc = undefined;
109 |   h.listen(function (location) {
110 |     return loc = location;
111 |   })();
112 |   return loc;
113 | }
114 | 
115 | function decodeParam(val) {
116 |   if (typeof val !== 'string' || val.length === 0) {
117 |     return val;
118 |   }
119 | 
120 |   try {
121 |     return decodeURIComponent(val);
122 |   } catch (err) {
123 |     if (err instanceof URIError) {
124 |       err.message = 'Failed to decode param \'' + val + '\'';
125 |       err.status = err.statusCode = 400;
126 |     }
127 | 
128 |     throw err;
129 |   }
130 | }
131 | 
132 | // pattern matching for urls
133 | function pathMatch(pattern, path) {
134 |   var end = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2];
135 | 
136 |   var keys = [],
137 |       params = {},
138 |       _path = undefined,
139 |       regexp = (0, _pathToRegexp2.default)(pattern, keys, { end: end }),
140 |       m = regexp.exec(path);
141 |   if (!m) {
142 |     return false;
143 |   }
144 |   _path = m[0];
145 | 
146 |   for (var i = 1; i < m.length; i++) {
147 |     var key = keys[i - 1];
148 |     var prop = key.name;
149 |     var val = decodeParam(m[i]);
150 | 
151 |     if (val !== undefined || !has.call(params, prop)) {
152 |       params[prop] = val;
153 |     }
154 |   }
155 |   return params;
156 | }
157 | 
158 | // given pattern | [pattern] and a url, tell if pattern matches
159 | function matches(patterns, url) {
160 |   if (!patterns) {
161 |     return true;
162 |   }
163 |   if (!Array.isArray(patterns)) {
164 |     return pathMatch(patterns, url);
165 |   }
166 | 
167 |   return find(patterns, function (p) {
168 |     return pathMatch(p, url);
169 |   });
170 | }
171 | 
172 | // decorator for a component to hook up to the history object
173 | // to get location passed to it as a prop every time it changes
174 | // not really a public api, though we export it for testability
175 | function connectHistory(Target) {
176 |   var _class2, _temp4;
177 | 
178 |   return _temp4 = _class2 = function (_Component2) {
179 |     _inherits(History, _Component2);
180 | 
181 |     function History() {
182 |       var _Object$getPrototypeO2;
183 | 
184 |       var _temp3, _this2, _ret2;
185 | 
186 |       _classCallCheck(this, History);
187 | 
188 |       for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
189 |         args[_key2] = arguments[_key2];
190 |       }
191 | 
192 |       return _ret2 = (_temp3 = (_this2 = _possibleConstructorReturn(this, (_Object$getPrototypeO2 = Object.getPrototypeOf(History)).call.apply(_Object$getPrototypeO2, [this].concat(args))), _this2), _this2.state = {
193 |         location: currentLocation(_this2.context.history) // start with the initial location
194 |       }, _temp3), _possibleConstructorReturn(_this2, _ret2);
195 |     }
196 | 
197 |     _createClass(History, [{
198 |       key: 'componentWillMount',
199 |       value: function componentWillMount() {
200 |         if (!this.context.history) {
201 |           throw new Error('did you forget a parent <Router>?');
202 |         }
203 |       }
204 |     }, {
205 |       key: 'componentDidMount',
206 |       value: function componentDidMount() {
207 |         var _this3 = this;
208 | 
209 |         var started = false;
210 |         this.dispose = this.context.history.listen(function (location) {
211 |           // discard first (sync) response since we already have it
212 |           if (!started) {
213 |             started = true;
214 |             return;
215 |           }
216 |           // sometimes (esp. when nested) - this throws saying its already unmounted
217 |           // must understand what's going on
218 |           _this3.setState({ location: location });
219 |         });
220 |       }
221 |     }, {
222 |       key: 'componentWillUnmount',
223 |       value: function componentWillUnmount() {
224 |         // clean up
225 |         this.dispose();
226 |       }
227 |     }, {
228 |       key: 'render',
229 |       value: function render() {
230 |         // add location to originally passed props, and send down
231 |         return _react2.default.createElement(Target, _extends({}, this.props, { location: this.state.location }), this.props.children);
232 |       }
233 |     }]);
234 | 
235 |     return History;
236 |   }(_react.Component), _class2.displayName = 'history:(' + (Target.displayName || Target.name) + ')', _class2.contextTypes = {
237 |     history: _react.PropTypes.object
238 |   }, _temp4;
239 | }
240 | 
241 | // The big idea -
242 | // `<Route path={...} .../>` will render only when `path` matches the current browser url
243 | // that's it.
244 | // we introduce some lifecycle hooks and customizability for ease of dev
245 | 
246 | var Route = exports.Route = connectHistory(_class3 = (_temp6 = _class4 = function (_Component3) {
247 |   _inherits(Route, _Component3);
248 | 
249 |   function Route() {
250 |     var _Object$getPrototypeO3;
251 | 
252 |     var _temp5, _this4, _ret3;
253 | 
254 |     _classCallCheck(this, Route);
255 | 
256 |     for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
257 |       args[_key3] = arguments[_key3];
258 |     }
259 | 
260 |     return _ret3 = (_temp5 = (_this4 = _possibleConstructorReturn(this, (_Object$getPrototypeO3 = Object.getPrototypeOf(Route)).call.apply(_Object$getPrototypeO3, [this].concat(args))), _this4), _this4.state = _this4.compute(_this4.props.location, _this4.props.path), _temp5), _possibleConstructorReturn(_this4, _ret3);
261 |   }
262 | 
263 |   // start with initial data
264 | 
265 |   _createClass(Route, [{
266 |     key: 'compute',
267 | 
268 |     // return an enhanced location object
269 |     value: function compute(location, path) {
270 |       var doesMatch = true,
271 |           match = undefined;
272 |       if (path) {
273 |         // pull out params etc
274 |         match = matches(path, this.context.history.createPath(location.pathname));
275 |         doesMatch = !!match;
276 |       }
277 | 
278 |       return {
279 |         location: _extends({}, location, {
280 |           params: match || {}
281 |         }),
282 |         matches: doesMatch
283 |       };
284 |     }
285 |   }, {
286 |     key: 'componentDidMount',
287 |     value: function componentDidMount() {
288 |       var _this5 = this;
289 | 
290 |       var h = this.context.history;
291 | 
292 |       // hooks
293 | 
294 |       // onMount
295 |       if (matches(this.props.path, h.createPath(this.state.location.pathname))) {
296 |         this.props.onMount(this.state.location);
297 |       }
298 | 
299 |       // onEnter / onLeave
300 |       this.disposeBefore = h.listenBefore(function (location, callback) {
301 |         var matchesCurrent = matches(_this5.props.path, h.createPath(_this5.state.location.pathname));
302 |         var matchesNext = matches(_this5.props.path, h.createPath(location.pathname));
303 |         if (!matchesCurrent && matchesNext) {
304 |           return _this5.props.onEnter(location, callback);
305 |         }
306 |         if (matchesCurrent && !matchesNext) {
307 |           return _this5.props.onLeave(location, callback);
308 |         }
309 | 
310 |         return callback();
311 |       });
312 | 
313 |       // onUnload
314 |       if (this.props.onUnload && !h.listenBeforeUnload) {
315 |         throw new Error('you have an unload listener, but haven\'t wrapped your history object with useBeforeUnload');
316 |       }
317 | 
318 |       if (h.listenBeforeUnload) {
319 |         this.disposeUnload = h.listenBeforeUnload(function () {
320 |           if (_this5.props.onUnload && matches(_this5.props.path, h.createPath(_this5.state.location.pathname))) {
321 |             return _this5.props.onUnload(_this5.state.location);
322 |           }
323 |         });
324 |       }
325 |     }
326 |   }, {
327 |     key: 'componentWillReceiveProps',
328 |     value: function componentWillReceiveProps(next) {
329 |       // refresh on new location / path
330 |       this.setState(this.compute(next.location, next.path));
331 |     }
332 |   }, {
333 |     key: 'componentWillUnmount',
334 |     value: function componentWillUnmount() {
335 |       // cleanup
336 |       this.disposeBefore();
337 |       if (this.disposeUnload) {
338 |         this.disposeUnload();
339 |       }
340 |     }
341 |   }, {
342 |     key: 'render',
343 |     value: function render() {
344 | 
345 |       var el = undefined;
346 | 
347 |       if (this.state.matches) {
348 |         if (this.props.component) {
349 |           // components / props flavor
350 |           el = _react2.default.createElement(this.props.component, _extends({}, this.props.passProps, { location: this.state.location }));
351 |         } else {
352 |           // render callback
353 |           el = this.props.children(this.state.location);
354 |         }
355 |       }
356 | 
357 |       return el || this.props.notFound(this.state.location);
358 |     }
359 |   }]);
360 | 
361 |   return Route;
362 | }(_react.Component), _class4.propTypes = {
363 |   // path | [path], where path follows [path-to-regexp](https://github.com/pillarjs/path-to-regexp)
364 |   path: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
365 |   // a render callback
366 |   children: _react.PropTypes.func,
367 |   // an alternative to the render callback
368 |   component: _react.PropTypes.func,
369 |   passProps: _react.PropTypes.object,
370 | 
371 |   // hooks
372 |   onMount: _react.PropTypes.func,
373 |   onEnter: _react.PropTypes.func,
374 |   onLeave: _react.PropTypes.func,
375 |   onUnload: _react.PropTypes.func,
376 | 
377 |   // render when nothing matches
378 |   notFound: _react.PropTypes.func
379 | }, _class4.defaultProps = {
380 |   notFound: function notFound() {
381 |     return null;
382 |   },
383 |   passProps: {},
384 |   children: function children() {},
385 |   onMount: function onMount() {},
386 |   onEnter: function onEnter(l, cb) {
387 |     return cb();
388 |   },
389 |   onLeave: function onLeave(l, cb) {
390 |     return cb();
391 |   }
392 | }, _class4.contextTypes = {
393 |   history: _react.PropTypes.object
394 | }, _temp6)) || _class3;
395 | 
396 | // a useful replacement for <a> elements.
397 | // includes clickjacking
398 | 
399 | var Link = exports.Link = connectHistory(_class5 = (_temp8 = _class6 = function (_Component4) {
400 |   _inherits(Link, _Component4);
401 | 
402 |   function Link() {
403 |     var _Object$getPrototypeO4;
404 | 
405 |     var _temp7, _this6, _ret4;
406 | 
407 |     _classCallCheck(this, Link);
408 | 
409 |     for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
410 |       args[_key4] = arguments[_key4];
411 |     }
412 | 
413 |     return _ret4 = (_temp7 = (_this6 = _possibleConstructorReturn(this, (_Object$getPrototypeO4 = Object.getPrototypeOf(Link)).call.apply(_Object$getPrototypeO4, [this].concat(args))), _this6), _this6.onClick = function (e) {
414 |       _this6.props.onClick(e);
415 |       if (!_this6.props._target) {
416 |         e.preventDefault();
417 |         _this6.context.history.push(_this6.props.to);
418 |       }
419 |     }, _temp7), _possibleConstructorReturn(_this6, _ret4);
420 |   }
421 | 
422 |   _createClass(Link, [{
423 |     key: 'render',
424 |     value: function render() {
425 |       var h = this.context.history;
426 |       var href = h.createHref(this.props.to);
427 | 
428 |       return _react2.default.createElement(
429 |         'a',
430 |         _extends({
431 |           href: href
432 |         }, this.props, {
433 |           className: this.props.className,
434 |           style: this.props.style,
435 |           onClick: this.onClick }),
436 |         this.props.children
437 |       );
438 |     }
439 |   }]);
440 | 
441 |   return Link;
442 | }(_react.Component), _class6.contextTypes = {
443 |   history: _react.PropTypes.object
444 | }, _class6.propTypes = {
445 |   // a location descriptor, via rackt/history
446 |   to: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]),
447 |   onClick: _react.PropTypes.func,
448 |   className: _react.PropTypes.string,
449 |   style: _react.PropTypes.object
450 | }, _class6.defaultProps = {
451 |   onClick: function onClick() {},
452 |   className: '',
453 |   style: {}
454 | }, _temp8)) || _class5;
455 | 
456 | // `<Redirect to={...}/>` simply triggers `history.push()` when rendered
457 | // todo - handle server side redirect
458 | 
459 | var Redirect = exports.Redirect = (_temp9 = _class7 = function (_Component5) {
460 |   _inherits(Redirect, _Component5);
461 | 
462 |   function Redirect() {
463 |     _classCallCheck(this, Redirect);
464 | 
465 |     return _possibleConstructorReturn(this, Object.getPrototypeOf(Redirect).apply(this, arguments));
466 |   }
467 | 
468 |   _createClass(Redirect, [{
469 |     key: 'componentWillMount',
470 |     value: function componentWillMount() {
471 |       // calling it here ensures it'll be 'called' on server side as well
472 |       this.context.history.push(this.props.to);
473 |     }
474 |   }, {
475 |     key: 'render',
476 |     value: function render() {
477 |       return null;
478 |     }
479 |   }]);
480 | 
481 |   return Redirect;
482 | }(_react.Component), _class7.contextTypes = {
483 |   history: _react.PropTypes.object
484 | }, _temp9);
485 | 
486 | // a la react-router, only the first-matching `<Route/>` child is rendered.
487 | 
488 | var RouteStack = exports.RouteStack = connectHistory(_class8 = (_temp10 = _class9 = function (_Component6) {
489 |   _inherits(RouteStack, _Component6);
490 | 
491 |   function RouteStack() {
492 |     _classCallCheck(this, RouteStack);
493 | 
494 |     return _possibleConstructorReturn(this, Object.getPrototypeOf(RouteStack).apply(this, arguments));
495 |   }
496 | 
497 |   _createClass(RouteStack, [{
498 |     key: 'render',
499 |     value: function render() {
500 |       var url = this.context.history.createPath(this.props.location.pathname);
501 |       return find(_react.Children.toArray(this.props.children), function (c) {
502 |         if (c.type !== Route) {
503 |           throw new Error('<RouteStack> only accepts <Route/> elements as children');
504 |         }
505 |         return matches(c.props.path, url) ? c : false;
506 |       }) || this.props.notFound(this.props.location);
507 |     }
508 |   }]);
509 | 
510 |   return RouteStack;
511 | }(_react.Component), _class9.contextTypes = {
512 |   history: _react.PropTypes.object
513 | }, _class9.propTypes = {
514 |   notFound: _react.PropTypes.func,
515 |   children: function children(props) {
516 |     // ensure children are only <Route/>s
517 |     return find(_react.Children.toArray(props.children), function (c) {
518 |       return c.type !== Route;
519 |     }) ? new Error('<RouteStack/> only accepts <Route/>s as children.') : null;
520 |   }
521 | }, _class9.defaultProps = {
522 |   notFound: function notFound() {
523 |     return null;
524 |   }
525 | }, _temp10)) || _class8;


--------------------------------------------------------------------------------