koa-cola
[![Build Status](https://travis-ci.org/hcnode/koa-cola.svg?branch=master)](https://travis-ci.org/hcnode/koa-cola) [![Coverage Status](https://coveralls.io/repos/github/hcnode/koa-cola/badge.svg?branch=master)](https://coveralls.io/github/hcnode/koa-cola?b
Last updated 2 months ago by hcnode .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install koa-cola 
SYNC missed versions from official npm registry.

koa-cola

Build Status Coverage Status npm

中文版readme

koa-cola is SSR(server side render)/SPA(singe page application) framework with koa/react/react-router/redux/typescript, and using react stack(react component/react-router/react-redux) and "isomorphic" codes (used in both browser and server side).

Features

  • completely and seamlessly SSR/SPA solution
  • "isomorphic" component/router/redux/ajax/validation in both client and server side
  • typescript
  • es7 decorator/async coding style

react16 and react-router v4 supported from v0.6.1

Usage

koa-cola require latest version of koa.

Koa requires node v7.6.0 or higher for ES2015 and async function support.

koa-cola requires node v7.6.0 or higher as well. Node.js 8.0 comes with significantly improved performance of ES2017 async functions, so node.js 8.0 or higher is recommended.

  • npm i koa-cola -g install global koa-cola
  • koa-cola new koa-cola-app create new koa-cola project in current folder
  • cd koa-cola-app
  • npm run dev start dev mode to build bundle and launch server.

Cola decorator:

import * as React from "react";
import { Cola, store } from "koa-cola/client";
import { GetFooApi } from "../../api";
var loadSuccess = store.loadSuccess;
// api同构调用,可能在服务器端调用,也可能在浏览器端调用,区别是是否存在koa的ctx对象
async function callApi(ctx?) {
  var getFooApi = new GetFooApi({});
  await getFooApi.fetch(ctx);
  var result: any = getFooApi.result;
  return `api called from ${ctx ? "server" : "client"}, data:${result.data}`;
}
// use Cola decorator to "isomorphic" redux data flow, includes data init, redux flow
@Cola({
  // redux同构,页面请求时,数据在服务器端初始化;单页面跳转时,数据在浏览器端异步请求
  initData: {
    hello: () => {
      return Promise.resolve("Wow koa-cola!");
    },
    apiDataCallFromServer: async ({ params, helpers }) => {
      return await callApi(helpers.ctx);
    }
  },
  // react-redux "mapDispatchToProps"
  mapDispatchToProps: dispatch => {
    return {
      // 修改redux同构的props
      onClick: () => {
        dispatch(loadSuccess("hello", "Wow koa-cola and bundle work!"));
      },
      // 浏览器端redux流
      callApiFromClient: async () => {
        var data = await callApi();
        dispatch({
          type: "CALL_API",
          data
        });
      },
      // 使用了redux-thunk中间件,中间件定义在/config/reduxMiddlewares.js
      reduxThunk: () => {
        return dispatch(async () => {
          await new Promise((resolve, reject) => setTimeout(resolve, 1000));
          dispatch({
            type: "REDUX_THUNK",
            data: "this is from reduxMiddleware"
          });
        });
      }
    };
  },
  // react-redux "mapStateToProps"
  mapStateToProps: state => {
    return state;
  },
  // reducer of redux
  reducer: {
    apiDataCallFromClient: (state = "", action) => {
      switch (action.type) {
        case "CALL_API":
          return action.data;
        default:
          return state;
      }
    },
    dataFromReduxThunk: (state = "", action) => {
      switch (action.type) {
        case "REDUX_THUNK":
          return action.data;
        default:
          return state;
      }
    }
  }
})
export default class App extends React.Component<any, any> {
  render() {
    return (
      <div>
        <h1>{this.props.hello}</h1>
        <button onClick={this.props.onClick}>check bundle if work</button>&nbsp;
        <button onClick={this.props.callApiFromClient}>call from client</button>&nbsp;
        <button onClick={this.props.reduxThunk}>redux thunk</button>&nbsp;
        <div>
          redux data flow in server side : {this.props.apiDataCallFromServer} <br />
          redux data flow in client side : {this.props.apiDataCallFromClient} <br />
          redux middleware : {this.props.dataFromReduxThunk} <br />
        </div>
      </div>
    );
  }
}

try demo in local:

  • git clone https://github.com/koa-cola/todolist
  • cd todolist
  • npm i
  • npm run local

visit koa-cola website for more detail

Current Tags

  • 0.7.8                                ...           latest (2 months ago)

82 Versions

  • 0.7.8                                ...           2 months ago
  • 0.7.7                                ...           6 months ago
  • 0.7.5                                ...           6 months ago
  • 0.7.4                                ...           6 months ago
  • 0.7.3                                ...           6 months ago
  • 0.7.2                                ...           6 months ago
  • 0.7.1                                ...           6 months ago
  • 0.7.0                                ...           a year ago
  • 0.6.3                                ...           2 years ago
  • 0.6.1                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.43                                ...           2 years ago
  • 0.5.42                                ...           2 years ago
  • 0.5.41                                ...           2 years ago
  • 0.5.40                                ...           2 years ago
  • 0.5.39                                ...           2 years ago
  • 0.5.38                                ...           2 years ago
  • 0.5.37                                ...           2 years ago
  • 0.5.36                                ...           2 years ago
  • 0.5.25                                ...           3 years ago
  • 0.5.23                                ...           3 years ago
  • 0.5.21                                ...           3 years ago
  • 0.5.20                                ...           3 years ago
  • 0.5.19                                ...           3 years ago
  • 0.5.18                                ...           3 years ago
  • 0.5.16                                ...           3 years ago
  • 0.5.15                                ...           3 years ago
  • 0.5.14                                ...           3 years ago
  • 0.5.13                                ...           3 years ago
  • 0.5.12                                ...           3 years ago
  • 0.5.11                                ...           3 years ago
  • 0.5.10                                ...           3 years ago
  • 0.5.9                                ...           3 years ago
  • 0.5.8                                ...           3 years ago
  • 0.5.7                                ...           3 years ago
  • 0.5.6                                ...           3 years ago
  • 0.5.5                                ...           3 years ago
  • 0.5.3                                ...           3 years ago
  • 0.5.2                                ...           3 years ago
  • 0.5.1                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.14                                ...           3 years ago
  • 0.4.13                                ...           3 years ago
  • 0.4.12                                ...           3 years ago
  • 0.4.10                                ...           3 years ago
  • 0.4.7                                ...           3 years ago
  • 0.4.6                                ...           3 years ago
  • 0.4.3                                ...           3 years ago
  • 0.4.2                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.10                                ...           3 years ago
  • 0.3.9                                ...           3 years ago
  • 0.3.8                                ...           3 years ago
  • 0.3.7                                ...           3 years ago
  • 0.3.5                                ...           3 years ago
  • 0.3.4                                ...           3 years ago
  • 0.3.3                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.14                                ...           3 years ago
  • 0.2.13                                ...           3 years ago
  • 0.2.12                                ...           3 years ago
  • 0.2.11                                ...           3 years ago
  • 0.2.10                                ...           3 years ago
  • 0.2.9                                ...           3 years ago
  • 0.2.8                                ...           3 years ago
  • 0.2.7                                ...           3 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.1.8                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 4
Dependencies (57)
Dev Dependencies (28)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |