Until now, a major drawback to compiled JavaScript (like what is produced by Mascara) is that debugging becomes more tricky. Moderne browsers have quite nice debugging tools, but they only operate on the generated code, not the source we initially wrote.

Browser vendors have recognized this issue and agreed on "source map", a standard for matching compiled javascript with source code. Chrome is the first browser to support this feature.

As an example, here is some code which will generate an error at runtime:

// some filler code just to be sure lines are different
class A {}
class B {} extands A {}

var a : Date = null;
g.getDate(); // should throw runtime error

This is how the runtime error will be displayed normally, if you open the Developer Tools window in Chrome: (Wrench icon -> Tools -> Developer Tools or press F12)

You see the error in the (more or less opaque) generated code. You have to manually match with the source code to find the source of the error.

But with sourcemap support, the browser can show the error directly in the original source:

It is even possible to set breakpoints and debug through the original source:

I havent yet investigated how "deep" the support is for sourcmap in Chrome, but it looks impressive. I would love to hear feedback from Mascara-users about how this feature works for them.

How it works

Under the hood Mascara generating a seperate "sourcemap"-file which associates code positions in the generated code with the source. (The sourcemap file has the same name as the generated file but with an additional ".map" extension.) Debugging requires requires that the map and source files is deployed along with the generated files. You might choose to only allow debugging on the development server and not deploy the map and sources to the production server.

How to enable

When using the command-line compiler, source maps are enabled with the cli argument "--generate-source-mappings-file", eg.

python translate.py somesourcefile.esx --generate-source-mappings-file

Sourcemaps are generated by default when using the Eclipse-plugin though.

It also reqires enabling in Crome developer tools. Click the bolt in the lower right corner of the window to get the settings window, and check "enable source map":

Chrome is the first browser to support source map, but support is also underway in Mozilla/Firefox.

Here is a more detailed article about source maps.

namespace otherworld;

otherworld var x = "hello";

The recommended alternative is to use packages, like for example:

package otherworld  {
    var x = "hello";
}

Namespace attributes will still work though, if you ignore the warning, but the functionality will probably be completely removed some time in the future.

The use of namespace attributes is kind of an obscure feature hailing from the drafts of ECMAScript 4, but which have since been abandoned. I suspect it is quite rarely used, but if any user likes or is dependent on this feature, please let us know.

x=>x+1

Is equivalent to:

function(x)x+1

or

function(x){return x+1}

The new syntax is inspired by C#, and is under consideration because the function syntax is somewhat verbose. For example this:

var x = [1,2,3].map(x=>x*2).filter(x=>x>2).map(x=>x.toString());

Is a lot easier on the eyes than:

var x = [1,2,3].map(function(x){return x*2;})
    .filter(function(x){return x>2})
    .map(function(x){return x.toString();});

The arrow syntax allows multiple parameters if they are enclosed in parenthesis:

var x = [1,2,3].map((x, ix)=>x*ix)

And type annotations, just like ordinary function sytax:

var x = [1,2,3].map((x:int)=>x*2)

It also allows multiple statements in the body if it is enclosed in curly brackets:

var x = [1,2,3].map(x=>{ var twice = x*2; return twice;})

Be aware however, that the syntax is just a proposal and not fully agreed on by the standard committee. For example the semantics of this and break and continue inside the function is not decided. For this reason, it is just treated the same way as in ordinary functions in Mascara.

var a = [1,2,3,4].map(function(x)x+1);

(map is one of the convenient new Array-methods in ECMAScript 5. It takes a function as argument, and return a new array containing the result of applying the function to each item in the original array.)

In previous version, Mascara would not know the type of the parameter x in the function expression. You had to add a type annotation like function(x:int)x+1 to get the code to be type safe and get code completion and so on.

Now Mascara 1.9 can infer from the context that x will always be an int, so you get type safety automatically.

Mascara also infers that the result is an array of integers. If you wrote:

var a = [1,2,3,4].map(function(x)x>2);

It would infer that the result is an array of boolans. All this makes it much more convenient to work with function expressions as arguments (also known as higher-order functions).

A notable change is that Mascara has been upgraded to use Python 2.7, so you will have to download this if you dont have it already.

Named arguments can help making function calls more understandable in cases where the meaning of arguments is not immediately obvious. For example this:

document.importNode(elem, true)

Is probably not as clear as this:

document.importNode(elem, deep=true)

When using named arguments, the order of the arguments doesn't matter, as long as a value is provided for all required parameters. Both named an unnamed arguments can be used in the same call (as shown above), but named arguments must follow after all unnamed arguments.

A yield statement turns a function into a generator, which lazily generates a list of values. Each yield in the function returns a single value. The state of the generator function is preserved, so when the next value is requested, the execution of the generator function continues immediately after the yield.

An example (taken from MDC):

function simpleGenerator(){
  yield "first";
  yield "second";
  yield "third";
  for (var i = 0; i < 3; i++)
    yield i;
}

var g = simpleGenerator();
print(g.next()); // prints "first"
print(g.next()); // prints "second"
print(g.next()); // prints "third"
print(g.next()); // prints 0
print(g.next()); // prints 1
print(g.next()); // prints 2
print(g.next()); // StopIteration is thrown

The generator can also be used in for each-loops as if it was an ordinary array:

function numGenerator(){
  for (var i = 0; i < 3; i++)
    yield i;
}

for each (var x in numGenerator()) {
   console.log(x); // prints 0,1,2
}

(The for-loop catches the StopIteration internally in this case, as it just signals the end of the list.)

Generators are also known in languages like Python and C#. Mozilla have native support for generators, but no other browser I know of have.

Caveat

Generators are pretty cool, but there is one drawback. The compiler output is pretty inscrutable, since it requires somewhat convoluted code to support generator semantics in downlevel JavaScript. This is not a problem when the code runs, but may make it unpleasant to debug generator function produced by Mascara.

Generally Mascara aims to produce output code which is as clear and pretty as possible, but in the case of yield this is not really very clear.

Anyway, I would love feedback from Mascara users if you find 'yield' useful, and whether the generated code is acceptable.

    var x = "hello";
    package {
        var x = 17;
        console.log(x); // writes 17
    }
    console.log(x); // writes "hello"

Anonymous packages are useful for ensuring that a block of code doesn't pollute the global namespace. If you have several anonymous packages, they are also hidden for each other.

Behind the scenes, anonymous packages are transformed into this pattern:

   (function(){
       ...
   })();

Newest feature is support for "Open Definition". Place the caret on an identifier (variable name, property, function name, whatever) and hit F3 (or select "Open Definition" on the right-click context menu). The editor will jump to the definition of the identifier, even if it is a different file.

It also works with classic JavaScript code, by the way [1].

This feature is a major milestone because it shows deep integration between the editor and the compiler AST. Additional code-aware features like "Show References", "Show Call-graph" etc. can be built upon this infrastructure.

It also makes development much more pleasant and fun.

[1] As long as you don't get too fancy.

Sometimes you just need a single, unique object. The easiest way to achieve this is an object literal. Example:

    var x = { 
              _v:1, 
              get_v : function(){ return this._v; }
            };
    var y = x.get_v();

This common pattern is now fully supported including type verification and code completion.

Furthermore you can now use getters and setters in object literals, which is some of the new syntax syntax in ECMAScript 5:

    var x = { 
             _v:0, 
             set v(x){ this._v = x; }, 
             get v(){ return this._v; }
             };
    x.v = 100;
    var y = x.v;

(Note that the getter/setter syntax is slightly different in object literals - you don’t need the function keyword here.)

Object literals are most convenient when you only need a single instance of an object. For example a global object literal is the equivalent to the singleton pattern as in Java - but the syntax is much simpler.

The limitations are that an object literal does not support inheritance. If you need that, a class is better.