Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laurentpayot/verticalize
A pipe-like function to verticalize your JavaScript code
https://github.com/laurentpayot/verticalize
code javascript light lightweight operator pipe pipeline promises syntax
Last synced: about 24 hours ago
JSON representation
A pipe-like function to verticalize your JavaScript code
- Host: GitHub
- URL: https://github.com/laurentpayot/verticalize
- Owner: laurentpayot
- License: mit
- Created: 2023-09-20T10:05:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-30T07:51:10.000Z (8 months ago)
- Last Synced: 2024-10-29T11:11:55.674Z (3 months ago)
- Topics: code, javascript, light, lightweight, operator, pipe, pipeline, promises, syntax
- Language: JavaScript
- Homepage:
- Size: 51.8 KB
- Stars: 302
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 
Verticalize
A pipe-like function to verticalize your JavaScript code
[](https://github.com/laurentpayot/verticalize/blob/main/package.json#L56)
[](https://github.com/laurentpayot/verticalize/blob/main/index.d.ts)
[](https://www.npmjs.com/package/verticalize)
[](https://github.com/laurentpayot/verticalize/blob/main/LICENSE)
## Gist
The following example code is a bit hard to read:
```js
const { status } = await send(capitalize(greeting) + "!")
console.log(status)
```
Make it less nested, more *vertical*, by using the `V` "pipe":
```js
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):
```js
V(greeting,
V(capitalize),
V.concat("!"),
V(send),
V.status,
V(console.log),
)
```
Verticalize’s `V` function is around 200 bytes minified and compressed, and has no dependencies. It won’t bloat your web app.
## NodeJS
### Installation
```bash
npm install verticalize
```
### Import
```js
import { V } from 'verticalize'
```
## Browser
Verticalize uses [ES modules](https://jakearchibald.com/2017/es-modules-in-browsers/), [widely supported](https://caniuse.com/es6-module) 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).
```html
import { V } from 'https://cdn.jsdelivr.net/npm/[email protected]/verticalize.min.js'
```
## `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.
```js
V( 1.9, // initial value
V (Math.round), // unary function
V (n => Math.pow(n, 3)), // binary function turned into unary
) // returns 8
```
### Methods and properties
To call a method or to get a property of the previous pipe output (or of the initial value), you can use an anonymous function like `count => count.add(1)`, but for convenience Verticalize allows you to use a direct dot syntax.
```js
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
```
### Promises
When the previous pipe output (or the initial value) is a promise, the next pipe will automatically chain it so you don’t have to write many `.then()` yourself.
```js
const greeting =
await
V( Promise.resolve("Hello"),
V .toUpperCase(),
V .concat("!!!"),
)
```
is the same as
```js
const greeting =
await Promise.resolve("Hello")
.then(s => s.toUpperCase())
.then(s => s.concat("!!!"))
```
## Note
A TC39 proposal for the pipe operator `|>` [was created in 2015](https://github.com/tc39/proposal-pipeline-operator/blob/main/HISTORY.md) and is currently in stage 2. It may or may not be included in the official JavaScript specs in a few years. If so, then it will take a few more years to be adopted by all the major browsers and runtimes. But you can use Verticalize *right now* and enjoy its unique dot syntax and automatic promise chaining features :wink:
## License
[MIT](https://github.com/laurentpayot/verticalize/blob/main/LICENSE)
## Stargazers :heart:
[](https://github.com/laurentpayot/verticalize/stargazers)