Babel 7.10 Ships with Better React Tree-Shaking

The Babel team recently released Babel 7.10 with better tree-shaking support for React code. Babel 7.10 additionally supports checking the existence of specific private fields in objects and provides better ergonomics for the optional chaining ?. operator.

Babel 7.10 injects /*#__PURE__*/ annotations in some React functions calls to mark them as being safe to be tree-shaken away. This palliates the fact that when building an application with React, React.forwardRef calls prevent tree-shaking unused components. Adding /*#__PURE__*/ annotations before many top-level React pure function calls allows such functions to be tree-shaken/dead-code-eliminated by terser and other minifiers.

The following code:

import React from 'react';
const SomeComponent = React.lazy(() => import('./SomeComponent'));

is thus transformed into this code:

import React from 'react';
const SomeComponent = /*#__PURE__*/React.lazy(() => import('./SomeComponent'));

Accessing private fields in an object where those fields are not defined will throw an exception. The new release of Babel also allows developers to statically check if a given object has a specific private field, while eschewing exception handling. An example with the syntax #private_field in object is as follows:

class Person {
  #name; // private field
  
  hug(other) {
    if (#name in other) console.log(`${this.#name}  ${other.#name}`);
    else console.log("It's not a person!")
  }
}

Babel 7.10 aligns the semantics of some edge cases of optional chaining with those provided by TypeScript 3.9:

foo?.bar!.baz

The previous code will behave similarly to foo?.bar.baz in both TypeScript 3.9 and Babel 7.10. Babel 7.10 also supports mixing optional chaining ?. with private fields as in o?.Foo.#x.

The new Babel release adds parser support for the new Stage 1 Module Attributes proposal (import a from "./a.json" with type: "json"). @babel/preset-env now compiles ES2015-style Unicode escapes (\u{Babe1}) to the equivalent legacy syntax (\uDAAA\uDFE1). The Babel team also released in 7.10 the first experimental version of Babel’s new polyfills compatibility architecture.

Babel additionally now has an official babel/rfcs RFC process for discussing changes that significantly impact Babel’s users. The new process has value in particular in case of:

• A new feature that creates a new API surface area, and would require a config option if introduced.
• A breaking change or the removal of features that already shipped.
• The introduction of new idiomatic usage or conventions, even if they do not include code changes to Babel itself.

The whole changelog can be found on GitHub and contain the exhaustive list of changes shipped in Babel 7.10. Babel is available under the MIT open source license. Feedback and questions are welcome and can be logged in a dedicated GitHub Discussions repository. Contributions are welcome via the Babel GitHub organization and should follow Babel’s contribution guidelines and code of conduct. Donations to support the project may also get made via Open Collective.