port solana workbench to vite from webpack

[bluskript]

Vite is the de-facto build tool nowadays for all frontend apps. There are quite a few reasons why vite would be beneficial, such as:

1. Instant hot reload. Developing the app would become way easier, because seeing your changes happen in realtime can help stay focused on the problem and solve things faster.
2. Simpler build setup. Webpack requires a lot of configuration, and currently the .erb folder abstracts a lot of the gross details. With Vite, there would be much less boilerplate for builds.
3. Scoped styling of components would become possible to do in a more lightweight way thanks to https://github.com/Bluskript/vite-plugin-inline-css-modules, though it is a vite plugin and wouldn't integrate with webpack without significant reworks.

The instant hot reload helps with #116 a lot, because you would be able to see the UI change in realtime, and scoped styles are very nice to have inside of the component you are editing.

[nathanleclaire]

How long do you think it would take you?

For (1) -- the app does reload on changes to the front end code, or is supposed to at least -- so I'm not sure I follow, what's different if we port to Vite? Reloads are faster?

My impulse is to say no, we should keep rolling forward with what we already have, but I defer final call to @SvenDowideit as he's been owning this area. I could be persuaded pretty easily though if you put together a PR that looks promising and can keep the scope contained to, say, a week or two of work.

[bluskript]

The amount of work shouldn't be too much. A brief overview suggests it would only need adjustments to the CI and that's about it.

To answer your question about hot reloading, WebPack usually takes 2-3 seconds to update incrementally. Vite basically has no wait time at all (100-300ms). This might seem insignificant, but it is very helpful when hacking together a UI because it helps with staying in a flow when making UI code and overall allows you to be more productive. Hacking together a UI in realtime is different from hitting save and waiting for your changes to appear and then going back to the editor.

Also, build complexity is another big factor. Overall configuration with Vite is a lot more simple and intuitive and less prone to breaking compared to WebPack.

I estimate it would take a day or two for me to do the entire port.

[nathanleclaire]

To answer your question about hot reloading, WebPack usually takes 2-3 seconds to update incrementally. Vite basically has no wait time at all (100-300ms). This might seem insignificant, but it is very helpful when hacking together a UI because it helps with staying in a flow when making UI code and overall allows you to be more productive.

Yea, totally get it ... we have no particular attachment to webpack, just aren't frontend experts, so wanted to play it safe and re-use existing work

Give it a whirl in a PR! Would be happy to review

[SvenDowideit]

I'd be very interested to see what this looks like - speed is much less important than understandabilty (and i'm not a fan of either webpack or erb :) )

[SvenDowideit]

closed by #140