Skip to content

Latest commit

 

History

History
123 lines (86 loc) · 4.59 KB

readme.md

File metadata and controls

123 lines (86 loc) · 4.59 KB
Raw

monoapp

API stability NPM version Standard Size

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, vue, 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:

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