DEV Community

Cover image for Pipe the shit
Wolfgang Rathgeb
Wolfgang Rathgeb

Posted on

Pipe the shit

I've got lots of ideas for this article, but I'm not sure where to start. If you're interested in making code more readable and using tree shaking, you should definitely check out the article.

If you've ever developed with JavaScript, you've probably come across this type of code.

const someInstance = new Class();
someInstance.do('jump').some().thing('dance').and().read();
Enter fullscreen mode Exit fullscreen mode

I like this style because it could be very easy to read and you see what is connected. Plus, you don't have to move data from one function to another because it's all saved in the instance.

On top of the fact that this only works if the functions aren't async, there's another issue. It's not going to be easy to tree shake the content if you're not using it. If you use this in the client, you have to move the whole library with all the connected functions, which is a huge overhead.

So, how can we keep things readable, use async functions and let Vite and co. tree shake all unused code?

The answer's right there in the headline: "pipe."

From a functional standpoint, implementing pipe is pretty straightforward. However, the types did pose a challenge. I've put everything together into a library and published it on npm. pipe-and-combine.

const inc = (by: number) => (x: number) => x + by;
const dec = (by: number) => (x: number) => x - by;
const multiplyBy = (by: number) => (x: number) => x * by;
const divideBy = (by: number) => (x: number) => x / by;
const toStr = () => (x: number) => x.toString();

// prepare the pipeline
const pipeline = pipe(inc(2), multiplyBy(7), dec(7), divideBy(3), toStr())

// Executing the pipeline
pipeline(7)
Enter fullscreen mode Exit fullscreen mode

One advantage is that it's not tied to any object, so you can use any function as long as the input and output match the function before and after.

The example I've given is pretty simple, but at least you can pipe everything. You'll have the same options as with chaining and classes. Generic functions might be a little more tricky, but there's a solution. I'll cover this in more detail in another article.

Top comments (0)