docs(solid-router): port view-transition example #5815
Conversation
WalkthroughA new Solid Router example demonstrating view transitions has been added. This includes configuration documentation updates, a complete example project at Changes
Sequence DiagramsequenceDiagram
participant User
participant Router
participant View as View Transition<br/>(CSS)
participant Component
participant Data as Data Loader
User->>Router: Click link with viewTransition
Router->>Data: Trigger loader (e.g., fetchPosts)
Data-->>Router: Return data
Router->>View: Activate transition type<br/>(slide-left/right/warp)
View->>View: Old component animates out<br/>(::view-transition-old)
View->>Component: New component renders
View->>View: New component animates in<br/>(::view-transition-new)
Component-->>User: Display updated view
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 |
birkskyum
force-pushed
the
docs(solid-router)--port-view-transition-example
branch
from
fb1ddf4 to
4de1743
Compare
|
View your CI Pipeline Execution ↗ for commit 7bf1ffa
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
examples/solid/view-transitions/src/posts.tsx (2)
26-32: Consider adding meaningful delay for demo purposes.Line 28 has the same zero-delay
setTimeoutas infetchPost. If you're simulating network latency for demonstration purposes, consider using a non-zero delay value.Apply this diff if you want to add a delay:
export const fetchPosts = async () => { console.info('Fetching posts...') - await new Promise((r) => setTimeout(r, 0)) + await new Promise((r) => setTimeout(r, 300)) return axios .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts') .then((r) => r.data.slice(0, 10)) }
10-24: Consider adding meaningful delay to the simulated network request.The
setTimeout(r, 0)on line 12 doesn't add any actual delay. If this is meant to simulate network latency for demo purposes, consider using a non-zero value like300or500milliseconds.The error handling at line 17 is correct—redaxios exposes HTTP status codes as
error.statuson the error object (noterror.response.status).
📜 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 (20)
docs/router/config.json(1 hunks)examples/solid/view-transitions/.gitignore(1 hunks)examples/solid/view-transitions/.vscode/settings.json(1 hunks)examples/solid/view-transitions/README.md(1 hunks)examples/solid/view-transitions/index.html(1 hunks)examples/solid/view-transitions/package.json(1 hunks)examples/solid/view-transitions/postcss.config.mjs(1 hunks)examples/solid/view-transitions/src/main.tsx(1 hunks)examples/solid/view-transitions/src/posts.tsx(1 hunks)examples/solid/view-transitions/src/routeTree.gen.ts(1 hunks)examples/solid/view-transitions/src/routes/__root.tsx(1 hunks)examples/solid/view-transitions/src/routes/explore.tsx(1 hunks)examples/solid/view-transitions/src/routes/how-it-works.tsx(1 hunks)examples/solid/view-transitions/src/routes/index.tsx(1 hunks)examples/solid/view-transitions/src/routes/posts.$postId.tsx(1 hunks)examples/solid/view-transitions/src/routes/posts.index.tsx(1 hunks)examples/solid/view-transitions/src/routes/posts.route.tsx(1 hunks)examples/solid/view-transitions/src/styles.css(1 hunks)examples/solid/view-transitions/tsconfig.json(1 hunks)examples/solid/view-transitions/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/routes/index.tsxexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/src/routes/how-it-works.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxexamples/solid/view-transitions/src/posts.tsxexamples/solid/view-transitions/src/routes/explore.tsxexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/src/routeTree.gen.tsexamples/solid/view-transitions/src/routes/posts.$postId.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/routes/index.tsxexamples/solid/view-transitions/src/routes/how-it-works.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxexamples/solid/view-transitions/src/routes/explore.tsxexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/src/routes/posts.$postId.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/routes/index.tsxexamples/solid/view-transitions/src/styles.cssexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/vite.config.jsexamples/solid/view-transitions/src/routes/how-it-works.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxexamples/solid/view-transitions/src/posts.tsxexamples/solid/view-transitions/README.mdexamples/solid/view-transitions/index.htmlexamples/solid/view-transitions/src/routes/explore.tsxexamples/solid/view-transitions/package.jsonexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/postcss.config.mjsexamples/solid/view-transitions/src/routeTree.gen.tsexamples/solid/view-transitions/tsconfig.jsonexamples/solid/view-transitions/src/routes/posts.$postId.tsx
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/config.json
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/view-transitions/package.json
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/routes/index.tsxexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/vite.config.jsexamples/solid/view-transitions/src/routes/how-it-works.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxdocs/router/config.jsonexamples/solid/view-transitions/src/routes/explore.tsxexamples/solid/view-transitions/package.jsonexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/src/routeTree.gen.tsexamples/solid/view-transitions/tsconfig.json
📚 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:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/.vscode/settings.jsonexamples/solid/view-transitions/src/routes/how-it-works.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/src/routeTree.gen.ts
📚 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:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/.vscode/settings.jsonexamples/solid/view-transitions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/view-transitions/src/routes/__root.tsxexamples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/view-transitions/src/routes/index.tsxexamples/solid/view-transitions/src/routes/posts.index.tsxexamples/solid/view-transitions/src/routes/posts.route.tsxexamples/solid/view-transitions/src/routeTree.gen.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:
examples/solid/view-transitions/src/main.tsxexamples/solid/view-transitions/package.jsonexamples/solid/view-transitions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/view-transitions/package.jsonexamples/solid/view-transitions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
examples/solid/view-transitions/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/view-transitions/tsconfig.json
🧬 Code graph analysis (7)
examples/solid/view-transitions/src/routes/__root.tsx (5)
examples/solid/view-transitions/src/routes/index.tsx (1)
Route(3-5)examples/solid/view-transitions/src/routes/posts.$postId.tsx (1)
Route(9-16)examples/solid/view-transitions/src/routes/posts.index.tsx (1)
Route(3-5)examples/solid/view-transitions/src/routes/posts.route.tsx (1)
Route(4-7)examples/solid/quickstart-file-based/src/routes/__root.tsx (1)
RootComponent(13-41)
examples/solid/view-transitions/src/routes/index.tsx (2)
examples/solid/view-transitions/src/routes/__root.tsx (1)
Route(9-19)examples/solid/view-transitions/src/routes/how-it-works.tsx (1)
Route(3-5)
examples/solid/view-transitions/src/routes/how-it-works.tsx (2)
examples/solid/view-transitions/src/routes/explore.tsx (1)
Route(3-5)examples/solid/view-transitions/src/routes/index.tsx (1)
Route(3-5)
examples/solid/view-transitions/src/routes/posts.index.tsx (2)
examples/solid/view-transitions/src/routes/posts.$postId.tsx (1)
Route(9-16)examples/solid/view-transitions/src/routes/posts.route.tsx (1)
Route(4-7)
examples/solid/view-transitions/src/routes/explore.tsx (3)
examples/solid/view-transitions/src/routes/__root.tsx (1)
Route(9-19)examples/solid/view-transitions/src/routes/how-it-works.tsx (1)
Route(3-5)examples/solid/view-transitions/src/routes/index.tsx (1)
Route(3-5)
examples/solid/view-transitions/src/routes/posts.route.tsx (2)
examples/solid/view-transitions/src/routes/posts.$postId.tsx (1)
Route(9-16)examples/solid/view-transitions/src/posts.tsx (1)
fetchPosts(26-32)
examples/solid/view-transitions/src/routes/posts.$postId.tsx (3)
examples/solid/view-transitions/src/routes/posts.index.tsx (1)
Route(3-5)examples/solid/view-transitions/src/routes/posts.route.tsx (1)
Route(4-7)examples/solid/view-transitions/src/posts.tsx (1)
fetchPost(10-24)
🪛 Biome (2.1.2)
examples/solid/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)
🪛 LanguageTool
examples/solid/view-transitions/README.md
[duplication] ~5-~5: Possible typo: you repeated a word.
Context: ... To run this example: - npm install or yarn - npm start or yarn start
(ENGLISH_WORD_REPEAT_RULE)
⏰ 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). (1)
- GitHub Check: Test
🔇 Additional comments (22)
docs/router/config.json (1)
632-636: LGTM! Documentation entry follows the established pattern.The new "View Transitions" example is properly placed in the Solid Router examples section and follows the same structure as other example entries.
examples/solid/view-transitions/.vscode/settings.json (1)
1-11: LGTM! Proper handling of generated files.The VSCode settings correctly exclude the autogenerated
routeTree.gen.tsfrom file watchers, search indexing, and mark it as read-only, preventing accidental modifications.examples/solid/view-transitions/README.md (1)
1-6: LGTM! Clear and concise setup instructions.The README provides the essential commands needed to run the example. The static analysis hint about word repetition is a false positive—these are distinct commands.
examples/solid/view-transitions/.gitignore (1)
1-10: LGTM! Standard gitignore patterns.The ignore patterns appropriately cover Node.js dependencies, build outputs, test results, and common development artifacts.
examples/solid/view-transitions/tsconfig.json (1)
1-10: LGTM! Appropriate TypeScript configuration for Solid.js.The compiler options are correctly configured with strict mode, Solid.js JSX handling, and modern ES2022 library support.
examples/solid/view-transitions/package.json (1)
5-9: LGTM! Well-structured npm scripts.The scripts provide clear commands for development (
dev,start), production build (buildwith type checking), and preview (serve).examples/solid/view-transitions/postcss.config.mjs (1)
1-5: LGTM! Standard PostCSS configuration.The configuration correctly loads the Tailwind CSS PostCSS plugin as expected for this setup.
examples/solid/view-transitions/src/styles.css (2)
1-21: LGTM! Proper Tailwind integration and base styles.The base layer sets up appropriate border colors and dark mode support using Tailwind utilities.
23-114: LGTM! Well-implemented view transition animations.The CSS correctly uses the View Transitions API Level 2 features including:
:active-view-transition-type()pseudo-class::view-transition-old()and::view-transition-new()pseudo-elementsThe three transition types (slide-left, slide-right, warp) are properly defined with smooth animations and consistent timing. The static analysis errors from Biome are false positives—these are valid modern CSS features supported in Chrome 111+, Edge 111+, and Safari 18+.
examples/solid/view-transitions/vite.config.js (1)
1-14: LGTM! Clean Vite configuration.The configuration correctly sets up both the TanStack Router plugin and Solid plugin. The
autoCodeSplitting: trueoption is a good choice for demonstrating code splitting in the example.examples/solid/view-transitions/index.html (1)
1-12: LGTM! Standard HTML bootstrap.The HTML structure is correct. The title could be more descriptive (e.g., "View Transitions Example"), but the generic "Vite App" is acceptable for an example project.
examples/solid/view-transitions/src/routes/index.tsx (1)
3-23: LGTM! Well-structured home route.The route definition and view transition implementation are correct. The
viewTransition={{ types: ['slide-left'] }}properly demonstrates custom transition types, and the[view-transition-name:main-content]CSS class correctly identifies the transitioning element.examples/solid/view-transitions/src/routes/how-it-works.tsx (1)
3-31: LGTM! Demonstrates bidirectional transitions effectively.The route correctly demonstrates both
slide-leftandslide-righttransitions for forward and backward navigation. The comments helpfully referencestyles.cssfor the actual transition definitions.examples/solid/view-transitions/src/routes/posts.index.tsx (1)
3-9: LGTM! Clean index route implementation.The posts index route is correctly defined with appropriate placeholder content.
examples/solid/view-transitions/src/main.tsx (3)
7-40: LGTM! Comprehensive router configuration.The router setup is excellent with sensible defaults (
defaultPreload: 'intent',scrollRestoration: true). The commenteddefaultViewTransitionexamples are educational and show advanced usage patterns with dynamic transition types based on navigation direction.
43-47: LGTM! Proper type augmentation.The module augmentation correctly registers the router instance for type safety throughout the application.
49-53: LGTM! Safe rendering approach.The check for
!rootElement.innerHTMLprevents double-rendering, which is a good practice especially during development with hot module replacement.examples/solid/view-transitions/src/routes/explore.tsx (1)
3-30: LGTM! Educational content with helpful disclaimer.The route provides clear explanations about view transitions and includes a helpful browser compatibility disclaimer. The implementation correctly demonstrates the
slide-righttransition.examples/solid/view-transitions/src/routes/__root.tsx (2)
9-19: LGTM! Well-structured root route.The root route is properly configured with both the main component and a helpful
notFoundComponentfallback.
21-52: LGTM! Complete root layout with navigation and devtools.The root component correctly implements:
- HeadContent for document metadata
- Navigation with active state styling
- View transitions on navigation links (boolean prop for default transitions)
- Outlet for child routes
- TanStack Router Devtools for development
The
exact: trueoption on the Home link ensures proper active state handling for the root path.examples/solid/view-transitions/src/routes/posts.route.tsx (1)
1-42: LGTM! Well-structured route with view transitions.The route implementation correctly demonstrates Solid Router patterns with view transitions. The intentional addition of the non-existent post (line 15) effectively showcases the error handling capabilities, and the view transition configuration is properly set up with both CSS properties and the
viewTransitionprop.examples/solid/view-transitions/src/routes/posts.$postId.tsx (1)
1-27: LGTM! Comprehensive error handling and clean implementation.The route correctly implements error boundaries with both
errorComponentandnotFoundComponent, and the component logic properly consumes the loader data. The implementation follows Solid Router best practices.
| "@tanstack/solid-router": "^1.135.0", | ||
| "@tanstack/solid-router-devtools": "^1.135.0", | ||
| "@tanstack/router-plugin": "^1.135.0", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* protocol for internal dependencies.
The TanStack packages should use the workspace:* protocol instead of explicit versions to ensure the example uses local workspace versions during monorepo development.
As per coding guidelines.
Apply this diff:
"dependencies": {
"@tailwindcss/postcss": "^4.1.15",
- "@tanstack/solid-router": "^1.135.0",
- "@tanstack/solid-router-devtools": "^1.135.0",
- "@tanstack/router-plugin": "^1.135.0",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/router-plugin": "workspace:*",
"postcss": "^8.5.1",📝 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.
| "@tanstack/solid-router": "^1.135.0", | |
| "@tanstack/solid-router-devtools": "^1.135.0", | |
| "@tanstack/router-plugin": "^1.135.0", | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "postcss": "^8.5.1", |
🤖 Prompt for AI Agents
In examples/solid/view-transitions/package.json around lines 13 to 15, the
TanStack packages are pinned to explicit versions; update the three entries
("@tanstack/solid-router", "@tanstack/solid-router-devtools",
"@tanstack/router-plugin") to use the workspace:* protocol instead of version
strings so the example resolves local workspace packages during monorepo
development.
| export type PostType = { | ||
| id: string | ||
| title: string | ||
| body: string | ||
| } |
There was a problem hiding this comment.
Fix type mismatch for id field.
The JSONPlaceholder API returns id as a number, but PostType declares it as a string. This creates a type mismatch that undermines type safety.
Apply this diff to correct the type:
export type PostType = {
- id: string
+ id: number
title: string
body: string
}Note: You'll also need to update the route parameter handling in posts.route.tsx (line 22) to convert the string param to a number, or adjust fetchPost to accept a string and convert it internally.
📝 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.
| export type PostType = { | |
| id: string | |
| title: string | |
| body: string | |
| } | |
| export type PostType = { | |
| id: number | |
| title: string | |
| body: string | |
| } |
🤖 Prompt for AI Agents
In examples/solid/view-transitions/src/posts.tsx around lines 4 to 8, the
PostType currently declares id as a string but the JSONPlaceholder API returns
id as a number; update PostType so id is a number (id: number). Also update the
route parameter handling in posts.route.tsx (around line 22) to convert the
route param from string to number before using it, or alternatively adjust
fetchPost to accept a string id and convert it to a number internally so types
stay consistent.
* docs(solid-router): port view-transition example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Summary by CodeRabbit
New Features
Documentation