{"id":15061259,"url":"https://github.com/choojs/choop","last_synced_at":"2025-07-05T21:40:54.725Z","repository":{"id":57198240,"uuid":"67066059","full_name":"choojs/choop","owner":"choojs","description":"🚂⚛️ - choo architecture for preact","archived":false,"fork":false,"pushed_at":"2018-11-12T23:28:04.000Z","size":91,"stargazers_count":93,"open_issues_count":1,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-14T12:21:00.847Z","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/choojs.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-08-31T19:14:03.000Z","updated_at":"2024-01-09T10:25:27.000Z","dependencies_parsed_at":"2022-09-16T13:10:52.286Z","dependency_job_id":null,"html_url":"https://github.com/choojs/choop","commit_stats":null,"previous_names":["yoshuawuyts/rooch"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fchoop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fchoop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fchoop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fchoop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/choojs","download_url":"https://codeload.github.com/choojs/choop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248171107,"owners_count":21059305,"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-09-24T23:12:45.873Z","updated_at":"2025-04-10T06:37:13.476Z","avatar_url":"https://github.com/choojs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003echoop\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  🚂🚋🚋🚋🚋🚋 + ⚛\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eFull on \u003ca href=\"https://github.com/yoshuawuyts/choo\"\u003echoo\u003c/a\u003e architecture on top of the tiny \u003ca href=\"https://github.com/developit/preact\"\u003epreact\u003c/a\u003e engine.\u003c/strong\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  Currently up-to-date with choo \u003ccode\u003e6.13.1\u003c/code\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- Stability --\u003e\n  \u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\"\n      alt=\"API stability\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM version --\u003e\n  \u003ca href=\"https://npmjs.org/package/choop\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/choop.svg?style=flat-square\"\n      alt=\"NPM version\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003c!--\u003ca href=\"https://npmjs.org/package/choop\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/choop.svg?style=flat-square\"\n      alt=\"Downloads\" /\u003e\n  \u003c/a\u003e--\u003e\n  \u003c!-- Standard --\u003e\n  \u003ca href=\"https://standardjs.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\"\n      alt=\"Standard\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\nEver wondered what would happen if [`preact`](https://github.com/developit/preact) and [`choo`](https://github.com/yoshuawuyts/choo) got a baby?\n\nWelp, wonder no longer - here's the answer. Full on `choo` architecture plus a couple `preact` goodies like [`h()`](https://preactjs.com/guide/differences-to-react#what-s-included-) and [components](https://preactjs.com/guide/lifecycle-methods). No JSX, only template strings via [hyperx](https://github.com/substack/hyperx). But you can use JSX if you want to. We even get almost all of the React ecosystem through [preact-compat](https://github.com/developit/preact-compat) 🎉🎉🎉🎉\n\n## Example\n\n```js\nvar html = require('choop/html')\nvar devtools = require('choo-devtools')\nvar choop = require('choop')\n\nvar app = choop()\napp.use(devtools())\napp.use(countStore)\napp.route('/', mainView)\napp.mount('body')\n\nfunction mainView (state, emit) {\n  return html`\n    \u003cmain\u003e\n      \u003ch1\u003ecount is ${state.count}\u003c/h1\u003e\n      \u003cbutton onclick=${onclick}\u003eIncrement\u003c/button\u003e\n    \u003c/main\u003e\n  `\n\n  function onclick () {\n    emit('increment', 1)\n  }\n}\n\nfunction countStore (state, emitter) {\n  state.count = 0\n  emitter.on('increment', function (count) {\n    state.count += count\n    emitter.emit('render')\n  })\n}\n```\n\nSee? Same same as `choo`!\n\nOnly difference is `preact` will append our app to the element passed into `mount`. So instead of our main view returning `\u003cbody\u003e` we return `\u003cmain\u003e` (or whatever we want the root to be).\n\n## Components\n\nYou can create stateful components right out of the box with `choop`:\n\n```js\nvar Component = require('choop/component')\nvar html = require('choop/html')\n\nclass ClickMe extends Component {\n  constructor () {\n    super()\n    this.state = { n: 0 }\n    this.handleClick = () =\u003e {\n      this.setState({ n: this.state.n + 1 })\n    }\n  }\n  render (props, state) {\n    return html`\n      \u003cdiv\u003e\n        \u003ch1\u003eclicked ${state.n} times\u003c/h1\u003e\n        \u003cbutton onClick=${this.handleClick}\u003eclick me!\u003c/button\u003e\n      \u003c/div\u003e\n    `\n  }\n}\n```\n\nAnd then render them in your views using `h()`:\n\n```js\nvar html = require('choop/html')\nvar h = require('choop/h')\n\nvar ClickMe = require('./ClickMe')\n\nfunction view (state, emit) {\n  return html`\n    \u003cbody\u003e\n      ${h(ClickMe)}\n    \u003c/body\u003e\n  `\n}\n```\n\nOptionally pass data a.k.a. `props`:\n\n```js\nh(MyComponent, { someData: 'beep' })\n```\n\nYou can use `props` or an additional constructor function to pass `emit` into your components.\n\n**`state.cache`**\n\n`choo` version `6.11.0` introduced a `state.cache` helper for managing `nanocomponent` instances. This is not included in `choop` since component instance management is taken care of by `preact`.\n\n## More Examples\n\n- **Basic**: https://esnextb.in/?gist=f9f339a9d108f156aa885bca96723d36\n- **Using JSX**: https://esnextb.in/?gist=84fd53fc0ea53240da89bef9573c9644\n- **Rendering `choop` (`preact`) component**: https://esnextb.in/?gist=28005d951a7347fb652eab669c5ffa1e\n- **Rendering `Nanocomponent`**: https://esnextb.in/?gist=01daeea0b216632edf3f0e27b8f0b89a\n- **Rendering `React` component**: https://choop-react.glitch.me/ ([source](https://glitch.com/edit/#!/choop-react?path=public/client.js:1:0))\n\n## FAQ\n\n### Should I use this?\nSometimes you gotta use `react`, and the best thing to do in that case might be to jump on the `preact` train, grab a bag of architecture and go to town. This might not be for me, but perhaps it's useful for you. Here you go! 🎁\n\n### What's the real difference here?\n[`nanomorph`](https://github.com/choojs/nanomorph) is replaced by [`preact`](https://github.com/developit/preact)\n\n### How do I run react widgets in choop?\nLike [this](https://github.com/preact-compat/react):\n\n```\nnpm i -S preact preact-compat\nnpm i -S preact-compat/react preact-compat/react-dom\n```\n\n### What's the size?\n\nSomething like `8.7 kB`\n\n### What about choo?\nYeah, what about me? (_drumroll_)\n\n## Installation\n```sh\n$ npm install choop\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fchoop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchoojs%2Fchoop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fchoop/lists"}