Skip to main content

7.16.0 Released: ESLint 8 and TypeScript 4.5

· 3 min read

We just published Babel 7.16.0!

This release enables class static initialization blocks by default. It includes support for a new variant of the pipeline operator proposal, as well as TypeScript 4.5 compatibility.

Furthermore, @babel/eslint-parser now supports ESLint 8.

You can read the whole changelog on GitHub.

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!

Highlights​

Class static blocks enabled by default (#13713)​

JavaScript
class MyClass {
  static {
    doSomeInitialization(MyClass);
    console.log("MyClass initialized!");
  }
}

Static blocks, that reached Stage 4 in August, are now enabled by default in @babel/parser and @babel/preset-env.

If you were using the classStaticBlock parser plugin, or @babel/plugin-syntax-class-static-block, you can safely remove them from your config.

If you already use @babel/preset-env, you can now remove @babel/plugin-proposal-class-static-block from your config.

TypeScript 4.5 features (#13802, #13838)​

TypeScript 4.5 introduces a new syntax for marking imports as type-only: rather than marking the whole import statement, you can mark a single specifier:

// TypeScript 4.4
import type { Foo } from "my-module";
import { fooInstance } from "my-module";

// TypeScript 4.5
import { type Foo, fooInstance } from "my-module";

It also supports two new file extensions: .mts and .cts, that mirror .mjs and .cjs. When passing an .mts or .cts file to Babel with @babel/preset-typescript enabled, it uses the file extension to detect the desired source type ("module" or "script").

.mts and .cts file cannot contain JSX code by default, but they cannot contain TypeScript annotations that would be ambiguous with JSX (<Type> cast and <T>() => {}).

You can read the full TypeScript 4.5 release post on their blog.

^ topic token for Hack-style pipes (#13749)​

The champions of the pipeline operator proposal are considering various topic tokens (the reference to the value from the previous pipeline step).

@babel/plugin-proposal-pipeline-operator (and the "pipelineOperator" parser plugin) now support three of them: #, ^ and %.

JavaScript
let values = getNames()
  |> ["default"].concat(^)
  |> await loadValues(^);

You can enable the current version of the pipeline operator proposal using the proposal: "hack" option, and you can choose the topic token using topicToken: "^":

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "^"
    }]
  ]
}

ESLint 8 support in @babel/eslint-parser (#13782)​

@babel/eslint-parser now supports ESLint 8: you can update your "eslint" dependency and it will just work.

If you are an ESLint plugin author, pay attention to the breaking change in the AST for class fields and private methods: when using ESLint 7 they follow the Babel AST shape; when using ESLint 8 they follow ESLint and the ESTree specification. This is because ESLint introduced support for these new class features starting from ESLint 8.