pipe-now

pipe-now

A tiny package that simulates the behavior of the pipeline-operator proposal.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save pipe-now

The problem

The pipeline operator is an awesome thing, but unfortunately the proposals available for babel vary quite a bit, and they can still change more, as they are still in early stages of development and there's no agreement on an API yet.

This solution

This package tries to solve the problem stated above by simulating the pipeline operator through a function. I know, it's not as nice as having an actual syntax for that, but until the proposal gets more stable this can be a good replacement.

Usage

This package exports a function which receives a plain value as the first argument, and all the next arguments are functions that receives the previous value, and returns the next value.

You can use it with inline functions:

import pipe from 'pipe-now'

function getFruits() {
  const fruitsUppercase = ['APPLE', 'BANANA', 'ORANGE']
  const fruitsLowercase = pipe(
    fruitsUppercase,
    (values) => values.map((value) => value.toLowerCase()),
  )
  return fruitsLowercase // ['apple', 'banana', 'orange']
}

To avoid code duplication, you can also extract the functions and just pass the reference to them:

import pipe from 'pipe-now'

function arrayToLowerCase(arr) {
  return arr.map((value) => value.toLowerCase())
}

function getFruits() {
  const fruitsUppercase = ['APPLE', 'BANANA', 'ORANGE']
  const fruitsLowercase = pipe(
    fruitsUppercase,
    arrayToLowerCase,
  )
  return fruitsLowercase // ['apple', 'banana', 'orange']
}

You can also check below a more complex use of the pipe function, with data fetching and manipulating this data:

import pipe from 'pipe-now'

// Simulates an async data fetch
function fetchPeople() {
  return Promise.resolve({
    count: 3,
    results: [
      {
        name: 'Luke Skywalker',
        height: '172',
      },
      {
        name: 'C-3PO',
        height: '167',
      },
      {
        name: 'Darth Vader',
        height: '202',
      },
    ],
  })
}

function average(arr) {
  const sum = arr.reduce((a, b) => a + b)
  const avg = sum / arr.length

  return avg
}

async function getPeopleHeightAverage() {
  const peopleHeightAverage = pipe(
    await fetchPeople(), // Get list of Star Wars people
    (values) => values.results, // Get only the `results` property of the response
    (values) => values.map((people) => people.height), // Get only the people height
    (values) => values.map(Number), // Convert values from string to number
    average, // Calculate the average
    Math.round, // Round the value
  )

  return peopleHeightAverage // returns 180
}

Inspiration

• The pipeline operator docs on Mozilla

• The pipeline operator proposal

Other Solutions

lodash's flow

You can kind of use it to simulate the pipeline syntax, like the following:

const value = _.flow(
  () => 'initial value',
  (val) => val.toUpperCase(),
)()

If you are already using lodash, you can of course also create a wrapper for that.

LICENSE

MIT