{"id":17432046,"url":"https://github.com/rayshih/fun-react","last_synced_at":"2025-04-15T22:31:01.831Z","repository":{"id":57258025,"uuid":"63497992","full_name":"rayshih/fun-react","owner":"rayshih","description":"Elm like js framework built on top of cycle-react.","archived":false,"fork":false,"pushed_at":"2017-04-26T16:00:00.000Z","size":176,"stargazers_count":21,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T03:41:37.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayshih.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-16T18:56:13.000Z","updated_at":"2022-02-27T01:32:05.000Z","dependencies_parsed_at":"2022-08-25T21:22:19.027Z","dependency_job_id":null,"html_url":"https://github.com/rayshih/fun-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayshih%2Ffun-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayshih%2Ffun-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayshih%2Ffun-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayshih%2Ffun-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayshih","download_url":"https://codeload.github.com/rayshih/fun-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249165942,"owners_count":21223351,"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-10-17T08:09:52.609Z","updated_at":"2025-04-15T22:31:00.438Z","avatar_url":"https://github.com/rayshih.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fun React\n\n[![Join the chat at https://gitter.im/rayshih/fun-react](https://badges.gitter.im/rayshih/fun-react.svg)](https://gitter.im/rayshih/fun-react?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nFun React is a React framework.\n\n## Why?\n\nBecause I love functional programming and ELM, but I can only use JS in work.\n\n## Introduction\n\n### If you know ELM:\n\nGreat! Fun React is perfect for you. Because it basically mimic almost everything of ELM 0.17. I bet you can know how to use Fun React right after check the following example.\n\n### If you are using Redux:\n\nThe overall concept is the same: the state reducer. The main differences are:\n\n1. We call `reducers` as `update` functions\n2. We use simple type system to replace redux action\n3. We use `program` instead of `\u003cProvider /\u003e`\n4. There is no `connect`.\n\t- For data, we encourage to pass data all the way down.\n\t- For event, we use very simple event system, there is only two function need to know:\n\t\t- `event`: event declaration\n\t\t- `link`: event binding between parent and children\n\n### If you are using Cycle React:\n\nTODO\n\n## Installation\n\n```\nnpm install --save fun-react cycle-react react rx\n```\n\n## Example\n\nTo run example\n\n```bash\ncd examples/__the_example__\nnpm install\nnpm start\n```\n\nthen open `http://localhost:8080` in browser.\n\n### Basic counter\n\n```javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport {\n  createProgram,\n  fromSimpleInit,\n  fromSimpleUpdate,\n  createTypes,\n  caseOf,\n  createView\n} from 'fun-react'\n\n// 1. define message types by function createTypes\nconst Msg = createTypes('INC', 'DEC')\n\n// 2. define init data\nconst init = 0\n\n// 3. define update function\nconst update = caseOf({\n  INC: (_, count) =\u003e count + 1,\n  DEC: (_, count) =\u003e count - 1\n})\n\n// 4. define view by function createView\nconst Counter = createView('Counter', ({model}, {event}) =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eCount: {model}\u003c/h1\u003e\n    \u003cbutton onClick={event(Msg.INC)}\u003eINC\u003c/button\u003e\n    \u003cbutton onClick={event(Msg.DEC)}\u003eDEC\u003c/button\u003e\n  \u003c/div\u003e\n))\n\n// 5. compose program by the defined `init`, `update`, `view`\nconst Program = createProgram({\n  init: fromSimpleInit(init),\n  update: fromSimpleUpdate(update),\n  view: Counter,\n  inputs: () =\u003e []\n})\n\n// 6. mount the Program to actual DOM\nconst rootEl = document.getElementById('app')\nReactDOM.render(\u003cProgram /\u003e, rootEl)\n```\n\n### Nested counter\n\nTODO\n\n### Use with vanilla React\n\nTODO\n\n### Use with flowtype\n\nTODO\n\n### Learn more\n\nTODO\n\n## Philosophy\n\nThe name imply the philosophy. So why name it Fun React:\n\n1. We treat react element as a functor of event and the virtual dom is the context of the functor, so Fun React means: Functor React.\n2. It is fun.\n\nTODO explain what is Functor, and why can react element be a functor\n\n## TODO\n\n- restructure examples\n\t- nested counter\n\t- todo list\n\t- cycle interoperable\n\t- react interoperable\n- write doc\n\t- README\n\t- API document\n  - the config options\n- add jsbin env\n- add test\n- Try to upgrade to rx 5 or annotate rx 4\n\n## Contributers\n\n- rayshih: that's me\n- wuct: \u003chttps://github.com/wuct\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayshih%2Ffun-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayshih%2Ffun-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayshih%2Ffun-react/lists"}