Add deeper support for ViewTransitions.

[RowanDZ]

Hi,

Currently, the only support this router has, is for starting a document.startViewTransition via the viewTransition prop.
But, this is not enough in my case.

Take this use case for example:

• We have an item overview page
• We have an item details page

We want to do view transitions for the image for example.

In the overview, when clicking an item, it needs to know which item image to give a view-transition-name.
On the details page, when clicking the link for the overview, in the overview, we need to see from which item details page we come, to set again the view-transition-name on that particular item, and remove it again when the viewTransition is done.

I need to know where user comes FROM, or goes TO, before a viewTransition is starting, all packed in the return of a useViewTransitionState hook, so we can add a class of whatever based this info, as long as it's transitioning (transition done, then null/undefined). Also the params are important, so if they won't end up in the possible returned object, it would we good if can we have a function to get the params from a path, like react-router matchPath?

Currently, the code cannot support it at all, because diving in the source code, the core router only does this:

It doesn't put the returned ViewTransition instance in a constant, to be able to act on the viewTransition.finished promise.

Remix react-router does, but it doesn't support the {types: string[]} that I also need, and looking into their source code, I cried a little and searched for alternatives, and ended up here. I wanted to see if I can do a contribution, but it's imho pretty messy there. (I don't want to make people feel bad)

react-router has the useViewTransitionState, that is useful here, although I don't know if that works for both ways (I tried now with the Tanstack router, that I forgot my old code :), but I had it all working, except no vt-types )

[RowanDZ]

@tannerlinsley , if I make a MR, would you take a look at it?

I have it working, implemented as other hooks etc are, but I'm a bit confused about strict & from, so good change I made a mistake there. Also, I don't get the params working that should be coming from the useMatch hook? In the example, "neo" is a $catId

I only did the react-router implementation, but at it's core, it's coming from the router-core.

The hook is nicely working for "old" and "new" transitions (following the naming convention of the ViewTransitions css pseudo classes)

[schiller-manuel]

sure create a PR and also add an eample please, we can then have a closer look

[RowanDZ]

Okay, I found some time to continue, but I'm blocked for making a PR.

Some type tests are failing, because I've added a useViewTransitionState to the react-router, but not to the solid-router. And although it is only added to the types of react-router, the types for example in examples/solid/search-validator-adapters/tests/valibot.test.tsx, fail:

But look where it is getting it from:

(react-router)

I cannot figure out what is going on, can you?