sneak peek preview release

olegman · olegman · commit 8e4a60c4413b · 2016-10-19T17:42:16.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 .idea
 node_modules
+dev_modules
 *.log
 lib
 typings
diff --git a/README.md b/README.md
@@ -0,0 +1,54 @@
+# React Router Async
+[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)
+[![Latest Stable Version](https://img.shields.io/npm/v/react-router-async.svg?style=flat-square)](https://www.npmjs.com/package/react-router-async)
+[![License](https://img.shields.io/npm/l/react-router-async.svg?style=flat-square)](https://www.npmjs.com/package/react-router-async)
+
+``IMPORTANT NOTE! STATUS FOR THIS PROJECT IS EXPERIMENTAL AND THINGS CAN CHANGE, IT'S NOT READY FOR PRODUCTION``
+
+React Router Async is ultimate routing solution for your React applications, especially it's good in universal applications.
+
+## Installation
+```bash
+yarn add react-router-async
+```
+
+## Usage
+On client:
+```javascript 
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router } from 'react-router-async';
+import { routes, hooks } from './common';
+import createHistory from 'history/createBrowserHistory';
+
+const history = createHistory();
+const mountNode = document.getElementById('app');
+
+Router.init({ path: history.location.pathname, routes, hooks }).then(({ Router, Component, router, callback }) => {
+    ReactDOM.render(<Router {...{ Component, router, history }} />, mountNode, callback);
+}).catch(error => console.log(error));
+```
+
+On server (for example as express middleware):
+```javascript 
+export default function (req, res, next) {
+    Router.init({ path: req.path, routes, hooks }).then(({ Component, status, redirect }) => {
+        if (redirect) {
+            res.redirect(status, redirect);
+        } else {
+            const html = ReactDOM.renderToStaticMarkup(HtmlComponent({
+                markup: ReactDOM.renderToString(<Component />),
+                assets: assets
+            }));
+            res.status(status).send('<!DOCTYPE html>' + html);
+        }
+    }).catch(error => {
+        if (error.name === 'RouterError') {
+            res.status(error.code).send(error.message);
+        } else {
+            res.status(500).send('Internal error');
+        }
+    });
+}
+```
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-async",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": {
     "name": "Oleg Martynov",
     "email": "olegman.ru@gmail.com"
@@ -23,5 +23,9 @@
   },
   "devDependencies": {
     "typescript": "next"
+  },
+  "dependencies": {
+    "react": "^15.3.2",
+    "router-async": "0.0.2"
   }
-}
+}
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -0,0 +1,22 @@
+export const jsxInstanceOf = cls => {
+    return (props, propName, componentName) => {
+        if (props[propName].type !== cls.default) {
+            return new Error(
+                'Invalid prop `' + propName + '` supplied to' +
+                ' `' + componentName + '`. Validation failed.'
+            );
+        }
+    }
+};
+
+export function deepMap(arr, f, ctx = null) {
+    return arr.map((val, key) => {
+        let obj = f.call(ctx, val, key);
+        if (Array.isArray(obj.childs)) {
+            obj.childs = deepMap(obj.childs, f, ctx);
+            return obj;
+        } else {
+            return obj;
+        }
+    })
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1 +1,8 @@
-console.log('nooooop');
+import Router from './router';
+import Route from './route';
+import Link from './link';
+import RootRoute from './root-route';
+import Middleware from './middleware';
+import Redirect from './redirect';
+
+export { Router, Route, Link, RootRoute, Middleware, Redirect };
diff --git a/src/link.tsx b/src/link.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export interface Props {
+    to: any,
+    [propName: string]: any;
+}
+export interface State {
+    [propName: string]: any;
+}
+
+export default class Link extends React.Component<Props, State> {
+    context: any;
+    static contextTypes = {
+        router: React.PropTypes.object
+    };
+    navigate = e => {
+        this.context.router.navigate(this.props.to);
+        e.preventDefault();
+    };
+    render() {
+        return <a href={this.props.to} onClick={this.navigate}>{this.props.children}</a>;
+    }
+}
diff --git a/src/middleware.tsx b/src/middleware.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { jsxInstanceOf } from './helpers';
+import * as Route from './route';
+import * as Redirect from './redirect';
+
+export interface Props {
+    [propName: string]: any;
+}
+export interface State {
+    [propName: string]: any;
+}
+
+export default class Middleware extends React.Component<Props, State> {
+    static propTypes = {
+        children: React.PropTypes.arrayOf(React.PropTypes.oneOfType([
+            jsxInstanceOf(Route),
+            jsxInstanceOf(Redirect)
+        ])).isRequired,
+        path: React.PropTypes.string.isRequired,
+        action: React.PropTypes.func
+    };
+    render() {
+        return React.Children.only(this.props.children);
+    }
+}
diff --git a/src/redirect.tsx b/src/redirect.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export interface Props {
+    [propName: string]: any;
+}
+export interface State {
+    [propName: string]: any;
+}
+
+export  default class Redirect extends React.Component<Props, State> {
+    static propTypes = {
+        path: React.PropTypes.string.isRequired,
+        to: React.PropTypes.string.isRequired,
+        status: React.PropTypes.oneOf([301, 302])
+    };
+    static defaultProps = {
+        status: 302
+    };
+    render() {
+        console.error('Redirect can\'t render');
+        return null;
+    }
+}
diff --git a/src/root-route.tsx b/src/root-route.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { jsxInstanceOf } from './helpers';
+import * as Route from './route';
+import * as Middleware from './middleware';
+import * as Redirect from './redirect';
+
+export interface Props {
+    [propName: string]: any;
+}
+export interface State {
+    [propName: string]: any;
+}
+
+export default class RootRoute extends React.Component<Props, State> {
+    static propTypes = {
+        children: React.PropTypes.arrayOf(React.PropTypes.oneOfType([
+            jsxInstanceOf(Route),
+            jsxInstanceOf(Middleware),
+            jsxInstanceOf(Redirect)
+        ])).isRequired
+    };
+    render() {
+        return React.Children.only(this.props.children);
+    }
+}
diff --git a/src/route.tsx b/src/route.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface Props {
+    [propName: string]: any;
+}
+export interface State {
+    [propName: string]: any;
+}
+
+export  default class Route extends React.Component<Props, State> {
+    static propTypes = {
+        path: React.PropTypes.string.isRequired,
+        action: React.PropTypes.func.isRequired,
+        status: React.PropTypes.oneOf([200, 404, 500])
+    };
+    render() {
+        console.error('Route can\'t render');
+        return null;
+    }
+}
diff --git a/src/router.tsx b/src/router.tsx
@@ -0,0 +1,133 @@
+import RouterAsync from 'router-async';
+import * as React from 'react';
+import { deepMap } from './helpers';
+
+export interface Props {
+    Component: React.ReactElement<Props>,
+    router: any,
+    histroy: any,
+    errorHandler: any,
+    [propName: string]: any;
+}
+export interface State {
+    location: any,
+    Component: React.ReactElement<Props>;
+}
+export interface Action {
+    (): React.ReactElement<Props>;
+}
+interface Childs {
+    [index: number]: Route;
+}
+export interface Route {
+    path?: string,
+    action?: Action,
+    status?: number,
+    to?: string,
+    childs?: Childs
+}
+
+export default class Router extends React.Component<Props, State> {
+    private router: any;
+    private history: any;
+    private unlistenHistroy: any;
+    constructor(props) {
+        super();
+        this.state = {
+            Component: props.Component,
+            location: props.history.location
+        };
+
+        this.router = props.router;
+        this.history = props.history;
+    }
+    static async init({ path, routes, hooks }) {
+        const plainRoutes = Router.buildRoutes(routes);
+        const router = new RouterAsync({ routes: plainRoutes, hooks });
+        const { result, redirect, status } = await router.resolve({ path });
+        return {
+            Router,
+            Component: result,
+            redirect,
+            status,
+            router,
+            callback: this.makeCallback(router)
+        }
+    }
+    static buildRoutes(routes) {
+        if (!Array.isArray(routes)) {
+            routes = routes.props.children;
+        }
+        return deepMap(routes, route => {
+            const result: Route = {};
+            if (route.props.path) {
+                result.path = route.props.path;
+            }
+            if (route.props.action) {
+                result.action = route.props.action;
+            }
+            if (route.props.status) {
+                result.status = route.props.status;
+            }
+            if (route.props.to) {
+                result.to = route.props.to;
+            }
+            if (route.props.children) {
+                result.childs = Array.isArray(route.props.children) ? route.props.children : [route.props.children];
+            }
+            return result;
+        });
+    }
+    static makeCallback(router, options = {}) {
+        return () => {
+            return Router.runRenderHooks(router, options);
+        }
+    }
+    static runRenderHooks(router, options = {}) {
+        return router.runHooks('render', options);
+    }
+    static childContextTypes = {
+        router: React.PropTypes.object
+    };
+    getChildContext() {
+        return {
+            router: this
+        };
+    }
+    get location() {
+        return this.state.location;
+    }
+    async navigate(path) {
+        try {
+            const { redirect } = await this.router.match({ path, ctx: {} });
+            if (redirect) {
+                this.history.push(redirect);
+            } else {
+                this.history.push(path);
+            }
+        } catch (error) {
+            if (this.props.errorHandler) {
+                this.props.errorHandler(error, this);
+            } else {
+                console.error('Navigate Error', error);
+                throw error;
+            }
+        }
+    }
+    private _locationChanged = async (location, action) => {
+        const { result } = await this.router.resolve({ path: location.pathname, ctx: {} });
+        this.setState({
+            Component: result,
+            location
+        }, Router.makeCallback(this.router));
+    };
+    componentDidMount() {
+        this.unlistenHistroy = this.history.listen(this._locationChanged)
+    }
+    componentWillUnmount() {
+        this.unlistenHistroy();
+    }
+    render() {
+        return <this.state.Component/>
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,8 @@
     "target": "es5",
     "module": "commonjs",
     "outDir": "./lib",
-    "declaration": true
+//    "declaration": true,
+    "jsx": "react"
   },
   "include": [
     "src/**/*",
diff --git a/typings.json b/typings.json
@@ -1,5 +1,9 @@
 {
   "globalDependencies": {
-    "es2015": "registry:env/es2015#1.0.0+20160526151700"
+    "es6-promise": "registry:dt/es6-promise#0.0.0+20160614011821",
+    "node": "registry:env/node#6.0.0+20161011193755"
+  },
+  "dependencies": {
+    "react": "registry:npm/react#15.0.1+20160601175240"
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -1,5 +1,6 @@ @@
 .idea
 node_modules
 +dev_modules
 *.log
 lib
 typings