Move away from jQuery

[ang-zeyu]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

What is the area that this feature belongs to?

Code Quality

Is your feature request related to a problem? Please describe.

With the bootstrap v4->v5 migration done we can look to removing jQuery use (just a few instances) within our own code in favour of modern dom apis.

Describe the solution you'd like

• Remove jQuery dom manipulations in favour of modern dom apis
• jQuery animations in favour of a much smaller library (if not feasible with modern apis)

Describe alternatives you've considered

No response

Additional context

No response

[yucheng11122017]

There is a library replace-jquery that automatically replaces jquery with vanilla javascript.
It defines a new function written in vanilla JS for each jQuery function which is used instead of the jquery function.

Can I check if is it possible to use this library?
Pros:

• Less chance of missing some jQuery
• Less refactoring work
  Cons:
• It still has some methods that are missing such as not and filter which will need to be added manually
• May not be super reliable?

If no, should the implementation follow what has been done in this library (ie replace the definition of each jQuery function instead of replacing each instance of the jQuery function individually)?

[ang-zeyu]

Thanks for the find, that looks really interesting.

If I'm getting it right, you can certainly use whatever it transforms in its build script. You can consider mixing and matching as well. For example, jQuery.attr/append( has very straightforward replacements in DOM apis.
Or you can also take the chance to look at the jquery source to learn how it was originally built.

Fyi there aren't a lot of jquery usages.
https://sourcegraph.com/search?q=context:global+repo:.*markbind.*+jQuery+AND+%28file:packages/core-web.*+OR+file:packages/vue-components.*%29+AND+NOT+file:.*min%5C..*&patternType=standard&sm=1&groupBy=repo The most troublesome one I think would be the .animate( call. (which seems to have a replacement as well? 👀 )

[ang-zeyu]

Alternatively, you can also consider digging through replace-jquery's source and plucking the relevant parts out.

Pros:

• Less chance of missing some jQuery - the link above should be everything. I'm not sure if the script could be used on the entire repository in a straightforward manner as well (e.g. .vue files)
• Less refactoring work - there are only a few usages, so my thoughts are that it wouldn't be much different. And some work is needed to get the script going too.

Cons:

• It still has some methods that are missing such as not and filter which will need to be added manually - mix and match if possible!
• May not be super reliable? - we should be testing all affected areas in any case so I wouldn't worry about this.

[yucheng11122017]

Ok thank you for the advice @ang-zeyu !

[yucheng11122017]

Hi @ang-zeyu, can I ask what is float.js used for? Is it similiar to the Bootstrap float?

I couldn't find it in the documentation. Was wondering if it was deprecated or just missing.

[tlylt]

Hi @ang-zeyu, can I ask what is float.js used for? Is it similiar to the Bootstrap float?

I couldn't find it in the documentation. Was wondering if it was deprecated or just missing.

I think it's a Vue directive that's no longer in use. See here for when it's introduced. If so we can safely removed it.