Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mobxjs/babel-plugin-mobx-deep-action
Reduces `action` and `runInAction` boilerplates
https://github.com/mobxjs/babel-plugin-mobx-deep-action
async babel-plugin decorators mobx
Last synced: about 2 months ago
JSON representation
Reduces `action` and `runInAction` boilerplates
- Host: GitHub
- URL: https://github.com/mobxjs/babel-plugin-mobx-deep-action
- Owner: mobxjs
- Created: 2016-12-01T19:41:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-17T20:28:58.000Z (over 5 years ago)
- Last Synced: 2024-04-24T15:13:42.183Z (5 months ago)
- Topics: async, babel-plugin, decorators, mobx
- Language: JavaScript
- Size: 38.1 KB
- Stars: 108
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-mobx-deep-action
[](https://travis-ci.org/mobxjs/babel-plugin-mobx-deep-action)
[](https://badge.fury.io/js/babel-plugin-mobx-deep-action)
Allow to reduce boilerplate of writing async actions.
Based on assumption, that all code created inside an action,
should be handled as action too.
This plugin scans for all functions, marked as actions, and then marks all
nested functions, which created inside actions as actions too.
* [Usage with async and generator functions](#toc-usage-async)
* [Typescript decorators](#toc-typescript-decorators)
* [Use other package](#toc-mobx-package)
## Example
**In**
```js
import { action } from "mobx";
action(function doSome() {
fetch("/api/list").then(function(response) {
this.items = response.dta;
});
});
```
**Out**
```js
"use strict";
import { action } from "mobx";
action(function doSome() {
fetch("/api/list").then(action(function(response) {
this.items = response.dta;
}));
});
```
## Caveats
Plugin support only ES6 imports. Only these imports are supported:
```
import {action} from "mobx";
```
```
import {action as actionAlias} from "mobx";
```
```
import * as mobx from "mobx";
```
```
import * as mobxAlias from "mobx";
```
For example, these cases are **not supported**:
```
const mobx = require("mobx")
```
```
const {action} = require("mobx")
```
```
import * as mobx from "my-mobx-alias"
```
```
import * as mobx from "mobx";
const {action} = mobx;
action(function() {});
```
## Installation
```sh
$ npm install babel-plugin-mobx-deep-action
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["mobx-deep-action"]
}
```
### Via CLI
```sh
$ babel --plugins mobx-deep-action script.js
```
### Via Node API
```javascript
require("babel-core").transform("code", {
plugins: ["mobx-deep-action"]
});
```
## Usage for async and generator functions.
see https://github.com/Strate/babel-plugin-mobx-async-action
This plugin could handle decorators code, emitted from typescript, such as:
```js
import * as tslib_1 from "tslib";
import { action } from "mobx";
export default class Class2 {
async method() {
const a = (other) => { };
return a(function () { });
}
}
tslib_1.__decorate([
action
], Class2.prototype, "method", null);
```
To get this code worked, you should enable [importHelpers](https://www.typescriptlang.org/docs/handbook/compiler-options.html)
compiler option, and get [tslib](https://www.npmjs.com/package/tslib) package installed. Also, typescript
should emit es6 modules, so, you should target your compiler to es2015+. That's all,
plugin detect import from "tslib" and handle typescript decorators.
If you use wrapper for "mobx" package, you can pass it's name to plugin:
#### .babelrc
```json5
{
"plugins": [
["mobx-deep-action", {
"mobx-package": "mobx-custom"
}]
]
}
```