Finally did it bsky.app/profile/gfra...

Here's the last call site if you want to check the code yourself: github.com/phoenixframe...

JS.set_attribute/2 under the hood runs DOM.putSticky(el, name, operation) which stores the "operation" function in a private key in the DOM element.

While patching, DOM.applyStickyOperations(toEl) re-plays all stored DOM operations which should stick through patching!

Think of CSS transitions, caret position, scroll state. All is preserved while efficiently updating the DOM.

morphdom `onBeforeElUpdated(fromEl, toEl)` callback allows tapping into the transform. LV uses it to re-apply DOM "sticky" operations to the toNode, the "target" state.

LiveView server-side renders new HTML, and sends to client the smallest diff necessary to update the client DOM to match the server state

The DOM patching is done by morphdom, which transforms the existing DOM tree to match a new DOM tree in order to preserve internal state of the original elements

TLDR; LiveView "sticky" DOM operations re-run when DOM is patched with new HTML

Demo: gio.wtf/demos/sticky...

Here's the explanation of how it works:

I believe this is a solved problem in the sense that the tools are there. DX could be improved tho to make it more obvious tho: www.youtube.com/watch?v=AnbW...

Would love to hear your thoughts. And totally agree with Elixir happiness 😁

Thank you ❤️

I’ll try to give it a proper answer when I get some free time

Thank you 💕!! I think a higher level API for this should probably be possible 🤔

Espero q tenha se divertido tanto quanto eu 😁

So for the "Pure UI" logic, where to draw the line between using JS commands versus relying on LV assigns which might make UX suffer if connection is slow? That's the criteria I'm trying to come up with, so devs can use it to guide design decisions. What state should be tracked in the client only?

Heey thanks for engaging! Optimistic UI covers a lot of what I'm looking, but not everything. Some UI interactions have nothing to do with accessing remote data. But lots of LV developers fall in the mistake of using assigns to control some piece of UI that could be controlled by JS commands

Thanks! Didnt know this video. In my experience there’s usually a way to leverage JS cmds to drive the UI and fix UX when server feels distant. I’m trying to arrive at a definition/rule that helps identifying when this is possible. If u dont mind sharing some specific example would be very helpful 🙏

Heey Petar, in your experience how does UX gets impacted negatively? Did the JS commands help? Thanks you for sharing 🙏

Hey something like it yes, there's a bare minimal proof of concept here github.com/samaraolivei...