What if we could yield & await as discrete mechanisms for stepping through lifecycle?

mithril.steps.js

// Async generators don't actually work this way: all yields implictly mandate asynchronous (non-synchronously-blocking) resolution under the hood; so in practice it's probably better to be honest and make this unambiguously wasteful & imprecise and have all steps as explicit awaits. 🙄  
const KitchenSink = steps(async function * ($){
  $.view(v =>
    m('p.counter', $.attrs.value, '!')
  )
  
  yield $.create
  
  style({
    transition : 'none',
    opacity    : 0,
  })
  
  yield $.layout
  
  style({
    transition : 'opacity 1s ease-in-out',
    opacity    : 1,
  })
  
  let previous = $.attrs.value
  
  $.attrs.map(({value}) => {
    const colour = (
      value > previous ? 'green' :
      value < previous ? 'red'   :
                         'grey'
    )
    
    previous = value
    
    $.dom.animate({
      color : [color, 'unset'],
    }, {
      duration : 500,
      easing   : 'ease-out',
    })
  })
  
  await $.onbeforeremove
  
  style({opacity: 0})
  
  await new Promise(done => {
    $.dom.addEventListener('transitionend', done)
  })
  
  function style(styles){
    Object.assign($.dom.style, styles)
  }
})