如何使用

创建项目

安装全局koa-cola
npm i koa-cola -g
在当前文件夹创建名字为app的新koa-cola项目，创建完整的目录结构，并自动安装依赖
koa-cola new app
dev的开发模式启动项目，生成 webpack bundle、启动项目、并自动打开浏览器，并自动watch源码，当源码有修改，bundle js和ssr服务器端渲染都会自动重新加载module
cd koa-cola-app
npm run dev

使用路由装饰器创建路由，并返回json数据

api/controllers/any_controller.ts

var { Controller, Get } = require('koa-cola/client');

@Controller('/api')
export default class  {
    @Get('/todo/list')
    list ( ) {
        return [
            'todo1', 'todo2'
        ]
    }
}

使用路由装饰器创建路由，并通过react page组件渲染

渲染静态组件

api/controllers/any_controller.ts

var { Controller, Get, View } = require('koa-cola/client');

@Controller('/')
export default class  {
    @Get('index')
    @View('index')
    index ( ) {}
}

views/pages/index.tsx

import * as React from 'react';
export default function() {
    return <div>
        Wow koa-cola!
    </div>
};

渲染数据依赖组件方法

api/controllers/any_controller.ts

var { Controller, Get, View } = require('koa-cola/client');

@Controller('/')
export default class  {
    @Get('index')
    @View('index')
    index async () {}
}

views/pages/index.tsx

import * as React from 'react';
var { Cola } = require('koa-cola/client')

@Cola({
    initData : {
        foo : async ({ params, helpers }) => {
            return await Promise.resolve('bar');
        }
    }
})
export default class Page extends React.Component<Props, States>   {
  constructor(props: Props) {
      super(props);
  }
  render() {
    return <div>
      <div>{this.props.foo}</div>
    </div>
  }
};