@babel/plugin-proposal-pipeline-operator

Installation

npm

npm install --save-dev @babel/plugin-proposal-pipeline-operator

Yarn

yarn add --dev @babel/plugin-proposal-pipeline-operator

pnpm

pnpm add --save-dev @babel/plugin-proposal-pipeline-operator

Bun

bun add --dev @babel/plugin-proposal-pipeline-operator

Usage

The pipeline operator has several competing proposals. Configure which proposal to use with the required "proposal" option. Its value is "hack" by default.

History

Version	Changes
v8.0.0	Removed the "minimal" and "smart" proposals
v7.17.0	Added support for topicToken: "^^" and topicToken: "@@"
v7.16.0	Added support for topicToken: "^"
v7.15.0	Added the "hack" proposal and the topicToken option, with support for "%" and "#"
v7.5.0	Added the "fsharp" proposal

Value	Proposal
"hack"	Hack-style pipes
"fsharp"	F#-style pipes with await

If "proposal" is omitted, or if "proposal": "hack" is used, then a "topicToken" option must be included. The topicToken must be one of "%", "^^", "@@", "^", or "#".

Examples

The following examples use topicToken: "^^".

From react/scripts/jest/jest-cli.js.

JavaScript

// Status quo
console.log(
  chalk.dim(
    `$ ${Object.keys(envars)
      .map(envar => `${envar}=${envars[envar]}`)
      .join(' ')}`,
    'node',
    args.join(' ')
  )
);

// With pipes
Object.keys(envars)
  .map(envar => `${envar}=${envars[envar]}`)
  .join(' ')
  |> `$ ${^^}`
  |> chalk.dim(^^, 'node', args.join(' '))
  |> console.log(^^);

From jquery/src/core/init.js.

JavaScript

// Status quo
jQuery.merge( this, jQuery.parseHTML(
  match[ 1 ],
  context && context.nodeType ? context.ownerDocument || context : document,
  true
) );

// With pipes
context
  |> (^^ && ^^.nodeType ? ^^.ownerDocument || ^^ : document)
  |> jQuery.parseHTML(match[1], ^^, true)
  |> jQuery.merge(^^);

(For a summary of deprecated proposal modes’ behavior, see the pipe wiki’s table of previous proposals.)

With a configuration file (recommended)

With ^^ topic token:

babel.config.json

{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "topicToken": "^^" }]
  ]
}

With @@ topic token:

babel.config.json

{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", { "topicToken": "@@" }]
  ]
}

Via CLI

Because this plugin requires a configuration option, it cannot be directly configured from the CLI. Use a config file instead with the CLI, to add and configure this plugin.

Via Node API

With ^^ topic token:

JavaScript

require("@babel/core").transformSync("code", {
  plugins: [
    [ "@babel/plugin-proposal-pipeline-operator", { topicToken: "^^" } ],
  ],
});

With @@ topic token:

JavaScript

require("@babel/core").transformSync("code", {
  plugins: [
    [ "@babel/plugin-proposal-pipeline-operator", { topicToken: "@@" } ],
  ],
});