Modernize stack and convert to vue+vite

[davidglezz]

Questions	Answers
Description?	There are a lot of outdated deps. This PR migrates from webpack 1 to vite and from React+jQuery to Vue.
Type?	refactor
BC breaks?	yes
Deprecations?	n/a
Fixed ticket?	Fixes #65
Sponsor company
How to test?	Manual compare with https://translators.prestashop-project.org/

• From old Webpack 1 to Vite.
• From node 14 to node 20.
• From old js React+jQuery to Vue.
  • For now, its a simple manual component conversion. In the future it could be restructured and refactored.
  • The final bundle size is reduced from 387KB to 71KB.
• Removed a lot of old dependencies.
• It still using Bootstrap 4 alpha, maybe it's better to do a small redesign than try to make it look the same with Bootstrap 5

Why change to Vite and Vue instead of fixing the dependency problem that existed?

Really old libraries were used, Webpack 1 and a lot of loaders. Due to the breaking changes of new versions of webpack and loaders, it would take me more time than just starting a vue project and migrating a dozen components.

[kpodemski]

wow @davidglezz !

[davidglezz]

Thanks This week I am without laptop because si am on vacations. See you next week 😁

[matks]

Before I can test this PR I need to install Node.js 20 on my laptop without breaking my stack 😅 might take a few time

[davidglezz]

@matks

Question: don't you think that even Vue or Vite are over-engineered for this site?

Probably yes, a bit, Vue is mainly used as template engine and is the easiest path (for me) to migrate from old react codebase.

Converting to framework-less will require more effort IMO.

[davidglezz]

I see other issues:

• Crowdin data is transformed several times, from json to csv to json and finally the js object is mapped to another. This should be simplified.
• Not all languages are rendered/listed. There are 82 languages listed in crowdin vs 67 in statistics.json

[matks]

Oh yeah there are a loooooot of issues with this repository 😛

[mflasquin]

Before I can test this PR I need to install Node.js 20 on my laptop without breaking my stack 😅 might take a few time

https://github.com/nvm-sh/nvm 😉

[matks]

And here we go 😄 troubleshooting brew updates dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.72.dylib

EDIT: argh 😭 so many deps to update

[matks]

For the record I broke my php + node setup on my laptop 😛 when trying to install Node 20. This is because of https://www.skymac.org/Admin-Dev/article-5038c427-Homebrew-Corriger-un-probleme-de-dependances-trop-recentes.htm

I think I will reinstall my laptop from zero 😄 too many piles of software on it and now it all crumbled.

[davidglezz]

@matks I'm glad you renewed the node setup successfully.

You can do npm run dev (dev build) or npm run build && npm run preview (to preview production build - recommended) or npm run build and serve with other tool the ../public (not front/index.html)

And thank you very much for taking the time to review my PR.

[davidglezz]

There are things that are a bit ugly, but that's because I did this in a few hours, I didn't want to spend more time doing some refactoring or improvements without being sure that I'm on the right track and knowing that it could be merge.

Feel free to request any changes or ask me anything you want.

Have a nice day =)

[matks]

@matks I'm glad you renewed the node setup successfully.

You can do npm run dev (dev build) or npm run build && npm run preview (to preview production build - recommended) or npm run build and serve with other tool the ../public (not front/index.html)

And thank you very much for taking the time to review my PR.

I did npm run build and serve with other tool the ../public because if I am not wrong this is what the real env will look like.

It works on my machine 🎉 so I think code is "good enough" for now 😄 . This PR is already big, improvements should be done in other PRs.

Now how do we plug this into existing GitHub Action pipeline and test it?

What we could do is create a new branch on this repository, a branch refacto, and push updated workflow on this branch. I think I can configure GitHub to build the refacto branch on a Environment, allowing us to verify the result. Wdyt?

[davidglezz]

I think it's great!

[matks]

Branch refacto is created. Let's merge this PR into refacto and then I will build a test environment for GitHub Actions from refacto. I also added the hacktoberfest label to the repository 😉 so if you participate in Hacktoberfest this PR will be eligible

[matks]

Env configured https://github.com/PrestaShop/TopTranslators/commit/325ec08c4fe968c645ff60c0522bc07e3b913428

[matks]

Let's see if it works https://github.com/PrestaShop/TopTranslators/pull/70

[matks]

Everything looks good -> https://github.com/PrestaShop/TopTranslators/pull/71 PR to deploy it to prod

If OK for you @davidglezz then tomorrow we can deploy in production

[davidglezz]

Perfect!

[matks]

@davidglezz Your changes are live.

If you're motivated, there are warnings & notices in the logs https://github.com/PrestaShop/TopTranslators/actions/runs/6571132956/job/17849715207#step:12:1