Repository: facebook/react
File: fixtures/view-transition/src/components/App.js (JavaScript)

Code before:
        });
      });
    }
  }
  useEffect(() => {
    if (enableNavigationAPI) {
      window.navigation.addEventListener('navigate', event => {
        if (!event.canIntercept) {
          return;
        }
        const newURL = new URL(event.destination.url);
        event.intercept({
          handler() {
            let promise;
            startTransition(() => {
              promise = new Promise(resolve => {
                setRouterState({
                  url: newURL.pathname + newURL.search,
                  pendingNav: resolve,
                });
              });
            });
            return promise;
          },
          commit: 'after-transition', // plz ship this, browsers
        });
      });
    } else {
      window.addEventListener('popstate', () => {
        // This should not animate because restoration has to be synchronous.
        // Even though it's a transition.
        startTransition(() => {
          setRouterState({
            url: document.location.pathname + document.location.search,
            pendingNav() {
              // Noop. URL has already updated.
            },
          });
        });
      });
    }
  }, []);
  const pendingNav = routerState.pendingNav;
  useLayoutEffect(() => {
    pendingNav();
  }, [pendingNav]);
  return (
    <Chrome title="Hello World" assets={assets}>
      <Page url={routerState.url} navigate={navigate} />
    </Chrome>
  );

Review comment (suggestion):
This is an example of how a canonical router implementation could add these types.

We could even go as far as just listening to Navigation Events ourselves in React and have these built-in but it's probably better to leave that up to routers since the intercepts could be doing things we're not aware of.

Code after:
          },
        });
      });
    }
  }
  useEffect(() => {
    if (enableNavigationAPI) {
      window.navigation.addEventListener('navigate', event => {
        if (!event.canIntercept) {
          return;
        }
        const navigationType = event.navigationType;
        const previousIndex = window.navigation.currentEntry.index;
        const newURL = new URL(event.destination.url);
        event.intercept({
          handler() {
            let promise;
            startTransition(() => {
              addTransitionType('navigation-' + navigationType);
              if (navigationType === 'traverse') {
                // For traverse types it's useful to distinguish going back or forward.
                const nextIndex = event.destination.index;
                if (nextIndex > previousIndex) {
                  addTransitionType('navigation-forward');
                } else if (nextIndex < previousIndex) {
                  addTransitionType('navigation-back');
                }
              }
              promise = new Promise(resolve => {
                setRouterState({
                  url: newURL.pathname + newURL.search,
                  pendingNav: resolve,
                });
              });
            });
            return promise;
          },
          commit: 'after-transition', // plz ship this, browsers
        });
      });
    } else {
      window.addEventListener('popstate', () => {
        // This should not animate because restoration has to be synchronous.
        // Even though it's a transition.
        startTransition(() => {
          setRouterState({
            url: document.location.pathname + document.location.search,
            pendingNav() {
              // Noop. URL has already updated.
            },
          });