ViewTransitions in Navigation (facebook#32028)

This adds navigation support to the View Transition fixture using both
`history.pushState/popstate` and the Navigation API models.

Because `popstate` does scroll restoration synchronously at the end of
the event, but `startViewTransition` cannot start synchronously, it
would observe the "old" state as after applying scroll restoration. This
leads to weird artifacts. So we intentionally do not support View
Transitions in `popstate`. If it suspends anyway for some other reason,
then scroll restoration is broken anyway and then it is supported. We
don't have to do anything here because this is already how things worked
because the sync `popstate` special case already included the sync lane
which opts it out of View Transitions.

For the Navigation API, scroll restoration can be blocked. The best way
to do this is to resolve the Navigation API promise after React has
applied its mutation. We can detect if there's currently any pending
navigation and wait to resolve the `startViewTransition` until it
finishes and any scroll restoration has been applied.


https://github.com/user-attachments/assets/f53b3282-6315-4513-b3d6-b8981d66964e

There is a subtle thing here. If we read the viewport metrics before
scroll restoration has been applied, then we might assume something is
or isn't going to be within the viewport incorrectly. This is evident on
the "Slide In from Left" example. When we're going forward to that page
we shift the scroll position such that it's going to appear in the
viewport. If we did this before applying scroll restoration, it would
not animate because it wasn't in the viewport then. Therefore, we need
to run the after mutation phase after scroll restoration.

A consequence of this is that you have to resolve Navigation in
`useInsertionEffect` as otherwise it leads to a deadlock (which
eventually gets broken by `startViewTransition`'s timeout of 10
seconds). Another consequence is that now `useLayoutEffect` observes the
restored state. However, I think what we'll likely do is move the layout
phase to before the after mutation phase which also ensures that
auto-scrolling inside `useLayoutEffect` are considered in the viewport
measurements as well.

Author: sebmarkbage

fixtures/view-transition/server/render.js

@@ -20,24 +20,27 @@ export default function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
-    bootstrapScripts: [assets['main.js']],
-    onShellReady() {
-      // If something errored before we started streaming, we set the error code appropriately.
-      res.statusCode = didError ? 500 : 200;
-      res.setHeader('Content-type', 'text/html');
-      pipe(res);
-    },
-    onShellError(x) {
-      // Something errored before we could complete the shell so we emit an alternative shell.
-      res.statusCode = 500;
-      res.send('<!doctype><p>Error</p>');
-    },
-    onError(x) {
-      didError = true;
-      console.error(x);
-    },
-  });
+  const {pipe, abort} = renderToPipeableStream(
+    <App assets={assets} initialURL={url} />,
+    {
+      bootstrapScripts: [assets['main.js']],
+      onShellReady() {
+        // If something errored before we started streaming, we set the error code appropriately.
+        res.statusCode = didError ? 500 : 200;
+        res.setHeader('Content-type', 'text/html');
+        pipe(res);
+      },
+      onShellError(x) {
+        // Something errored before we could complete the shell so we emit an alternative shell.
+        res.statusCode = 500;
+        res.send('<!doctype><p>Error</p>');
+      },
+      onError(x) {
+        didError = true;
+        console.error(x);
+      },
+    }
+  );
   // Abandon and switch to client rendering after 5 seconds.
   // Try lowering this to see the client recover.
   setTimeout(abort, 5000);

fixtures/view-transition/src/components/App.js

@@ -1,12 +1,79 @@
-import React from 'react';
+import React, {
+  startTransition,
+  useInsertionEffect,
+  useEffect,
+  useState,
+} from 'react';
 
 import Chrome from './Chrome';
 import Page from './Page';
 
-export default function App({assets}) {
+const enableNavigationAPI = typeof navigation === 'object';
+
+export default function App({assets, initialURL}) {
+  const [routerState, setRouterState] = useState({
+    pendingNav: () => {},
+    url: initialURL,
+  });
+  function navigate(url) {
+    if (enableNavigationAPI) {
+      window.navigation.navigate(url);
+    } else {
+      startTransition(() => {
+        setRouterState({
+          url,
+          pendingNav() {
+            window.history.pushState({}, '', url);
+          },
+        });
+      });
+    }
+  }
+  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;
+  useInsertionEffect(() => {
+    pendingNav();
+  }, [pendingNav]);
   return (
     <Chrome title="Hello World" assets={assets}>
-      <Page />
+      <Page url={routerState.url} navigate={navigate} />
     </Chrome>
   );
 }

fixtures/view-transition/src/components/Page.js

@@ -1,8 +1,5 @@
 import React, {
   unstable_ViewTransition as ViewTransition,
-  startTransition,
-  useEffect,
-  useState,
   unstable_Activity as Activity,
 } from 'react';
 
@@ -37,13 +34,8 @@ function Component() {
   );
 }
 
-export default function Page() {
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    startTransition(() => {
-      setShow(true);
-    });
-  }, []);
+export default function Page({url, navigate}) {
+  const show = url === '/?b';
   const exclamation = (
     <ViewTransition name="exclamation">
       <span>!</span>
@@ -53,9 +45,7 @@ export default function Page() {
     <div>
       <button
         onClick={() => {
-          startTransition(() => {
-            setShow(show => !show);
-          });
+          navigate(show ? '/?a' : '/?b');
         }}>
         {show ? 'A' : 'B'}
       </button>
@@ -75,6 +65,15 @@ export default function Page() {
           <ViewTransition>
             {show ? <div>hello{exclamation}</div> : <section>Loading</section>}
           </ViewTransition>
+          <p>scroll me</p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
           {show ? null : (
             <ViewTransition>
               <div>world{exclamation}</div>

fixtures/view-transition/src/index.js

@@ -3,4 +3,10 @@ import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 
-hydrateRoot(document, <App assets={window.assetManifest} />);
+hydrateRoot(
+  document,
+  <App
+    assets={window.assetManifest}
+    initialURL={document.location.pathname + document.location.search}
+  />
+);

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -1205,22 +1205,48 @@ export function startViewTransition(
   layoutCallback: () => void,
   passiveCallback: () => mixed,
 ): boolean {
-  const ownerDocument =
+  const ownerDocument: Document =
     rootContainer.nodeType === DOCUMENT_NODE
-      ? rootContainer
+      ? (rootContainer: any)
       : rootContainer.ownerDocument;
   try {
     // $FlowFixMe[prop-missing]
     const transition = ownerDocument.startViewTransition({
       update() {
         mutationCallback();
         // TODO: Wait for fonts.
-        afterMutationCallback();
+        const ownerWindow = ownerDocument.defaultView;
+        const pendingNavigation =
+          ownerWindow.navigation && ownerWindow.navigation.transition;
+        if (pendingNavigation) {
+          return pendingNavigation.finished.then(
+            afterMutationCallback,
+            afterMutationCallback,
+          );
+        } else {
+          afterMutationCallback();
+        }
       },
       types: null, // TODO: Provide types.
     });
     // $FlowFixMe[prop-missing]
     ownerDocument.__reactViewTransition = transition;
+    if (__DEV__) {
+      transition.ready.then(undefined, (reason: mixed) => {
+        if (
+          typeof reason === 'object' &&
+          reason !== null &&
+          reason.name === 'TimeoutError'
+        ) {
+          console.error(
+            'A ViewTransition timed out because a Navigation stalled. ' +
+              'This can happen if a Navigation is blocked on React itself. ' +
+              "Such as if it's resolved inside useLayoutEffect. " +
+              'This can be solved by moving the resolution to useInsertionEffect.',
+          );
+        }
+      });
+    }
     transition.ready.then(layoutCallback, layoutCallback);
     transition.finished.then(() => {
       // $FlowFixMe[prop-missing]

packages/react-reconciler/src/ReactFiberLane.js

@@ -350,6 +350,10 @@ export function getNextLanesToFlushSync(
   //
   // The main use case is updates scheduled by popstate events, which are
   // flushed synchronously even though they are transitions.
+  // Note that we intentionally treat this as a sync flush to include any
+  // sync updates in a single pass but also intentionally disables View Transitions
+  // inside popstate. Because they can start synchronously before scroll restoration
+  // happens.
   const lanesToFlush = SyncUpdateLanes | extraLanesToForceSync;
 
   // Early bailout if there's no pending work left.

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -3507,7 +3507,12 @@ function flushMutationEffects(): void {
 }
 
 function flushLayoutEffects(): void {
-  if (pendingEffectsStatus !== PENDING_LAYOUT_PHASE) {
+  if (
+    pendingEffectsStatus !== PENDING_LAYOUT_PHASE &&
+    // If a startViewTransition times out, we might flush this earlier than
+    // after mutation phase. In that case, we just skip the after mutation phase.
+    pendingEffectsStatus !== PENDING_AFTER_MUTATION_PHASE
+  ) {
     return;
   }
   pendingEffectsStatus = NO_PENDING_EFFECTS;
@@ -3790,7 +3795,6 @@ export function flushPendingEffects(wasDelayedCommit?: boolean): boolean {
   // Returns whether passive effects were flushed.
   flushMutationEffects();
   flushLayoutEffects();
-  flushAfterMutationEffects();
   return flushPassiveEffects(wasDelayedCommit);
 }