Sage 9 - using JS / Jquery from an old Sage 8 theme

Hello, I am hitting some problems using JS and Jquery code in Sage 9. I am trying to bring over some JS code from an older Sage 8 theme, and when I run npm start to watch the folder, I get numerous ESLint errors from my Common.js file where I placed the code - mostly errors about style, tab indentation, using var when I should use something else, etc etc. I can’t even bring across simple Jquery statements from my old theme to the new one.

I am assuming this is because Sage 9 conforms to ES6 and my code is ES5 / vanilla JS. I am a bit concerned that I will need to convert all my code from the old syntax to the new syntax - I’m not a JS programmer so I am finding this prospect a bit daunting.

Is there a converter of some kind I can use? Or some other workaround where my old code can co-exist with the Sage 9 way of doing things? Or maybe I’m just going about this the wrong way entirely?

Also this seems to be a problem with 3rd party packages I’m bringing in from Webpack… especially ones that aren’t ES6 friendly. Should the ESLint system ignore such dependencies entirely?

1 Like

I have managed to get some test Jquery code running by using some special comments as per ESLint docs:

/* eslint-disable */

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "Thanks for visiting!" );
        });
    });

/* eslint-enable */

I am wondering though if I am on the right track or if there’s still a better solution.

1 Like

Been there too. I decided to migrate everything to ES6 (mainly cause I wanted to upskill with ES6 anyway), but yea, sometimes you can just disable the linting of a file or a portion of a file and get it done quickly!
I think there’s no right/wrong way on this. It’s mainly up to the time/resources you can spend for a project.
The code will still work, it simply doesn’t comply with the eslint rules!

1 Like

That puts my mind at ease a bit :slight_smile: One day I’ll have to retrain myself to learn the ways of ES6. Time is against me for this project however!

One thing I’d add to what @Nicolo_Sacchi said; the code will still work - however there are very legitimate reasons for the changes in the eslint which prevent you from recompiling.

For now; I’d go head using your current strategy, adding the eslint exception comment tags inline with your work like you’ve pasted above. It’s good to avoid ignoring entire files as this often can create unexpected results… While the code may work, these lint rules are in place to stop more than just runtime execution errors and its important to be aware of exactly what you are ignoring; as this could lead you to a 3 hour bug hunt only to realize the error was not being picked up by compiler due to ignore comment.

All that said; as soon as you have the time, learning ES6 will help you tremendously in future projects. I personally found the ES6 for Everyone amazingly informative and super easy to watch in my in between time.

Taking the code you have above - you could take advantage of fat arrow functions to make it a bit simpler.

$(document).ready(() => {
        $('a').click((event) => {
             // do stuff with event
       });
 });

One important thing to note about fat arrow functions is that this will no longer be scoped to the click event, you’d have to access the current anchor via $(event.currentTarget) instead of $(this), asuming you’d still want to work with it as a jQuery object.

Best of luck with ES6 & upgrading your js!

3 Likes

@GFargo thanks for the great advice. I’ve also been watching a Lynda course on ES6 and that’s been really useful as well.

1 Like