Fix client-side exception

[javascripter]

Why

Fixes https://github.com/shuding/next-view-transitions/issues/7

A previous PR tried to fix the client-side exception but broke the browser's back-forward animation. This PR tries to solve the client-side exception while keeping the browser back-forward animation working.

How

1. Rewrite the global currentViewTransition and usage of useSyncExternalStore to useState + useEffect combination.

2. Add a cleanup function inside useEffect to fix the client-side exception.

window.removeEventListener('popstate', onPopState)

Test Plan

The client-side error can be reproduced by navigating to another page via SPA, and then repeatedly moving back and forth fast.

I confirmed the following behaviors on this branch in the example app:

• the client-side error no longer occurs
• "Go to the Demo" Link navigation still animates
• The browser back-forward animation still works

https://github.com/shuding/next-view-transitions/assets/13040/6cceb484-6d48-4126-89aa-e4d793ca4570

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-view-transitions-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 6, 2024 1:24pm