Babel 7.5: Dynamic Import, Pipeline Operator and More

The recently released Babel 7.5 can now parse and transpile F# pipelines and dynamic imports. Babel 7.5 additionally has experimental support for TypeScript namespaces.

The pipeline operator proposal, still in stage 1, consists of five variants. The first variant, also called “minimal” variant has been supported in Babel since version 7.0.0-beta. The last variant, dubbed Smart variant has been supported since version 7.3.0. Babel 7.5 now supports the second variant, named the F# variant.

The pipeline operator is a useful syntactic sugar on a function call with a single argument. For instance, sqrt(64) is equivalent to 64 |> sqrt. This allows for greater readability when chaining several functions together. The five variants for the pipeline operator cover the same functionality under different syntaxes.

For instance, the following JavaScript code:

let newScore = boundScore(
  0,
  100,
  add(7, double(person.score))  
);

is equivalent to the following code with the Smart pipeline syntax:

let newScore = person.score
  |> double
  |> add(7, #)
  |> boundScore(0, 100, #);     

The same code would be expressed with the F# pipeline syntax as follows:

let newScore = person.score
  |> double
  |> n => add(7, n)
  |> n => boundScore(0, 100, n);

The previous examples demonstrate that, instead of having the Smart pipeline’s concept of “topic references” (#), the F# pipeline syntax uses arrow functions. The Babel release explains the motivation behind the F# pipeline syntax:

[The F# pipeline syntax] has the advantage of being more similar to current JavaScript, at the cost of a slightly less concise syntax.

The F# pipeline operator handles await as if it was a function. The following JavaScript code:

let id = (
  await (
    await fetch(url)     
  ).json()
).ID;

becomes with the F# pipeline syntax:

let newScore = fetch(url)
  |> await
  |> r => r.json()
  |> await
  |> obj => obj.ID;

To use the F# pipeline syntax, developers need to add @babel/plugin-proposal-pipeline-operator to their Babel configuration:

module.exports = {
  plugins: [
    ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }]
  ]
};

Babel 7.5 additionally unifies its support for parsing dynamic imports. In previous Babel versions, developers would need to use different babel plugins according to the bundler they use. With webpack or rollup, they would only include @babel/plugin-syntax-dynamic-import and skip Babel transforms. With Node, they would use the babel-plugin-dynamic-import-node plugin. For SystemJS, they would use the @babel/plugin-transform-modules-systemjs plugin. These use cases are now unified under a single entry point: @babel/plugin-proposal-dynamic-import.

Developers can now also enable experimental support for TypeScript namespaces in the TypeScript plugin, using the allowNamespaces option of @babel/plugin-transform-typescript:

module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

Namespaces can then be used as follows:
```typescript
namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

The Babel 7.5 release also comes with a host of bug fixes and other improvements, including defaults browserlist query in @babel/preset-env.

Babel is available under the MIT open source license. 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 be made via Open Collective.