Combining code editing with a command line

Update 2012-09-05: separated input and output.

Currently, you are forced to work with JavaScript code in either of two modes: You can either use a code editor and edit multiple lines or you can use an interactive command line and work with one line at a time (editing, evaluating). With jsrepl [GitHub project, live demo], I have prototyped a combination of both modes – no need to chose, any more.

The name is derived from the abbreviation REPL (read-eval-print loop) that is a common synonym for “command line” in the functional world. Node.js uses that term, too [1].

How does jsrepl work?

Input and output are handled by separate text areas. The input area is used like a normal text editor, so the Return key inserts line breaks. If you want to evaluate expressions or statements, you have two options:

1. Multi-line evaluation: select text and hit Shift-Return.
2. Single-line evaluation: place the cursor in the line you want to evaluate and hit Shift-Return. If the cursor is at the end of a line, a newline will inserted.

Other than inserting a newline in case (2), the input area remains unchanged when you hit Shift-Return. The result of the evaluation is inserted at the end of the output area. console.log output and exceptions show up there, too.

Var declarations and function declarations work, but I had to use hacks to make them work [2], so you might not always get the results you expect.

Prior art

jsrepl has been inspired by the Macintosh Programmer’s Workshop, which I have never used, but read about a long time ago (mid 1980s). There must be other prior art, too (Smalltalk, Lisp, ...).

References

1. Execute code each time the Node.js REPL starts
2. Implementing a command line with eval in JavaScript