[Tech] Update to Vite 4

[CommandMC]

TODO:

• Bundle size of the main application is rather large (500KB before update, ~4.5MB now), find out why this is happening if possible. Probably something to do with Vite 4 itself, along with vite-plugin-electron changes
  Update: This is most likely caused by some dependency of ours including extra code when not built for the browser. Since this same option also makes other packages work, we can't just disable it either. In the grand scheme of things, +4MB isn't that bad, considering a final bundle for any platform can easily approach 100MB
• src/backend/logger/ipc_handler.ts seems to be imported/ran twice when running the development build (not happening in production-built version), causing Electron to error about trying to handle the same event twice. No idea at all why this is happening
  Update: Seems like this is caused by Vite getting confused about our circular import issues (which to be fair, I don't blame it for). So that looks like it's also better to be untangled in another PR

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[arielj]

• src/backend/logger/ipc_handler.ts seems to be imported/ran twice when running the development build (not happening in production-built version), causing Electron to error about trying to handle the same event twice. No idea at all why this is happening
  Update: Seems like this is caused by Vite getting confused about our circular import issues (which to be fair, I don't blame it for). So that looks like it's also better to be untangled in another PR

I don't know if it's related to this because I think what I see happens earlier than that, but I see duplicated messages when starting the app:

I also see this message that I don't see in the main branch:

(node:850808) UnhandledPromiseRejectionWarning: Error: Attempted to register a second handler for 'getLogContent'
    at IpcMainImpl.handle (node:electron/js2c/browser_init:2:97666)
    at Object.<anonymous> (/home/ariel/dev/oss/HeroicGamesLauncher/build/main/main-5c7c41c5.js:713:6167)
    at Module._compile (node:internal/modules/cjs/loader:1174:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1229:10)
    at Module.load (node:internal/modules/cjs/loader:1044:32)
    at Module._load (node:internal/modules/cjs/loader:885:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at Module.require (node:internal/modules/cjs/loader:1068:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/home/ariel/dev/oss/HeroicGamesLauncher/build/main/index-61195611.js:1:82)
(Use `electron --trace-warnings ...` to show where the warning was created)
(node:850808) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

Is this related to that too?

EDIT: I just noticed vite 3 also shows 2 build processes so I guess it's fine

looks like vite 3 does that sequentially and vite 4 runs them in parallel

[arielj]

I do see build time and file sizes are pretty big compared to vite 3

the preload.js with vite 3:

✓ 9 modules transformed.
build/electron/preload.js   18.32 KiB / gzip: 3.57 KiB
built in 69ms.

With vite 4:

✓ 385 modules transformed.
build/preload/preload.js  199.56 kB
built in 7311ms.

I agree that 4mb is not that much for the main.js in a 100mb file, but I wonder what's the impact of that when the browser has to parse that, it's a lot of javascript.

[CommandMC]

I see duplicated messages when starting the app

You're building the main backend (src/backend/main.ts) and the preload (src/backend/preload.ts), so you'll also get two messages. Ideally we'd keep the preload in its own directory (src/preload/) to signify this disconnected-ness, but I generally don't like to make architectural changes for no reason

I wonder what's the impact of that when the browser has to parse that, it's a lot of javascript

I personally haven't noticed any impact on startup times.
I've talked to the maintainer of our Electron plugin about this, the root cause of this issue is that some package we're using is inserting a lot of code when built for NodeJS (as opposed to building for a web browser). The fact that packages are even build for this (correct) scenario is a new addition in the plugin, and without it, certain other dependencies (like axios) wouldn't work.
I'm not sure how this worked with our older version of the plugin, my best guess would be that we hit just the right combination of Vite + Electron plugin + axios versions. Of course, being locked to those specific versions is not a good idea

I plan on combing through our dependency list to find these problematic packages and possibly find/write replacements, but that would balloon this PR up to "nobody-wants-to-review-it" range pretty fast

[CommandMC]

Superseded by #3218