monoapp
v3.0.0
Published
choo architecture without a renderer
Downloads
5
Maintainers
amongiantsReadme
monoapp
choo architecture without a renderer. Bring-your-own view layer.
Overview
monoapp is an opinionated fork of choo, a small frontend framework with a simple, functional architecture. Read-up on the choo documentation for details on routing, events, and the architecture in general.
In monoapp, we have removed the modules used to render the dom (nanohtml and 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 for using with react, lit-html, nanomorph, etc.
Example
Clone of the choo example, but we bring nanohtml and nanomorph ourselves.
var html = require('nanohtml')
var morph = require('nanomorph')
var monoapp = require('monoapp')
var devtools = require('choo-devtools')
var app = monoapp({
mount: morph,
render: morph
})
app.use(devtools())
app.use(countStore)
app.route('/', mainView)
app.mount('body')
function mainView (state, emit) {
return html`
<body>
<h1>count is ${state.count}</h1>
<button onclick=${onclick}>Increment</button>
</body>
`
function onclick () {
emit('increment', 1)
}
}
function countStore (state, emitter) {
state.count = 0
emitter.on('increment', function (count) {
state.count += count
emitter.emit('render')
})
}You could also choose to define mount and render using a simple plugin, rather than passing as options:
app.use(withNanomorph)
function withNanomorph (state, emitter, app) {
app._mount = morph
app._render = morph
}API
The 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 for anything related to app architecture (routing, state, and events).
app._mount(tree, newTree, root)*
Mount tree onto the root:
app._mount = (tree, newTree, root) => nanomorph(tree, newTree)app._render(tree, newTree, root)*
Render new tree:
app._render = (tree, newTree, root) => nanomorph(tree, newTree)app._toString(tree)
Convert tree to string. This method is useful for ssr:
app._toString = (tree) => tree.toString()*Required
Plugins
Some plugins to use with monoapp which take care of common configs:
- monoapp-react
- ~~monoapp-lit-html~~ soon
- ~~monoapp-nanomorph~~ soon
More Examples
Why does this exist?
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.
Notes
monoapp is currently feature-matched to choo 6.13.1