Integrate kotlin-vite for faster dev mode reloading

[apatrida]

This new plugin: https://opensavvy.gitlab.io/automation/kotlin-vite/api-docs/vite-kotlin/index.html

is very fast for dev mode compilation/reloading using vite.

Give it a spin.

1. pull their repo
2. open one of the examples
3. update the settings.gradle.kts since their plugin is not in the plugin portal, but instead maven central.

pluginManagement {
    repositories {
        gradlePluginPortal()
        mavenCentral()
    }
}

4. update the plugin usage to add a version number in build.gradle.kts

id("dev.opensavvy.vite.kotlin") version "0.3.10"

(see release list: https://gitlab.com/opensavvy/kotlin-vite/-/releases)

Then run in two terminals:

./gradlew viteRun
./gradlew viteCompileDev --continuous

or if the KMP example:

./gradlew :app:viteRun
./gradlew :app:viteCompileDev --continuous

and then modify files and see 1 second reload times on simple demos. Obviously larger apps will be slower, but the overhead of the bundler is cut way down using Vite.

[bitspittle]

Thanks for filing!

FYI I am good friends with the author of that Vite plugin, and he is in fact a regular member in the Kobweb community. Actually, his work on Decouple and my work on Kobweb connected us in the early days of both projects. He even talked with me when working on the Vite plugin originally, asking for feedback. I think the Vite plugin is awesome.

When we investigated things earlier, it didn't seem like the dev experience was significantly faster, as there compilation has been the biggest time offender by far. As for the production bundler, sometimes Vite produces larger output files, and sometimes smaller. This means we probably have to support both Vite and Webpack in our final solution, which makes the feature trickier to implement. This also means when we prepare to release new versions of Kobweb, there would be more cases to check.

There are some big design questions, too: does the Kobweb plugin just force include the Vite plugin for you? Or do we detect it and use it if present? Or do we NOT use the Vite plugin but instead pull out some library bits from their side and integrate it into the Kobweb application plugin?

This isn't to say we still don't want to do it, we do! These are just the reasons why Vite work has so far been deprioritized. Maybe after K2 the relative gains from using vite will be more important for the dev experience?

[CLOVIS-AI]

Hey! I'm the author of the Vite plugin :)

As @bitspittle said, we've been discussing this since before I even started working on the plugin. Currently, the main difficulty is that we have been able to find very few projects to actually try the plugin on, and so we're not quite sure when it's better or not, or how stable it is.

You can see one of our tests here: https://github.com/bitspittle/bitspittle.dev/pull/6. If you have a Kobweb-based project, please try to follow the same approach on your own website! And please report it to me by creating an issue in the GitLab, whether it works or not. If it doesn't work, I'll try to understand why—if it does work, it's one more step towards stabilization.

Currently, the plugin works relatively well for any project that uses the default Webpack configuration. However, as soon as the project has stuff in the webpack.d directory, everything becomes much more complex. We need to test the plugin on more projects so we get better measurements. If you can help us with this, future Kobweb integration will be much simpler.

Thanks a lot for sending this here, though! I'm still a small library author, and it's really great to see people recommending my work!

[apatrida]

I took the sample and converted it, and you are correct in stating that the webpack and the vite version refresh similarly in time, although the webpack version has the integrated "building" notice and refreshes less of the page, while the vite does a full repaint. I'm assuming that would be resolved over time.

I am going to start a utility project and will give kobweb a shot and stay with no customization of webpack so I can run either model at points in time. I do need Kotlin RPC so I'll have to look at either two servers, or #22, or whatever comes of #550 if not covered by #22.

[CLOVIS-AI]

@apatrida if your project is open source, please create an issue describing it and giving the download link, I'll make it into an official sample for the Vite plugin so I have an actual project to measure things on / check that everything continues to work.