Functor Mithril!

.js

import m from './functor-mithril'

import tick from './tick'

function Async({}, getDom){
  let cache
  
  return ({content, setup, teardown}) => {
    if(content && !cache && teardown)
      tick(() => {
        void getDom().clientHeight
        
        setup(getDom())
      })
      
    else if(!content && cache && setup){
      teardown(getDom()).then(() => {
        cache = undefined
        
        m.redraw()
      })
      
      return cache
    }
    
    return cache = content
  }
}

m.mount(document.body, () => {
  let show

  return () => [
    m('h1', 'Welcome to Functor Mithril!'),

    m('button', {
      onclick: () => show = !show,
    }, 'Toggle'),

    m(Async, {
      content: show && 
        m('p[style=opacity:0;transition:1s]', 'Hi!'),
      
      setup: dom => {
        dom.style.opacity = 1
      },

      teardown: dom => new Promise(done => {
        dom.addEventListener('transitionend', done)

        dom.style.transition = 'opacity 1s ease-in-out'
        dom.style.opacity    = 0
      })
    })
  ]
})

README.md

Functor Mithril!

functor-components.js

import tick from './tick'

export default definition => 
  function FunctorComponentClosure(v){
    let   dom 
    const getDom = () => dom
    const view   = definition(unV(v), getDom)

    return {
      view: function FunctorComponentView(v){
        tick(() => {
          dom = v.dom
        })
          
        return view(unV(v))
      }
    }
  }
  
function unV(v){
  for(let key in v.attrs)
    return v.attrs
  
  if(v.children)
    return v.children[0]
}

functor-mithril.js

import functor from './functor-components'
import patch from './mithril-patcher'

export default patch(m, functor)

mithril-patcher.js

// Monkey-patches Mithril to accept new component interfaces.
// Supply 1) an instance of Mithril & 2) a factory which consumes
// components with the desired interface and returns Mithril-
// compliant components.
// Returns the patched Mithril interface. 
import xet from './xet'

export default (m, factory) => {
  const components = new WeakMap
  const factoryM   = component => 
    xet(components, component, () => factory(component))

  return Object.assign(
    function(component, input){
      return (
          typeof component !== 'function'
        ?
          m.apply(this, arguments)
        :
          m(factoryM(component), input)
      )
    }, 
    m,
    {
      mount: (a, component) => 
        m.mount(a, factoryM(component)),

      route: (a, b, c) =>
        m.route(a, b, 
          Object.values(c)
            .reduce((hash, [path, component]) => (
              hash[path] = factoryM(component),

              hash
            ))
        )
    },
  )
}

tick.js

export default callback => {
  const node     = document.createTextNode('')
  const observer = new MutationObserver(() => {
    observer.disconnect()
    callback()
  })

  observer.observe(node, {characterData: true})
  
  node.nodeValue = ''
}

xet.js

export default (map, key, factory) => {
  if(map.has(key))
    return map.get(key)
  
  const value = factory()
  
  map.set(key, value)
  
  return value
}