Mascara JavaScript compiler Blog

Experienced developers know that tool support are very important for the overall productivity when working with a language. Mascara has a solid core compiler, but not much language specific editor support.

Therefore I have developed an Eclipse plugin with Mascara language support as the first example of integrated editor support. (Support for other editors/IDE's may follow in the future depending on user interest, although I'm not promising anything at this point.)

The Eclipse plugin is still in the alpha stage which means it has bugs and missing features, and you basically should't expect to be able use it for serious work yet. It is released mainly as a proof of concept, and because many users like to see how its going.

How to get to "Hello world" using the Mascara Eclipse Plugin

1) Install python 2.6 if you dont already have it.

2) Install the plugin
Open eclipse 3.5 (earlier versions may work but I havent tested it) and install the editor support via:

Help -> Install new software -> Add
In the "Add site" dialog:

Name: Mascara editor
Location: http://mascaradownload.appspot.com/releases/mascaraeclipse

Check off "Mascara editor" in the list, and click Next. The feature shound now install automatically.
    
You will get a warning that the content is unsigned. Press OK.
    
When prompted to restart Eclipse, choose OK
    
Note: On Unix, the plugin assumes python is located in /usr/bin. If it is located somewhere else,
you have to configure it on the preference page for Mascara (Window->Preferences).

3) Create a new project in Eclipse:

File -> New -> New project
(Just select a standard project: General -> Project. There is no specific Mascara project type yet.)

4) Create a new file:

File -> New -> Other
Select Mascara / New Esx File.

The file shoult have the ".esx", extension, so call it something like "main.esx".

5) Write something like this in the file:

import browserapi;
window.onload  = function() window.alert("hello world");

(Here you should hopefully notice syntax coloring and language aware code completion! At least halfway working.)

6) Click "Run" (the green arrow)

The first time run is clicked you get a wizard to create a run configuration:

In Select Esx source, the new file is selected by default

Select Create new HTML file. This will generate a new HTML file with a script reference to the (compiled) esx file. Click Next.

The dialog suggest where to save the HTML file. Click Finish.

7) The default browser should now start with the HTML page and the included script, displaying the hello world alert.

Have fun! As always, questions or suggestions welcome.

Bonus: Hello world using JQuery

If you like JQuery you may prefer to write something like this instead:

import browserapi;
import jqueryapi;

$(function(){
    $("Body").append(
        $("<div>Hello world</div>")
        .fadeIn(1000));
        });

You will have to add a <script>-element to the HTML referencing the JQuery library before running. You can dowload JQuery, or just hotlink to the hosted version:

<script src ="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Happy coding!

Mascara 1.5 has been released. Download.

The most important new feature is probably support for incremental compilation.
Previously, the Mascara compiler could get quite slow when working on larger projects using the command-line compiler. The reason is that for every invocation of the compiler, all
files included or imported were recompiled from scratch - even if only a single file were edited. Also, there is some overhead for initializing the compiler itself which happen every time the compiler is invoked.

The solution (inspired by the Scala language) is a new command line option with creates the compiler as a background process.
This background compiler caches partially-compiled files, and only recompiles the files that have changed since last compilation, and since the compiler itself
is pre-loaded in memory, the result is that the output is much faster.

It is used like this:

translate.py somefiletocompile.esx --server 9000

The number after the --server argument is a port number (can be any number not in use) where the compiler process will listen. The first time, the compiler is initialized (which may take some time)
but afterwards the script will detect that the compiler is already running at the port, and dispatch the compilation job, which should be much faster.

Have fun!

The documentation for Mascara is not yet completely perfect, but now at least we have a list of keywords!

A major advantage of statically typed languages is support for code completion. Code completion is the editor-feature where the editor suggest relevant names (variable names, method names etc.) based on what is defined and allowed in the current context - as you type. This has the potential to greatly enhance productivity. For example, you dont have to look up method names in the source or in documentation, but can just type a dot and see what methods are defined for the current object. This also helps prevent typos in identifiers.

As a proof-of-concept I have implemented code completion in the online "try-it" editor over here. Of course the online editor is not suited for serious use, but it does provide a nice showcase for what is possible.

Code completion is disabled in the editor by default. It is enabled by clicking the "magic wand" icon leftmost in the toolbar. (The suggestions may be somewhat slow to appear, since the editor has to hit the server to get the suggestions.)

An example of how it looks when i start writing the letter "f":

You can cycle through the suggestions using the up/down arrow keys. A suggestion is selected by hitting enter, or clicking it with the mouse.

The suggestion box appears automatically when you start typing, or it can be forced to show by pressing control+space.

A limitition in the current implementation is that the autocompletion usually wont work if there is compilation errors in the code. We are working on that issue.

A related experimental feature is support for documentation comments. If a variable or function is preceeded by a comment starting with /** (note: two stars rather than the usual one), the content of that comment is displayed as help related to the suggestion for the function. As in this example:

(Tags like what is known from doc-comments is Java or C# is not supported yet, though.)

Any feedback welcome!

Useful and detailed error messages have always been a priority in the design of Mascara. I believe good error messages means a lot for the day-to-day productivity when using a language tool such as this.

Therefore it has always been a bit embarassing with the generic "Parser error at or near..." message in the case of syntax errors.

It just tells you that some character is wrong, not what you are supposed to write instead. Especially when learning a new language this can be infuriating. Particularily for people (like me!) who like to explore by trial and error.

In the latest Mascara release, parser error messages have been improved so they now suggest what syntax would be allowed instead of the erroneous character.

E.g. if you write

class {}

You get:

Syntax error. Unexpected '{'. Expected identifier

This tells you that an identifier is required after the keyword "class", which is hopefully a lot more useful than just the message "Parser error at or near '{'".

In many cases multiple options are legal at a given point. If you write:

class A()

The compiler will report:

Syntax error. Unexpected '('. Expected one of: '!', 'implements', 'extends', '.<', ';', '{'.

That is quite a number of tokens to choose from, but hopefully it gives a much better hint about how to fix the syntax error.

Sometimes it can be slightliy less obvious where the actual error is. Consider this:

var x =
var y = 100;

In this example I forgot to finish the first line. However the compiler will flag the "var" on the second line with "Unexpected var. Expected expression." This is because it would be legal to have the assignment value on the next line - but then "var" is not a legal expression, which causes an error.

In general it is a difficult problem to give helpful error messages for syntax errors, but hopefully these improvements is a step in the right direction, and will make it more fun to explore the language by trial and error.