add(UIRouter): root router component

add(UIRouter): the component handles the router initialization and
requires a history implementation and an array with states definitions
as props. A config function can also be provided that will be called
with the new router instance as argument.
chore(example): update example with new syntax

Author: elboman

example/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import UIRouterReact, { UIView, UISrefActive, UISref, ReactStateDeclaration, trace, browserHistory } from '../src/index';
+import { UIRouter, UIRouterReact, UIView, UISrefActive, UISref, ReactStateDeclaration, trace, browserHistory } from '../src/index';
 
 import {Home} from './home';
 import {Child} from './child';
@@ -28,25 +28,21 @@ let nest = {
   }]
 } as ReactStateDeclaration;
 
-// create new instance of UIRouterReact
-const Router = new UIRouterReact(browserHistory);
-// register states
-[home, child, nest].forEach(state => {
-  Router.stateRegistry.register(state);
-});
 
-
-Router.urlRouterProvider.otherwise("/home");
-trace.enable(1);
-Router.start();
+const routerConfig = (router: UIRouterReact) => {
+  router.urlRouterProvider.otherwise("/home");
+  trace.enable(1);
+}
 
 let el = document.getElementById("react-app");
 let app = (
-  <div>
-    <UISrefActive class="active">
-      <UISref to="home"><a>Home</a></UISref>
-    </UISrefActive>
-    <UIView><p>Content will load here</p></UIView>
-  </div>
+  <UIRouter history={browserHistory} states={[home, child, nest]} config={routerConfig}>
+    <div>
+      <UISrefActive class="active">
+        <UISref to="home"><a>Home</a></UISref>
+      </UISrefActive>
+      <UIView><p>Content will load here</p></UIView>
+    </div>
+  </UIRouter>
 );
 ReactDOM.render(app, el);

src/components/UIRouter.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {Component, PropTypes, Children} from 'react';
+import {UIRouterReact, ReactStateDeclaration} from '../index';
+import {HistoryImplementation} from "../history/interface";
+
+export interface IProps {
+  history?: HistoryImplementation;
+  states?: ReactStateDeclaration[];
+  config?: (router: UIRouterReact) => void;
+}
+
+export interface IState {
+  id?: number;
+  loaded?: boolean;
+  component?: string;
+  props?: any;
+}
+
+export class UIRouter extends Component<IProps, IState> {
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    states: PropTypes.arrayOf(PropTypes.object).isRequired,
+    config: PropTypes.func,
+    children: PropTypes.element.isRequired
+  }
+
+  static childContextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  router: UIRouterReact;
+
+  constructor (props, context) {
+    super(props, context);
+    this.router = new UIRouterReact(props.history);
+    props.states.forEach(state => {
+      this.router.stateRegistry.register(state);
+    });
+    if (props.config) {
+      props.config(this.router)
+    }
+    this.router.start();
+  }
+
+  getChildContext() {
+    return { router: this.router }
+  }
+
+  render() {
+    return Children.only(this.props.children);
+  }
+}

src/core.ts

@@ -8,7 +8,7 @@ import {hashHistory} from './history/hashHistory';
 let viewConfigFactory = (node: [PathNode], config: ReactViewDeclaration) =>
   new ReactViewConfig(node, config);
 
-export default class UIRouterReact extends UIRouter {
+export class UIRouterReact extends UIRouter {
   static instance;
   constructor(history: HistoryImplementation = hashHistory) {
     super();

src/index.ts

@@ -1,5 +1,4 @@
 import './services';
-import UIRouterReact from "./core";
 
 export {trace} from "ui-router-core";
 export {ReactStateDeclaration} from "./interface";
@@ -10,5 +9,6 @@ export {hashHistory} from "./history/hashHistory";
 export {UIView, InjectedProps, Resolves} from "./components/UIView";
 export {UISref} from "./components/UISref";
 export {UISrefActive} from "./components/UISrefActive";
+export {UIRouter} from "./components/UIRouter";
 
-export default UIRouterReact;
+export {UIRouterReact} from "./core";