Magic actionAsync (red X is coveralls)

[xaviergonz]

Basically like #217 except that thanks to a very small Promise tweaking "task" is not needed at all :D

Edit: See comment about chrome below.

actionAsync

Alternative syntax for async actions, similar to flow but more compatible with
Typescript typings. Not to be confused with asyncAction, which is deprecated.

actionAsync can be used either as a decorator or as a function.

It is very important to await for any promises that are created directly inside the async action,
or else an exception will be thrown.

When using the mobx devTools, an asyncAction will emit action events with names like:

• "fetchUsers - runid 6 - step 0"
• "fetchUsers - runid 6 - step 1"
• "fetchUsers - runid 6 - step 2"

The runId represents the action instance. In other words, if fetchUsers is invoked
multiple times concurrently, the events with the same runid belong together.
The step number indicates the code block that is now being executed.

Examples

import {actionAsync} from "mobx-utils"

let users = []

const fetchUsers = actionAsync("fetchUsers", async (url) => {
  const start = Date.now()
  const data = await window.fetch(url)
  users = await data.json()
  return start - Date.now()
})

const time = await fetchUsers("http://users.com")
console.log("Got users", users, "in ", time, "ms")

import {actionAsync} from "mobx-utils"

mobx.configure({ enforceActions: "observed" }) // don't allow state modifications outside actions

class Store {
  @observable githubProjects = []
  @state = "pending" // "pending" / "done" / "error"

  @actionAsync
  async fetchProjects() {
    this.githubProjects = []
    this.state = "pending"
    try {
      const projects = await fetchGithubProjectsSomehow()
      const filteredProjects = somePreprocessing(projects)
      // the asynchronous blocks will automatically be wrapped actions
      this.state = "done"
      this.githubProjects = filteredProjects
    } catch (error) {
       this.state = "error"
    }
  }
}

[coveralls]

Coverage decreased (-0.9%) to 93.372% when pulling 38df465 on magic-action-async into 75733b1 on master.

[xaviergonz]

Gah darn, it doesn't seem to work when using native async constructs (at least in Chrome) since those will use the native Promise constructor no matter what. It does work with transpiled code though (and apparently native async when using node).

An option could be to also offer "task", make if compatible with this one and let people know they should use "task" when targeting es6 untranspiled code?

[mweststrate]

Honestly I'd be very very hesitant to monkey patch a core function like Promise. Even if there is no semantic risk, there is still the risk off blowing up all of the internal javascript engine optimisations by customising these built-ins.

[xaviergonz]

Ah shame, I just noticed that overriding .then and friends is supported by native async/await, so I was about to test an idea using those instead

[mweststrate]

I'd expect a maintainers hell of fallout issues. Imagine what will happen in this issue tracker if every stack trace involving promises, has some mobx-utils source line in it :-P.

…

On Mon, Oct 7, 2019 at 9:30 PM Javier Gonzalez ***@***.***> wrote: Ah shame, I just noticed that overriding .then and friends is supported by native async/await, so I was about to test an idea using those instead — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#218?email_source=notifications&email_token=AAN4NBHI5ZHSZ2O7CZ4AIH3QNOL7ZA5CNFSM4I6HO622YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEARWOBQ#issuecomment-539191046>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAN4NBEMQX5YGWJFVIDFR3DQNOL7ZANCNFSM4I6HO62Q> .

[xaviergonz]

Found a way to make it work in chrome es6, but that way doesn't work in node es6.
Could make it so it detects the environment and chooses one way or the other, but it is likely not to work very well somewhere else, so closing this pr in favor of the one that uses task. thanks!