XF 2.2 ChatGPT rewriting JavaScript

digitalpoint

Well-known member
For devs rewriting jQuery into native JavaScript, it seems like ChatGPT can be helpful. I certainly wouldn't blindly let it rewrite a bunch of stuff, but it can be a useful tool for converting JavaScript as a base for you to review/revise/make better.

For example:
JavaScript:
$(document).on('xf:page-load-start',function(e,i) {
    XF.config.time.now = Math.floor(new Date().getTime() / 1000);
    let c = XF.Cookie.get('csrf');
    $.ajaxSetup({
        async: false
    });
    XF.KeepAlive.initialize();
    if (c) // XF.KeepAlive.initialize is running refresh() if the csrf doesn't exist... but if it does, we need to trigger it.
    {
        XF.KeepAlive.refresh();
    }
    $.ajaxSetup({
        async: true
    });
});

ChatGPT turned it into this (even the comments were added by ChatGPT):
JavaScript:
document.addEventListener('xf:page-load-start', function (e) {
    XF.config.time.now = Math.floor(new Date().getTime() / 1000);
    let csrf = XF.Cookie.get('csrf');

    // Set up the AJAX request to be synchronous
    var xhr = new XMLHttpRequest();
    xhr.open('GET', XF.config.url.keepAlive, false);
    xhr.send();

    // Initialize KeepAlive
    XF.KeepAlive.initialize();

    if (csrf) {
        // If csrf exists, trigger KeepAlive refresh
        XF.KeepAlive.refresh();
    }

    // Set up the AJAX request to be asynchronous again
    xhr.open('GET', XF.config.url.keepAlive, true);
});

The code isn't exactly right, but it's a place to start. But a couple interesting things to note:
  • The xf:page-load-start event would probably work in 2.3, but not 100% sure since I haven't seen 2.3 yet (definitely going to be better to use XF.on()).
  • It's using anonymous function instead of arrow functions (it works and to be fair I didn't ask ChatGPT to migrate to arrow functions).
  • The xhr.open('GET', XF.config.url.keepAlive, true); at the end isn't necessary.
  • How does it even know about XF.config.url.keepAlive? And how does it know that's the URL I'm ultimately wanting to hit with my synchronous request? What is this wizardry?!
Another example (this one is a lot simpler):
JavaScript:
XF.config = new Proxy(XF.config,{
    set: function(object, property, value){
        object[property] = value;
        if (property === 'csrf')
        {
            $('.has-csrf').each(function()
            {
                let url = new URL($(this).attr("href"), XF.config.url.fullBase);
                url.searchParams.set("t", value);
                $(this).attr("href", url.toString());
            });
        }
        return true;
    }
});
If you ask ChatGPT to rewrite it without using jQuery, utilizing arrow functions, it gives you this:
JavaScript:
XF.config = new Proxy(XF.config, {
  set: (object, property, value) => {
    object[property] = value;
    if (property === 'csrf') {
      document.querySelectorAll('.has-csrf').forEach(element => {
        let url = new URL(element.getAttribute("href"), XF.config.url.fullBase);
        url.searchParams.set("t", value);
        element.setAttribute("href", url.toString());
      });
    }
    return true;
  }
});
...which is pretty close to how I already rewrote it before I toyed with ChatGPT:
JavaScript:
XF.config = new Proxy(XF.config,{
    set: function(object, property, value){
        object[property] = value;
        if (property === 'csrf')
        {
            document.querySelectorAll('.has-csrf').forEach((el) => {
                let url = new URL(el.getAttribute("href"), XF.config.url.fullBase);
                url.searchParams.set("t", value);
                el.setAttribute("href", url.toString());
            });
        }
        return true;
    }
});

I had missed one of the anonymous functions in my code. So at the very least I was able to look at ChatGPT's output and make improvements on my own code in this case.

Either way, it looks like ChatGPT can be a useful tool for helping devs migrate away from jQuery, even if it's not perfect.
 
I agree that ChatGPT can be a useful tool for converting jQuery code to JavaScript. No real world basis for this, just a hunch.......

Thinking Think GIF by TLC
 
I have a XenForo animation library, and most things are done with CSS transitions, but I did use $.animate() to animate a number sequencing/counting. ChatGPT definitely helped replacing jQuery's animate() function because if I'm being honest I didn't have any clue that requestAnimationFrame() was a thing in native JavaScript.

As you scroll down this page: https://iolabs.io/

...stuff starts animating as you scroll down. And ChatGPT was most helpful in at least pointing me in the right direction to not need $.animate() for the number percentages that animate.
 
I have a XenForo animation library, and most things are done with CSS transitions, but I did use $.animate() to animate a number sequencing/counting. ChatGPT definitely helped replacing jQuery's animate() function because if I'm being honest I didn't have any clue that requestAnimationFrame() was a thing in native JavaScript.

As you scroll down this page: https://iolabs.io/

...stuff starts animating as you scroll down. And ChatGPT was most helpful in at least pointing me in the right direction to not need $.animate() for the number percentages that animate.

Probably not the right place for this, but I have some feedback for that page.

The Cookie domains found and the JavaScript Objects found header should be a different color background than the scrolling text.

The list just looks like it scrolls past those things and not that they are separate lists. Would make readability and the scroll effect work better IMHO.

The page scrolls past the footer.

Other than that, I really like the page.
 
I have a XenForo animation library, and most things are done with CSS transitions, but I did use $.animate() to animate a number sequencing/counting. ChatGPT definitely helped replacing jQuery's animate() function because if I'm being honest I didn't have any clue that requestAnimationFrame() was a thing in native JavaScript.
Not sure if we ever used $.animate directly. But we replaced our various jQuery animation usages for things like fade up, fade out, slide in, slide out (and so on/whatever they’re called) with XF.Animate.fadeOut() and so on.

This probably doesn’t help your use case but worth bearing in mind that it exists in case you run into that at some point.
 
Ya, I was literally only using it as a lazy way to sequence numeric text with an easing. Everything else (actual animations) were migrated to CSS transitions many years ago.
 
Not sure if we ever used $.animate directly. But we replaced our various jQuery animation usages for things like fade up, fade out, slide in, slide out (and so on/whatever they’re called) with XF.Animate.fadeOut() and so on.
I suppose I should probably rename my JavaScript "class", because I suspect XF 2.3 isn't going to particularly love me to keep using XF.Animate for mine. 😂

Rename for now, and probably revisit it post-2.3 to see if it makes sense to just extend the default XF.Animate.
 
For devs rewriting jQuery into native JavaScript, it seems like ChatGPT can be helpful. I certainly wouldn't blindly let it rewrite a bunch of stuff, but it can be a useful tool for converting JavaScript as a base for you to review/revise/make better.

For example:
JavaScript:
$(document).on('xf:page-load-start',function(e,i) {
    XF.config.time.now = Math.floor(new Date().getTime() / 1000);
    let c = XF.Cookie.get('csrf');
    $.ajaxSetup({
        async: false
    });
    XF.KeepAlive.initialize();
    if (c) // XF.KeepAlive.initialize is running refresh() if the csrf doesn't exist... but if it does, we need to trigger it.
    {
        XF.KeepAlive.refresh();
    }
    $.ajaxSetup({
        async: true
    });
});

ChatGPT turned it into this (even the comments were added by ChatGPT):
JavaScript:
document.addEventListener('xf:page-load-start', function (e) {
    XF.config.time.now = Math.floor(new Date().getTime() / 1000);
    let csrf = XF.Cookie.get('csrf');

    // Set up the AJAX request to be synchronous
    var xhr = new XMLHttpRequest();
    xhr.open('GET', XF.config.url.keepAlive, false);
    xhr.send();

    // Initialize KeepAlive
    XF.KeepAlive.initialize();

    if (csrf) {
        // If csrf exists, trigger KeepAlive refresh
        XF.KeepAlive.refresh();
    }

    // Set up the AJAX request to be asynchronous again
    xhr.open('GET', XF.config.url.keepAlive, true);
});

The code isn't exactly right, but it's a place to start. But a couple interesting things to note:
  • The xf:page-load-start event would probably work in 2.3, but not 100% sure since I haven't seen 2.3 yet (definitely going to be better to use XF.on()).
  • It's using anonymous function instead of arrow functions (it works and to be fair I didn't ask ChatGPT to migrate to arrow functions).
  • The xhr.open('GET', XF.config.url.keepAlive, true); at the end isn't necessary.
  • How does it even know about XF.config.url.keepAlive? And how does it know that's the URL I'm ultimately wanting to hit with my synchronous request? What is this wizardry?!
Another example (this one is a lot simpler):
JavaScript:
XF.config = new Proxy(XF.config,{
    set: function(object, property, value){
        object[property] = value;
        if (property === 'csrf')
        {
            $('.has-csrf').each(function()
            {
                let url = new URL($(this).attr("href"), XF.config.url.fullBase);
                url.searchParams.set("t", value);
                $(this).attr("href", url.toString());
            });
        }
        return true;
    }
});
If you ask ChatGPT to rewrite it without using jQuery, utilizing arrow functions, it gives you this:
JavaScript:
XF.config = new Proxy(XF.config, {
  set: (object, property, value) => {
    object[property] = value;
    if (property === 'csrf') {
      document.querySelectorAll('.has-csrf').forEach(element => {
        let url = new URL(element.getAttribute("href"), XF.config.url.fullBase);
        url.searchParams.set("t", value);
        element.setAttribute("href", url.toString());
      });
    }
    return true;
  }
});
...which is pretty close to how I already rewrote it before I toyed with ChatGPT:
JavaScript:
XF.config = new Proxy(XF.config,{
    set: function(object, property, value){
        object[property] = value;
        if (property === 'csrf')
        {
            document.querySelectorAll('.has-csrf').forEach((el) => {
                let url = new URL(el.getAttribute("href"), XF.config.url.fullBase);
                url.searchParams.set("t", value);
                el.setAttribute("href", url.toString());
            });
        }
        return true;
    }
});

I had missed one of the anonymous functions in my code. So at the very least I was able to look at ChatGPT's output and make improvements on my own code in this case.

Either way, it looks like ChatGPT can be a useful tool for helping devs migrate away from jQuery, even if it's not perfect.
I want commission in form of American pancakes (British ones just aren't a comparison) for the inspiration to this thread. :cool::p
 
That looks a lot like a cake that was made in a pan :unsure:
Texture is different; it's made with 7 different grains/flours, and is very dense (even more dense than certain members of this site). But it has more flavor than pretty much any pancake I've had.
 
Back
Top Bottom