{"id":13629897,"url":"https://github.com/laurentpayot/verticalize","last_synced_at":"2025-04-06T03:09:37.705Z","repository":{"id":196187934,"uuid":"694090071","full_name":"laurentpayot/verticalize","owner":"laurentpayot","description":"A pipe-like function to verticalize your JavaScript code","archived":false,"fork":false,"pushed_at":"2024-05-30T07:51:10.000Z","size":53,"stargazers_count":302,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T11:11:55.674Z","etag":null,"topics":["code","javascript","light","lightweight","operator","pipe","pipeline","promises","syntax"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laurentpayot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-20T10:05:47.000Z","updated_at":"2024-07-07T19:56:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d14a4b8-2205-496c-8f7e-7429489890ff","html_url":"https://github.com/laurentpayot/verticalize","commit_stats":null,"previous_names":["laurentpayot/verticalize"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurentpayot%2Fverticalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurentpayot%2Fverticalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurentpayot%2Fverticalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurentpayot%2Fverticalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laurentpayot","download_url":"https://codeload.github.com/laurentpayot/verticalize/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","javascript","light","lightweight","operator","pipe","pipeline","promises","syntax"],"created_at":"2024-08-01T22:01:23.313Z","updated_at":"2025-04-06T03:09:37.668Z","avatar_url":"https://github.com/laurentpayot.png","language":"JavaScript","readme":"# \u003csub\u003e\u003cimg src=\"verticalize.svg\" alt=\"triple chevron down\" width=\"48\" height=\"48\"\u003e\u003c/sub\u003e Verticalize\n\nA pipe-like function to verticalize your JavaScript code\n\n\u003c!-- [![dependencies](https://badgen.net/bundlephobia/dependency-count/verticalize)](https://bundlephobia.com/package/verticalize) --\u003e\n[![dependencies](https://badgen.net/static/dependencies/None/green)](https://github.com/laurentpayot/verticalize/blob/main/package.json#L56)\n![minified + brotlied size](https://badgen.net/static/minified%20brotli/228%20bytes/green)\n![minified + zipped size](https://badgen.net/static/minified%20zip/265%20bytes/green)\n\n[![types](https://badgen.net/npm/types/verticalize)](https://github.com/laurentpayot/verticalize/blob/main/index.d.ts)\n[![npm](https://badgen.net/npm/v/verticalize)](https://www.npmjs.com/package/verticalize)\n[![license](https://badgen.net/github/license/laurentpayot/verticalize)](https://github.com/laurentpayot/verticalize/blob/main/LICENSE)\n\n## Gist\n\nThe following example code is a bit hard to read:\n\n```js\nconst { status } = await send(capitalize(greeting) + \"!\")\nconsole.log(status)\n```\n\nMake it less nested, more *vertical*, by using the `V` \"pipe\":\n\n```js\nV( greeting,     // initial value ➡ \"hi\"\nV (capitalize),  // custom function call ➡ \"Hi\"\nV .concat(\"!\"),  // String method `concat` call ➡ \"Hi!\"\nV (send),        // custom async function call ➡ Promise { \u003cpending\u003e }\nV .status,       // automatic promise chaining + getting property ➡ Promise { 200 }\nV (console.log), // automatic promise chaining + global function call ➡ logs 200\n)\n```\n\nIf your IDE or a tool like Prettier automatically formats the code for you, it may result in the following syntax (still working):\n\n```js\nV(greeting,\n  V(capitalize),\n  V.concat(\"!\"),\n  V(send),\n  V.status,\n  V(console.log),\n)\n```\n\nVerticalize’s `V` function is around 200 bytes minified and compressed, and has no dependencies. It won’t bloat your web app.\n\n## NodeJS\n\n### Installation\n\n```bash\nnpm install verticalize\n```\n\n### Import\n\n```js\nimport { V } from 'verticalize'\n```\n\n## Browser\n\nVerticalize 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).\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { V } from 'https://cdn.jsdelivr.net/npm/verticalize@0.1.3/verticalize.min.js'\n\u003c/script\u003e\n```\n\n## `V` function usage\n\nThe 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 \u003csub\u003e\u003cimg src=\"verticalize.svg\" alt=\"triple chevron down\" width=\"18\" height=\"18\"\u003e\u003c/sub\u003e 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).\n\n### Unary functions\n\nA 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.\n\n```js\nV( 1.9,                  // initial value\nV (Math.round),          // unary function\nV (n =\u003e Math.pow(n, 3)), // binary function turned into unary\n) // returns 8\n```\n\n### Methods and properties\n\nTo 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 =\u003e count.add(1)`, but for convenience Verticalize allows you to use a direct dot syntax.\n\n```js\nV( [1, 2, 3],         // initial Array value\nV .concat([4, 5, 6]), // calling the Array method `concat()` (returning an Array)\nV .length,            // getting the Array property `length`\n) // returns 6\n```\n\n### Promises\n\nWhen 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.\n\n```js\nconst greeting =\n  await\n  V( Promise.resolve(\"Hello\"),\n  V .toUpperCase(),\n  V .concat(\"!!!\"),\n  )\n```\nis the same as\n```js\nconst greeting =\n  await Promise.resolve(\"Hello\")\n    .then(s =\u003e s.toUpperCase())\n    .then(s =\u003e s.concat(\"!!!\"))\n```\n\n## Note\n\nA TC39 proposal for the pipe operator `|\u003e` [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:\n\n## License\n\n[MIT](https://github.com/laurentpayot/verticalize/blob/main/LICENSE)\n\n## Stargazers :heart:\n\n[![Stargazers repo roster for @laurentpayot/verticalize](http://reporoster.com/stars/laurentpayot/verticalize)](https://github.com/laurentpayot/verticalize/stargazers)\n","funding_links":[],"categories":["JavaScript","Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurentpayot%2Fverticalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaurentpayot%2Fverticalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurentpayot%2Fverticalize/lists"}