Test if JQuery can be fully removed by upgrading Bootstrap

[Jaifroid]

I have now removed all JQuery from Kiwix JS code, but as mentioned in #1225 and #367, our version of Bootstrap still requires it, so we still have to load it.

We need to test whether we can upgrade Bootstrap to the next version that no longer uses JQuery, while still keeping backward compatibility with IE11+, Firefox OS, etc. It's possible that Babel can provide that compatibility, even if the Bootstrap library doesn't support older browsers any more (which I believe is the case). It needs testing.

[AritraLeo]

Before jumping in I'd like to know if I am right or wrong.
Firstly I'll have to check for compatible version of bootstrap and update package.json accordingly. Then, Search the codebase for any instances where jQuery is directly used with Bootstrap components or functionality. Replace these jQuery-dependent code snippets with their vanilla JavaScript equivalents. Finally, test the application in various browsers, including older ones like IE11+ and Firefox OS, to ensure that the upgraded Bootstrap version maintains compatibility.
Is it ?

[Jaifroid]

Actually, for this issue, you just need to update Bootstrap to a version that doesn't rely on JQuery and remove any mention of JQuery from index.html and from rollup.config.js. Note that for legacy reasons, Bootstrap is attached in index.html, but it might be fine to keep it there just for testing. We have an automated test for IE11, so that should be enough. You would be able to test manually in IE mode in Microsoft Edge if it needs debugging (assuming you have access to a Windows machine), or I can explain how to run IE11 (there's a hidden secret to doing it).

It might be necessary to adapt some of our Bootstrap classes in index.html -- I'm not sure. I wouldn't jump to the latest Bootstrap, as it might not work with older browsers. I'd just go one major version up from our current version.

If necessary, you might need some guidance on how to make sure the bootsrap dependency is rewritten by Babel (in rollup.config.js), but that's a bridge we could cross after the initial checks are done.

[Jaifroid]

Let me know if you want to try. Take a look at CONTRIBUTING.md in this Repo to get started (read it carefully all the way through -- there are some gotchas!).

[AritraLeo]

Let me know if you want to try. Take a look at CONTRIBUTING.md in this Repo to get started (read it carefully all the way through -- there are some gotchas!).

Ya sure I would love to give it a shot! Thanks for such a descriptive response and sharing the CONTRIBUTING.md file I'll read it carefully as well !

[AritraLeo]

Usually I start working on a issue directly but as per CONTRIBUTING guide I should ask you to assign me the issue.
I'll raise a PR with initial changes requested shortly!

[THEBOSS0369]

Hey @Jaifroid ! Can i work on this issue ,for that <section> tag issue on mwoffliner as i wasn't able to start server so i will be waiting till i get that issue fixed and will be working on this issue.

So for this issue this will be my approach

1. I will first upgrade to Bootstrap v5 as newer version might not work on older versions, i will do it by updating package.json
2. I will try to remove any direct reference to jquery from index.js and rollup.config.js
3. will do Test on the Edge's PE mode as you suggested

Will this approach would work?
Thanks

[THEBOSS0369]

Hey @Jaifroid ! Shall i go ahead and work on this issue with the approach i gave above? Thanks

[Jaifroid]

@THEBOSS0369 I just need to check that @AritraLeo doesn't want to finish his PR which was actually already very close to solving this issue, but wasn't passing tests, so let's wait a few more days.