ts-transform-async-to-mobx-keystone-flow

Converts typescript async functions into generators wrapped with mobx-keystone.flow. Inspired by ts-transform-async-to-mobx-flow

What it is

In order to run all updates to observables within async functions in mobx-keystone.action, mobx-keystone provides flow helper. flow can only work with generator functions function*.

I find it a little cumbersome to write, and coming from ts-transform-async-to-mobx-flow I was already used to the regular, async/await syntax.

This transfomer is created to allow regular syntax to compile into mobx-keystone's flow syntx.

Example

Input

1fn = autoFlow(async (input) => {
2  return await callApi(input);
3})

Output

1import { _async as _async_1, _await as _await_1 } from 'mobx-keystone';
2
3fn = _async_1(function* (this: THISCLASS, input) {
4    return yield* _await_1(callApi(input));
5  }).call(this);
6} 
7

Input

1class Test {
2  @autoFlow
3  fn = async (input) => {
4    return await callApi(input);
5  }
6}

Output

1import { modelFlow as modelFlow_1, _async as _async_1, _await as _await_1 } from 'mobx-keystone';
2
3class Test {
4  @modelFlow_1
5  fn = _async_1(function* (this: THISCLASS, input) {
6    return yield* _await_1(callApi(input));
7  }).call(this);
8}

Also supports autoModel

autoModel is another helper I added to automatically give identifiers to models, based on their full name. You can send an optional function to generate a model name based on the full name if you don't want to use it as-is.

Input

1@autoModel
2class Test {
3}

Output

1import { model as model_1 } from 'mobx-keystone';
2
3@model_1("relative/path/filename")
4class Test {
5}

How to install

npm i ts-transform-async-to-mobx-keystone-flow -D

or

yarn add ts-transform-async-to-mobx-keystone-flow -D

How to use

You may need to add a reference to this package's typescript definition file in order to declare the global transformToMobxKeystoneFlow function:

1/// <reference path="node_modules/ts-transform-async-to-mobx-keystone-flow/transformToMobxKeystoneFlow.d.ts" />

It can be added to a global.d.ts file to access transformToMobxKeystoneFlow in all the project files.

With ttypescript

tsconfig.json

1{
2  "compilerOptions": {
3    "...": "...",
4    "plugins": [{ "transform": "ts-transform-async-to-mobx-keystone-flow", "type": "config" }]
5  }
6}

With ts-loader

1// webpack.config.js
2const tsTransformAsyncToMobxKeystoneFlow = require('ts-transform-async-to-mobx-keystone-flow').default;
3
4module.exports = {
5  // ...
6  module: {
7    rules: [
8      {
9        test: /\.(tsx|ts)$/,
10        loader: 'ts-loader',
11        options: {
12          getCustomTransformers: () => ({
13            before: [tsTransformAsyncToMobxKeystoneFlow(/** options */)],
14          }),
15        },
16      },
17    ],
18  },
19  // ...
20};

With ts-loader and ttypescript

tsconfig.json

1{
2  "compilerOptions": {
3    "...": "...",
4    "plugins": [{ "transform": "ts-transform-async-to-mobx-keystone-flow", "type": "config" }]
5  }
6}

1// webpack.config.js
2const tsTransformAsyncToMobxKeystoneFlow = require('ts-transform-async-to-mobx-keystone-flow').default;
3
4module.exports = {
5  // ...
6  module: {
7    rules: [
8      {
9        test: /\.(tsx|ts)$/,
10        loader: 'ts-loader',
11        options: {
12          compiler: 'ttypescript',
13        },
14      },
15    ],
16  },
17  // ...
18};

Configuration

• mobxKeystonePackage string

  default: 'mobx-keystone'

• generateModelNameFromFilename (string) => string

  default: undefined