1. Scott Wells Avatar Scott Wells
  2. Illuminated Cloud
  3. IlluminatedCloud
  4. Issues

Formatting visualforce can cause javascript issues.

Issue #1199 resolved
Justin Julicher created an issue

Hi

If you have visualforce references in embedded javascript it can incorrectly format these.

e.g. 

$('#checksubscribe').attr('checked', {!myCustomControllerField});

will format to:

                                    $('#checksubscribe').attr('checked', {
                                    !emailSubscription
                                })
                                    ;

Is there a way to add visualforce syntax to the javascript engine?

thanks

Comments (53)

  2. Scott Wells repo owner

    Hi, Justin. I'm unable to reproduce this. I've added the following:

    <apex:page id="TestControllerPage" controller="TestController">
    <script language="JavaScript">
        $('#checksubscribe').attr('checked', {!$User.IsActive});
    </script>
    <apex:form onClick="$('#checksubscribe').attr('checked', {!$User.IsActive});">
    </apex:form>
</apex:page>

    then reformatted, and everything stays as-is. Is this is bad example of what you're doing? If not, how are your HTML and JavaScript formatters configured? Perhaps that's the difference?

  3. Scott Wells repo owner

    Also note that I do have one or two fixes locally that might be causing the behavioral difference here. The other thing we can do is have you try again when I release the next build and see if that resolves the issue for you.

  4. Scott Wells repo owner

    Justin, I just uploaded 2.0.4.9 which includes a fix that might help here. Can you see if the same behavior occurs after updating? Assuming it does, I may need to get your code formatter config to see if that helps to reproduce the issue.

  5. Justin Julicher reporter

    Hi Scott

    Ok, so I updated to 2.0.4.9 and it doesn't break javascript now but it seems it's not formatting at all....

    It won't align braces and re-align statements and even the html markup won't re-align.

    I noticed that some of the legacy code was wrapped in type="text/javascript" and not language="JavaScript" like in your example but I changed it and it didn't make a difference.

    If I change the file extension to html it'll reformat - but break the javascript again.

    thanks

  6. Justin Julicher reporter

    I don't think I mentioned - I'm using Webstorm not IntelliJ -although I suspect this shouldn't matter too much as WS is a subset of IntelliJ.

  7. Justin Julicher reporter

    Sorry Scott

    It is formatting but not how I expect. This could be a Webstorm issue. Hold off till I investigate further. thanks.

  8. Justin Julicher reporter

    Sorry for the barrage of messages. I had local changes to the file which confused my analysis. I am now working with a clean file and as per my previous message it doesn't seem to do any formatting at all.

    I've ensured that formatting was run over the whole file and there were loads of places where I would expect alignment to happen in html & javascript and it hasn't happened.

    I'm just using the standard formatting in Webstorm.

    Let me know if there is any other info you need?

    thanks

  9. Scott Wells repo owner

    Okay. Yeah, let me know. I also have WebStorm installed and can try it from there, but as you stated, IntelliJ is a superset of WebStorm and the JavaScript features should be the same.

  10. Scott Wells repo owner

    I think we crossed messages, but I'll take a look this evening and see what might be going on. Either way I'll let you know.

  12. Scott Wells repo owner

    Justin, I just tried to reproduce this in both IntelliJ IDEA 2018.3.2 and WebStorm 2018.3.2, both with 2.0.4.9 installed, and I don't think I'm seeing the same behavior. Let me explain what I've tried to give you a chance to tell me whether I'm doing the right things or not:

    1. Open a Visualforce page that contains both markup and a script block. Note that the script block in this page uses type="text/javascript".
    2. Destroy the existing formatting by selecting everything and typing Shift+Tab until everything is slammed against the first column. Change some braces to be in the wrong place in the embedded script. Perhaps some other changes that should be fixed by reformatting.
    3. Reformat the entire file using Ctrl+Alt+L (Windows in this case). Everything is reformatted properly, both tags and script.

    So if you're seeing a situation where the formatter is no longer working for you at all, that's definitely strange. Let's start by seeing if there are any errors in idea.log corresponding to editing/reformatting that file. If not, let's see if the file type association is correct. Go into Settings>Editor>File Types and see if *.page is associated with Visualforce Page (*.component should be as well).

    Let me know if I've misunderstood the issue and haven't tried the right things to reproduce it, or if you find anything useful from the thoughts above.

  14. Scott Wells repo owner

    Okay, that definitely helps. Any chance you could privately share that page or some minimized derivation of it that reproduces the issue? I generally know what's happening now, but unfortunately I'd need some specific example of the problem to debug/fix it.

  15. Justin Julicher reporter

    Ok looks like there is an issue with something in the file....I've attached the idea.log which has outputted some info.

    Let me know if you need anything more.

    Ok, think I found the issue - if there are visualforce references in commented text it causes issues.

    The two culprits I found were: 

            <!--    <apex:inputText id="Fname" value="{!FName}"
                                styleclass="std-field required" /> -->

    and 

    <!-- <apex:commandlink styleclass="back-link" immediate="true" action="{!goBackFromAccountRegister}">Go back</apex:commandlink></span> -->

    once I removed those references it would format the file again.

    but I'm back to my original problem.... once I did that a bit of legacy code went from:

          <script type='text/javascript'>

                    $(document).ready(function() {

                        $("#regDivId").live('click',function(){
                            registerJun();
                        });

                        if(document.getElementById('{!$Component.username}').value=="Email Address")
                        {
                       document.getElementById('{!$Component.username}').value ='';

                       }
                        $('#checksubscribe').attr('checked',{!emailSubscription});

                        if ({!emailSubscription})
                         $('label[for=checksubscribe]').addClass('checked');

                            $('#checksubscribe').click(function(){

                              document.getElementById('{!$Component.emailSubscriptionHidden}').value =  $('label[for=checksubscribe]').hasClass('checked');

                            });
                    });
                    </script>

    to

       <script type='text/javascript'>

                            $(document).ready(function () {

                                $("#regDivId").live('click', function () {
                                    registerJun();
                                });

                                if (document.getElementById('{!$Component.username}').value == "Email Address") {
                                    document.getElementById('{!$Component.username}').value = '';

                                }
                                $('#checksubscribe').attr('checked', {
                                !emailSubscription
                            })
                                ;

                                if ({!emailSubscription
                            })
                                $('label[for=checksubscribe]').addClass('checked');

                                $('#checksubscribe').click(function () {

                                    document.getElementById('{!$Component.emailSubscriptionHidden}').value = $('label[for=checksubscribe]').hasClass('checked');

                                });
                            });
                        </script>

    thanks.

    let me know how you go.

  16. Scott Wells repo owner

    Okay, that detail should help. Let me play with that a bit (most likely tomorrow at this point) and hopefully I'll be able to reproduce/fix at least one of these (certainly the commented stuff), ideally both. Thanks for providing the primary culprits!

  17. Scott Wells repo owner

    Just fixed the comment-related issue. I'll include that in the next build for sure. Hopefully I'll reproduce the other quickly as well.

  18. Justin Julicher reporter

    For your reference when I hover over the visualforce reference '{!emailSubscription'} it states in Webstorm 'Expression Statement is not assignment or call'

    so to me I think the interpreter is not recognising the reference and then reformatting according normal rules that would tear it apart... .

  19. Scott Wells repo owner

    Justin, that second one just doesn't reproduce for me. I've taken that exact block of code, pasted it into one of my VF pages, and reformatted it about a dozen different times/ways in both IntelliJ IDEA and WebStorm. I'm just seeing the formatter properly applied to it. Are you seeing anything in the log now? If not, I probably will need you to export your JavaScript formatter settings to see if that helps me reproduce it.

    Oh, one more thing to try that just came to mind...can you create a new vanilla project in WebStorm--not an IC project--and create an HTML file that contains this script block. Reformat that and see if the same problem occurs. That will let us know if it's the HTML/JS formatter alone or something IC is doing that's causing the issue.

  20. Justin Julicher reporter

    I literally reset my formatter to the default settings for Webstorm and still had the same problem before posting my previous comment.

    Not sure if this is related but when the source structure is slightly different to standard projects - with this setup the the 'src' directory is removed i.e. the source structure is from the base e.g.. projectName/classes etc.

    Just created a new project and opened the same file - same result. {!emailSubscription} is broken.

    Does {!emailSubscription} show as 'Expression Statement is not assignment or call' in your editor?

    thanks

  24. Scott Wells repo owner

    Pretty bare-bones. When I install I basically turn off anything that's not strictly required by IC, version control, automated builds, etc. No third-party plugins installed aside from IC and a plugin dev-oriented one called PsiViewer...oh, and a regular expression tester plugin. Anything in particular concerning you?

  25. Justin Julicher reporter

    For me it modifies the if({!emailSubscription}) even in the javascript formatter brackets config screen so it seems to be an internal issue with Webstorm - but it's very strange that it isn't happening for you too.

    It shouldn't make any difference that I'm on Linux right?

  26. Scott Wells repo owner

    It shouldn't, no. I have a Linux test machine and can check there as well, but this stuff is all written in Java/Kotlin and should be OS-agnostic...certainly things like formatters that all happen in memory.

  27. Justin Julicher reporter

    Any chance you could attach your editor config ? So I could see if that fixes my issue?

  28. Justin Julicher reporter

    Really weird....

    I pasted it into another page now and it applied correctly.

    Hmm ok now... try this...

    paste <!-- TermsPopup --> this in the bottom of your file, make a small change in the javascript that I supplied and then format it again....

    It seems pasting a commented out html tag below the javascript (above it doesn't affect it) causes the parser to declare {!emailSubscription} as invalid syntax and then causes the formatter to format it wrong.

  29. Scott Wells repo owner

    Justin, that doesn't reproduce it for me either...but...I also have a fix locally that you don't have...the fix for the other issue with comments. I just reverted that fix temporarily and I do see the same error in the log now that was present without that fix. However, I'm still able to format the JavaScript block just fine. However, if my overall doc is organized differently than yours, it's possible that I'm just getting lucky and you're not, and that the fix for the other issue will in fact take care of this for you. I'm planning to release a build with that fix tomorrow morning. Let me get that to you and let's see if it makes a difference. If it doesn't, we can look at what I need to export from my IDE config for you to try out to see if it is in fact a config difference.

  31. Scott Wells repo owner

    I've uploaded 2.0.5.0 with the comment fix. Can you update and let me know if it helps with this issue or not? Even if not, can you verify that it addresses the issue you saw when you had commented markup? Thanks!

  33. Justin Julicher reporter

    Hi Scott,

    I can confirm that the fixes the issue where it would not format the file with a comment but it still formats any visualforce expressions in a javascript tag incorrectly.

    thanks.

    Justin.

  34. Justin Julicher reporter

    I did this from a fresh install of Webstorm with just a basic project loaded exactly like in the video I posted.

    thanks.

  36. Scott Wells repo owner

    Sorry...crazy day yesterday. No, unfortunately I've not been able to reproduce the issue at all. The video you provided does include the comment at the end to help reproduce the issue, and you mentioned that the new build seems to resolve the comment-related issue. Can you provide one more quick video of a reproduction so that I can give it another whirl? I want to make sure that I'm doing exactly what you're doing...

  39. Scott Wells repo owner

    You're not a pain at all! I want to get to the bottom of this as well. I've tried to reproduce several times and several ways, but never successfully. Unfortunately I wasn't able to look at it over the weekend because my daughter has the flu and that's been our sole focus. Perhaps later this week--Wednesday or Friday?--we can get on a screenshare and see if we can debug it that way. How does that sound?

  40. Justin Julicher reporter

    Thanks Scott. that Sounds great.

    I hope your daughter gets better soon.

    Your in San Fran right? I think the best times for San Fran - Brisbane availability is between 3pm - 5pm your time. Let me know if your available Tues, Wed or Thusday?

  41. Scott Wells repo owner

    Thanks, Justin. I'd say she's just reached the midpoint. I just hate seeing her feel so bad...

    I'm actually in Austin, so Central timezone instead of Pacific timezone...that makes your proposed times 5-7PM CST. Wednesday would be my best day for availability, but I could likely make Thursday work as well. 5PM my time should work. Let me know whether either of those days/times works for you and I'll set up a screenshare for us.

  42. Justin Julicher reporter

    Thanks Scott

    Wednesday @ 5pm CST would work for me. That's Thursday/9am AEST. I'm usually in between 8-8:30 so can message you if you want to start it earlier.

  43. Justin Julicher reporter

    Hi @RoseSilverSoftware Ok, further update on this. I installed a Windows 10 VM and installed Idea ultimate, Idea Community Edition & Webstorm on the box. I disabled any unnecessary plugins.

    Idea Ultimate & Webstorm exhibited the issue but community didn't.

  45. Scott Wells repo owner

    Justin, I've sent a Hangouts invite for 5PM CST today. Let me know if you don't receive it or if that doesn't work for you after all.

    Regarding your findings on the three base IDEs, Community Edition doesn't have a JavaScript formatter, so not surprising that it behaves differently and the other two behave the same (they have the same underlying engine). Hopefully that consistency will make this easier for me to reproduce and therefore fix.

  46. Scott Wells repo owner

    Just got off a screenshare with Justin where I was finally able to reproduce this. Here's the code that reproduces it:

    <apex:page id="testDemo">
    <script language="JavaScript">
        var test = {!$User.IsActive};
    </script>

    <!-- -->
</apex:page>

    Just paste that code in exactly and it should reproduce, but if it doesn't, remove and re-add the <!-- --> line, then make any nominal change to the script block. Then {!$User.IsActive} should be highlighted as yellow with message "Expression statement is not assignment or call".

  48. Scott Wells repo owner

    You're not being a pain at all, Justin. I owe you something on this. Life has been crazy with the whole transition to full-time IC and it slipped off my radar. Not an excuse at all...just the state of things. I'll flag this for my attention after TrailheaDX wraps up. So sorry that it's languished for so embarrassingly long. Thanks for bumping back into my active list or it would have slipped by even longer.

  50. Scott Wells repo owner

    FYI, I'm looking into this now. It appears to be an issue with the composite lexer for embedded markup. For some reason it properly tokenizes the formula when there's no comment, but when you add the comment it evaluates the entire thing as a single HTML block which it then hands to the HTML/JavaScript/CSS parsers. Hopefully I'll figure out why this is happening shortly and fix it.

  54. Log in to comment
Assignee
–
Type
bug
Priority
minor
Status
resolved
Component
Visualforce Editor
Version
2.0.4.8
Votes
0
Watchers
1
Jira: the preferred issue tracker for Bitbucket. Join the team!