@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

Usage

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

Value	Proposal	Version added
"hack"	Hack-style pipes	v7.15.0
"fsharp"	F#-style pipes with await	v7.5.0
"minimal"	Minimal F#-style pipes	v7.0.0
"smart"	Smart-mix pipes (deprecated)	v7.3.0

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

The "proposal": "minimal" and "smart" options are deprecated and subject to removal in a future major version.

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: "@@" } ],
  ],
});