String literals with {} braces may get mangled in Lightning JS

This has already been reported – I’ll add my colleague’s case number for it when I have it available – but I don’t see it on StackExchange so I thought I’d post here.

Basically we discovered while working with some Regex that certain string literals in Lightning JavaScript (controllers, helpers, etc) get mangled. By the time they reach the browser, they have been modified in the code itself.

For example, of the following statements:

var x = "{1,}";
var y = "{1,2}";
var z = "{,,,}";

The code ends up looking like this when inspected in the browser:

var x = "{1}";
var y = "{1,2}";
var z = "{,,}";

This was resulting in the strangest Regex failures until we noticed what was going on. We were advised that a solution is to escape the closing brace like so:

var x = "{1,\}";
var y = "{1,2\}";
var z = "{,,,\}";

Indeed this does work – the string no longer gets mangled. But it still seems very peculiar as braces inside quotes are not normally escaped in JS. I know that braces in quotes have a special meaning in Lightning markup (binding syntax) but there is certainly nothing like that documented for Lightning JS. Is there any explanation for why this happens?

Answer

This happens because what you get in browser (app.js) is the sanitized version of the code that you write for the component. Another example would be inline comment. If you comment out some line of code in controller or helper – it will be removed from the resulting app.js which you can see if you enable debug for lightning components.

Now about how these jsons are being sanitized – it is NOT a complete black box luckily! It can be figured out from this class: https://github.com/forcedotcom/aura/blob/master/aura-util/src/main/java/org/auraframework/util/json/JsonStreamReader.java

checkout the whole aura code
https://github.com/forcedotcom/aura
then search
/aura-util folder for “.replace” occurrences in files

this should give you the idea or jslint configuration and high level understanding of what is going on with the code between point A and point B.

This can serve as basis or entry point to understand the lightning components parsing/traversal/serialization.

Hope this helps

UPD 11/03/20016 1:00PM CST: this answer does not advocate or provide any excuses for the bug. It just explain why strings get mangled.

UPD 11/03/20016 2:00PM CST:

Further research shows that if literals are declared as fields in helper – they remain untouched (the desired effect).

({

    x : "{1,}",
    y : "{1,2}",
    z : "{,,,}",

    helperMethod : function() {
        alert(this.x+`\n`+this.y+`\n`+this.z);

    }
})

another observation if the closing curly is string concatenated – the negative effect does not occur.

was this

var x = "{1,}";
var y = "{1,2}";
var z = "{,,,}";

changed to

var x = "{1,"+"}";
var y = "{1,2"+"}";
var z = "{,,,"+"}";

Attribution
Source : Link , Question Author : Charles T , Answer Author : Pavlonator

Leave a Comment