babel-plugin-proposal-top-level-await v1.1.0

babel-plugin-proposal-top-level-await

Use top-level await today!

Note: Only Babel 7.0.0+ is supported

Installation

Via NPM:

npm i babel-plugin-proposal-top-level-await

Usage

Via .babelrc (Recommended)

.babelrc

{
    "plugins": ["proposal-top-level-await"]
}

Via CLI

babel --plugins proposal-top-level-await script.js

Via Node API

require("@babel/core").transform("code", {
    plugins: ["proposal-top-level-await"]
})

Discussion

For the sake of simply, this plugin will wrap the code into async function if top-level await is found.

Wrap IIAFE:

// In
await someTask();

// Out
async function _body() {
  await someTask();
}

export const __asyncModule = true;
export const __promise = _body();

This plugin also supports ES modules, including dynamic import(), and has its own interop system. As a result, this plugin is sticked to proposal solution variant B.

Import Declaration:

// In
import someModule from './someModule.js';

// Out
import * as _someModuleJs from './someModule.js';

async function _body() {
  if (_someModuleJs.__asyncModule == true) {
    await _someModuleJs.__promise;
  }
}

export const __asyncModule = true;
export const __promise = _body();

Export Declaration:

// In
export let someExport = 42;

// Out
var _someExport;

async function _body() {
  let someExport = 42;
  _someExport = someExport
}

export const __asyncModule = true;
export const __promise = _body();
export { _someExport as someExport };

Dynamic Import:

// In
import('./someDynamic');

// Out
import('./someDynamic').then(async function (module) {
  if (module.__asyncModule == true) {
    await module.__promise;
  }
});