@babel/plugin-proposal-async-generator-functions

What is @babel/plugin-proposal-async-generator-functions?

The @babel/plugin-proposal-async-generator-functions package is a Babel plugin that allows you to use async generator functions and for-await-of loops in your JavaScript code, which are part of the ECMAScript 2018 (ES9) specification. This plugin transforms async generator functions and for-await-of loops into code that can run in environments that do not support these features natively.

What are @babel/plugin-proposal-async-generator-functions's main functionalities?

Async Generator Functions

This feature allows you to define asynchronous generator functions using the async function* syntax. These functions can yield values using the yield keyword, and they return an AsyncIterator which can be used with for-await-of loops.

async function* asyncGenerator() {
  var i = 0;
  while (i < 3) {
    yield i++;
  }
}

For-Await-Of Loops

This feature enables you to iterate over AsyncIterables using a for-await-of loop. The loop will wait for each promise returned by the AsyncIterable to resolve before continuing to the next iteration.

async function iterateAsyncGenerator() {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
}

Other packages similar to @babel/plugin-proposal-async-generator-functions

regenerator-runtime

The regenerator-runtime package provides a runtime for Regenerator-compiled generator and async functions. It is similar to @babel/plugin-proposal-async-generator-functions in that it allows you to use generators and async functions in environments that do not support them natively. However, it is a runtime library rather than a compile-time Babel plugin.

babel-preset-env

babel-preset-env is a Babel preset that includes various plugins to transpile modern JavaScript to backwards-compatible versions. It includes plugins for async functions and generators, similar to @babel/plugin-proposal-async-generator-functions, but it is more comprehensive as it covers a wider range of JavaScript features and proposals.

README

@babel/plugin-proposal-async-generator-functions

Turn async generator functions and for-await statements to ES2015 generators

Example

In

async function* agf() {
  await 1;
  yield 2;
}

Out

var _asyncGenerator = ...

let agf = (() => {
  var _ref = _asyncGenerator.wrap(function* () {
    yield _asyncGenerator.await(1);
    yield 2;
  });

  return function agf() {
    return _ref.apply(this, arguments);
  };
})();

For await example

async function f() {
  for await (let x of y) {
    g(x);
  }
}

Example Usage

async function* genAnswers() {
  var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
  var total = 0;
  for await (let val of stream) {
    total += await val;
    yield total;
  }
}

function forEach(ai, fn) {
  return ai.next().then(function (r) {
    if (!r.done) {
      fn(r);
      return forEach(ai, fn);
    }
  });
}

var output = 0;
forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
  console.log(output); // 42
});

Try it Out in the REPL

Installation

npm install --save-dev @babel/plugin-proposal-async-generator-functions

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/plugin-proposal-async-generator-functions"]
}

Via CLI

babel --plugins @babel/plugin-proposal-async-generator-functions script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-proposal-async-generator-functions"]
});

References

• Proposal: Asynchronous iteration for ECMAScript