Please, consider on adding one-line comments syntax with the HTML comment-opening sequence.

The following example shows that it works perfectly in node v11.6.0

⌘ - works to decrease the text size, but I'd like to make it bigger. :)

This is hard to reproduce, but it's often hard to quit the app on MacOS. After having it open for a while it has to be force quitted.

(Note: I have transpilation turned off. I know that feature would mess with this request significantly, and would require sourcemaps support to get right. So I'm only asking for the fix in non-transpiled mode at the moment.)

See this stack trace:

As you can see, most of that stack trace is entirely irrelevant to me, as it's stuff happening inside of RunJS (node, I guess?)... including the promise resolution, etc.

I know that the stack trace is not your doing, but it would be nice if you could edit its output to make it more friendly to read.

For example, this stack trace:

SyntaxError: Unexpected token :
    at <anonymous>:5:41
    at <anonymous>:5:65
    at resolve (/Applications/RunJS.app/Contents/Resources/electron.asar/renderer/web-frame-init.js:15:33)
    at new Promise (<anonymous>)
    at EventEmitter.ipcRenderer.on (/Applications/RunJS.app/Contents/Resources/electron.asar/renderer/web-frame-init.js:14:5)
    at EventEmitter.emit (events.js:182:13)

could maybe be truncated to just:

SyntaxError: Unexpected token :
    at <anonymous>:5:41
    at <anonymous>:5:65

or even better, fixing the line/column numbers:

SyntaxError: Unexpected token :
    at <anonymous>:1:7

I know this is challenging to do, but it would be really nice to have at some point.

I can't seem to find any information about what JavaScript engine is used, what version, or how the engine is updated. This is important when attempting to target new language features like class fields. At the time this issue was created public fields were available in Chrome Canary, but not Chrome, Firefox, or Safari.

That would be nice.

Hi there.

I really like your little tool, great work 🎉
It would be very nice if there was an option to toggle the preview/output view on the right side of the window. I would like to make sceenshots like this:

I would like an option to switch on a mode like how browser devtools consoles only evaluate the last statement in a snippet, because sometimes you have a bunch of statements in a snippet of code that you don't want to evaluate, but only want to evaluate the last statement.

Consider the differences between these two:

In RunJS, it outputs the result of the x = foo() statement (which is just another function), and then also evaluates both x() calls. In the Chrome console, it only evaluates the last x() call.

Sometimes, I want the behavior of the former, sometimes I want the behavior of the latter. It would be really nice to have an option to toggle between both modes.

I'm just curious, with the open source someone would might help you with some features

Hi

The project's very amazing and I love it. I'm not using Visual Code because it's better RunJS.
I want to propose di feature :

• Open RunJS from bash with or without the file

If it's possible I wish to contribute to this feature
Thank You
Riccardo Amadio

TypeScript protected class properties and methods are not honored. Here is an example taken directly from the TypeScript handbook. The example should throw an error on the attempted protected constructor call of Person, but does not.

Love this idea and simplicity of it, thanks @lukehaas for building it!

I have a suggestion to build on top of this simplicity, and that is to automatically install packages that are required/imported. When a package isn't found ask the user "Install now?". At least for me I see the biggest use-case is to play around (I won't usually run it in the context of a specific project, so I don't want to care about what's installed locally) - this would greatly enhance this experience! :)

Cheers!

This may sound silly, but that extra line of output as shown here was actually causing me to think I had a bug in a loop where it was printing an extra iteration. Is there a reason for it? Is there a way to remove it?

First of all, thanks by making this project, it's really cool.

It is a question but you can consider it a feature.

There is a way to open a window or something else to output some UI on that?

For example, I would like to add an <canvas/> element, then, add some graphics on that.

Thanks,

Hi! Can you build runjs for windows ? I can help you with this issue.

When trying to run Action > Install NPM Packages I get the error This feature requires Node.js to be installed on the host machine.

Node is installed via nodenv which I'm guessing is the problem.

To give you an example of where things end up using nodenv:

Are node version managers, nvm or nodenv supported by RunJS? If not, Feature request 😄.

Workaround

For anyone else who lands here: as a workaround I've set the working directory (Action > Set Working Directory) and manually install NPM packages on the command line.

First I should note that the design and minimalism of this app are awesome. If I can use this app instead of RunKit this would be awesome.

To try out things, top level await would be awesome.
It is very annoying to write:

(async () => {
    async function t() {}
    await t();
})().catch(console.trace);

With top level await:

async function t() {}

await t();

I captured the screen from my Xcode playground.

Again, I like the app very much! Thank you very much for making it.

Since the output values do not align with the line that created them, annotating with the line number would be great.

If you could align the output with the line number that generated it, that would be amazing. If a second evaluation generated another value it could be placed in columns to the right.

Similar to the editor in Bret Victor's Inventing on Principle talk

I downloaded the .dmg file installed RunJS Version 1.2.0 (1.2.0) on macOS Mojave 10.14.0.

I tried importing the BigNumber.js library, so added this code:

const BigNumber = require('bignumber.js');

Then went to Action > Install NPM Modules, and entered 'bignumber.js' as a search criteria and added it.

Then I added the following:

const num = BigNumber(1);
console.log(num.div(2).toString());

But on the right it displayed:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

I didn't realise what I had to do initially. Eventually I figured out that all I had to do was go to menu "Action > Set Working Directory", and chose a random working directory on my computer (i.e. ~/Documents), and then it displayed the output 0.5.

Wouldn't it be better to onboard new users by automatically detecting their operating system and just choosing a typical default working directory already configured for them behind the scenes.

Description
I add console.time() and console.timeEnd() to check performance, but it does not support.

Is it going to support in the future?

console.time();
for (let i = 0; i < 1000; i++) {
  console.timeEnd();
}

The keyboard shortcut for zooming is ⌘ +, which makes sense. However, that actually requires (on most US keyboards anyway) a ⌘ ⇧ + keypress, because + is on the upper portion of the = key. Most editors I've worked with actually allow just ⌘ = as well. This would be very helpful.

Also, the "zoom" behavior of this operation feels a bit weird:

It's strange and a bit frustrating that the zooming is also changing the spacing around the text. I would expect zooming to only affect the text... in other words, like in Sublime, when you do CMD +, it just ups the font size by a point, and CMD - drops the font size by a point. The zoom/unzoom don't change any of the UI layout/positioning, only the content text.

Also, it might be helpful if we could independently "zoom" the scratch area from the console output area, similar to how in Chrome the devtools has a zoom that's independent of the page's zoom.

The evaluation result is a bit confusing sometimes.

I think the following one makes the results more clear (I copied it from swift playground of Xcode):

I like the app very much! Thank you very much for making it.

Hi,

First of all, great app! I've been having fun with it.
However, I accidentally pasted document.location.reload() into the window and now it just reloads indefinitely every time when I open the app - even after I unchecked the auto evaluate option.

The issue persists even after I have re-installed the app so I had to manually edit the config.json file under ~/Library/Application\ Support/runjs to remove the code.

Stoked that this includes vim bindings. Is there anyway to define some vim settings that persist in the app?

I really love this project, however, I believe it needs to be improved.

I was expecting the following snippet to returns me back the resolved string test, but instead all I can see on the right side is a Promise { <pending> }.

const a = () => new Promise(res => res('test'));

const test = async () => {
  const x = await a();
  
  return x;
};

test();

Is there a better way of dealing with promises?

Thanks!

Set Working Directory currently only allows me to import modules from the directory's node_module directory. It doesn't allow me to import modules that are local such as require('./lib/api.js') for example. Support for this would be useful for quick testing for your project's codebase.

Here's my code:

async function f() {
  console.log('check');
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait till the promise resolves (*)

  alert(result); // "done!"
}

f();

After I close the blank window, the code isn't running anymore so I have to restart the app..

It will be very nice.

Great tool, thanks!

I hope that you will support Linux soon, I hear great things about this tool. Would be awesome if it was also available for Linux.

after enabling VIM Keys option, when I try to enter a vim :... command, it is not displayed on the screen. (only a small blue line appears at the bottom of the window)

(tried under different resolutions)

This can lead to confusion, because once you've deleted something you expect it to no longer exist, but it does, which has lead to wrong assumption confirmation when writing code.

Running this code:

const foo = [1, 2, 3];

for (bar in foo) {
  console.log(bar);
}

Returns ReferenceError: bar is not defined - this should return:

0
1
2

Let me know if I'm losing it or if this is an issue :)
Version 1.0.2 (1.0.2)

This would be awesome as an extension for IDEs!

A very quick feedback to tell you that I was expecting more margin on the top and bottom of the homepage https://projects.lukehaas.me/runjs/

Hi! Thanks for making this. It looks like a fun project. Loving that you can now install npm packages. I usually go to jsbin to run small JS tests but I can foresee RunJS being my go-to tool from now on.

Would it be possible to add Prettier formatting? I'm crap at formatting code now and rely on it heavily. I'm thinking: alt-shift-f to format and have format on run (optional?). Also, is there any particular reason why the source code isn't in a branch?

I was curious how the RunJS app would respond to a nested infinite loop and caused the application to stop responding with the following code

for (i=0; i<1000; i++) {
  for(j=0; j<1000; j++) {
    console.log('test')
  }
}

I had to rm rf RunJS and remove its Application Support file, then reinstall in order to get the app running properly again. I was able to reproduce the bug easily. Would someone mind trying to reproduce this on their machine?

Thanks for your effort.
This app is so nice. Thanks.!!!

The following code keeps executing even after removal. Only way to stop it is to quit the app.

setInterval(function(){
  console.log('yo');
}, 2000)

The error handling is quite awkward because it doesn't provide much help in debugging the problems.

Take the following code, for example

const a () => new Promise(res => res('test'));

const test = async () => {
  const x = await a();
  
  return x;
};

test();

All I can see on the right side is a SyntaxError: Unexpected identifier

The error is located on the first line of my code:

const a () => new Promise(res => res('test'));

The arrow function is missing the = sign after const a.

It would be really useful if the error message could mention the line of code that was the trigger of the error. Ideally, it would also output the explanation of the error like:

Uncaught SyntaxError: Missing initializer in const declaration

Thanks

Not something critical. It should open faster when you close the window but not quit app.

If you have a function declaration and run the code, then delete the function declaration and re-run the code, the function still executes, because apparently the whole env wasn't actually reset between runs they way I'd expect.

See this:

Something like this https://github.com/tylermcginnis/javascriptvisualizer or http://pythontutor.com/javascript.html#mode=edit

The first only has ES5 support and the second doesn't really work properly to visualise currying, partial application, etc...

First of all - thanks for a great tool, something I've wanted a long time.

I use the dev console in Chrome to do small explorations in JS-land and the best feature in my mind is the "explore object methods and properties"-functionality that for example shows me what methods a date object has when I type "." after. So myDate. would yield

constructor
getDate
getDay
[...]

And then autocompletes when I start typing something like myDate.to would yield

toDateString
toGTMString
toISOString
[...]

If RunJS had this I would never need to open another Crome tab again ;)

I'm not sure what's going on here... dunno if this is a babel transpilation issue or something about how your code instruments and captures each line of output.

This code is fine:

But when I add a single console.log(..) statement:

Notice the extra 3 (on line 3 of the output) before it then prints 2 and 3 (in the correct order).

Here's an even more severe illustration of whatever the bug is:

See the extra 2 and 1 being printed, before the 3, 2, 1 output in expected order?

Hi,

Love the app - simple and beautiful!

One little feature request I think could be useful is allowing keyboard shortcuts for 'run' (especially when auto-evaluate is disabled). Perhaps have shift+return as a shortcut, so you don't manually have to click the button repeatedly, breaking up the flow of typing?

I would, at times, like to see whatever the transpiled version of my code is actually being run by RunJS. This is useful for realizing why a bug may be happening.

I am thinking maybe there could just be an extra popup window or something that I could click a button to see the most recent transpiled code that ran.

Also, it would be really helpful if I could, perhaps with a preference option, turn off transpilation, and have RunJS just execute my code as-is. I imagine that maybe you're instrumenting code to get the line-by-line outputs printed, so I know you may actually still need to pass it through some Babel transformer. But you could use some options to Babel which turns off all its normal code transformations, and only do the transformations you need for your line outputs.