Skip to main content

7.26.0 Released: stage 4 features enabled by default, and a new experimental code printer

· 3 min read
Babel Team

Babel 7.26.0 was just released!

It enables by default support of two ECMAScript proposals that become standard in the last TC39 meeting, import attributes and inline regular expression modifiers, as well as parsing of Flow enums.

Babel now also allows plugins to provide asynchronous pre/post hooks, and has an [experimental mode](TODO: Link) to preserve tokens' positions when generating the transformed output.

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 (#16692)​

Inline regular expression modifiers allow enabling or disabling the i/m/s flags for just part of a regular expression. For example, /hello (?i:world)/ matches any string that contains "hello " as-is, followed by "world" with any casing: hello world and hello WoRlD match, while Hello world does not.

The proposal reached Stage 4 in the October 2024 TC39 meeting, and will be included in the next version of the JavaScript standard. @babel/preset-env will now automatically transpile this feaatures based on your compilation targets, and you can safely remove @babel/plugin-proposal-regexp-modifiers from your config.

If for any reason you still need to explicitly list the plugin, it has now been renamed to @babel/plugin-transform-regexp-modifiers as the proposal became a standard langauge feature.

Import attributes (#16579)​

The import attributes proposal also reached Stage 4 in the October 2024 TC39 meeting. It supports providing some parameters to the underlying platform indicating how to load modules:

import "./my-module" with { some_param: "hello" };

Currently, the only widely supported attribute is type, which can be used to import JSON or (on the web) CSS modules:

import data from "./data" with { type: "json" };

Babel will now parse import attributes by default, so you can safely remove @babel/plugin-syntax-import-attributes and @babel/plugin-syntax-import-assertions from your configuration.

warning

The old syntax, using assert instead of with, has been removed from the proposal. By default Babel will not parse it.

Since it become a standard JavaScript feature, @babel/plugin-proposal-json-modules has now been renamed to @babel/plugin-transform-json-modules. Note that this plugin is not included in @babel/preset-env, as you'll only want to use it if you are not using a bundler or if your bundler does not support importing JSON modules.

Rewriting .ts extensions in dynamic import() (#16794)​

Babel has supported rewriting .ts extensions to .js in import declarations since last year, using the rewriteImportExtensions option of @babel/preset-typescript:

// Input
import { hello } from "./dep.ts";
let myVar: number = hello();

// Output
import { hello } from "./dep.js";
let myVar = hello();

We are happy to see that TypeScript is introducing a similar option. However, there is a difference: Babel only used to transform paths in static import declarations (since they are the only ones that can always be statically analysed), while TypeScript will also support rewriting it in dynamic import expressions.

Babel 7.26 aligns to TypeScript's future behavior, by also rewriting extensions in dynamic import():

// Input
await import("./dep.ts");
await import(url);

// Output
await import("./dep.js");
await import(url.replace(/\.ts$/, ".js")); // simplified