BT

InfoQ Homepage News Babel 7.7 Released with Improved TypeScript Support, Top-Level Await and More

Babel 7.7 Released with Improved TypeScript Support, Top-Level Await and More

Bookmarks

The recently released Babel 7.7 now parses top-level await, Flow enum declarations (Flow proposal), and proposes recovery options from certain syntax errors. Babel 7.7 now supports TypeScript 3.7, and also introduces a new optional babel.config.json configuration files, and miscellaneous other features and bug fixes.

Top-level await enables ECMAScript Modules (ESM) to await resources, causing other modules which import them to wait before they start evaluating their body. The Stage 3 proposal for instance allows developers to conditionally load a dependency or to perform app initialization:

// Dynamic dependency path
const strings = await import(`./i18n/${navigator.language}.mjs`);

// Resource initialization
const connection = await dbConnector();

Usage of top-level await assumes that the module bundler also supports it. Developers using Rollup can enable the experimentalTopLevelAwait option. Developers using webpack 5 can use the experiments.topLevelAwait option. Starting Babel 7.7, @babel/preset-env will automatically enable @babel/plugin-syntax-top-level-await if the caller supports it.

By default, the Babel parser of prior versions throws an error whenever some invalid syntax is encountered. While this behavior fits the main Babel use case (i.e. transpiling), it causes some inconveniences for other use cases originating from other Babel clients (like babel-eslint or prettier). Babel 7.7 adds a new errorRecovery option to @babel/parser. When set to true, the resulting AST will have an errors property containing all the errors the parser was able to recover from.

Babel 7.7 additionally improves support for TypeScript 3.7. To optional chaining (a?.b) and nullish coalescing (a ?? b), supported in Babel since 7.0, Babel 7.7 adds the possibility for developers to use assertion functions and declare in class fields:

function assertString(x): assert x is string {
  if (typeof x !== "string") throw new Error("It must be a string!");
}

class Developer extends Person {
  declare usingBabel: boolean;
}

The support for declare in class fields is available behind a "allowDeclareFields" flag, supported by both @babel/plugin-transform-typescript and @babel/preset-typescript.

Babel 7.7.0 also brings support for a new babel.config.json configuration file, with the same behavior as babel.config.js. The new JSON format has better cacheability and serializability.

The Babel 7.7 release also comes with a host of bug fixes and other improvements, including memory usage improvements.

Babel is available under the MIT open source license. Contributions are welcome via the Babel GitHub organization and should follow Babel’s contribution guidelines and code of conduct. Donations to support the project may also be made via Open Collective.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Bit old?

    by Stefan Norberg /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Good write-up, but Babel 7.7.0 was released over two months ago.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.