Skip to main content

7.11.0 Released: ECMAScript 2021 support in preset-env, TypeScript 4.0 support, printing config and the future of `babel-eslint`

· 5 min read
Huáng Jùnliàng

We just released a new minor version of Babel!

This 7.11 release includes:

  • preset-env support for Logical Assignments (??=), Numeric Separators (1_2) and Namespace re-exports (export * as ns from ...)
  • TypeScript 4.0 support
  • Parser support for the Stage-1 Decimal proposal (7.11m)
  • An environment flag to print the resolved Babel configuration for a given file (BABEL_SHOW_CONFIG_FOR)

In addition to this, we are now releasing the successor of babel-eslint: @babel/eslint-parser!

You can read the whole changelog on GitHub.

Also if you have any questions or something you want to discuss, we've enabled GitHub Discussions on our repository!

If you or your company want to support Babel and the evolution of JavaScript, but aren't sure how, you can donate to us on our Open Collective and, better yet, work with us on the implementation of new ECMAScript proposals directly! As a volunteer-driven project, we rely on the community's support to fund our efforts in supporting the wide range of JavaScript users. Reach out at team@babeljs.io if you'd like to discuss more!

ECMAScript 2021 support (#11864)​

During the last meeting, TC39 moved both the logical assignment and numeric separator proposals to Stage 4! Babel already had support these proposals via the @babel/plugin-proposal-logical-assignment-operators and @babel/plugin-proposal-numeric-separators plugins. They are now included in @babel/preset-env and compiled based on your targets, like any other ECMAScript feature.

Logical Assignment​

Logical assignment offers a shorthand notation combining logical operators and assignment expression:

JavaScript
this.disabled ??= false;
this.disabled ?? (this.disabled = false);

clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();

hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);

Numeric Separator​

The numeric separator (_) is a character you can insert between digits in numeric literals to help with visual separation:

JavaScript
1_000_000_000
0.000_000_000_1

Export namespace from (#11849)​

An imported module can be re-exported as a new namespace:

JavaScript
export * as ns from "mod";
note

This was already included in ECMAScript 2020, but it wasn't supported by @babel/preset-env yet.

Since version 7.11, @babel/preset-env skips @babel/plugin-proposal-export-namespace-from if the caller supports it: this can leave export * as ns as-is to be directly processed by the bundlers. Note: babel-loader and @rollup/plugin-babel don't yet tell Babel they supports this syntax, but we are working on it with the relevant maintainers.

If { modules: false } is set, Babel will assume that the transpiled code will be run in engines that have native ESM support. export * as ns will be compiled based on targets, like any other ECMAScript feature.

If you intend to bundle the transpiled code, please remove { modules: false } option. By default preset-env will determine the module transforms from caller data passed from babel-loader and @rollup/plugin-babel.

{
  "presets": [
    ["@babel/env", {
      "targets": ["defaults"],
-     "modules": false,
    }]
}

If you provide a different value for the modules option, export * as ns will always be transformed.

If you were directly using any of

  • @babel/plugin-proposal-export-namespace-from
  • @babel/plugin-proposal-logical-assignment-operators
  • @babel/plugin-proposal-numeric-separators

you can remove them from your config as they will be included by default:

{
  "presets": [
    ["@babel/env", { "targets": ["defaults"] }]
  ],
  "plugins": [
-   "@babel/plugin-proposal-export-namespace-from",
-   "@babel/plugin-proposal-logical-assignment-operators",
-   "@babel/plugin-proposal-numeric-separators"
  ]
}

TypeScript 4.0 support (#11760)​

TypeScript 4.0 introduces several new features.

Variadic Tuple Types​

You can now specify generic spreads in tuple types, and the spreads can be at any location:

type Arr = readonly any[];

function collect<L extends Arr, M extends Arr>(b: boolean, l: L, m: M): [boolean, ...L, ...M] {
  return [b, ...l, ...m];
}

Labeled Tuple Elements​

Tuple elements can now be labeled:

type Log = [failed: boolean, reason?: Error, ...stacks?: string[]]
// same as
type Log = [boolean, Error?, string[]?];

unknown on catch Clause Bindings​

You can specify unknown type of catch clause variables:

try {
  // ...
} catch (e: unknown) {
  // type error! Error() only accepts string | undefined
  throw new Error(e);

  if (typeof e === "string") {
    // e is a string
    throw new Error(e);
  }
}

Note that only unknown and any are currently allowed in catch binding type annotations. @babel/parser does not enforce this check because neither type aliases (type ANY = any) nor intersections (any | unknown) are not evaluated at compile-time.

Starting from Babel 7.11, you can use these new features without any config changes. For more information, please checkout TypeScript 4.0 Announcement.

Decimal Literal parser support (#11640)​

The Decimal Literal Proposal (Stage 1) provides a notation for decimal numbers, analogous to BigInt and integers.

JavaScript
0.1m + 0.2m === 0.3m; // true

Babel now supports parsing these literals: you can add @babel/plugin-syntax-decimal plugin to your Babel config or, if you use @babel/parser directly, you can enable the decimal plugin. Babel doesn't provide polyfill implementations for decimals.

Babel can be configured in a number of ways (programmatically and via JSON/JavaScript configs). This flexibility, however, does not come for free: it can be difficult to understand what are the applicable config files within your project and how Babel merges these configs. You may also indirectly use Babel and the config is generated by a package residing within your node_modules. All these use cases show the need for a way to output config information to help debug any compilation problems.

Babel 7.11 offers an environment variable for this purpose:

Shell
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

will print the effective config applied on src/myComponent.jsx.

Checkout configuration for the detailed usage and example output.

@babel/eslint-parser (#10709)​

babel-eslint has been moved to the Babel monorepo under a new name: @babel/eslint-parser. It offers better integration between Babel and ESLint, and features complete ES2020 support. In the State of babel-eslint blog post, Kai has added more about the state of @babel/eslint-parser.