Skip to main content

7.3.0 Released: Named capturing groups, private instance accessors and smart pipelines

· 4 min read

After over 80 commits, the latest Babel minor release is here!

This release includes support for named capturing groups in regular expressions, private instance accessors, the smart pipeline operator and a bunch of improvements to TypeScript parsing. You can read the whole changelog on GitHub.

Thanks to @jamesgeorge007 and @armano2 for their first PR!

Bloomberg is continuing to sponsor the implementation of new class features in Babel: after giving us static private fields and private instance methods, they've just implemented private instance getters and setters.

Another shout out goes to the AMP Project, which increased their support of Babel to $24k/year becoming a Base Support Sponsor.

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 OpenCollective 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 both fund our efforts in supporting the wide range of JavaScript users and taking ownership of the code.

Private instance accessors (getters and setters) (#9101)​

JavaScript
class Person {
  #firstname = "Babel";
  #lastname = "JS";

  get #name() {
    return this.#firstname + " " + this.#lastname;
  }

  sayHi() {
    alert(`Hi, ${this.#name}!`);
  }
}

Thanks to Tim (Bloomberg) for implementing this proposal!

You can test this new feature by adding @babel/plugin-proposal-private-methods to your config, if you haven't already added it from Babel 7.2.0, or by enabling the stage-3 preset in the online repl.

Class private features support is almost complete!

Class PrivateInstanceStatic
Fields
class A { #a = 1}		7.0.07.1.0
Methods
class A { #a() {} }		7.2.0✖
Accessors
class A { get #a() {} }		7.3.0✖

Smart pipeline operator (#9179)​

Babel implements multiple variants of this proposal to help TC39 test and gather feedback from the community. As with all proposals, expect changes in the future.

In Babel 7.2.0 we landed parsing support for the Smart Pipeline Operator proposal. Thanks to the work of Thiago Arrais, you can now transpile it down to standard ECMAScript and try it out!

We currently only support the main proposal, and none of the additional features. Also, we don't support yield and await in pipelines yet.

JavaScript
name
  |> # || throw new TypeError()
  |> doubleSay(#, ', ')
  |> capitalize
  |> # + '!'
  |> new User.Message(#)
  |> stream.write(#, { sync: true })
  |> console.log;

You can enable it in your project using the @babel/plugin-proposal-pipeline-operator plugin with the proposal: "smart" option:

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

Previously, the "minimal" proposal was added in back in [v7.0.0-beta.3] via #6335

Named capturing groups (#7105)​

JavaScript
let stringRe = /(?<quote>"|')(?<contents>.*?)\k<quote>/;

let { contents } = `"foo bar"`.match(stringRe);

Support for the biggest ECMAScript 2018 feature missing in Babel is now here! Previously, partial support for named groups was available via the awesome babel-plugin-transform-modern-regexp community plugin by Dmitry Soshnikov. We also coordinated efforts with core-js to provide full support with the new @babel/plugin-transform-named-capturing-groups-regex package.

@babel/preset-env has also been updated to include this, so many of you will be able to use it without making any changes!

Note that the runtime features (i.e. the groups property) only work in browsers with proper support for ES6 regular expressions. If you need to support older environments, you can include a polyfill for RegExp's methods.

TypeScript updates (#9302, #9309)​

Thanks to the work by Armano on @babel/parser and Henry/Brian on @babel/generator (have you seen the live stream?), we now support let x: typeof import('./x');, added in TypeScript 2.9. We now also support the bigint type keyword, added in TypeScript 3.2.

babel-eslint v11.0.0-beta.0: Automatic Syntax Detection by Reading Config (babel/babel-eslint#711)​

Thanks to Kai (also on the ESLint TSC) for finishing this work!

Up until now, babel-eslint has manually enabled all syntax plugins (with the list falling out of date frequently). It also meant that it could parse syntax that a configured instance of Babel itself didn't allow at compile time. We now require @babel/core as a peerDependency and assume that a Babel config exists when using babel-eslint and use that same config to modify itself (making this a breaking change). This change will hopefully make maintaining the module itself more manageable as well as re-using Babel's config which is a reasonable assumption for a user making use of babel-eslint.

You can help us by checking if this beta release works for your project 🙂

Discuss on Twitter