sorry to tag people, but i think this would be interesting to have in LiveView: @josevalim @chrismccord
from my understanding after talking with a CSS DevRel from Google last week, the JS API is more supported than the CSS version for View Transitions. Would this be something that morphdom would need to have or is there an easy way we can “monkey patch” the applyDiff as was done in his example?
The main problem, in my understanding, is that you need to use document.startTransition(async() => applyDiff()), where all of your DOM manipulation needs to happen within the callback.
I’ve asked chris about this some time ago on slack. The response was that we doesn’t want to add non-stable APIs into LV, but is open to consider callbacks/hooks, so people can add the necessary integration by themselves.
that’s actually what i’m looking for: if we can have a callback/hook then it would be easy for us to add this in, even if the API changes.
From my understanding, this is “stable” API in the sense that it’s going to be used, and it’s in next version of Safari for both iOS and MacOS, and is already in Chrome.
I think using view transitions with hooks is doable, but not a good idea.
We would have to add manual UI updates with https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#push_event/3, which would kill some of the benefits that LV brings to the table.
But I understand the point of not having non-stable APIs into LV core.
I’m not talking about the literal js hooks, but another (likely new/to be proposed) callback similar to e.g. the dom callback you have on the LV constructor, which would allow you to wrap the morphdom change application with the view transition api.
Got it, sorry for misunderstanding you. Yes, having a callback like the one you mentioned is a great idea to handle the API usage.
