17

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?

  • @Mohith I see you edited this to add the locker-service tag. Let me clarify that this problem already existed on API v36 and happens with Locker disabled so it is NOT a locker service issue. – Charles T Jun 15 '16 at 12:02
  • Ah I see.Honestly speaking I wanted SFDC attention on this .with locker service tag its bound to get more attention.But if it's irrelevant let's remove it . – Mohith Shrivastava Jun 15 '16 at 12:15
  • I am told that the lightning-components tag alone is enough to trigger a notification to the appropriate team. I see I got 6 upvotes overnight which is helpful. – Charles T Jun 15 '16 at 13:12
  • 1
    The case number my co-worker opened is 13978661. – Charles T Jun 15 '16 at 13:17
1

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 = "{,,,"+"}";
  • 1
    I appreciate the explanation, but string literals are not comparable to inline comments. There is no valid excuse for mangling the contents of a string literal in JavaScript. This use case was several months and one employer ago, but I was using that string literal to create a Regex object, not in any JSON-related context. The corrupted string resulted in improper behaviour of the Regex check. So evidently this sanitation procedure is having trouble detecting when something is a string and not code. – Charles T Nov 3 '16 at 15:57
  • I do not work for Salesforce. Excuse is not thing i would provide on their behalf. The question is "why it happens?", this is my answer. String is mangled by poorly configured jslint. Like it or not, it is what it is. – Pavlonator Nov 3 '16 at 18:33
  • this javascript pre-processing also has positive effects. You can write your controllers/helpers using ECMAScript 6 and it will be babel-pre-processed and play well in browser. – Pavlonator Nov 3 '16 at 18:58
  • @Pavlonator So I can use things like arrow functions in Lightning, and they'll work in IE? – sfdcfox Nov 3 '16 at 19:15
  • @sfdcfox (was yes) wait, no i am wrong, it is not babel-pre-processed, it is just my chrome browser being smart enough to understand new constructs. – Pavlonator Nov 3 '16 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.