{"id":13672948,"url":"https://github.com/hcnode/koa-cola","last_synced_at":"2025-10-05T18:31:23.603Z","repository":{"id":21828266,"uuid":"94155023","full_name":"hcnode/koa-cola","owner":"hcnode","description":"SSR/SPA framework with koa/react/redux/es7","archived":true,"fork":false,"pushed_at":"2022-12-07T09:43:20.000Z","size":3374,"stargazers_count":60,"open_issues_count":18,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-19T04:23:32.767Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://koa-cola.github.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hcnode.png","metadata":{"files":{"readme":"README.EN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-13T01:13:23.000Z","updated_at":"2023-04-18T12:36:52.000Z","dependencies_parsed_at":"2023-01-11T21:22:14.830Z","dependency_job_id":null,"html_url":"https://github.com/hcnode/koa-cola","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcnode%2Fkoa-cola","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcnode%2Fkoa-cola/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcnode%2Fkoa-cola/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcnode%2Fkoa-cola/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hcnode","download_url":"https://codeload.github.com/hcnode/koa-cola/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235432243,"owners_count":18989483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:59.624Z","updated_at":"2025-10-05T18:31:23.156Z","avatar_url":"https://github.com/hcnode.png","language":"TypeScript","readme":"\n# koa-cola\n[![Build Status](https://travis-ci.org/hcnode/koa-cola.svg?branch=master)](https://travis-ci.org/hcnode/koa-cola)\n[![Coverage Status](https://coveralls.io/repos/github/hcnode/koa-cola/badge.svg?branch=master)](https://coveralls.io/github/hcnode/koa-cola?branch=master)\n[![npm](https://img.shields.io/npm/v/koa-cola.svg)](https://www.npmjs.com/package/koa-cola)\n\n[中文版readme](https://github.com/hcnode/koa-cola/blob/master/README_zh.md)\n\n[koa-cola](https://koa-cola.github.io/) 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).\n\n\n### Features\n* completely and seamlessly SSR/SPA solution\n* \"isomorphic\" component/router/redux/ajax/validation in both client and server side\n* typescript\n* es7 decorator/async coding style\n\n**react16 and react-router v4 supported from v0.6.1**\n\n## Usage\n\nkoa-cola require latest version of koa.\n\n\u003e Koa requires node v7.6.0 or higher for ES2015 and async function support.\n\nkoa-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. \n\n* `npm i koa-cola -g` install global koa-cola\n* `koa-cola new koa-cola-app` create new koa-cola project in current folder\n* `cd koa-cola-app`\n* `npm run dev` start dev mode to build bundle and launch server.\n\n`Cola` decorator:\n\n```tsx\nimport * as React from \"react\";\nimport { Cola, store } from \"koa-cola/client\";\nimport { GetFooApi } from \"../../api\";\nvar loadSuccess = store.loadSuccess;\n// api同构调用，可能在服务器端调用，也可能在浏览器端调用，区别是是否存在koa的ctx对象\nasync function callApi(ctx?) {\n  var getFooApi = new GetFooApi({});\n  await getFooApi.fetch(ctx);\n  var result: any = getFooApi.result;\n  return `api called from ${ctx ? \"server\" : \"client\"}, data:${result.data}`;\n}\n// use Cola decorator to \"isomorphic\" redux data flow, includes data init, redux flow\n@Cola({\n  // redux同构，页面请求时，数据在服务器端初始化；单页面跳转时，数据在浏览器端异步请求\n  initData: {\n    hello: () =\u003e {\n      return Promise.resolve(\"Wow koa-cola!\");\n    },\n    apiDataCallFromServer: async ({ params, helpers }) =\u003e {\n      return await callApi(helpers.ctx);\n    }\n  },\n  // react-redux \"mapDispatchToProps\"\n  mapDispatchToProps: dispatch =\u003e {\n    return {\n      // 修改redux同构的props\n      onClick: () =\u003e {\n        dispatch(loadSuccess(\"hello\", \"Wow koa-cola and bundle work!\"));\n      },\n      // 浏览器端redux流\n      callApiFromClient: async () =\u003e {\n        var data = await callApi();\n        dispatch({\n          type: \"CALL_API\",\n          data\n        });\n      },\n      // 使用了redux-thunk中间件，中间件定义在/config/reduxMiddlewares.js\n      reduxThunk: () =\u003e {\n        return dispatch(async () =\u003e {\n          await new Promise((resolve, reject) =\u003e setTimeout(resolve, 1000));\n          dispatch({\n            type: \"REDUX_THUNK\",\n            data: \"this is from reduxMiddleware\"\n          });\n        });\n      }\n    };\n  },\n  // react-redux \"mapStateToProps\"\n  mapStateToProps: state =\u003e {\n    return state;\n  },\n  // reducer of redux\n  reducer: {\n    apiDataCallFromClient: (state = \"\", action) =\u003e {\n      switch (action.type) {\n        case \"CALL_API\":\n          return action.data;\n        default:\n          return state;\n      }\n    },\n    dataFromReduxThunk: (state = \"\", action) =\u003e {\n      switch (action.type) {\n        case \"REDUX_THUNK\":\n          return action.data;\n        default:\n          return state;\n      }\n    }\n  }\n})\nexport default class App extends React.Component\u003cany, any\u003e {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{this.props.hello}\u003c/h1\u003e\n        \u003cbutton onClick={this.props.onClick}\u003echeck bundle if work\u003c/button\u003e\u0026nbsp;\n        \u003cbutton onClick={this.props.callApiFromClient}\u003ecall from client\u003c/button\u003e\u0026nbsp;\n        \u003cbutton onClick={this.props.reduxThunk}\u003eredux thunk\u003c/button\u003e\u0026nbsp;\n        \u003cdiv\u003e\n          redux data flow in server side : {this.props.apiDataCallFromServer} \u003cbr /\u003e\n          redux data flow in client side : {this.props.apiDataCallFromClient} \u003cbr /\u003e\n          redux middleware : {this.props.dataFromReduxThunk} \u003cbr /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\n\ntry demo in local:\n\n* `git clone https://github.com/koa-cola/todolist`\n* `cd todolist`\n* `npm i`\n* `npm run local`\n\n\nvisit [koa-cola website](https://koa-cola.github.io/) for more detail\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcnode%2Fkoa-cola","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcnode%2Fkoa-cola","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcnode%2Fkoa-cola/lists"}