A pipe-like function to verticalize your JavaScript code

Gist

The following example code is a bit hard to read:

const { status } = await send(capitalize(greeting) + "!")
console.log(status)

Make it less nested, more vertical, by using the V “pipe”:

V( greeting,     // initial value ➡ "hi"
V (capitalize),  // custom function call ➡ "Hi"
V .concat("!"),  // String method `concat` call ➡ "Hi!"
V (send),        // custom async function call ➡ Promise {  }
V .status,       // automatic promise chaining + getting property ➡ Promise { 200 }
V (console.log), // automatic promise chaining + global function call ➡ logs 200
)

If your IDE or a tool like Prettier automatically formats the code for you, it may result in the following syntax (still working):

V(greeting,
  V(capitalize),
  V.concat("!"),
  V(send),
  V.status,
  V(console.log),
)

Verticalize’s V function is around 200 bytes minified and compressed, without dependencies. It won’t bloat your web app.

NodeJS

Installation

Import

import { V } from 'verticalize'

Browser

Verticalize uses ES modules, widely supported in browsers nowadays. Import the V function from the verticalize.min.js file. This file can be located in a CDN (example below) or copied in any directory of your website (for better performance and to be GDPR compliant, since you don’t have to connect to a third party server).

<script type="module">
  import { V } from 'https://cdn.jsdelivr.net/npm/verticalize@0.1.2/verticalize.min.js'
script>

V function usage

The gist example above covers pretty much everything. Just call the V function with the initial value as the first argument, followed by the other arguments wrapped by another V at the beginning of the line to get a nice syntax. All these V-prefixed lines will then act like a pipeline, the output of a pipe being the input of the following pipe. Pipes can use unary functions, methods and properties, but not values (except for the initial value).

Unary functions

A unary function is a function that takes only one argument. You can use an anonymous (“arrow”) function to turn a multi-argument function into a unary one.

V ( [1, 2, 3],        // initial Array value
V .concat([4, 5, 6]), // calling the Array method `concat()` (returning an Array)
V .length,            // getting the Array property `length`
) // returns 6

const greeting =
  await
  V( Promise.resolve("Hello!"),
  V .toUpperCase(),
  )

const greeting =
  await Promise.resolve("Hello!")
    .then(s => s.toUpperCase())