I’m in the process of updating parts of (and finishing off) Domain* and so I’m implementing the new Streaming HTML feature/workflow in Kitten where you keep state entirely on the server and stream interface updates in response to events being triggered in the client without writing any custom client-side JavaScript.
One issue I ran into immediately when testing this out with a select box that updates other parts of the interface was that the focus/state was being lost after the swap. Thankfully, Carson Gross was, of course, one step ahead and had created the idiomorph htmx extension for just this use case.
You can see the result in the video.
Every time I’m changing the selected option in the in the selection box, the interface is being updated from the server (you can see the log output scrolling as I make the changes in the terminal pane on the lower-left-hand corner.
The code shown on the upper-left-hand corner Terminal pane is the entirety of the change handler on the server that is dealing with those updates.
There is no custom client-side JavaScript.
(I was able to remove all the Alpine.js code I had that was previously handling all this. It was ugly and hard to maintain and meant that I was keeping state in two places – the client and the server – instead of just one, on the server, as I am doing now.)
I haven’t integrated idiomorph seamlessly into Kitten yet, but that’s next.
Enjoy!
�
Aral Balkan
All GNU social JP content and data are available under the