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:
ChatGPT turned it into this (even the comments were added by ChatGPT):
The code isn't exactly right, but it's a place to start. But a couple interesting things to note:
If you ask ChatGPT to rewrite it without using jQuery, utilizing arrow functions, it gives you this:
...which is pretty close to how I already rewrote it before I toyed with ChatGPT:
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.
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?!
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;
}
});
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;
}
});
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.
