Compile pipeline operator to ES5
Switch branches/tags
Nothing to show
Clone or download
Latest commit f05f9cb Mar 19, 2017
Permalink
Failed to load latest commit information.
src Initial commit Mar 19, 2017
.babelrc Initial commit Mar 19, 2017
.editorconfig Initial commit Mar 19, 2017
.eslintrc.yml Initial commit Mar 19, 2017
.gitignore Initial commit Mar 19, 2017
.travis.yml Initial commit Mar 19, 2017
LICENSE Initial commit Mar 19, 2017
README.md Initial commit Mar 19, 2017
mocha.opts Initial commit Mar 19, 2017
package.json Initial commit Mar 19, 2017
yarn.lock Initial commit Mar 19, 2017

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