Unit tests

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -5942,6 +5942,90 @@ function testDomRouter(
         `);
       });
     });
+
+    describe("view transitions", () => {
+      it("applies view transitions to navigations when opted in", async () => {
+        let testWindow = getWindow("/");
+        let spy = jest.fn((cb) => {
+          cb();
+          return {
+            ready: Promise.resolve(),
+            finished: Promise.resolve(),
+            updateCallbackDone: Promise.resolve(),
+            skipTransition: () => {},
+          };
+        });
+        testWindow.document.startViewTransition = spy;
+
+        let router = createTestRouter(
+          [
+            {
+              path: "/",
+              Component() {
+                return (
+                  <div>
+                    <Link to="/a">/a</Link>
+                    <Link to="/b" unstable_viewTransition>
+                      /b
+                    </Link>
+                    <Form action="/c">
+                      <button type="submit">/c</button>
+                    </Form>
+                    <Form action="/d" unstable_viewTransition>
+                      <button type="submit">/d</button>
+                    </Form>
+                    <Outlet />
+                  </div>
+                );
+              },
+              children: [
+                {
+                  index: true,
+                  Component: () => <h1>Home</h1>,
+                },
+                {
+                  path: "a",
+                  Component: () => <h1>A</h1>,
+                },
+                {
+                  path: "b",
+                  Component: () => <h1>B</h1>,
+                },
+                {
+                  path: "c",
+                  action: () => null,
+                  Component: () => <h1>C</h1>,
+                },
+                {
+                  path: "d",
+                  action: () => null,
+                  Component: () => <h1>D</h1>,
+                },
+              ],
+            },
+          ],
+          { window: testWindow }
+        );
+        render(<RouterProvider router={router} />);
+
+        expect(screen.getByText("Home")).toBeDefined();
+        fireEvent.click(screen.getByText("/a"));
+        await waitFor(() => screen.getByText("A"));
+        expect(spy).not.toHaveBeenCalled();
+
+        fireEvent.click(screen.getByText("/b"));
+        await waitFor(() => screen.getByText("B"));
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        fireEvent.click(screen.getByText("/c"));
+        await waitFor(() => screen.getByText("C"));
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        fireEvent.click(screen.getByText("/d"));
+        await waitFor(() => screen.getByText("D"));
+        expect(spy).toHaveBeenCalledTimes(2);
+      });
+    });
   });
 }
 

packages/react-router-dom/index.tsx

@@ -237,6 +237,7 @@ export function createBrowserRouter(
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
     mapRouteProperties,
+    window: opts?.window,
   }).initialize();
 }
 
@@ -254,6 +255,7 @@ export function createHashRouter(
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
     mapRouteProperties,
+    window: opts?.window,
   }).initialize();
 }
 

packages/react-router-dom/server.tsx

@@ -300,6 +300,9 @@ export function createStaticRouter(
     get routes() {
       return dataRoutes;
     },
+    get window() {
+      return undefined;
+    },
     initialize() {
       throw msg("initialize");
     },

packages/react-router/lib/components.tsx

@@ -170,7 +170,8 @@ export function RouterProvider({
     (newState: RouterState, { viewTransitionOpts }) => {
       if (
         !viewTransitionOpts ||
-        typeof document.startViewTransition !== "function"
+        router.window == null ||
+        typeof router.window.document.startViewTransition !== "function"
       ) {
         // Mid-navigation state update, or startViewTransition isn't available
         optInStartTransition(() => setStateImpl(newState));
@@ -194,7 +195,7 @@ export function RouterProvider({
         });
       }
     },
-    [optInStartTransition, transition, renderDfd]
+    [optInStartTransition, transition, renderDfd, router.window]
   );
 
   // Need to use a layout effect here so we are subscribed early enough to
@@ -213,10 +214,10 @@ export function RouterProvider({
   // DOM and then wait on the Deferred to resolve (indicating the DOM update has
   // happened)
   React.useEffect(() => {
-    if (renderDfd && pendingState) {
+    if (renderDfd && pendingState && router.window) {
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
-      let transition = document.startViewTransition(async () => {
+      let transition = router.window.document.startViewTransition(async () => {
         optInStartTransition(() => setStateImpl(newState));
         await renderPromise;
       });
@@ -228,7 +229,7 @@ export function RouterProvider({
       });
       setTransition(transition);
     }
-  }, [optInStartTransition, pendingState, renderDfd]);
+  }, [optInStartTransition, pendingState, renderDfd, router.window]);
 
   // When the new location finally renders and is committed to the DOM, this
   // effect will run to resolve the transition

packages/router/__tests__/router-test.ts

@@ -17683,6 +17683,70 @@ describe("a router", () => {
       expect(router.state.matches[0].route.path).toBe("/path");
     });
   });
+
+  describe("view transitions", () => {
+    it("only enables view transitions when specified for the navigation", () => {
+      let t = setup({
+        routes: [{ path: "/" }, { path: "/a" }, { path: "/b" }],
+      });
+      let spy = jest.fn();
+      let unsubscribe = t.router.subscribe(spy);
+
+      // PUSH / -> /a - w/o transition
+      t.navigate("/a");
+      expect(spy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          navigation: IDLE_NAVIGATION,
+          location: expect.objectContaining({ pathname: "/a" }),
+        }),
+        { viewTransitionOpts: undefined }
+      );
+
+      // PUSH /a -> /b - w/ transition
+      t.navigate("/b", { unstable_viewTransition: true });
+      expect(spy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          navigation: IDLE_NAVIGATION,
+          location: expect.objectContaining({ pathname: "/b" }),
+        }),
+        {
+          viewTransitionOpts: {
+            currentLocation: expect.objectContaining({ pathname: "/a" }),
+            nextLocation: expect.objectContaining({ pathname: "/b" }),
+          },
+        }
+      );
+
+      // POP /b -> /a - w/ transition (cached from above)
+      t.navigate(-1);
+      expect(spy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          navigation: IDLE_NAVIGATION,
+          location: expect.objectContaining({ pathname: "/a" }),
+        }),
+        {
+          viewTransitionOpts: {
+            // Args reversed on POP so same hooks apply
+            currentLocation: expect.objectContaining({ pathname: "/a" }),
+            nextLocation: expect.objectContaining({ pathname: "/b" }),
+          },
+        }
+      );
+
+      // POP /a -> / - No transition
+      t.navigate(-1);
+      expect(spy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          navigation: IDLE_NAVIGATION,
+          location: expect.objectContaining({ pathname: "/" }),
+        }),
+        { viewTransitionOpts: undefined }
+      );
+
+      unsubscribe();
+      t.router.dispose();
+    });
+  });
 });
 
 // We use a slightly modified version of createDeferred here that incoudes the

packages/router/router.ts

@@ -80,6 +80,14 @@ export interface Router {
    */
   get routes(): AgnosticDataRouteObject[];
 
+  /**
+   * @internal
+   * PRIVATE - DO NOT USE
+   *
+   * Return the window associated with the router
+   */
+  get window(): RouterInit["window"];
+
   /**
    * @internal
    * PRIVATE - DO NOT USE
@@ -2591,6 +2599,9 @@ export function createRouter(init: RouterInit): Router {
     get routes() {
       return dataRoutes;
     },
+    get window() {
+      return routerWindow;
+    },
     initialize,
     subscribe,
     enableScrollRestoration,