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
:
/(?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:
{
"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:This relaxed restriction aims at simplifying migration from the "legacy" decorators version, by reducing the syntactic differences.JavaScript// valid
@dec
export class A {}
// valid
export @dec class B {}
// invalid
@dec
export @dec class C {} - The methods on the
context.access
object provided to decorators expect the target object as their first parameter, rather than as theirthis
receiver:JavaScriptlet 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"
:
{
"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 parametersTypeScriptfunction 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 *
declarationsBabel relies on this new syntax to safely remove the re-TypeScriptexport type * from "./mod";
export type * as ns from "./mod";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.