@babel/plugin-proposal-pipeline-operator

A Babel plugin that transforms pipeline operator (|>) syntax into standard JavaScript call expressions. This plugin supports multiple proposal variants (minimal, fsharp, hack, and smart) allowing developers to experiment with the proposed pipeline operator while maintaining compatibility with current JavaScript engines through Babel's transpilation process.

Package Information

• Package Name: @babel/plugin-proposal-pipeline-operator
• Package Type: npm
• Language: TypeScript
• Installation: npm install --save-dev @babel/plugin-proposal-pipeline-operator

Core Imports

This plugin is not imported directly in your code. Instead, it's configured in your Babel configuration:

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

// .babelrc.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]
  ]
}

Basic Usage

Once configured, the plugin transforms pipeline operators in your code:

// For hack proposal, topicToken is also required
// babel.config.js
module.exports = {
  plugins: [
    ["@babel/plugin-proposal-pipeline-operator", { 
      proposal: "hack", 
      topicToken: "#" 
    }]
  ]
};

Input code (using pipeline operator):

// Minimal/F# proposal
const result = value |> func1 |> func2;

// Hack proposal (using topic token)
const result = value |> func1(#) |> func2(#, other);

Output code (transformed):

// Minimal/F# proposal transformation
const result = func2(func1(value));

// Hack proposal transformation  
const result = ((_) => func2(_, other))(func1(value));

Architecture

The plugin implements the pipeline operator (|>) transformation for JavaScript/TypeScript by:

• Supporting four proposal variants: minimal, fsharp, hack, and smart (smart deprecated)
• Inheriting parser support from @babel/plugin-syntax-pipeline-operator
• Transforming pipeline expressions into equivalent call expressions or sequence expressions
• Optimizing generated code to avoid unnecessary function wrapping when possible

Capabilities

Plugin Configuration

The plugin is configured through Babel with a required proposal option and optional topicToken for hack proposal.

/**
 * Plugin options interface defining proposal variant and topic token
 */
interface Options {
  /** The pipeline operator proposal variant to use */
  proposal: "minimal" | "fsharp" | "hack" | "smart";
  /** Topic token for hack proposal (required when proposal is "hack") */
  topicToken?: "^^" | "@@" | "^" | "%" | "#";
}

Proposal Variants

The plugin supports four different pipeline operator proposals, each with different syntax and behavior:

Minimal Proposal

Simple left-to-right function application where the left operand becomes the first argument:

// Transforms: value |> func
// Into: func(value)

const result = "hello" |> toUpperCase |> reverse;
// Becomes: reverse(toUpperCase("hello"))

F# Proposal

Similar to minimal but supports await expressions in pipelines:

// Transforms: value |> func and value |> await
// Into: func(value) and await value

const result = fetchData() |> await |> processData;
// Becomes: processData(await fetchData())

Hack Proposal

Uses topic tokens (placeholder symbols) for more complex expressions:

// Requires topicToken option, e.g., topicToken: "#"
// Transforms: value |> func(#, other)
// Into: func(value, other)

const result = data |> filter(#, predicate) |> #.length;
// Becomes: ((_temp) => _temp.length)(filter(data, predicate))

Smart Proposal (Deprecated)

Combines features of minimal and hack proposals. Use "hack" instead as this is deprecated in Babel 8.

Error Handling

The plugin validates configuration and provides helpful error messages:

• Throws error if unsupported proposal value is provided
• Requires topicToken option when using "hack" proposal
• Shows deprecation warning when using "smart" proposal
• Protects against eval injection in generated code