DSL editor with code completion in Javascript

Domain Specific Languages currently have its hype. Important feature of serious new language implementation is a tool support – editor with code completion. There is already significant set of tools that allow to build a complete language solution. Most of them were presented recently on Language Workbench Competition 2011.

I was searching something similar implemented in Javascript and I found Concrete Editor. It represents structured approach to language editing. New entities are created with a set of attribute placeholders. It perfectly fits to languages describing elements and relations between them. For expression language it is far much easier to edit in a free text manner. To give an example I've implemented simple free text editor for Concrete metamodel.

Grammar and parser

I decided to use single grammar for input parsing and support code completion. Parser I've received works in three modes:

• strict input parsing with output generation (Concrete JSON metamodel in that case)
• lax parsing to receive suggestion on cursor position (for code completion of language literals)
• another lax parsing to get complete list of entities (for code completion of references)

First mode is used as standard parser – it receives input and generates language output, It fails on any error. Last two modes are used when code completion is asked. Algorithm is simple:

1. In place of cursor special char (# in that case) is added to cause an error.
2. Source is parsed for cursor context - second parsing mode skips any incorrect language sentence and stops only on cursor position.
3. Errors returned from parser are filtered against not too short literals and are added to suggestions for code completion.
4. When special symbol (EntityName) is found in among errors source without cursor sign is scanned for entities. Third mode skips all sentence elements but entity name. List of entities is added to suggestions.

I've used PEG.js library as parser generator. To provide different modes I've used predicate expression which is evaluated before matching rule symbols. When rule is about to be evaluated piece of code (JS) is executed – just before. In that case it returns parser's internal flag.

LaxSentence = &{return laxParsing} ClassName (__ WordOrCursor)* "."?

When laxParsing is set to 'true' predicate causes following rule to be evaluated otherwise it fails. This rule defines alternative language sentence accepting every input. It allows to provide suggestion even preceding lines are not finished.

Editor

Editor with code completion I've taken from tx-content-assist GitHub project by Sergey Chikuyonok. It is fairly easy to add your own suggestion provider – please take a look on ConcreteContentAssist.js and ContentAssistProcessor.js. For more language and implementation details look to the source on GitHub. Working example you can check on http://mstefaniuk.github.com/Concrete-Freetext/editor/index.html.

Similar approach I've used also in project in my company. It was XPath expression editor with schema model completion. It supports Schematron rules editor in assertion conditions as well as context definitions.