Moonchild

Moonchild brings source code to life. It's a toolkit for experimenting with new kinds of programming interfaces. It's based on CodeMirror, a web-based text editor. Moonchild adds a framework which makes it easy to create plugins which modify and extend the source code presentation.

You can watch a 15-minute demo of Moonchild that was presented at the Future Programming Workshop at SPLASH 2014, or the 5-minute highlight reel.

Plugins (written in HTML and JavaScript) consume the AST, and can produce DOM nodes that modify or replace the text of any of the AST nodes. Plugins can not only read from the AST, they can also modify the original source code. For example, a plugin could transform hex colour codes in the source code into a colour swatches that could pop open a standard colour picker.

Plugins can not only react to the state of the AST, they can also react to data that is produced by other plugins. It's also possible to embed metadata in the source code via a special comment format. These metadata comments are parsed along with the source code, and attached to the appropriate AST node.

Why?

Many people have suggested ASCII text files might not be the best way to present source code. On the other hand, plain text has a lot of benefits, not least of which is the huge ecosystem of tools built around consuming and producing it.

Unlike some approaches to non-textual programming, Moonchild does not reject plain text. Instead, it proposes that code should be augmented when appropriate with richer behaviours and representations, much like you'd find in a good textbook:

There have been many extensible editor frameworks built in the past, including (but not limited to) Emacs, Eclipse, and Barista. One thing that makes Moonchild different is that plugins can be written in HTML and JavaScript, making it much more approachable and accessible than some previous frameworks.

Basic Setup

git clone https://github.com/pdubroy/moonchild.git
cd moonchild
npm install

Running the demo

Run npm start to start the server required for the editor demo. To open the editor, open the URL printed in the console (e.g. http://localhost:8080/editor).

Use the buttons along the bottom of the editor to enable and disable the plugins:

(This UI is just for demo purposes -- in real use, you hopefully wouldn't have to ever explicitly turn plugins on and off.)

Organization

metadata.coffee is the source code for the modified JavaScript parser, which parses metadata embedded in comments and attaches it to the appropriate AST nodes.

moonchild.coffee provides the core of the plugin system: plugin registration, and notifying the plugins when a new AST is available.

The code for the editor is in editor/. ui_helpers.js contains a bunch of stuff that should eventually go into Moonchild proper.

Writing plugins

The plugins are written in a few different styles, but markdown-comments.html is the best example of how I think plugins should be written.

A minimal plugin looks like this:

var moonchild = Moonchild.registerExtension();
moonchild.on('parse', function(ast, comments) {
  // Analyze the AST, potentially extend nodes using `moonchild.addExtras`.
});

A plugin that modifies the presentation should also do something like this:

moonchild.on('display', function(ast, comments) {
  // Walk the AST, and change the source code presentation by calling
  // `moonchild.addWidget`.
});

References

Ko, A. J. and Myers, B. A. (2006), Barista: An Implementation Framework for Enabling New Tools, Interaction Techniques and Views in Code Editors, CHI 2006. Project page

Baecker, R. and Marcus, A., Design Principles for the Enhanced Presentation of Computer Program Source Text, CHI (1986), 51-58.

McDirmid, Sean, Experiments in Code Typography, August 2014.

Eisenberg, A. D. and Kiczales, G., Expressive programs through presentation extension. In Proc. of 6th Int’l Conf. on Aspect-Oriented Software Development (AOSD 2007), pages 73–84. ACM, 2007.