Lift viewTransition function execution up to router

examples/view-transitions/src/index.css

@@ -57,6 +57,10 @@
   contain: layout;
 }
 
+.image-list a.transitioning img {
+  view-transition-name: image-expand;
+}
+
 .image-detail img {
   max-width: 100%;
   view-transition-name: image-expand;
@@ -73,11 +77,11 @@
   width: fit-content;
 }
 
-.image-detail h1 {
+.image-list a.transitioning p {
   view-transition-name: image-title;
-  width: fit-content;
 }
 
-::view-transition-old(image-title),
-::view-transition-new(image-title) {
+.image-detail h1 {
+  view-transition-name: image-title;
+  width: fit-content;
 }

examples/view-transitions/src/main.tsx

@@ -10,7 +10,6 @@ import {
   Outlet,
   RouterProvider,
   unstable_useViewTransition,
-  unstable_useViewTransitions,
   useLoaderData,
   useNavigation,
   useParams,
@@ -143,40 +142,6 @@ const router = createBrowserRouter(
         {
           path: "images",
           Component() {
-            // Animate list image into detail image
-            // unstable_useViewTransitions(({ nextLocation }) => {
-            //   // TODO: Should we be able to return false here to opt out of
-            //   // calling startViewTransition?
-            //   if (!/^\/images\/\d+$/.test(nextLocation.pathname)) {
-            //     return false;
-            //   }
-
-            //   LOG("before dom update");
-            //   let anchor = document.querySelector(
-            //     `.image-list a[href="${nextLocation.pathname}"]`
-            //   );
-            //   let title = anchor?.previousElementSibling!;
-            //   let img = anchor?.firstElementChild!;
-            //   // @ts-ignore
-            //   title.style.viewTransitionName = "image-title";
-            //   // @ts-ignore
-            //   img.style.viewTransitionName = "image-expand";
-
-            //   return (transition) => {
-            //     LOG("after dom update", transition);
-            //     transition.ready.finally(() => {
-            //       LOG("transition ready");
-            //     });
-            //     transition.finished.finally(() => {
-            //       LOG("transition finished");
-            //       // @ts-ignore
-            //       title.style.viewTransitionName = "";
-            //       // @ts-ignore
-            //       img.style.viewTransitionName = "";
-            //     });
-            //   };
-            // });
-
             return (
               <div className="image-list">
                 <h1>Image List</h1>
@@ -187,28 +152,8 @@ const router = createBrowserRouter(
                       to={`/images/${idx}`}
                       unstable_viewTransition
                     >
-                      {({ isTransitioning }) => (
-                        <>
-                          <p
-                            style={{
-                              viewTransitionName: isTransitioning
-                                ? "image-title"
-                                : "",
-                            }}
-                          >
-                            Image Number {idx}
-                          </p>
-                          <img
-                            src={src}
-                            alt={`Img ${idx}`}
-                            style={{
-                              viewTransitionName: isTransitioning
-                                ? "image-expand"
-                                : "",
-                            }}
-                          />
-                        </>
-                      )}
+                      <p>Image Number {idx}</p>
+                      <img src={src} alt={`Img ${idx}`} />
                     </NavLink>
                   ))}
                 </div>
@@ -220,41 +165,6 @@ const router = createBrowserRouter(
           path: "images/:id",
           Component() {
             let params = useParams();
-
-            // // Animate detail image into list image
-            // unstable_useViewTransitions(({ currentLocation, nextLocation }) => {
-            //   // TODO: Should we be able to return false here to opt out of
-            //   // calling startViewTransition?
-            //   if (!/^\/images$/.test(nextLocation.pathname)) {
-            //     return false;
-            //   }
-
-            //   LOG("before dom update");
-
-            //   return (transition) => {
-            //     LOG("after dom update", transition);
-            //     let anchor = document.querySelector(
-            //       `.image-list a[href="${currentLocation.pathname}"]`
-            //     );
-            //     let title = anchor?.previousElementSibling!;
-            //     let img = anchor?.firstElementChild!;
-            //     // @ts-ignore
-            //     title.style.viewTransitionName = "image-title";
-            //     // @ts-ignore
-            //     img.style.viewTransitionName = "image-expand";
-            //     transition.ready.finally(() => {
-            //       LOG("transition ready");
-            //     });
-            //     transition.finished.finally(() => {
-            //       LOG("transition finished");
-            //       // @ts-ignore
-            //       title.style.viewTransitionName = "";
-            //       // @ts-ignore
-            //       img.style.viewTransitionName = "";
-            //     });
-            //   };
-            // });
-
             return (
               <div className="image-detail">
                 <h1>Image Number {params.id}</h1>
@@ -270,34 +180,11 @@ const router = createBrowserRouter(
     future: {
       // Prevent react router from await-ing defer() promises for revalidating
       // loaders, which includes changing search params on the active route
-      v7_fallbackOnDeferRevalidation: true,
+      unstable_fallbackOnDeferRevalidation: true,
     },
   }
 );
 
-function NavImage({ src, idx }: { src: string; idx: number }) {
-  let href = `/images/${idx}`;
-  let vt = unstable_useViewTransition(href);
-  return (
-    <div>
-      <p
-        style={{ viewTransitionName: vt.isTransitioning ? "image-title" : "" }}
-      >
-        Image Number {idx}
-      </p>
-      <Link to={href}>
-        <img
-          src={src}
-          alt={`Img ${idx}`}
-          style={{
-            viewTransitionName: vt.isTransitioning ? "image-expand" : "",
-          }}
-        />
-      </Link>
-    </div>
-  );
-}
-
 const rootElement = document.getElementById("root") as HTMLElement;
 ReactDOMClient.createRoot(rootElement).render(
   <React.StrictMode>

packages/react-router-dom/index.tsx

@@ -1532,8 +1532,6 @@ function useViewTransitions(
   }, [router, viewTransition]);
 }
 
-export { useViewTransitions as unstable_useViewTransitions };
-
 /**
  * Localized version of useViewTransitions to enable view transitions for a
  * specific destination href. Returns an isTransitioning value that you can

packages/react-router/lib/components.tsx

@@ -97,6 +97,24 @@ export interface RouterProviderProps {
 */
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
+const FLUSH_SYNC = "flushSync";
+const flushSyncImpl = ReactDOM[FLUSH_SYNC];
+
+function flushSyncSafe(cb: () => void) {
+  if (flushSyncImpl) {
+    flushSyncImpl(cb);
+  } else {
+    cb();
+  }
+}
+
+function startTransitionSafe(cb: () => void) {
+  if (startTransitionImpl) {
+    startTransitionImpl(cb);
+  } else {
+    cb();
+  }
+}
 
 // FIXME: Remove
 function LOG(...args: any[]) {
@@ -119,95 +137,57 @@ export function RouterProvider({
   });
   let { v7_startTransition } = future || {};
   let setState = React.useCallback<RouterSubscriber>(
-    (newState: RouterState, { completedNavigation }) => {
-      function maybeStartTransition(cb: () => void) {
-        if (v7_startTransition && startTransitionImpl) {
-          startTransitionImpl(cb);
-        } else {
-          cb();
-        }
-      }
-
+    (newState: RouterState, { viewTransitionOpts }) => {
       // Simple update for non-completeNavigation/non-startViewTransition navs
       if (
-        !completedNavigation ||
-        completedNavigation.viewTransitions == null ||
-        typeof document.startViewTransition !== "function" ||
-        completedNavigation.viewTransitions.length === 0 ||
-        completedNavigation.viewTransitions.every((vt) => vt === false)
+        !viewTransitionOpts ||
+        typeof document.startViewTransition !== "function"
       ) {
-        LOG("no transitions to apply");
-        maybeStartTransition(() => setStateImpl(newState));
-        return;
-      }
-
-      // TODO: Can the execution of these lift up into the router?  We should
-      // have better control over which ones to execute there I think and can
-      // hopefully do better POP-key/location matching
-
-      // Run user-provided functions, short circuiting on false
-      LOG(
-        "calling pre-dom-update functions. Num:",
-        completedNavigation.viewTransitions.length
-      );
-      let callbacks = completedNavigation.viewTransitions.map((vt) =>
-        typeof vt === "function"
-          ? vt({
-              historyAction: newState.historyAction,
-              currentLocation: completedNavigation?.prevLocation,
-              nextLocation: newState.location,
-            })
-          : vt
-      );
-
-      if (callbacks.every((cb) => cb === false)) {
-        LOG("user opted out of startViewTransition with returned false");
-        maybeStartTransition(() => setStateImpl(newState));
+        LOG("updating state without startViewTransition");
+        if (v7_startTransition) {
+          startTransitionSafe(() => setStateImpl(newState));
+        } else {
+          setStateImpl(newState);
+        }
         return;
       }
 
-      // FIXME: Make this defensive for React 17!
+      // Flush a ViewTransitionContext update to apply classes/styles to the
+      // DOM prior to startViewTransition()
       LOG("flushSync(() => setVtContext({ isTransitioning: true }))");
-      ReactDOM.flushSync(() => {
+      flushSyncSafe(() => {
         setVtContext({
           isTransitioning: true,
           historyAction: newState.historyAction,
-          currentLocation: completedNavigation.prevLocation,
+          currentLocation: viewTransitionOpts.prevLocation,
           nextLocation: newState.location,
         });
       });
 
+      // Synchronously update the DOM for the new route inside startViewTransition()
+      // Note: startViewTransition/startTransition/flushSync don't
+      // play nicely together so we don't call startTransition when view
+      // transitions are enabled.  document.startViewTransition needs
+      // React.flushSync for more advanced animations, and React.flushSync
+      // breaks React.startTransition "freezing" behavior if the destination
+      // route suspends without a boundary.
+      // TODO: We should add something to the docs to indicate this
       LOG("calling document.startViewTransition()");
       let transition = document.startViewTransition(() => {
-        // Note: startViewTransition/startTransition/flushSync don't
-        // play nicely together so we don't call startTransition when view
-        // transitions are enabled.
-        // - document.startViewTransition needs React.flushSync for more advanced animations)
-        // - React.flushSync breaks React.startTransition "freezing" behavior if the
-        //   destination route suspends without a boundary
-        //
-        // TODO: We should add something to the docs to indicate this
-
-        // Synchronously update the DOM with the new route
-        // FIXME: Make this defensive for React 17!
-        ReactDOM.flushSync(() => {
-          LOG("calling setState()");
-          setStateImpl(newState);
-        });
+        // Update DOM
+        LOG("flushSync(() => setStateImpl(newState))");
+        flushSyncSafe(() => setStateImpl(newState));
 
         // Run the post-DOM-update callbacks with the transition
-        callbacks.forEach(
+        viewTransitionOpts.callbacks.forEach(
           (cb) => typeof cb === "function" && cb && cb(transition)
         );
 
         // Cleanup DOM after the transitions completes
         LOG("waiting on transition.finished to unset isTransitioning");
         transition.finished.finally(() => {
-          // FIXME: Make this defensive for React 17!
           LOG("flushSync(() => setVtContext({ isTransitioning: false }))");
-          ReactDOM.flushSync(() => {
-            setVtContext({ isTransitioning: false });
-          });
+          flushSyncSafe(() => setVtContext({ isTransitioning: false }));
         });
       });
     },