Sourcemap support in Chrome greatly improves debugging

The latest version of the Chrome browser has support for 'sourcemaps' which promises to make degugging compiled JavaScript much more pleasant.

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.

Deprecation warning: Namespace attributes in declarations

The next release of Mascara is going to have a deprecation warning for namespace attributes in declarations:

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.

Support for "arrow" shorthand for function expressions

The "arrow" syntax is new (experimental) syntax for writing more compact function expressions:

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.

Improved type inference for function expressions

This is a subtle - but in my opionion very attractive - improvement in the type inference. What is the type of this expression:

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).

Mascara 1.9 released

Mascara 1.9.0 has been released, with a bunch of improvements which will be detailed in upcoming blog posts.

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.