[Feature Request] Support for the View Transition API

[GalvinGao]

The View Transitions API is currently experimental but has received some adoptions already. As soon as I discovered wouter I immediately fall in love with its simplicity design. No offenses, but complications around react-router-dom has drove me crazy and I just don't need all the loader abilities in my simple SPA. (sorry for going too far on this...)

However it seems that wouter hasn't support the View Transitions API yet. react-router-dom supported this under a unstable_viewTransition prop on <Link /> which I think is a pretty nice trade-off. Will wouter consider adding this prop to the <Link /> component?

[molefrog]

Hi, that is a really nice suggestion. Looks like RR calls startViewTransition under the hood, and I doubt we can fully recreate this API for the sake of size. However, I think we can provide a way for users to control how they want transition to be executed. Here is how I see the API:

// top-level component
const router = useRouter()

router.on("navigate", (options) => {
  // `options` here is what passed as navigations options to Link or when `setLocation` is called
  if (options.viewTransition) {
    startViewTransition(...)
  }
})

<Link href="/" viewTransition /> 

The idea is the provide a global hook that you can subscribe to when the navigation happens. This approach is similar to https://github.com/Charca/view-transitions-live/blob/0c5125f198b1e08963fe2b2ca5a10d06b2534df3/src/scripts/navigation.js#L11

Also, having this hook will potentially allow us to solve #300 (though, additional research is needed)

[ugnius-s]

Does anyone know a workaround for this which can be implemented now?

[PhilipTrauner]

Hi, that is a really nice suggestion. Looks like RR calls startViewTransition under the hood, and I doubt we can fully recreate this API for the sake of size. However, I think we can provide a way for users to control how they want transition to be executed. Here is how I see the API:

// top-level component
const router = useRouter()

router.on("navigate", (options) => {
  // `options` here is what passed as navigations options to Link or when `setLocation` is called
  if (options.viewTransition) {
    startViewTransition(...)
  }
})

<Link href="/" viewTransition /> 

The idea is the provide a global hook that you can subscribe to when the navigation happens. This approach is similar to Charca/view-transitions-live@0c5125f/src/scripts/navigation.js#L11

Also, having this hook will potentially allow us to solve #300 (though, additional research is needed)

@molefrog would you be willing to accept a PR that implements this hook API?

[arturmuller]

Single document view transitions have become baseline recently (https://caniuse.com/view-transitions) so it would be really awesome to get this off the ground.

I am willing to take a crack at a PR, but haven't contributed to this repo before, so pointers for where to start would be appreciated @molefrog!