Aulx

Autocompletion for the Web

Let's have the best JS, CSS, HTML autocompletion ever!

Try it

Node

The aulx.js file contains the backend of whole project. It is a concatenation of many other JS files, although it isn't minified.

You can try to require it in node.

var aulx = require('aulx');
var source = 'var foo; fo';
aulx.js(source, {line:0, ch:11});

Browser (User Interface)

The aulx-ui.js file contains the user interface part of project. It only supports CodeMirror right now, but more will come ☺.

var editor = CodeMirror.fromTextArea(idOfTextbox);
var aulxui = new AulxUI.CM(editor);
// or simply ...
new AulxUI.CM(idOfTextbox);
// And that's it. Your editor now features JS autocompletion.

Interface

To autocomplete JS code, you will probably want to instantiate an Aulx object. The constructor has the following options.

var aulx = Aulx.JS({
    // A JS parser compatible with SpiderMonkey.
  parse: esprima.parse,
    // If true, the parser above is actually a function that returns the
    // parser function. Primarily in use to put the parser in
    // a worker thread.
  parserContinuation: false,
    // An object to inspect in order to benefit from dynamic introspection.
  global: window,
    // The name of the global object, used in the static analysis.
  globalIdentifier: "window"
});

aulx.complete(
  source,           // A string containing JS source code.
  { line: 0,        // The line where the caret is.
    ch: 11 }        // The column where the caret is.
);

// Returns a sorted Completion object, like the following:
{ candidates:
   [ { display: 'foo',      // Symbol to complete (show that).
       prefix: 'fo',        // What that completion is based on.
       score: 0 },          // Don't use the score.
     { display: 'for',
       prefix: 'fo',
       score: -9 } ],
  candidateFromDisplay:
   { foo:
      { display: 'foo',
        prefix: 'fo',
        score: 0 },
     for:
      { display: 'for',
        prefix: 'fo',
        score: -9 } } }

You can however boycott the creation of an Aulx instance, generating a new instance every time:

aulx.js(source, {line:0, ch:11}, optionsJustLikeAbove);

Similarly, CSS autocompletion has the following interface.

aulx.css(cssSource, {line:0, ch:11});

State of the project

Done:

• JS keyword autocompletion
• JS static analysis: a simple algorithm for autocompletion
• JS Static type inference
• JS dynamic analysis
• Structured and scalable way to create the frontend userinterface
• CodeMirror support with JS completion
• CSS property autocompletion

To do:

• HTML (including inlined CSS and JS autocompletion)
• CodeMirror CSS support and other text editors as well
• CoffeeScript, SASS, … We can go crazy with this!

To the delicate attention of fellow developers

Project entry point: entrance/completers.js. It uses all completers, each of which has its own directory.

Completer entry point: <completer>/main.js (no surprise there!)

Building the bundle aulx.js is done with this swift command:

make

or, if your computer lacks make:

node make

Finally, testing completers is either done in batch mode with yet another swift command:

make test

or, for each completer:

node <completer>/test
# For example:
node js/test

---

Baked by Thaddée Tyl
Grilled by Girish Sharma

This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/.