test(router): add view-transition e2e suites #5869
Conversation
WalkthroughAdds two end-to-end example projects (React Router and Solid Router) implementing view-transition UI patterns. Each project includes routing setup, generated typed route trees, route components, data-fetch utilities, styling (Tailwind + view-transition animations), Vite/PostCSS configs, and Playwright e2e tests with global setup/teardown. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant DevServer as Vite Server
participant Router
participant RouteComp as Route Component
participant Loader as Data Loader (fetchPosts/fetchPost)
Browser->>DevServer: request /
DevServer-->>Browser: serve index.html + bundle
Browser->>Router: initialize (routeTree)
Router->>RouteComp: render Home (view-transition-name set)
Browser->>Router: navigate -> /posts (Link with viewTransition)
Router->>Loader: invoke fetchPosts()
Loader-->>Router: return posts
Router->>RouteComp: render PostsLayout (Outlet)
Note over Router,RouteComp: view-transition animations applied to named regions
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 68fc723
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (8)
e2e/solid-router/view-transitions/index.html (1)
6-6: Consider a more descriptive title.The generic "Vite App" title could be updated to reflect the specific example, such as "TanStack Solid Router - View Transitions Example".
- <title>Vite App</title> + <title>TanStack Solid Router - View Transitions Example</title>e2e/react-router/view-transitions/index.html (1)
6-6: Consider a more descriptive title.The generic "Vite App" title could be replaced with something more specific like "View Transitions Example" to better identify this e2e test application.
Apply this diff:
- <title>Vite App</title> + <title>View Transitions Example</title>e2e/react-router/view-transitions/src/routes/explore.tsx (1)
1-2: Combine duplicate imports.Both
createFileRouteandLinkare imported from the same package and should be combined into a single import statement.Apply this diff:
-import { createFileRoute } from '@tanstack/react-router' -import { Link } from '@tanstack/react-router' +import { createFileRoute, Link } from '@tanstack/react-router'e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
1-3: Consolidate duplicate imports.Imports from
@tanstack/react-routerare split across lines 1 and 3. Combine them into a single import statement for better code organization.Apply this diff:
-import { createFileRoute } from '@tanstack/react-router' import * as React from 'react' -import { Link, Outlet } from '@tanstack/react-router' +import { createFileRoute, Link, Outlet } from '@tanstack/react-router' import { fetchPosts } from '../posts'e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
1-5: Consolidate duplicate imports.Imports from
@tanstack/react-routerare split across lines 1, 3, and 5. Combine them into a single import statement for better code organization.Apply this diff:
-import { createFileRoute } from '@tanstack/react-router' +import { + createFileRoute, + ErrorComponent, + type ErrorComponentProps, +} from '@tanstack/react-router' import * as React from 'react' -import { ErrorComponent } from '@tanstack/react-router' import { fetchPost } from '../posts' -import type { ErrorComponentProps } from '@tanstack/react-router'e2e/solid-router/view-transitions/src/posts.tsx (1)
12-12: Micro-delay withsetTimeout(r, 0)has no practical effect.The
setTimeout(r, 0)on lines 12 and 28 schedules execution on the next event loop tick but introduces no meaningful delay for testing async behavior. If the intent is to simulate network latency, consider a realistic delay (e.g., 100-500ms). If it's to ensure async execution, this is acceptable but could be clarified with a comment.e2e/react-router/view-transitions/src/posts.tsx (1)
12-12: Micro-delay withsetTimeout(r, 0)has no practical effect.The
setTimeout(r, 0)on lines 12 and 28 schedules execution on the next event loop tick but introduces no meaningful delay. If simulating network latency for e2e tests, consider a realistic delay (e.g., 100-500ms). Otherwise, a comment explaining the intent would improve clarity.e2e/solid-router/view-transitions/src/routes/posts.route.tsx (1)
29-29: Consider adding ellipsis for truncated titles.Line 29 truncates post titles with
substring(0, 20)but doesn't indicate truncation. For better UX, consider adding an ellipsis.- <div>{post.title.substring(0, 20)}</div> + <div>{post.title.substring(0, 20)}...</div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (46)
e2e/react-router/view-transitions/.gitignore(1 hunks)e2e/react-router/view-transitions/.vscode/settings.json(1 hunks)e2e/react-router/view-transitions/README.md(1 hunks)e2e/react-router/view-transitions/index.html(1 hunks)e2e/react-router/view-transitions/package.json(1 hunks)e2e/react-router/view-transitions/playwright.config.ts(1 hunks)e2e/react-router/view-transitions/postcss.config.mjs(1 hunks)e2e/react-router/view-transitions/src/main.tsx(1 hunks)e2e/react-router/view-transitions/src/posts.tsx(1 hunks)e2e/react-router/view-transitions/src/routeTree.gen.ts(1 hunks)e2e/react-router/view-transitions/src/routes/__root.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/explore.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/how-it-works.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/index.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/posts.$postId.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/posts.index.tsx(1 hunks)e2e/react-router/view-transitions/src/routes/posts.route.tsx(1 hunks)e2e/react-router/view-transitions/src/styles.css(1 hunks)e2e/react-router/view-transitions/tests/app.spec.ts(1 hunks)e2e/react-router/view-transitions/tests/setup/global.setup.ts(1 hunks)e2e/react-router/view-transitions/tests/setup/global.teardown.ts(1 hunks)e2e/react-router/view-transitions/tsconfig.json(1 hunks)e2e/react-router/view-transitions/vite.config.js(1 hunks)e2e/solid-router/view-transitions/.gitignore(1 hunks)e2e/solid-router/view-transitions/.vscode/settings.json(1 hunks)e2e/solid-router/view-transitions/README.md(1 hunks)e2e/solid-router/view-transitions/index.html(1 hunks)e2e/solid-router/view-transitions/package.json(1 hunks)e2e/solid-router/view-transitions/playwright.config.ts(1 hunks)e2e/solid-router/view-transitions/postcss.config.mjs(1 hunks)e2e/solid-router/view-transitions/src/main.tsx(1 hunks)e2e/solid-router/view-transitions/src/posts.tsx(1 hunks)e2e/solid-router/view-transitions/src/routeTree.gen.ts(1 hunks)e2e/solid-router/view-transitions/src/routes/__root.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/explore.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/how-it-works.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/index.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/posts.$postId.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/posts.index.tsx(1 hunks)e2e/solid-router/view-transitions/src/routes/posts.route.tsx(1 hunks)e2e/solid-router/view-transitions/src/styles.css(1 hunks)e2e/solid-router/view-transitions/tests/app.spec.ts(1 hunks)e2e/solid-router/view-transitions/tests/setup/global.setup.ts(1 hunks)e2e/solid-router/view-transitions/tests/setup/global.teardown.ts(1 hunks)e2e/solid-router/view-transitions/tsconfig.json(1 hunks)e2e/solid-router/view-transitions/vite.config.js(1 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/react-router/view-transitions/src/routes/index.tsxe2e/solid-router/view-transitions/.gitignoree2e/solid-router/view-transitions/src/routes/__root.tsxe2e/solid-router/view-transitions/.vscode/settings.jsone2e/react-router/view-transitions/src/routes/posts.index.tsxe2e/react-router/view-transitions/src/routes/how-it-works.tsxe2e/react-router/view-transitions/.vscode/settings.jsone2e/react-router/view-transitions/src/routes/posts.route.tsxe2e/react-router/view-transitions/src/main.tsxe2e/react-router/view-transitions/.gitignoree2e/react-router/view-transitions/src/routeTree.gen.tse2e/react-router/view-transitions/src/routes/explore.tsxe2e/solid-router/view-transitions/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
e2e/solid-router/view-transitions/.gitignoree2e/solid-router/view-transitions/tsconfig.jsone2e/solid-router/view-transitions/src/routes/__root.tsxe2e/solid-router/view-transitions/src/routes/index.tsxe2e/react-router/view-transitions/tests/setup/global.teardown.tse2e/solid-router/view-transitions/tests/app.spec.tse2e/solid-router/view-transitions/.vscode/settings.jsone2e/solid-router/view-transitions/tests/setup/global.teardown.tse2e/solid-router/view-transitions/src/routes/explore.tsxe2e/solid-router/view-transitions/src/main.tsxe2e/react-router/view-transitions/.vscode/settings.jsone2e/solid-router/view-transitions/src/routes/posts.route.tsxe2e/react-router/view-transitions/package.jsone2e/solid-router/view-transitions/tests/setup/global.setup.tse2e/react-router/view-transitions/.gitignoree2e/react-router/view-transitions/src/routeTree.gen.tse2e/solid-router/view-transitions/src/routes/posts.index.tsxe2e/react-router/view-transitions/src/routes/explore.tsxe2e/solid-router/view-transitions/src/routeTree.gen.tse2e/react-router/view-transitions/tests/app.spec.tse2e/solid-router/view-transitions/package.jsone2e/react-router/view-transitions/tests/setup/global.setup.ts
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
e2e/solid-router/view-transitions/tsconfig.jsone2e/react-router/view-transitions/tests/setup/global.teardown.tse2e/react-router/view-transitions/tsconfig.jsone2e/solid-router/view-transitions/src/main.tsxe2e/react-router/view-transitions/package.jsone2e/solid-router/view-transitions/tests/setup/global.setup.tse2e/react-router/view-transitions/src/main.tsxe2e/react-router/view-transitions/src/routeTree.gen.tse2e/solid-router/view-transitions/src/routeTree.gen.tse2e/solid-router/view-transitions/package.jsone2e/react-router/view-transitions/tests/setup/global.setup.ts
📚 Learning: 2025-10-09T12:59:02.129Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/src/styles/app.css:19-21
Timestamp: 2025-10-09T12:59:02.129Z
Learning: In e2e test directories (paths containing `e2e/`), accessibility concerns like outline suppression patterns are less critical since the code is for testing purposes, not production use.
Applied to files:
e2e/solid-router/view-transitions/tests/app.spec.ts
📚 Learning: 2025-10-09T12:59:14.842Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/public/site.webmanifest:2-3
Timestamp: 2025-10-09T12:59:14.842Z
Learning: In e2e test fixtures (files under e2e directories), empty or placeholder values in configuration files like site.webmanifest are acceptable and should not be flagged unless the test specifically validates those fields.
Applied to files:
e2e/solid-router/view-transitions/tests/app.spec.tse2e/react-router/view-transitions/playwright.config.tse2e/solid-router/view-transitions/playwright.config.ts
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
e2e/react-router/view-transitions/package.jsone2e/react-router/view-transitions/src/routes/explore.tsxe2e/solid-router/view-transitions/package.json
🧬 Code graph analysis (20)
e2e/react-router/view-transitions/src/routes/index.tsx (6)
e2e/react-router/view-transitions/src/routes/__root.tsx (1)
Route(5-15)e2e/react-router/view-transitions/src/routes/explore.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/routes/how-it-works.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(7-14)e2e/react-router/view-transitions/src/routes/posts.index.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
Route(6-9)
e2e/react-router/view-transitions/src/posts.tsx (1)
e2e/solid-router/view-transitions/src/posts.tsx (3)
PostType(4-8)fetchPost(10-24)fetchPosts(26-32)
e2e/solid-router/view-transitions/src/routes/__root.tsx (1)
examples/solid/view-transitions/src/routes/__root.tsx (1)
RootComponent(21-52)
e2e/solid-router/view-transitions/src/routes/index.tsx (3)
e2e/solid-router/view-transitions/src/routes/__root.tsx (1)
Route(9-19)e2e/solid-router/view-transitions/src/routes/explore.tsx (1)
Route(3-5)e2e/solid-router/view-transitions/src/routes/how-it-works.tsx (1)
Route(3-5)
e2e/react-router/view-transitions/tests/setup/global.teardown.ts (3)
e2e/solid-router/view-transitions/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-router/basic-virtual-file-based/tests/setup/global.teardown.ts (1)
teardown(4-6)e2e/react-router/basic-esbuild-file-based/tests/setup/global.teardown.ts (1)
teardown(4-6)
e2e/react-router/view-transitions/src/routes/__root.tsx (5)
e2e/react-router/view-transitions/src/routes/index.tsx (1)
Route(5-7)e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(7-14)e2e/react-router/view-transitions/src/routes/posts.index.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
Route(6-9)examples/react/view-transitions/src/routes/__root.tsx (1)
RootComponent(17-47)
e2e/react-router/view-transitions/src/routes/posts.index.tsx (3)
e2e/react-router/view-transitions/src/routes/__root.tsx (1)
Route(5-15)e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(7-14)e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
Route(6-9)
e2e/react-router/view-transitions/src/routes/how-it-works.tsx (3)
e2e/react-router/view-transitions/src/routes/__root.tsx (1)
Route(5-15)e2e/react-router/view-transitions/src/routes/explore.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/routes/index.tsx (1)
Route(5-7)
e2e/solid-router/view-transitions/src/routes/explore.tsx (2)
e2e/solid-router/view-transitions/src/routes/__root.tsx (1)
Route(9-19)e2e/solid-router/view-transitions/src/routes/how-it-works.tsx (1)
Route(3-5)
e2e/solid-router/view-transitions/src/routes/posts.$postId.tsx (1)
e2e/solid-router/view-transitions/src/posts.tsx (1)
fetchPost(10-24)
e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (2)
e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
Route(6-9)e2e/react-router/view-transitions/src/posts.tsx (1)
fetchPost(10-24)
e2e/solid-router/view-transitions/src/routes/how-it-works.tsx (3)
e2e/solid-router/view-transitions/src/routes/__root.tsx (1)
Route(9-19)e2e/solid-router/view-transitions/src/routes/explore.tsx (1)
Route(3-5)e2e/solid-router/view-transitions/src/routes/index.tsx (1)
Route(3-5)
e2e/react-router/view-transitions/src/routes/posts.route.tsx (3)
e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(7-14)e2e/react-router/view-transitions/src/routes/posts.index.tsx (1)
Route(4-6)e2e/react-router/view-transitions/src/posts.tsx (1)
fetchPosts(26-32)
e2e/solid-router/view-transitions/src/routes/posts.route.tsx (2)
e2e/solid-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(9-16)e2e/solid-router/view-transitions/src/posts.tsx (1)
fetchPosts(26-32)
e2e/solid-router/view-transitions/tests/setup/global.setup.ts (10)
e2e/react-router/view-transitions/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basepath-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/rspack-basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/js-only-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/generator-cli-only/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/rspack-basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-virtual-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)
e2e/react-router/view-transitions/src/main.tsx (1)
e2e/react-router/js-only-file-based/src/main.jsx (1)
root(18-18)
e2e/solid-router/view-transitions/src/posts.tsx (1)
e2e/react-router/view-transitions/src/posts.tsx (3)
PostType(4-8)fetchPost(10-24)fetchPosts(26-32)
e2e/solid-router/view-transitions/src/routes/posts.index.tsx (3)
e2e/solid-router/view-transitions/src/routes/index.tsx (1)
Route(3-5)e2e/solid-router/view-transitions/src/routes/posts.$postId.tsx (1)
Route(9-16)e2e/solid-router/view-transitions/src/routes/posts.route.tsx (1)
Route(4-7)
e2e/react-router/view-transitions/src/routes/explore.tsx (2)
e2e/react-router/view-transitions/src/routes/__root.tsx (1)
Route(5-15)e2e/react-router/view-transitions/src/routes/how-it-works.tsx (1)
Route(4-6)
e2e/react-router/view-transitions/tests/setup/global.setup.ts (4)
e2e/solid-router/view-transitions/tests/setup/global.setup.ts (1)
setup(4-6)scripts/set-ts-version.js (1)
packageJson(33-33)e2e/react-router/basic-virtual-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)
🪛 Biome (2.1.2)
e2e/react-router/view-transitions/src/styles.css
[error] 24-24: expected , but instead found (
Remove (
(parse)
[error] 24-24: expected , but instead found slide-left
Remove slide-left
(parse)
[error] 24-24: expected , but instead found )
Remove )
(parse)
[error] 52-52: expected , but instead found (
Remove (
(parse)
[error] 52-52: expected , but instead found slide-right
Remove slide-right
(parse)
[error] 52-52: expected , but instead found )
Remove )
(parse)
[error] 80-80: expected , but instead found (
Remove (
(parse)
[error] 80-80: expected , but instead found warp
Remove warp
(parse)
[error] 80-80: expected , but instead found )
Remove )
(parse)
[error] 24-24: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 52-52: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 80-80: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 80-80: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
[error] 81-81: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
[error] 85-85: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
e2e/solid-router/view-transitions/src/styles.css
[error] 24-24: expected , but instead found (
Remove (
(parse)
[error] 24-24: expected , but instead found slide-left
Remove slide-left
(parse)
[error] 24-24: expected , but instead found )
Remove )
(parse)
[error] 52-52: expected , but instead found (
Remove (
(parse)
[error] 52-52: expected , but instead found slide-right
Remove slide-right
(parse)
[error] 52-52: expected , but instead found )
Remove )
(parse)
[error] 80-80: expected , but instead found (
Remove (
(parse)
[error] 80-80: expected , but instead found warp
Remove warp
(parse)
[error] 80-80: expected , but instead found )
Remove )
(parse)
[error] 24-24: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 52-52: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 80-80: Unexpected unknown pseudo-class active-view-transition-type
See MDN web docs for more details.
(lint/correctness/noUnknownPseudoClass)
[error] 80-80: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
[error] 81-81: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
[error] 85-85: Unknown type selector is not allowed.
See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.
(lint/correctness/noUnknownTypeSelector)
🪛 ESLint
e2e/react-router/view-transitions/src/routes/index.tsx
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 3-3: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
e2e/react-router/view-transitions/src/routes/how-it-works.tsx
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 2-2: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
e2e/react-router/view-transitions/src/routes/posts.$postId.tsx
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 3-3: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
e2e/react-router/view-transitions/src/routes/posts.route.tsx
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 3-3: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
e2e/react-router/view-transitions/src/routes/explore.tsx
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 2-2: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (41)
e2e/solid-router/view-transitions/.gitignore (1)
1-10: No issues detected.The
.gitignorepatterns are appropriate for a Vite + Playwright e2e project. Standard practices are followed: non-rooted patterns for universal artifacts (dependencies, build, system files) and rooted patterns for test/cache outputs.e2e/react-router/view-transitions/.gitignore (1)
1-10: No issues detected.The
.gitignorepatterns are appropriate for a Vite + Playwright e2e project. Standard practices are followed: non-rooted patterns for universal artifacts (dependencies, build, system files) and rooted patterns for test/cache outputs. Consistent with the parallel Solid Router e2e project structure.e2e/solid-router/view-transitions/tsconfig.json (2)
1-10: AI summary mentions incorrect JSX configuration.The AI-generated summary states
jsx: "react-jsx", but this file correctly usesjsx: "preserve"withjsxImportSource: "solid-js"— the standard setup for Solid Router projects. The actual configuration is correct.
1-10: Configuration looks good.The TypeScript configuration is appropriately set up for a Solid Router e2e project: strict mode, proper JSX transformation via solid-js, sensible library targets, and performant skipLibCheck.
e2e/react-router/view-transitions/tsconfig.json (1)
1-9: Configuration looks appropriate for e2e test project.The TypeScript configuration uses the modern JSX transform (
"react-jsx"), enables strict type checking, and appropriately targets DOM APIs with ES2022. These choices are sensible for a view-transitions e2e test suite.e2e/react-router/view-transitions/postcss.config.mjs (1)
1-5: No issues found – dependency is properly declared.The
@tailwindcss/postcssdependency is correctly declared ine2e/react-router/view-transitions/package.jsonat version^4.1.15. The PostCSS configuration syntax is correct for Tailwind CSS v4, and the empty plugin options object is valid for this version.e2e/react-router/view-transitions/.vscode/settings.json (1)
1-11: LGTM! Proper configuration for generated files.The VSCode settings appropriately exclude and protect the generated route tree file from file watching, search indexing, and accidental edits. This aligns with best practices for autogenerated code.
e2e/solid-router/view-transitions/README.md (1)
1-6: LGTM! Clear setup instructions.The README provides straightforward instructions for running the example.
e2e/solid-router/view-transitions/vite.config.js (1)
1-14: LGTM! Correct Vite configuration for Solid Router.The plugin configuration is properly set up with the TanStack Router plugin targeting Solid and code splitting enabled. The plugin order (router before solid) is correct.
e2e/solid-router/view-transitions/.vscode/settings.json (1)
1-11: LGTM! Proper configuration for generated files.Consistent with the React Router example, these settings appropriately protect the autogenerated route tree file.
e2e/solid-router/view-transitions/package.json (2)
1-29: LGTM! Well-structured package configuration.The package.json is properly configured with appropriate scripts, workspace dependencies, and modern tooling. The build script includes type checking, which is a good practice.
12-20: No changes required—code is fully compatible with Tailwind CSS v4.All Tailwind utilities and CSS patterns in the view-transitions e2e test correctly use v4 syntax:
- CSS variables properly use parentheses:
var(--color-gray-200, currentcolor)✓- No deprecated opacity utilities found; hover states use valid v4 format
- No deprecated important modifier syntax detected
- PostCSS configuration correctly specifies
@tailwindcss/postcssplugine2e/react-router/view-transitions/README.md (1)
1-6: LGTM! Clear setup instructions.The README provides straightforward instructions for running the React Router view transitions example.
e2e/react-router/view-transitions/src/routes/index.tsx (1)
9-25: LGTM!The Home component correctly demonstrates view transitions with the
viewTransitionprop on the Link component, and the Tailwind classes are properly configured for the transition animation.e2e/solid-router/view-transitions/postcss.config.mjs (1)
1-5: LGTM!The PostCSS configuration correctly enables the Tailwind CSS v4 plugin as expected for this e2e example.
e2e/solid-router/view-transitions/src/routes/posts.index.tsx (1)
1-9: LGTM!The posts index route is correctly implemented following TanStack Router conventions, providing a clear placeholder message when no post is selected.
e2e/solid-router/view-transitions/tests/setup/global.setup.ts (1)
1-6: LGTM!The global setup correctly uses the e2e utilities to start a dummy server with the package name, following the established pattern across other e2e test suites in this repository.
e2e/react-router/view-transitions/tests/setup/global.setup.ts (1)
1-6: LGTM!The global setup correctly initializes the e2e test server using the package name, consistent with the established pattern across the TanStack Router e2e test infrastructure.
e2e/react-router/view-transitions/package.json (1)
16-18: No issues found; original review comment is based on inaccurate information.The web search confirms that the version constraints in the package.json are actually appropriate:
- React 19.2 is the latest stable version (released Oct 1, 2025), and the caret constraint
^19.0.0will automatically pull this version.- PostCSS 8.5.6 is the latest stable version (published Jun 16, 2025), not the 8.4.x range mentioned in the original review. The constraint
^8.5.1will allow 8.5.6.The versions specified are current and will resolve to the latest compatible releases during installation.
Likely an incorrect or invalid review comment.
e2e/react-router/view-transitions/src/styles.css (1)
1-114: LGTM! View Transitions API implementation is correct.The CSS correctly implements custom view transitions using the View Transitions API Level 2 selectors (
:active-view-transition-type(),::view-transition-old(),::view-transition-new()). The static analysis errors from Biome are false positives—these selectors are valid but cutting-edge features that may not yet be in the linter's ruleset.The implementation provides three transition types:
slide-leftandslide-rightfor horizontal navigationwarpfor a more dramatic rotation/blur effecte2e/react-router/view-transitions/src/routes/explore.tsx (1)
4-31: LGTM! Route definition and view transition usage are correct.The route properly demonstrates the view transitions feature with:
- Correct
view-transition-nameattribute for animation targeting- Proper
viewTransitionprop usage on the Link component- Clear documentation linking to the CSS definitions
e2e/solid-router/view-transitions/src/routes/index.tsx (1)
1-23: LGTM! Clean Solid Router implementation.The route correctly demonstrates view transitions in Solid Router with:
- Proper use of
classattribute (Solid convention)- Correct
view-transition-namefor animation targeting- Appropriate
viewTransitionprop usagee2e/solid-router/view-transitions/src/routes/explore.tsx (1)
1-30: LGTM! Consistent Solid Router implementation.The explore route mirrors the React Router version but correctly uses Solid conventions (
classinstead ofclassName). The view transition configuration is properly implemented.e2e/react-router/view-transitions/src/routes/posts.index.tsx (1)
1-10: LGTM! Clean index route implementation.The posts index route is properly structured with minimal, necessary code. The component provides appropriate placeholder content for when no post is selected.
e2e/react-router/view-transitions/vite.config.js (1)
1-14: LGTM! Proper Vite configuration for TanStack Router.The configuration correctly:
- Places the
tanstackRouterplugin before thereactplugin (required order)- Enables
autoCodeSplittingfor better performance- Specifies the
reacttargete2e/react-router/view-transitions/src/main.tsx (1)
1-55: LGTM! Well-documented router setup.Excellent implementation with:
- Clear inline documentation explaining
defaultViewTransitionoptions- Helpful commented examples showing dynamic transition type selection
- Proper module augmentation for type safety
- Conditional rendering check before creating root
The extensive comments provide valuable guidance for developers implementing view transitions.
e2e/react-router/view-transitions/tests/setup/global.teardown.ts (1)
1-6: LGTM! Standard e2e teardown implementation.The teardown function correctly uses the established pattern from other e2e test suites in the repository, properly stopping the dummy server using the package name.
e2e/solid-router/view-transitions/tests/setup/global.teardown.ts (1)
1-6: LGTM!The teardown implementation is clean and follows the established pattern from the global setup file. The use of the import attribute syntax for JSON is appropriate and modern.
e2e/solid-router/view-transitions/src/routes/__root.tsx (1)
1-52: LGTM!The root route setup is clean and correctly uses Solid Router conventions with
classattributes and proper view transition configuration. The structure matches the established pattern from the examples directory.e2e/solid-router/view-transitions/playwright.config.ts (1)
1-41: LGTM!The Playwright configuration is well-structured with appropriate port management, global setup/teardown hooks, and server configuration. The use of environment variables to pass ports to Vite and the conditional server reuse based on CI environment are good practices.
e2e/solid-router/view-transitions/src/routes/how-it-works.tsx (1)
1-31: LGTM!The route implementation correctly demonstrates view transitions with different animation types. The view-transition-name attribute and typed transitions are properly configured for testing.
e2e/solid-router/view-transitions/src/main.tsx (1)
1-53: LGTM!The entry point is well-structured with proper router configuration and type augmentation. The conditional rendering check prevents double-mounting, and the commented examples provide helpful guidance for advanced view transition usage.
e2e/react-router/view-transitions/src/routes/posts.route.tsx (1)
11-44: LGTM!The layout component correctly demonstrates post listing with view transitions and includes a non-existent post entry to test error handling. The use of view-transition-name attributes and typed transitions is appropriate for the e2e test suite.
e2e/react-router/view-transitions/src/routes/__root.tsx (1)
1-47: LGTM!The root route implementation is clean and follows React Router conventions. The navigation setup with view transitions and devtools integration is appropriate for the e2e test suite.
e2e/react-router/view-transitions/src/routes/posts.$postId.tsx (1)
7-29: LGTM!The dynamic post route is correctly configured with loader, error handling, and not-found handling. The component implementations appropriately display post data and handle errors for the e2e test scenarios.
e2e/react-router/view-transitions/src/routes/how-it-works.tsx (1)
4-32: LGTM!The route structure and view transition configuration look correct. The component properly demonstrates custom page transitions with directional slides.
e2e/solid-router/view-transitions/src/styles.css (1)
1-114: LGTM! Modern CSS View Transitions API usage is correct.The stylesheet properly implements:
- Tailwind v4 syntax with
@import 'tailwindcss'- View Transitions API with
:active-view-transition-type()pseudo-class and::view-transition-old/new()pseudo-elements- Three custom transition animations (slide-left, slide-right, warp)
Note: The Biome static analysis errors are false positives—these are valid CSS features from the View Transitions API specification.
e2e/solid-router/view-transitions/src/routes/posts.$postId.tsx (1)
1-27: LGTM!The dynamic post route is properly structured with:
- Correct loader integration with
fetchPost- Appropriate error and not-found component handling
- Proper Solid reactive patterns (using
post()signal accessor)e2e/solid-router/view-transitions/src/routes/posts.route.tsx (1)
1-42: Well-structured posts layout route.The route properly:
- Loads posts via
fetchPostsloader- Includes a non-existent post entry to test 404 handling
- Configures view transitions for navigation
- Uses Solid reactive patterns correctly
e2e/react-router/view-transitions/playwright.config.ts (1)
1-41: LGTM!The Playwright configuration is well-structured with:
- Proper port management via utility functions
- Global setup/teardown for test infrastructure
- Appropriate single-worker configuration for e2e tests
- Modern import attributes for JSON (Node 20.10+)
- Vite build and serve integration with environment variables
e2e/solid-router/view-transitions/src/routeTree.gen.ts (1)
1-171: AutogeneratedrouteTree.gen.ts– skipping detailed review per project conventionsThis file is clearly marked as autogenerated and will be overwritten, and project learnings explicitly state that
routeTree.gen.tsfiles in this repo should not be manually reviewed or edited. I’m intentionally skipping line-by-line review and not suggesting changes here; any issues should be addressed in the route generator or source route definitions instead. Based on learnings
| import { createFileRoute } from '@tanstack/react-router' | ||
| import { Link } from '@tanstack/react-router' |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Consolidate duplicate imports.
Both createFileRoute and Link can be imported from @tanstack/react-router in a single statement.
Apply this diff:
-import { createFileRoute } from '@tanstack/react-router'
-import { Link } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'🧰 Tools
🪛 ESLint
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 2-2: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
🤖 Prompt for AI Agents
In e2e/react-router/view-transitions/src/routes/how-it-works.tsx around lines 1
to 2, there are two separate imports from the same module
(@tanstack/react-router); consolidate them into a single import statement that
pulls both createFileRoute and Link from @tanstack/react-router, and remove the
duplicate import line so the file only imports from that module once.
| import { createFileRoute } from '@tanstack/react-router' | ||
| import * as React from 'react' | ||
| import { Link } from '@tanstack/react-router' |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Consolidate duplicate imports and remove unused React import.
The @tanstack/react-router package is imported twice, and the React import is unused (React 19 uses the modern JSX transform that doesn't require an explicit React import).
Apply this diff:
-import { createFileRoute } from '@tanstack/react-router'
-import * as React from 'react'
-import { Link } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { createFileRoute } from '@tanstack/react-router' | |
| import * as React from 'react' | |
| import { Link } from '@tanstack/react-router' | |
| import { createFileRoute, Link } from '@tanstack/react-router' |
🧰 Tools
🪛 ESLint
[error] 1-1: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
[error] 3-3: '@tanstack/react-router' imported multiple times.
(import/no-duplicates)
🤖 Prompt for AI Agents
In e2e/react-router/view-transitions/src/routes/index.tsx around lines 1 to 3,
consolidate the duplicate @tanstack/react-router imports and remove the unused
React import: replace the separate imports with a single import that pulls both
createFileRoute and Link from '@tanstack/react-router' and delete the unused
"import * as React from 'react'" line so the file only imports what it actually
uses.
| import { test } from '@playwright/test' | ||
|
|
||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto('/') | ||
| }) |
There was a problem hiding this comment.
Critical: Test file is incomplete - no test cases defined.
This test file only contains a beforeEach hook but lacks actual test cases to verify view transitions functionality. The PR title claims to "add view-transition e2e suites," but no tests are present to validate:
- View transitions trigger on navigation
- Transition animations complete successfully
- View transition states are correct
- Edge cases and error handling
At minimum, add test cases to verify:
test('should navigate between routes with view transitions', async ({ page }) => {
// Test navigation and view transition behavior
})
test('should apply view transition classes correctly', async ({ page }) => {
// Verify CSS classes and animations
})Would you like me to generate complete test cases for view transitions functionality?
🤖 Prompt for AI Agents
In e2e/react-router/view-transitions/tests/app.spec.ts around lines 1-5, the
file only defines a beforeEach hook and contains no test cases; add at least two
Playwright tests: (1) "should navigate between routes with view transitions"
that uses the existing beforeEach page.goto('/'), clicks navigation links to
change routes, awaits navigation, waits for the view-transition to finish (e.g.,
waitForEvent/animationend or a stable DOM state), and asserts the new URL and
that the expected route content is visible; (2) "should apply view transition
classes correctly" that triggers a navigation, inspects the transitioning
elements for the presence/absence of expected CSS classes or attributes during
and after the transition (use page.waitForFunction to poll classList or
getComputedStyle), and assert animations complete and classes are
removed/retained as expected; reuse selectors from the app, add sensible
timeouts, and fail the tests if transitions do not complete or expected
classes/content are not present.
| import { test } from '@playwright/test' | ||
|
|
||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto('/') | ||
| }) |
There was a problem hiding this comment.
Add test cases to validate view transitions functionality.
This test file only contains a beforeEach hook but no actual test cases. For a view-transitions e2e suite, you should add tests that verify the transition behavior, navigation, and rendering.
Do you want me to generate sample test cases for view transition validation, such as:
- Verifying navigation between routes works
- Checking that view-transition CSS classes are applied
- Testing post loading and rendering
🤖 Prompt for AI Agents
In e2e/solid-router/view-transitions/tests/app.spec.ts around lines 1-5, the
file only defines a beforeEach hook and lacks actual tests for view-transitions;
add multiple Playwright test cases that (1) navigate between routes and assert
the URL and expected page content after navigation, (2) assert that
view-transition related CSS classes or attributes are present/applied during and
after navigation, (3) verify that animated elements complete their transition
(e.g., by waiting for a transition-end state or checking computed styles), and
(4) confirm dynamic content (posts) loads and renders correctly after
navigation; implement these as isolated tests using the existing
beforeEach(page.goto('/')) setup, using page.click/navigation,
page.waitForSelector, page.evaluate or page.getComputedStyle checks, and clear
assertions for expected DOM changes.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
e2e/react-router/view-transitions/package.json (1)
6-11: Verify cross-platform compatibility and port-file cleanup approach.The test:e2e script uses
rm -rf port*.txtfor cleanup. This works on Unix-like systems but may fail on Windows. Additionally, the aggressiverm -rfcould be risky if the glob pattern unexpectedly matches unintended files.Consider using a more portable and safer approach:
- Use a Node.js-based cleanup (e.g., via a small script or npm package like
rimraf)- Or document the Windows-specific command needed
Also verify that port files are reliably created during e2e test runs and cleanup is necessary.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
e2e/react-router/view-transitions/package.json(1 hunks)e2e/react-router/view-transitions/tests/app.spec.ts(1 hunks)e2e/react-router/view-transitions/tsconfig.json(1 hunks)e2e/solid-router/view-transitions/package.json(1 hunks)e2e/solid-router/view-transitions/tests/app.spec.ts(1 hunks)e2e/solid-router/view-transitions/tsconfig.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- e2e/react-router/view-transitions/tests/app.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- e2e/solid-router/view-transitions/tsconfig.json
- e2e/solid-router/view-transitions/package.json
- e2e/solid-router/view-transitions/tests/app.spec.ts
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
e2e/react-router/view-transitions/package.json
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
e2e/react-router/view-transitions/package.json
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
e2e/react-router/view-transitions/package.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/react-router/view-transitions/tsconfig.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (4)
e2e/react-router/view-transitions/package.json (4)
19-20: Verify React 19 type definitions match the runtime version.React 19.0.0 is paired with @types/react@19.0.8 and @types/react-dom@19.0.3. Based on the library documentation, React 19 requires the modern JSX transform and specific type compatibility. Confirm that these type versions exactly match your React installation and are compatible with TypeScript 5.7.2.
Also applies to: 28-29
14-14: Verify Tailwind CSS v4 integration and breaking changes.The project uses both
@tailwindcss/postcss@4.1.15andtailwindcss@4.1.15. Tailwind CSS v4 is a major release with significant breaking changes (e.g., important modifier position changed to suffix, opacity utilities replaced with slash syntax, CSS variables use parentheses instead of brackets).Ensure:
- The import statement in CSS uses
@import "tailwindcss";instead of the legacy directives- All style utilities in the project are updated to v4 syntax
- Confirm this v4 integration works correctly with the existing example code
Consider adding a note in the project README about the Tailwind CSS v4 upgrade if not already present.
Also applies to: 22-22
32-32: Verify Vite 7.1.7 compatibility with React 19.Vite 7.1.7 is a recent major version. Confirm that it works well with React 19 and the @vitejs/plugin-react@4.3.4 plugin. Check for any known issues or required configuration changes in the Vite config file.
1-34: LGTM on overall structure and dependency organization.The package.json follows the monorepo pattern with
workspace:^references for TanStack packages, which is appropriate. Scripts are well-organized for development, building, serving, and testing. DevDependencies are correctly separated from runtime dependencies.The setup with Playwright, Vite, and TypeScript is consistent with e2e testing best practices for TanStack projects.
| { | ||
| "compilerOptions": { | ||
| "strict": true, | ||
| "esModuleInterop": true, | ||
| "jsx": "react-jsx", | ||
| "target": "ESNext", | ||
| "moduleResolution": "Bundler", | ||
| "module": "ESNext", | ||
| "resolveJsonModule": true, | ||
| "allowJs": true, | ||
| "skipLibCheck": true | ||
| }, | ||
| "exclude": ["node_modules", "dist"] | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify TypeScript configuration consistency across e2e projects.
This looks like a solid TypeScript configuration for a modern React + Vite e2e project. However, I should verify it's consistent with other e2e project configurations in the repository.
The configuration itself follows TypeScript best practices with strict mode enabled, appropriate module resolution for Vite, and reasonable exclusions. All settings align with modern React development.
🏁 Script executed:
#!/bin/bash
# Description: Check for other tsconfig.json files in e2e directories for consistency
# Find all tsconfig.json files in e2e projects
fd -e tsconfig.json e2e/ | head -20
# Compare this new config with an existing e2e project's tsconfig (if any exists)
echo "=== Checking for existing e2e project configs ==="
find e2e -name "tsconfig.json" -type f | while read file; do
echo "=== $file ==="
cat "$file" | jq . 2>/dev/null || cat "$file"
doneLength of output: 35928
Add "types": ["vite/client"] to compilerOptions for consistency.
The configuration is functionally correct but lacks the "types": ["vite/client"] declaration present in most similar react-router e2e projects. While not breaking, this creates an inconsistency—9 of 13 comparable React Router projects include this. Add it to compilerOptions for consistency and to enable proper type support for Vite-specific APIs in your IDE.
🤖 Prompt for AI Agents
In e2e/react-router/view-transitions/tsconfig.json lines 1-14, the
compilerOptions omit the "types": ["vite/client"] entry used in most comparable
React Router e2e projects; add "types": ["vite/client"] to the compilerOptions
object so the project has consistent Vite type declarations and IDE support for
Vite-specific globals.
In order to properly test PRs like below, we need e2e suites
Summary by CodeRabbit