Skip to content

Commit 9127b57

Browse files
kentcdoddskentcdodds
committed
view transitions
1 parent b65e121 commit 9127b57

File tree

31 files changed

+266
-233
lines changed

31 files changed

+266
-233
lines changed

‎exercises/01.start/01.problem.vite-plugin/app/movie-card.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewTransition } from 'react'
12
import { href, Link } from 'react-router'
23
import { type Movie } from './movies-data.ts'
34

@@ -8,23 +9,25 @@ export function MovieCard({ movie }: { movie: Movie }) {
89
className="rr-card transition-shadow hover:shadow-lg"
910
>
1011
<div className="mb-4">
11-
<img
12-
src={movie.poster}
13-
alt={`${movie.title} poster`}
14-
className="mb-4 h-64 w-full rounded-lg object-cover"
15-
/>
16-
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
12+
<ViewTransition name={`movie-poster-${movie.id}`}>
13+
<img
14+
src={movie.poster}
15+
alt={`${movie.title} poster`}
16+
className="mb-4 h-64 w-full rounded-lg object-cover"
17+
/>
18+
</ViewTransition>
19+
<ViewTransition name={`movie-title-${movie.id}`}>
20+
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
21+
</ViewTransition>
1722
<p className="rr-text mb-2">Year: {movie.year}</p>
1823
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
1924
<p className="rr-text mb-4 text-sm text-gray-600">
2025
{movie.description}
2126
</p>
22-
<div className="flex items-center gap-2">
23-
<span
24-
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
25-
>
26-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
27-
</span>
27+
<div
28+
className={`rr-badge inline-block ${movie.isFavorite ? 'rr-badge-red' : ''}`}
29+
>
30+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
2831
</div>
2932
</div>
3033
</Link>

‎exercises/01.start/01.problem.vite-plugin/app/routes/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
1515
))
1616

1717
return (
18-
<main className="bg-background movies-page min-h-screen">
18+
<main className="bg-background min-h-screen">
1919
<title>React Router RSC Movies</title>
2020
<meta
2121
name="description"

‎exercises/01.start/01.problem.vite-plugin/app/routes/movie-details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
1818
const { movie } = loaderData
1919

2020
return (
21-
<main className="bg-background movie-details-page min-h-screen">
21+
<main className="bg-background min-h-screen">
2222
<title>{movie.title}</title>
2323
<meta name="description" content={movie.description} />
2424
<div className="mx-auto max-w-4xl px-6 py-16">

‎exercises/01.start/01.problem.vite-plugin/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"@react-router/serve": "7.9.3",
2020
"@remix-run/node-fetch-server": "0.10.0",
2121
"isbot": "^5",
22-
"react": "19.2.0",
23-
"react-dom": "19.2.0",
22+
"react": "19.3.0-canary-9724e3e6-20251008",
23+
"react-dom": "19.3.0-canary-9724e3e6-20251008",
2424
"react-lite-youtube-embed": "^2.5.6",
2525
"react-router": "7.9.3"
2626
},
@@ -30,8 +30,8 @@
3030
"@react-router/fs-routes": "7.9.3",
3131
"@tailwindcss/vite": "4.1.14",
3232
"@types/node": "24.7.0",
33-
"@types/react": "19.2.1",
34-
"@types/react-dom": "19.2.0",
33+
"@types/react": "19.2.2",
34+
"@types/react-dom": "19.2.1",
3535
"@vitejs/plugin-rsc": "0.4.32",
3636
"prettier": "^3.6.2",
3737
"tailwindcss": "4.1.14",

‎exercises/01.start/01.problem.vite-plugin/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"include": ["**/*.ts", "**/*.tsx", "./.react-router/types/**/*", "**/*.d.ts"],
33
"extends": ["@epic-web/config/typescript"],
44
"compilerOptions": {
5-
"types": ["vite/client", "@vitejs/plugin-rsc/types"],
5+
"types": ["vite/client", "@vitejs/plugin-rsc/types", "react/canary"],
66
"rootDirs": [".", "./.react-router/types"],
77
"baseUrl": "."
88
}

‎exercises/01.start/01.solution.vite-plugin/app/movie-card.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewTransition } from 'react'
12
import { href, Link } from 'react-router'
23
import { type Movie } from './movies-data.ts'
34

@@ -8,23 +9,25 @@ export function MovieCard({ movie }: { movie: Movie }) {
89
className="rr-card transition-shadow hover:shadow-lg"
910
>
1011
<div className="mb-4">
11-
<img
12-
src={movie.poster}
13-
alt={`${movie.title} poster`}
14-
className="mb-4 h-64 w-full rounded-lg object-cover"
15-
/>
16-
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
12+
<ViewTransition name={`movie-poster-${movie.id}`}>
13+
<img
14+
src={movie.poster}
15+
alt={`${movie.title} poster`}
16+
className="mb-4 h-64 w-full rounded-lg object-cover"
17+
/>
18+
</ViewTransition>
19+
<ViewTransition name={`movie-title-${movie.id}`}>
20+
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
21+
</ViewTransition>
1722
<p className="rr-text mb-2">Year: {movie.year}</p>
1823
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
1924
<p className="rr-text mb-4 text-sm text-gray-600">
2025
{movie.description}
2126
</p>
22-
<div className="flex items-center gap-2">
23-
<span
24-
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
25-
>
26-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
27-
</span>
27+
<div
28+
className={`rr-badge inline-block ${movie.isFavorite ? 'rr-badge-red' : ''}`}
29+
>
30+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
2831
</div>
2932
</div>
3033
</Link>

‎exercises/01.start/01.solution.vite-plugin/app/routes/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
1515
))
1616

1717
return (
18-
<main className="bg-background movies-page min-h-screen">
18+
<main className="bg-background min-h-screen">
1919
<title>React Router RSC Movies</title>
2020
<meta
2121
name="description"

‎exercises/01.start/01.solution.vite-plugin/app/routes/movie-details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
1818
const { movie } = loaderData
1919

2020
return (
21-
<main className="bg-background movie-details-page min-h-screen">
21+
<main className="bg-background min-h-screen">
2222
<title>{movie.title}</title>
2323
<meta name="description" content={movie.description} />
2424
<div className="mx-auto max-w-4xl px-6 py-16">

‎exercises/01.start/01.solution.vite-plugin/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"@react-router/serve": "7.9.3",
2020
"@remix-run/node-fetch-server": "0.10.0",
2121
"isbot": "^5",
22-
"react": "19.2.0",
23-
"react-dom": "19.2.0",
22+
"react": "19.3.0-canary-9724e3e6-20251008",
23+
"react-dom": "19.3.0-canary-9724e3e6-20251008",
2424
"react-lite-youtube-embed": "^2.5.6",
2525
"react-router": "7.9.3"
2626
},
@@ -30,8 +30,8 @@
3030
"@react-router/fs-routes": "7.9.3",
3131
"@tailwindcss/vite": "4.1.14",
3232
"@types/node": "24.7.0",
33-
"@types/react": "19.2.1",
34-
"@types/react-dom": "19.2.0",
33+
"@types/react": "19.2.2",
34+
"@types/react-dom": "19.2.1",
3535
"@vitejs/plugin-rsc": "0.4.32",
3636
"prettier": "^3.6.2",
3737
"tailwindcss": "4.1.14",

‎exercises/01.start/01.solution.vite-plugin/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"include": ["**/*.ts", "**/*.tsx", "./.react-router/types/**/*", "**/*.d.ts"],
33
"extends": ["@epic-web/config/typescript"],
44
"compilerOptions": {
5-
"types": ["vite/client", "@vitejs/plugin-rsc/types"],
5+
"types": ["vite/client", "@vitejs/plugin-rsc/types", "react/canary"],
66
"rootDirs": [".", "./.react-router/types"],
77
"baseUrl": "."
88
}

0 commit comments

Comments
 (0)