This content originally appeared on Babel Blog and was authored by Babel Team
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
exportkeyword, 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.accessobject provided to decorators expect the target object as their first parameter, rather than as theirthisreceiver: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.accesshas a new.hasmethod, 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:
constmodifiers 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 *declarationsTypeScriptexport type * from "./mod";
export type * as ns from "./mod";Babel relies on this new syntax to safely remove the re-
exportdeclaration 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.
This content originally appeared on Babel Blog and was authored by Babel Team
Babel Team | Sciencx (2023-02-20T00:00:00+00:00) 7.21.0 Released: Inline RegExp modifiers, TypeScript 5.0, and Decorators updates. Retrieved from https://www.scien.cx/2023/02/20/7-21-0-released-inline-regexp-modifiers-typescript-5-0-and-decorators-updates/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.