Redraw on resolve of async event handler

[EtiamNullam]

Is this something you're interested in implementing yourself? Yes

Description

I believe interacting with async code can be improved if we always redraw on resolve of promise from event handlers. Consider this simple app, where we need to manually call m.redraw() after a (fake) long async operation completes which originated from user action (button click):

let count = 0

const longOperation = () => new Promise(
  (resolve) => setTimeout(resolve, 1000)
)

const CounterComponent = () => {
  const add = async () => {
    await longOperation()

    count++
    console.log('added, count:', count)

    // m.redraw() is needed here, my proposal would be that it will be implied when attached to an event
    m.redraw()
  }

  return {
    view: () => [
      m('button', {
        onclick: add,
      }, 'Add'),
      m('span', count),
    ]
  }
}

m.mount(document.body, CounterComponent)

If Mithril's premise is to quickly update after every user interaction then we should also watch for resolve of that action if given opportunity, so my suggestion is to redraw when promise from event handler is resolved.

Why

I believe that's what everyone expects from an async event handler. It seems convenient to me.

Possible Implementation

We are already checking the result of event handler just to see if event propagation should be skipped in case it returned false. In the same place we can check if returned value from event handler looks like promise and attach m.redraw() once it's resolved.

Note

I'm linking to thread I've started on Zulip: https://mithril.zulipchat.com/#narrow/stream/324076-general/topic/Async.20event.20handlers

[dead-claudia]

Highly related: #2681