Converts typescript async functions into generators wrapped with mobx.flow. Inspired by babel-plugin-mobx-async-action and ts-plugin-mst-async-action
In order to run all updates to observables within async functions in mobx.action
, mobx
provides flow
helper. flow
can only work with generator functions function*
.
The main drawback of generator functions is that they don't have type checking. For example:
function callApi(): Promise<string> {
return Promise.resolve('response');
}
function* func() {
const response = yield callApi(); //response is resolved to any
}
async function func2() {
const response = await callApi(); //response is resolved to string
}
This transfomer is created to allow usage of flow
with async
functions in order to get both type checking.
/// <reference path="node_modules/ts-transform-async-to-mobx-flow/transformToMobxFlow.d.ts" />
const fn = transformToMobxFlow(async input => {
return await Promise.resolve(input);
});
class Test {
value: string = '';
@transformToMobxFlow
async func(input: string) {
this.value = await Promise.resolve(input);
}
}
import { flow as flow1 } from 'mobx';
const fn = input => {
return flow_1(function* fn() {
return yield Promise.resolve(input);
}).call(this);
};
class Test {
func(input) {
return flow_1(function* func() {
this.value = yield Promise.resolve(input);
}).call(this);
}
}
npm i ts-transform-async-to-mobx-flow -D
or
yarn add ts-transform-async-to-mobx-flow -D
You may need to add a reference to this package's typescript definition file in order to declare the global transformToMobxFlow
function:
/// <reference path="node_modules/ts-transform-async-to-mobx-flow/transformToMobxFlow.d.ts" />
It can be added to a global.d.ts
file to access transformToMobxFlow
in all the project files.
With ttypescript
tsconfig.json
{
"compilerOptions": {
"...": "...",
"plugins": [{ "transform": "ts-transform-async-to-mobx-flow", "type": "config" }]
}
}
With ts-loader
// webpack.config.js
const tsTransformAsyncToMobxFlow = require('ts-transform-async-to-mobx-flow').default;
module.exports = {
// ...
module: {
rules: [
{
test: /\.(tsx|ts)$/,
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({
before: [tsTransformAsyncToMobxFlow(/** options */)],
}),
},
},
],
},
// ...
};
tsconfig.json
{
"compilerOptions": {
"...": "...",
"plugins": [{ "transform": "ts-transform-async-to-mobx-flow", "type": "config" }]
}
}
// webpack.config.js
const tsTransformAsyncToMobxFlow = require('ts-transform-async-to-mobx-flow').default;
module.exports = {
// ...
module: {
rules: [
{
test: /\.(tsx|ts)$/,
loader: 'ts-loader',
options: {
compiler: 'ttypescript',
},
},
],
},
// ...
};
Using custom compiler, for example 'ttypescript' https://kulshekhar.github.io/ts-jest/user/config/compiler
Alternatively, using ts-jest
astTransformers
. At the moment, there is no official documentation for astTransformers
, but it is part of ts-jest
API since 23.10.0 https://github.com/kulshekhar/ts-jest/blob/master/CHANGELOG.md#23100-beta3-2018-09-06
// package.json
{
"jest": {
"globals": {
"ts-jest": {
"astTransformers": [
"ts-transform-async-to-mobx-flow"
]
}
},
}
-
mobxPackage
string
default:
'mobx'