7.24.0 Released: Decorator updates and JSON modules imports

Babel 7.24.0 is out!

We updated our Decorators implementation to match the latest version of the proposal, and we improved the way we transform class private fields and methods. We also added support for importing JSON modules in browsers and Node.js, an older Stage 3 proposal depending on Import Attributes.

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

Decorators updates (#16242)

The decorators Stage 3 proposals received many minor updates in the past years, and unfortunately all the implementations in the various tools implement slightly different versions of it.

We updated our implementation to match the latest version of the proposal. This version has also been implemented in TypeScript and is currently being implemented natively in browsers. The main difference compared to the 2023-05 version previously implemented is in the execution order of initializers registered through the context.addInitializer method.

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

babel.config.json

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "version": "2023-11"
    }]
  ]
}

You can also try the new decorators proposal in the online Babel REPL.

JSON modules imports (#15829, #15870)

Babel 7.24.0 finally adds support for the JSON modules proposal, that has been in Stage 3 since 2021. This proposal allows directly importing JSON files using import declarations together with a type: "json" import attribute:

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

Babel will transform those imports to the appropriate way of loading JSON files in your target platform(s), according to your targets option:

• Modern browsers

  const myConfig = await fetch(import.meta.resolve("./config.json"))
                          .then(r => r.json());
• Older browsers without import.meta support
• Node.js (ESM)
• Node.js (CommonJS)

  const myConfig = JSON.parse(
    require("fs").readFileSync(require.resolve("./config.json"))
  );
• Various combinations of the above

You can enable it using the @babel/plugin-proposal-json-modules plugin:

babel.config.json

{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-json-modules"]
}

A Hermes-based Flow parser (#16284)

Babel implemented support for parsing and transforming Flow type annotations very long time ago, but in the past year we haven't done a very good job at keeping up with new Flow language features.

In the meanwhile, the Hermes team has been working on a Babel plugin, babel-plugin-syntax-hermes-parser, that lets you directly use Hermes, React Native's new JavaScript engine, to parse Flow code. It supports all the latest Flow features, such as as type casts and conditional types.

You can now more easily enable this parser using @babel/preset-flow's experimental_useHermesParser option:

babel.config.json

{
  "presets": [
    ["@babel/preset-flow", {
      "experimental_useHermesParser": true
    }]
  ]
}

We are exploring the possibility of dropping Flow support from @babel/parser in a future release, in favor of this Hermes-based parser. Please test it out, report any parsing bugs in Hermes' bug tracker and tell us about your experience!

warning

The Hermes parser does not support yet transforms based on in-file comments