gazpachu/hypatia

Remove jQuery dependency

gazpachu opened this issue · 6 comments

Remove jQuery dependency

I started on this and have made some progress.

I've replaced $.ajax() calls with axios.

$.hide() and $.show() have been replaced by helper functions which can accept a selector string or an Element object.

`elemHide: (selector) => {
const elem = (typeof (selector) === 'string' || selector instanceof String)
? document.querySelector(selector)
: selector;
elem.style.display = 'none';
return elem;
},

elemShow: (selector) => {
const elem = (typeof (selector) === 'string' || selector instanceof String)
? document.querySelector(selector)
: selector;
elem.style.display = '';
return elem;
}`

The class manipulation has been done using the classList methods.
e.g.
$('.user-form').removeClass('active')

has been changed to:

document.querySelector('.user-form').classList.remove('active')

This will require a polyfill for Internet Explorer compatibility. How backwards compatible do you want the project to be? IE 9?

I think I only have to fix up the $.AnimateCss() implementation and I'll be ready to submit a pull request unless of course I've broken something.

many thanks @danagle !!

I have other projects with the same tech-stack without any jQuery dependency. This is how I fixed the animateCSS:

animate: (el, animationName, callback) => {
    el.classList.add('animated', animationName);
    el.addEventListener('animationend', function handler() {
      el.classList.remove('animated', animationName);
      el.removeEventListener('animationend', handler);
      if (callback) {
        callback();
      }
    });
  },

I think anything below IE11 should be dropped.

I just remembered that I didn't add a classList polyfill.

The beast yet lives - Select2 is dependant on jQuery!

YouMightNotNeedJqueryPlugins.com has kindly suggested Choices.js as a vanilla JS alternative.

That's a good option. We also have https://github.com/JedWatson/react-select.

Also might be worth also considering implementing a few components from a Material Design library like https://material-ui-next.com/demos/selection-controls/

I've just been looking at the react-select project and v2 which is in alpha has react 16.x as a dependency.