babel-plugin-transform-pipeline

0.1.0 • Public • Published

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

install

npm i babel-plugin-transform-pipeline

Downloadsweekly downloads

227

version

0.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability