test: add an example for 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 Us
+    </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',
+      }}
+    >
+      Welcome Home
+    </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,21 @@
+import type { ReactNode } from 'react';
+import { Link } from 'waku/router/client';
+import '../styles.css';
+
+const RootLayout = ({ children }: { children: ReactNode }) => (
+  <div>
+    <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"
+  }
+}