Automating Conversion of jQuery to Vanilla JS

Question

I've been tasked with converting a substantial amount of jQuery to vanilla JS. Grinding through and changing each line by hand is of course an option, but I wanted to see if something has already been done to automate the process.

Converting selectors and simple jQuery calls seems simple enough, but other conveniences introduced by jQuery make conversion non-trivial. An example being the ability to subscript additional methods after each call:

// jQuery
element.addClass('one two three').removeClass('four five').css('left', '100px');

// Vanilla JS equivalent
element.classList.add('one', 'two', 'three')
element.classList.remove('four', 'five')
element.style.left = '100px';

Making a script using regex to find jQuery and converting it seems like a viable option, but is also not a small undertaking with all the edge cases that can occur.

Answer 1

Chaining method calls is not a native JS thing, but if you like that coding style you might consider a library that drops in for jQuery but uses native calls as much as possible. The only one I know of is jBone, but it claims to be for backbone.js. I haven't used it, so I'm not sure if it will work stand-alone. The source is small though, so that could be a great starting point.

I don't think there is anything automated, because like you said the chainable calls common to jQuery would need to be unraveled and in most cases that would mean the code that works with the return would have to be updated/debugged too. You are probably better off going line by line or use a thin replacement library for the parts of jQuery you are actually using.