ts-plugin-mst-async-action

Converts mobx-state-tree async actions to flows. inspired by babel-plugin-mobx-async-action

Example

In

import { types } from 'mobx-state-tree'

const store = types.model({ count: 0 }).actions(self => ({
  async getCount() {
    self.count = await api.getCount()
  }
}))

Out

import { types } from 'mobx-state-tree'
import { flow } from 'mobx-state-tree'

const store = types.model({ count: 0 }).actions(self => ({
  getCount: flow(function*() {
    self.count = yield api.getCount()
  })
}))

Usage

With ts-loader

// webpack.config.js
const tsMstAsyncActionPluginFactory = require('ts-plugin-mst-async-action')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(tsx|ts)$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: () => ({
            before: [tsMstAsyncActionPluginFactory(/** options */)]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        }
      }
    ]
  }
  // ...
}

Options

• mstPackage string

  if you use wrapper for "mobx-state-tree" package, you can pass it's name to plugin

  default: 'mobx-state-tree'