renato-bohler / what-the-filter

A visual playground to JavaScript array & object transformations.

Home Page:https://bohler.dev/what-the-filter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

what the filter?

A visual playground to JavaScript array & object transformations (try it out!)

Demonstration GIF

How to use

Access this address and change the implementation of the whatTheFilter function. An informative diagram will be generated with whatever you return in this function.

Under the hood

What the filter transforms the input code into an AST (abstract syntax tree) to analyze which methods were called with the corresponding arguments, input and output.

Extra features

Detailed errors

If any error occurs in the call chain of your code, the diagram will still output every step of execution up until the error occurred, and it will also provide more details on why this error probably occurred.

Detailed errors feature GIF

Execution steps

Some methods will even show a "step by step" execution, dissecting how its input is transformed to its output, step by step:

Execution steps feature GIF

Warnings

Let's be honest: sometimes JavaScript works in mysterious ways. That's why some methods will output some warnings:

Warnings feature GIF

About

A visual playground to JavaScript array & object transformations.

https://bohler.dev/what-the-filter/

License:MIT License


Languages

Language:TypeScript 97.0%Language:CSS 2.0%Language:HTML 1.0%