Mithril Component Sugar

component-sugar.js

m.callableComponent = function (componentObj) {
  var componentFn = function (props, content) {
    return m.component(componentFn, props, content)
  }
  if (componentObj) {
    for (var prop in componentObj) {
      componentFn[prop] = componentObj
    }
  }
  return componentFn
}

//
// Example use:
//

// [Option] Assignment style
MyWidget = m.callableComponent()
MyWidget.controller = function (options) { /*...*/ }
MyWidget.view = function (ctrl, options) { /*...*/ }

// [Option] Upfront style
MyWidget = m.callableComponent({
  controller = function (options) { /*...*/ },
  view = function (ctrl, options) { /*...*/ }
})

// Inclusion within another component's view:
m.module(document.body, {
  view: function () {
    return m('.app', [
      m('h1', "Welcome!"),
      MyWidget({ id: m.route.param('id') }) // <-----(here)
    ])
  }
})