login.js

var login = {
  controller: function(opts, children) {
    var backend
    
    opts = opts || {}
    backend = opts.backendUrl || 'accounts.yahoo.com'
    
    return {
      submit: function() {
        m.request(backend, ...)
      }
    }
  },
  view: function(ctrl, opts, children) {
    return m('.login', [
      children,
      m('input', ...),
      m('input', ...)
    ])
  }
}

var image = {
  view: function(ctrl, opts) {
    return m('img', {
      config: function(element, isInitialized, context) {
        if (isInitialized) return
        
        var setSource = function() {
          if (element.offsetWidth > 1000) {
            element.setAttribute('src', opts.sources[2])
          } else if (element.offsetWidth > 600) {
            element.setAttribute('src', opts.sources[1])
          } else {
            element.setAttribute('src', opts.sources[0]])
          }
        }
        
        setSource()
        element.addEventListener('resize', setSource, false)
        
        context.onunload = function() {
          element.removeEventListener('resize', setSource)
        }
      }
    })
  }
}

//usage:
m.component(login, {backendUrl: 'accounts.google.com'}, [
  m('h1', 'Hej, login please.'),
  m('h2', 'And discover our features'),
  m.component(image, { sources: ['sml.png', 'md.png', 'big.png'] })
])