feat: support view transitions

examples/40_view_transitions/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "40_view_transitions",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-server-dom-webpack": "19.0.0",
+    "waku": "0.21.18"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "typescript": "5.7.3"
+  }
+}

examples/40_view_transitions/src/components/AboutPage.tsx

@@ -0,0 +1,25 @@
+const AboutPage = () => (
+  <div style={{ padding: '2rem' }}>
+    <h1
+      style={{
+        viewTransitionName: 'page-title',
+        fontSize: '2rem',
+        marginBottom: '1rem',
+      }}
+    >
+      About Waku
+    </h1>
+    <div
+      style={{
+        viewTransitionName: 'page-content',
+        backgroundColor: '#f8fafc',
+        padding: '2rem',
+        borderRadius: '0.5rem',
+      }}
+    >
+      <p>This is the about page with a different background color.</p>
+    </div>
+  </div>
+);
+
+export default AboutPage;

examples/40_view_transitions/src/components/HomePage.tsx

@@ -0,0 +1,25 @@
+const HomePage = () => (
+  <div style={{ padding: '2rem' }}>
+    <h1
+      style={{
+        viewTransitionName: 'page-title',
+        fontSize: '2rem',
+        marginBottom: '1rem',
+      }}
+    >
+      Waku view transitions
+    </h1>
+    <div
+      style={{
+        viewTransitionName: 'page-content',
+        backgroundColor: '#e2e8f0',
+        padding: '2rem',
+        borderRadius: '0.5rem',
+      }}
+    >
+      <p>This is the home page. Navigate to see view transitions in action!</p>
+    </div>
+  </div>
+);
+
+export default HomePage;

examples/40_view_transitions/src/components/RootLayout.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { Link } from 'waku/router/client';
+import '../styles.css';
+
+const RootLayout = ({ children }: { children: ReactNode }) => (
+  <div>
+    <title>Waku</title>
+    <nav style={{ padding: '1rem', borderBottom: '1px solid #e2e8f0' }}>
+      <ul style={{ display: 'flex', gap: '1rem' }}>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+      </ul>
+    </nav>
+    {children}
+  </div>
+);
+
+export default RootLayout;

examples/40_view_transitions/src/entries.tsx

@@ -0,0 +1,34 @@
+import { createPages } from 'waku/router/server';
+import type { PathsForPages } from 'waku/router';
+
+import HomePage from './components/HomePage';
+import AboutPage from './components/AboutPage';
+import RootLayout from './components/RootLayout';
+
+const pages = createPages(async ({ createPage, createLayout }) => [
+  createLayout({
+    render: 'static',
+    path: '/',
+    component: RootLayout,
+  }),
+
+  createPage({
+    render: 'static',
+    path: '/',
+    component: HomePage,
+  }),
+
+  createPage({
+    render: 'static',
+    path: '/about',
+    component: AboutPage,
+  }),
+]);
+
+declare module 'waku/router' {
+  interface RouteConfig {
+    paths: PathsForPages<typeof pages>;
+  }
+}
+
+export default pages;

examples/40_view_transitions/src/styles.css

@@ -0,0 +1,43 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-from-right {
+  from {
+    transform: translateX(30px);
+  }
+}
+
+@keyframes slide-to-left {
+  to {
+    transform: translateX(-30px);
+  }
+}
+
+::view-transition-old(page-title) {
+  animation:
+    fade-out 0.5s ease-in-out forwards,
+    slide-to-left 0.5s ease-in-out forwards;
+}
+
+::view-transition-new(page-title) {
+  animation:
+    fade-in 0.5s ease-in-out forwards,
+    slide-from-right 0.5s ease-in-out forwards;
+}
+
+::view-transition-old(page-content) {
+  animation: fade-out 0.5s ease-in-out forwards;
+}
+
+::view-transition-new(page-content) {
+  animation: fade-in 0.5s ease-in-out forwards;
+}

examples/40_view_transitions/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx"
+  }
+}

packages/waku/src/router/client.ts

@@ -349,17 +349,29 @@ const InnerRouter = ({
   const changeRoute: ChangeRoute = useCallback(
     (route, options) => {
       const { skipRefetch } = options || {};
-      startTransition(() => {
-        if (!staticPathSet.has(route.path) && !skipRefetch) {
-          const rscPath = encodeRoutePath(route.path);
-          const rscParams = createRscParams(route.query);
-          refetch(rscPath, rscParams);
-        }
-        if (options.shouldScroll) {
-          handleScroll();
-        }
-        setRoute(route);
-      });
+      const performChange = () => {
+        startTransition(() => {
+          if (!staticPathSet.has(route.path) && !skipRefetch) {
+            const rscPath = encodeRoutePath(route.path);
+            const rscParams = createRscParams(route.query);
+            refetch(rscPath, rscParams);
+          }
+          if (options.shouldScroll) {
+            handleScroll();
+          }
+          setRoute(route);
+        });
+      };
+
+      if (
+        'startViewTransition' in document &&
+        route.path !== '/404' &&
+        !skipRefetch
+      ) {
+        document.startViewTransition(performChange);
+      } else {
+        performChange();
+      }
     },
     [refetch, staticPathSet],
   );
@@ -404,7 +416,10 @@ const InnerRouter = ({
           url,
         );
       }
-      changeRoute(parseRoute(url), { skipRefetch: true, shouldScroll: false });
+      changeRoute(parseRoute(url), {
+        skipRefetch: true,
+        shouldScroll: false,
+      });
     };
     locationListeners.add(callback);
     return () => {