Vuetale

Vuetale brings UI development to the next step. Web developers love Vue and TypeScript, so why not bring it to Hytale, to have modern DX? It is using GraalVM JS to essentially bridge Vue to Vuetale (Kotlin Plugin). Vue is made from the ground up to support custom renderers and has proven its efficiency time and time again, Hytale is no different. (Terminal UIs, native UIs, ...) Some things obviously need to be considered: 

 

As far as I can tell, yes, very. Sure, it might not be as performant as staying 100% native, but right now this is nothing to be worried about. Also worth mentioning is that all this logic will strictly not be running on the world thread, but its own thread instead by default. 

Not bad. While I haven't exactly measured the overhead, I've already made many decisions that keep memory to a minimum. Instead of instantiating one JS engine (+ loading vue, loading in each used component, ...) per player, there is only one JS engine that loads everything it needs once. Since Vue itself is highly memory efficient, we can instantiate multiple apps with our custom renderer with negligible overhead. Vuetale creates two apps per player, HUD and Page. This way we can keep everything non conflicting while still selectively sharing context where needed. Furthermore it's probably a good time to mention that Vuetale is doing ZERO HTML and CSS parsing in runtime. More on that in How does this improve DX? 

Yes. Vue inherently scales really well. You can easily create components, put all related logic and styling in the same file and reuse components with different properties. No brainer

So let me start it off with this: For your UI, you will have a sub project inside your Plugin which is a preconfigured Vite project. For maximum DX, its heavily suggested to use VSCode with the Vue extension. For most people, that means you do have two projects open in different IDEs, but the power you get with that is immense. Vuetale already has a 100% type coverage of all current Hytale UI elements. That means when typing in Vue, you automatically get all of Hytale's elements suggested automatically. But not just that; all properties are also typed! Thanks to the wiki, I was able to extract all the information and convert it into a format that works great with this setup. https://pastebin.com/myx0HByU Of course, by using Vue, you benefit from reactivity. All component logic can be made reactive easily and it will update the UI in realtime like magic. Way less updating code clutter. But of course, with all great things comes a price, but I promise it is a small one to pay for what you get: A build step. That build step converts all the .vue files to .js and also extracts all the css and converts it to a JSON format directly using postcss. That means no HTML parsing, no CSS parsing in runtime.

  ♥ Backed by the HytaleModding Grant Program ♥