Skip to content
Compile pipeline operator to ES5
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintrc.yml
.gitignore
.travis.yml
LICENSE
README.md
mocha.opts
package.json
yarn.lock

README.md

babel-plugin-transform-pipeline

Build Test Coverage Code Climate

Compile pipeline operator (|>) to ES5

Proposal: mindeavor/es-pipeline-operator


Example

Basic

In

var user = { name: 'SuperPaintman' };

function capitalize(str) {
  return str.toUpperCase();
}

function sayHello(name) {
  return 'Hello, ' + name + '!';
}

var res = user.name
  |> capitalize
  |> sayHello;

// => "Hello, SUPERPAINTMAN!"

Out

var user = { name: 'SuperPaintman' };

function capitalize(str) {
  return str.toUpperCase();
}

function sayHello(name) {
  return 'Hello, ' + name + '!';
}

var res = sayHello(capitalize(user.name));

// => "Hello, SUPERPAINTMAN!"

With multi-argument functions

In

var user = { score: 40.49138 };

var res = user.score
  |> (_ => _ * 2)
  |> (_ => _.toFixed(2));

// => 80.98

Out

var user = { score: 40.49138 };

var res = (_ => _ * 2)((_ => _.toFixed(2))(user.score));

// => 80.98

Real use-case

var path = require('path');

var pathToUrl = (rootDir, filePath) => [rootDir, filePath]
  |> ((args) => path.relative(...args))
  |> path.dirname
  |> ((res) => res.split(path.sep).join(path.posix.sep))
  |> ((res) => '/' + (res === '.' ? '' : (res + '/')));

pathToUrl('./controllers', './controllers/api/users/index.js');
// => "/api/users/"

pathToUrl('./controllers', './controllers/index.js');
// => "/"

Out

var path = require('path');

var pathToUrl = (rootDir, filePath) => (res => '/' + (res === '.' ? '' : res + '/'))((res => res.split(path.sep).join(path.posix.sep))(path.dirname((args => path.relative(...args))([rootDir, filePath]))));

pathToUrl('./controllers', './controllers/api/users/index.js');
// => "/api/users/"

pathToUrl('./controllers', './controllers/index.js');
// => "/"

FAQ

Why do we need parentheses around multi-argument functions?

Because they separate the => from the |>.

Ie. the following code:

var res = user.score
  |> _ => _ * 2
  |> double;

Is equivalent to:

var res = user.score
  |> _ => _ * double(2);


// or


var secondArg = 2
  |> double;

var res = user.score
  |> _ => _ * secondArg;

Why |>?

Firstly, it is a invalid token in terms of javascript (ES3-ES2017).

Secondly, in vanilla javascript there are only 3 token starting with |: |, || and |=;


Installation

npm install --save-dev babel-plugin-transform-pipeline

# or

yarn add --dev babel-plugin-transform-pipeline

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-pipeline"]
}

Via CLI

babel --plugins transform-pipeline script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-pipeline"]
});

Build

npm run build

Test

npm run test

Contributing

  1. Fork it (https://github.com/SuperPaintman/babel-plugin-transform-pipeline/fork)
  2. Create your feature branch (git checkout -b feature/<feature_name>)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin feature/<feature_name>)
  5. Create a new Pull Request

Contributors


License

MIT

You can’t perform that action at this time.