{"id":16124259,"url":"https://github.com/jongacnik/monoapp","last_synced_at":"2025-03-18T12:31:38.161Z","repository":{"id":57192112,"uuid":"88396847","full_name":"jongacnik/monoapp","owner":"jongacnik","description":"choo architecture without a renderer","archived":false,"fork":false,"pushed_at":"2020-06-18T06:03:40.000Z","size":84,"stargazers_count":53,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-09T13:34:33.062Z","etag":null,"topics":["byob","dom","framework","minimal","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jongacnik.png","metadata":{"files":{"readme":"readme.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-04-16T06:58:25.000Z","updated_at":"2024-06-29T16:09:45.000Z","dependencies_parsed_at":"2022-09-01T05:54:04.637Z","dependency_job_id":null,"html_url":"https://github.com/jongacnik/monoapp","commit_stats":null,"previous_names":["jongacnik/byo"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmonoapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmonoapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmonoapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Fmonoapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongacnik","download_url":"https://codeload.github.com/jongacnik/monoapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"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":["byob","dom","framework","minimal","ui"],"created_at":"2024-10-09T21:20:19.974Z","updated_at":"2025-03-18T12:31:37.882Z","avatar_url":"https://github.com/jongacnik.png","language":"JavaScript","readme":"# monoapp\n\n[![API stability](https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square)](https://nodejs.org/api/documentation.html#documentation_stability_index)\n[![NPM version](https://img.shields.io/npm/v/monoapp.svg?style=flat-square)](https://npmjs.org/package/monoapp)\n[![Standard](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)\n![Size](https://img.shields.io/badge/size-3.88kB-yellow.svg?style=flat-square)\n\n[choo](https://github.com/choojs/choo) architecture without a renderer. Bring-your-own view layer.\n\n## Overview\n\n`monoapp` is an opinionated fork of `choo`, a small frontend framework with a simple, functional architecture. Read-up on the [choo documentation](https://github.com/choojs/choo#api) for details on routing, events, and the architecture in general.\n\nIn `monoapp`, we have removed the modules used to render the dom ([nanohtml](https://github.com/choojs/nanohtml) and [nanomorph](https://github.com/choojs/nanomorph)), and made these pluggable instead. This allows us to build apps using `choo` architecture, but render views and components however we would like. See the [examples directory](https://github.com/jongacnik/monoapp/tree/master/examples/) for using with [react](https://github.com/jongacnik/monoapp/tree/master/examples/with-react), [lit-html](https://github.com/jongacnik/monoapp/tree/master/examples/with-lit-html), [vue](https://github.com/jongacnik/monoapp/tree/master/examples/with-vue-jsx), [nanomorph](https://github.com/jongacnik/monoapp/tree/master/examples/with-nanomorph), etc.\n\n## Example\n\nClone of the [choo example](https://github.com/choojs/choo#example), but we bring [nanohtml](https://github.com/choojs/nanohtml) and [nanomorph](https://github.com/choojs/nanomorph) ourselves.\n\n```js\nvar html = require('nanohtml')\nvar morph = require('nanomorph')\nvar monoapp = require('monoapp')\nvar devtools = require('choo-devtools')\n\nvar app = monoapp({\n  mount: morph,\n  render: morph\n})\n\napp.use(devtools())\napp.use(countStore)\napp.route('/', mainView)\napp.mount('body')\n\nfunction mainView (state, emit) {\n  return html`\n    \u003cbody\u003e\n      \u003ch1\u003ecount is ${state.count}\u003c/h1\u003e\n      \u003cbutton onclick=${onclick}\u003eIncrement\u003c/button\u003e\n    \u003c/body\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\nYou could also choose to define `mount` and `render` using a simple plugin, rather than passing as options:\n\n```js\napp.use(withNanomorph)\n\nfunction withNanomorph (state, emitter, app) {\n  app._mount = morph\n  app._render = morph\n}\n```\n\n## API\n\nThe only items documented here are the methods to implement. These can be defined as options when creating a `monoapp` instance, or can be set with a plugin. Refer to the [choo documentation](https://github.com/choojs/choo#api) for anything related to app architecture (routing, state, and events).\n\n### `app._mount(tree, newTree, root)`*\n\nMount tree onto the root:\n\n```js\napp._mount = (tree, newTree, root) =\u003e nanomorph(tree, newTree)\n```\n\n### `app._render(tree, newTree, root)`*\n\nRender new tree:\n\n```js\napp._render = (tree, newTree, root) =\u003e nanomorph(tree, newTree)\n```\n\n### `app._toString(tree)`\n\nConvert tree to string. This method is useful for ssr:\n\n```js\napp._toString = (tree) =\u003e tree.toString()\n```\n\n\\*Required\n\n## Plugins\n\nSome plugins to use with `monoapp` which take care of common configs:\n\n- [monoapp-react](https://github.com/jongacnik/monoapp-react)\n- ~~monoapp-lit-html~~ soon\n- ~~monoapp-nanomorph~~ soon\n\n## More Examples\n\n- [with-react](https://github.com/jongacnik/monoapp/tree/master/examples/with-react)\n- [with-react-jsx](https://github.com/jongacnik/monoapp/tree/master/examples/with-react-jsx)\n- [with-lit-html](https://github.com/jongacnik/monoapp/tree/master/examples/with-lit-html)\n- [with-vue-jsx](https://github.com/jongacnik/monoapp/tree/master/examples/with-vue-jsx)\n- [with-nanomorph](https://github.com/jongacnik/monoapp/tree/master/examples/with-nanomorph)\n- [with-preact](https://github.com/jongacnik/monoapp/tree/master/examples/with-preact)\n- [with-inferno](https://github.com/jongacnik/monoapp/tree/master/examples/with-inferno)\n\n## Why does this exist?\n\n`choo` is really calm and we like to build apps using it. That said, sometimes `nanohtml` and `nanomorph` aren't the best tools for the job. We wanted to be able to build apps using `choo` architecture but swap out the view layer and make use of other component ecosystems when a project calls for it.\n\n## Notes\n\n`monoapp` is currently feature-matched to choo 6.13.1","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fmonoapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongacnik%2Fmonoapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Fmonoapp/lists"}