Extending LiveView with View Transition API support

[spicychickensauce]

I’ve previously explored what is possible today with hacks to implement view transitions in our apps:

View Transition API in LiveView

View Transition API just landed in Firefox, which means it’s soon fully ready to be used. Unfortunately, I haven’t found a good way yet to make use of it with liveview. There seems to be a hacky way available: https://forum.elixirforum.com/t/does-liveview-support-view-transitions/55205/4 But this wraps way too much code inside the startViewTransition callback, not just the dom mutation. Because of that, There is a big delay between the navigation click and the end of the transition. I have…

I have since created a fork to implement proper support.
I’m quite happy with it and hope this can make it into phoenix.

Here is the fork: GitHub - spicychickensauce/phoenix_live_view at implement-view-transitions · GitHub
Here is a demo app using the fork: LiveView View Transitions Demo · GitHub
And here is a quick video of that demo: https://imgur.com/a/OvhnSVm

The API adds two new functions:
start_view_transition(socket, options), needed to trigger page transitions + same document transitions on update.
and
JS.start_view_transition(js, options), needed when using JS.navigate() or similar.

The current implementation is still a bit hacky and the passed options are not fully conistent yet, but before polishing this more I’d ideally like to get some buy in from any members of the phoenix team first.

I’m also open to any suggestions on how to improve this or on use cases that couldn’t be implemented using this API.