choo architecture without a renderer. Bring-your-own view layer.
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.
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
}
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
Some plugins to use with monoapp which take care of common configs:
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.
monoapp is currently feature-matched to choo 6.13.1
FAQs
choo architecture without a renderer
We found that monoapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.