Hauberk

Mithril.js is awesome, but composition can be tricky.

Hauberk aims to change that by allowing the developer to generate reusable, configurable mithril components with as minimal of an API surface area as possible.

// Example Posts.js
 
import m           from 'mithril'
import Hauberk     from 'hauberk'
import {App}       from './layouts'
import * as mixin  from './mixins'
import Tags        from './components/Tags'
 
export default class Posts {}
 
Posts.controller = Hauberk.controller(
  mixin.controller.Model({
    collection: 'Post'
  }),
  mixin.controller.Session()
)
 
Posts.view = App(
  mixin.view.Header(),
  Hauberk.component(Tags, {
    options: 'whatever'
  })
)
 

The entire API consists of 5 methods, and if I can come up with a way to collapse it more, I will.

• Hauberk.controller
• Hauberk.view
• Hauberk.controller.mixin
• Hauberk.view.mixin
• Hauberk.component

### Hauberk.controller(fn, fn1, ...fnN)

Creates a composable controller function of any arity.

```javascript

const API = {
  fetch: Hauberk.controller( function (ctrl, url) {
    ctrl.data = API.fetch(url)
    // ctrl is an accumulator, so we do not need to return it
  })
}


const Dashboard = {
  controller: Hauberk.controller(
    API.fetch('/metrics')
  )
  view: App(
    Header('dashboard'),
    Display(Metrics)
  )
}

Hauberk.view(fn, fn1, ...fnN)

Creates a composable view function of any arity

Hauberk.controller.mixin(fn, fn1, ...fnN)

Hauberk.view.mixin(fn)

const Layout = Hauberk.view.mixin( function (ctrl, partials) {
  return m('.app', partials)
})
 
const Header = Hauberk.view.mixin( function (ctrl) {
  return m('.header',
    m('h1', ctrl.title())
  )
})
 
const Dashboard = {
  controller: Hauberk.controller(
    mixOf.title('simple example')
  )
  view: Layout(
    Header()
  )
}
 

Hauberk.component(Class, config)

returns a function that mithril can invoke to generate a mithril component

//example ./components/Tags.js
import m        from 'mithril'
 
export default class Tags {
  static controller (outer, config) {
    return Object.assign({}, outer, config)
  }
 
  static view (ctrl) {
    return m('ol.tags', ctrl.model().tags().map(ctrl.Card) )
  }
}
 
// simple example usage
 
Hauberk.component(Tags, {
  Card: function TagCard (tag) { return m('li', tag.name()) }
})

A real-world example

See the Pen vGxrrr by Benjamin Clos (@ondreian) on CodePen.