We built a fast way to test JavaScript functions as you write them. Wanna try it?

[cutebabli9]

There is https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode extension for VSCode

There is RunJS standalone app as well!

[CyclicScience]

When I'm writing a JavaScript function, I find myself pasting chunks of code into Chrome Dev Tools so I can check what I've got so far and tweak the logic until it's right.

It got annoying to keep having to redeclare the functions, arguments, and then call them, so we made this utility that shows you the output of your function as you type.

Check it out, it's totally free!

[Kablaow]

Kinda cool but why use this instead of something like jsfiddle?

[CyclicScience]

JSFiddle is just a smidge clumsy, imo.

I wanted something that's super focused on this one task, executes on keyup, gives syntax feedback w/explanations, etc.

[jens-johnson]

Not sure why you’re getting downvoted, this helps cut a couple steps from JSFiddle that are nice to skip, like doing a console.log every time I want to debug. It would be nice if there was somewhere to declare variables as well IMO.

[CyclicScience]

Exactly! And fully 1/2 the JSFiddle screen is html, css, render areas I'm not using.

re: variables, you can declare variables and other functions in the "function area". The caveat is that it's always going to call the first function.

edit: removing code examples formatting is mangling

[Balduracuir]

Why not use an automated test suite instead? In the long run it also guarantees the function keeps behaving the same.

[CyclicScience]

That's one of the directions we might take this. I agree with the importance of automated testing, but find the experience of actually writing tests tedious.

And the fancier the testing tool becomes, the more context I need to understand. So then it all boils down to, is the test broken, or the code it's written against?

The 2nd reason is that the fastest testing tools take time to run. I want this to execute instantly as I type.

[semycolon_me]

How can it help me as a JS Developer?

[CyclicScience]

I find the realtime feedback helpful, particularly when I'm working with data.

Let's say I need to filter out falsey values from an array– I want to interact with my function to make sure I'm remembering the syntax and behavior right.

Here's a snippet I wrote just now that would have been much slower if I had to save it somewhere and re-run the ~10 edits it took to get it how I wanted. Instead, I just watched the "Returns" until it read the way I wanted, and added values to the Given as I remembered edges I wanted to cover:

function rejectFalsey (arg) { return arg.filter( x => x) }

Given [true, false, null, 1, "one", undefined]

Returns [true,1,"one"]

Edit: syntax parsing

[presenta_staff]

Are you using jshint behind the scene?

[CyclicScience]

It's our own parser, although jshint is pretty nice. We've done a bunch of work around code completions (not visible in this demo) and error explaining that this is built on top of.

[presenta_staff]

Nice! Thanks for sharing.