# babel-plugin-transform-angular-async

> Write async/await in angular 1.x apps without worrying about digest loop

Latest version **1.0.4** (published 2018-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-angular-async
pnpm add babel-plugin-transform-angular-async
yarn add babel-plugin-transform-angular-async
bun add babel-plugin-transform-angular-async
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-10-13 |
| First published | 2018-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kamil Pękala |
| Maintainers | kamilkp |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-angular-async
- npm.io page: https://npm.io/package/babel-plugin-transform-angular-async

## Dependencies (2)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.0.0-beta.40
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.0.0-beta.40

## Recent versions

- 1.0.4 (latest) — 2018-10-13
- 1.0.3 — 2018-10-12
- 1.0.2 — 2018-10-12
- 1.0.1 — 2018-10-11
- 1.0.0 — 2018-10-11

## README

<img src="https://img.shields.io/badge/license-MIT%20License-blue.svg">

# babel-plugin-transform-angular-async

Leverage async/await syntax with AngualarJS 1.x apps without worrying about executing things outside of the digest loop. No need for any wrappers or external libs. Magic.

Not magic really. The secret is wrapping promises into angular's `$q.when()` function which accepts any value, promise or not, and returns an angulary promise. Angulary means that it is invoked within the digest loop.

# Installation

```
npm install --save-dev babel-plugin-transform-angular-async
```

.babelrc
--
```json
{
  "presets": ["es2016"],
  "plugins": ["transform-angular-async"]
}
```

# Example transpilations

## async function declaration

Original:

```javascript
async function a(b, c) {
  'ngInject';

  return await b + c;
}
```

Transpiled:
```javascript
function a(b, c) {
  'ngInject';

  return $q.when(async function a(b, c) {
    return (await $q.when(b)) + c;
  }.call(this, b, c));
}
```

Async function to the outside code is just a regular function that returns a promise. So this plugin turns it into just that - a regular function that accepts the same formal arguments (and if it's supposed to have the `'ngInject';` it has it). And returns the original async function call wrapped in a `$q.when()`.

The `await` statement simply awaits on what it was originally supposed to await on but again wrapped in `$q.when()`. This takes care of digest loop in in both a successfull and erroneous execution path.

---

## Async object method

Original:

```javascript
const b = {
  async c(d, e) {
    'ngInject';

    return await d + e;
  }
}
```

Transpiled:

```javascript
const b = {
  c: function c(d, e) {
    'ngInject';

    return $q.when(async function c(d, e) {
      return (await $q.when(d)) + e;
    }.call(this, d, e));
  }
};
```

---

## Async arrow function expression

Original:

```javascript
const c = async(e, f) => e + await f();
```

Transpiled:

```javascript
const c = (e, f) => {
  return $q.when((async (e, f) => e + (await $q.when(f()))).call(this, e, f));
};
```

---

## Async function expression

Original:

```javascript
const e = async function f(g, h) {
  'ngInject';

  return g + await h();
}
```

Transpiled:

```javascript
const e = function f(g, h) {
  'ngInject';

  return $q.when(async function f(g, h) {
    return g + (await $q.when(h()));
  }.call(this, g, h));
};
```

---
_Source: https://npm.io/package/babel-plugin-transform-angular-async · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._