added activeClass to Link

Author: olegman

.travis.yml

@@ -10,7 +10,7 @@ cache:
 script:
   - yarn global add typings
   - typings install
-  - yarn run transpile
+  - yarn run build
 
 deploy:
   provider: npm

package.json

@@ -19,6 +19,7 @@
     "clean": "rm -rf lib",
     "watch": "yarn run clean && tsc -p . --watch",
     "transpile": "yarn run clean && tsc -p .",
+    "build": "yarn run clean && tsc --outDir ./ -p .",
     "tsc": "tsc"
   },
   "devDependencies": {

src/browser-router.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Router, { initParams, initResult } from './router';
+import { Context } from 'router-async';
+
+export default class BrowserRouter extends Router {
+    private history: any;
+    private unlistenHistroy: any;
+    constructor(props) {
+        super(props);
+        this.history = props.history;
+    }
+    static async init(opts: initParams): Promise<initResult> {
+        const result = await super.init(opts);
+        return {
+            ...result,
+            Router: BrowserRouter
+        };
+    }
+    static childContextTypes = {
+        router: React.PropTypes.object
+    };
+    getChildContext() {
+        return {
+            router: this
+        };
+    }
+    async navigate(path, ctx = new Context()) {
+        try {
+            const { redirect } = await this.router.match({ path, ctx });
+            if (redirect) {
+                this.history.push(redirect);
+            } else {
+                this.history.push(path);
+            }
+        } catch (error) {
+            this.history.push(path);
+            if (!this.props.errorHandler) {
+                console.error('Match Error', path, error);
+                throw error;
+            }
+        }
+    }
+    // TODO: maybe we need to make this history methods works through navigate?
+    goBack() {
+        this.history.goBack();
+    }
+    goForward() {
+        this.history.goForward();
+    }
+    go(n) {
+        this.history.go(n);
+    }
+    private _locationChanged = async ({ pathname }) => {
+        try {
+            const { path, location, route, status, params, redirect, result, ctx } = await this.router.run({ path: pathname });
+            const props = {
+                router: {
+                    path,
+                    location,
+                    route,
+                    status,
+                    params,
+                    redirect,
+                    ctx
+                }
+            };
+            const renderCallback = Router.makeCallback(this.router, { path, route, status, params, redirect, result, ctx });
+            this.changeComponent({ Component: result, componentProps: props, path, location, renderCallback });
+        } catch (error) {
+            if (this.props.errorHandler) {
+                this.props.errorHandler(error, this);
+            } else {
+                console.error('Resolve Error', location, error);
+                throw error;
+            }
+        }
+    };
+    componentDidMount() {
+        this.unlistenHistroy = this.history.listen(this._locationChanged)
+    }
+    componentWillUnmount() {
+        this.unlistenHistroy();
+    }
+}

src/index.ts

@@ -1,4 +1,5 @@
-import Router from './router';
+import BrowserRouter from './browser-router';
+import ServerRouter from './server-router';
 import Route from './route';
 import Link from './link';
 import RootRoute from './root-route';
@@ -8,7 +9,8 @@ import PlaceHolder from './placeholder';
 import { RouterError, Context } from 'router-async';
 
 export {
-    Router,
+    BrowserRouter,
+    ServerRouter,
     Route,
     Link,
     RootRoute,

src/link.tsx

@@ -14,16 +14,30 @@ export default class Link extends React.Component<Props, State> {
     static contextTypes = {
         router: React.PropTypes.object
     };
+    static isActive(to, path, activeOnlyWhenExact) {
+        return activeOnlyWhenExact ? path === to : path.indexOf(to) === 0;
+    };
     navigate = e => {
         this.context.router.navigate(this.props.to);
         e.preventDefault();
     };
     render() {
         const {
             to,
+            className,
+            activeClassName,
+            activeOnlyWhenExact,
             ...rest
         } = this.props;
+        const isActive = Link.isActive(to, this.context.router.getState().location.pathname, activeOnlyWhenExact);
 
-        return <a href={to} onClick={this.navigate} {...rest}>{this.props.children}</a>;
+        return (
+            <a
+                {...rest}
+                href={to}
+                onClick={this.navigate}
+                className={isActive ? [className, activeClassName].join(' ').trim() : className}
+            />
+        );
     }
 }

src/placeholder.tsx

@@ -6,7 +6,9 @@ export interface Props {
 }
 export interface State {
     Component?: React.ComponentClass<Props>,
-    props?: any;
+    componentProps?: any;
+    path?: any;
+    location?: any;
 }
 export interface Context {
     router: Router
@@ -16,22 +18,24 @@ export default class PlaceHolder extends React.Component<Props, State> {
     static contextTypes = {
         router: React.PropTypes.object.isRequired
     };
-    constructor(props) {
+    constructor({ Component, componentProps }) {
         super();
         this.state = {
-            Component: props.Component,
-            props: props.props
+            Component,
+            componentProps
         };
     }
     componentDidMount() {
-        this.context.router.subscribe((Component, props, renderCallback) => {
+        this.context.router.subscribe(({ Component, componentProps, path, location, renderCallback }) => {
             this.setState({
+                path,
+                location,
                 Component,
-                props
+                componentProps
             }, renderCallback);
         })
     }
     render() {
-        return <this.state.Component router={this.state.props} />
+        return <this.state.Component {...this.state.componentProps} />
     }
 }