7.21.0 Released: Inline RegExp modifiers, TypeScript 5.0, and Decorators updates

We just published Babel 7.21.0!

Babel now supports the Inline RegExp modifiers proposal, the latest version of the Decorators proposal, and the new TypeScript 5.0 syntax.

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

Inline RegExp modifiers

The Inline RegExp modifiers Stage 3 proposal allows you to enable or disable the i, m and s for part of a regular expression, without affecting other parts.

You can use the (?enableFlags:subPattern) syntax to enable flags, (?-disableFlags:subPattern) to disable them, and (?enableFlags-disableFlags:subPattern) to enable some and disable others at the same time. You can think of non-capturing group (?:subPattern) as a special case where no flags are modified.

As an example, /(?i:a)a/ matches an a ignoring its case, followed by a lowercase a:

JavaScript

/(?i:a)a/.test("aa"); // true
/(?i:a)a/.test("Aa"); // true
/(?i:a)a/.test("aA"); // false

/a(?-i:a)/i is equivalent: the regular expression is case insensitive, expect for the second a which must be lowercase.

You can enable this proposal by installing the @babel/plugin-proposal-regexp-modifiers package and adding it to your Babel configuration:

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    // Add this!
    "@babel/plugin-proposal-regexp-modifiers"
  ]
}

Decorators updates

TC39, the committee that standardizes JavaScript, recently approved some changes to the Decorators proposal based on feedback from the TypeScript team.

• Decorators on exported classes can now come either before or after the export keyword, but not in both places at the same time:
  JavaScript

  // valid
  @dec
  export class A {}
  
  // valid
  export @dec class B {}
  
  // invalid
  @dec
  export @dec class C {}
  This relaxed restriction aims at simplifying migration from the "legacy" decorators version, by reducing the syntactic differences.
• The methods on the context.access object provided to decorators expect the target object as their first parameter, rather than as their this receiver:
  JavaScript

  let accessX;
  
  function dec(desc, context) {
    accessX = context.access;
    return dec;
  }
  
  class A {
    @dec #x = 1;
  }
  
  // old semantics
  accessX.get.call(new A) === 1;
  
  // new semantics
  accessX.get(new A) === 1;
• context.access has a new .has method, to check if an object has the corresponding element. Continuing the example above:
  JavaScript

  // #x in new A
  accessX.has(new A) === true;

You can enable this new version of the decorators proposal by setting the version option of "@babel/plugin-proposal-decorators" to "2023-01":

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-01" }]
  ]
}

You can also try the new decorators proposal in the online Babel REPL, enabling the "Stage 3" (or lower) preset in the sidebar and choosing the 2023-01 decorators version.

TypeScript 5.0

TypeScript 5.0, currently released as a beta prerelease, introduces two new syntactic features:

• const modifiers for type parameters
  TypeScript

  function getName<const T extends { name: string }>(user: T): T["name"] {
      return user.name;
  }
  
  let name = getName({ name: "Babel" });
  //  ^? inferred type: "Babel", instead of just string.
• export type * declarations
  TypeScript

  export type * from "./mod";
  export type * as ns from "./mod";
  Babel relies on this new syntax to safely remove the re-export declaration while compiling from TypeScript to JavaScript.

Additionally, TypeScript 5.0 introduces support for the standard Decorators proposal, that you can enable in Babel using @babel/plugin-proposal-decorators.

You can read more about the new TypeScript features in their release post!

Experimental support for .cts configuration files

If you installed @babel/preset-typescript, or if you are running Babel using ts-node, you can now use babel.config.cts as a Babel configuration file written in TypeScript and CommonJS. You can read more about this in the documentation.

It's not possible yet to use babel.config.ts and babel.config.mts files, pending stabilization of the Node.js ESM loader API.

Source maps improvements

Source maps generated by Babel now support Friendly Call Frames, to show better names for trasformed functions in devtools.

Additionally, @babel/generator now accepts input source maps generated from other tools in the build pipeline: this allows to properly merge source maps even when using @babel/generator directly without @babel/core, and improves the general performance of source map merging in when using Babel.