docs(solid-router): scroll restoration example #5839
Conversation
WalkthroughA new Solid.js example project demonstrating scroll restoration with TanStack Router is introduced. The example includes complete project setup with build tooling, configuration files, and a router implementation featuring scroll position preservation and virtual list rendering. Changes
Sequence DiagramsequenceDiagram
participant User
participant Router
participant ScrollRestoration
participant Virtualizer
participant DOM
User->>Router: Navigate to route
Router->>ScrollRestoration: Initialize scroll restoration
activate ScrollRestoration
ScrollRestoration->>DOM: Capture current scroll position
ScrollRestoration->>Router: Store scroll state
deactivate ScrollRestoration
Router->>User: Render new route
User->>DOM: Scroll/interact with virtualized list
Virtualizer->>DOM: Render visible items
User->>Router: Navigate away
activate ScrollRestoration
ScrollRestoration->>DOM: Save scroll position to state
deactivate ScrollRestoration
User->>Router: Navigate back
activate ScrollRestoration
ScrollRestoration->>DOM: Restore saved scroll position
deactivate ScrollRestoration
Virtualizer->>DOM: Re-render from restored position
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
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 26c6b4a
☁️ 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: 2
🧹 Nitpick comments (1)
examples/solid/scroll-restoration/index.html (1)
6-6: Consider a more descriptive title.The title "Vite App" is generic. Consider updating it to something more specific like "Scroll Restoration Example" to better describe the example's purpose.
Apply this diff:
- <title>Vite App</title> + <title>Scroll Restoration Example</title>
📜 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 (11)
docs/router/config.json(1 hunks)examples/solid/scroll-restoration/.gitignore(1 hunks)examples/solid/scroll-restoration/.vscode/settings.json(1 hunks)examples/solid/scroll-restoration/README.md(1 hunks)examples/solid/scroll-restoration/index.html(1 hunks)examples/solid/scroll-restoration/package.json(1 hunks)examples/solid/scroll-restoration/postcss.config.mjs(1 hunks)examples/solid/scroll-restoration/src/main.tsx(1 hunks)examples/solid/scroll-restoration/src/styles.css(1 hunks)examples/solid/scroll-restoration/tsconfig.json(1 hunks)examples/solid/scroll-restoration/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/scroll-restoration/README.mdexamples/solid/scroll-restoration/vite.config.jsexamples/solid/scroll-restoration/src/main.tsxexamples/solid/scroll-restoration/package.jsonexamples/solid/scroll-restoration/src/styles.cssexamples/solid/scroll-restoration/postcss.config.mjsexamples/solid/scroll-restoration/index.htmlexamples/solid/scroll-restoration/tsconfig.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/scroll-restoration/src/main.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/scroll-restoration/package.json
🧠 Learnings (8)
📚 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/scroll-restoration/src/main.tsxexamples/solid/scroll-restoration/package.jsonexamples/solid/scroll-restoration/tsconfig.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 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/scroll-restoration/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 packages/{router-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
examples/solid/scroll-restoration/package.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/scroll-restoration/package.jsonexamples/solid/scroll-restoration/.vscode/settings.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:
examples/solid/scroll-restoration/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 examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Applied to files:
examples/solid/scroll-restoration/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:
examples/solid/scroll-restoration/.vscode/settings.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/scroll-restoration/tsconfig.json
🔇 Additional comments (8)
examples/solid/scroll-restoration/.gitignore (1)
1-5: Standard .gitignore pattern set looks good.The file includes all the necessary patterns for a Vite-based Node.js project: dependency directories, build outputs (both standard and SSR variants), OS metadata, and local environment files. Nothing appears to be missing.
docs/router/config.json (1)
653-656: LGTM!The new example entry follows the established pattern and is correctly placed within the Solid framework examples section.
examples/solid/scroll-restoration/README.md (1)
1-6: LGTM!The README follows the standard format for example projects with clear setup instructions.
examples/solid/scroll-restoration/vite.config.js (1)
1-7: LGTM!Standard Vite configuration with the Solid plugin properly configured.
examples/solid/scroll-restoration/tsconfig.json (1)
1-12: LGTM!TypeScript configuration is appropriate for a Solid.js example with strict mode enabled and correct JSX settings.
examples/solid/scroll-restoration/.vscode/settings.json (1)
1-11: LGTM!The VSCode settings appropriately exclude the autogenerated
routeTree.gen.tsfile from watchers, search, and mark it as readonly to prevent accidental modifications.Based on learnings.
examples/solid/scroll-restoration/src/styles.css (1)
1-21: LGTM!The stylesheet correctly uses Tailwind CSS v4 syntax with the new
@import 'tailwindcss'directive, custom base layer styling, and appropriate utility classes for light/dark mode theming.examples/solid/scroll-restoration/postcss.config.mjs (1)
1-5: LGTM!PostCSS configuration correctly uses the
@tailwindcss/postcssplugin for Tailwind CSS v4 integration.
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", |
There was a problem hiding this comment.
Use workspace protocol for internal dependencies.
The internal TanStack Router packages should use the workspace:* protocol instead of version numbers to ensure they reference the local workspace packages during development.
As per coding guidelines.
Apply this diff:
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",📝 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.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", |
🤖 Prompt for AI Agents
In examples/solid/scroll-restoration/package.json around lines 13 to 14, the
internal TanStack Router dependencies currently use fixed version numbers;
change both "@tanstack/solid-router" and "@tanstack/solid-router-devtools" to
use the workspace protocol by replacing their version strings with "workspace:*"
so they resolve to the local workspace packages during development.
| }) | ||
|
|
||
| // Let's use TanStack Virtual to virtualize some content! | ||
| let virtualizerParentRef: any |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Avoid any type for better type safety.
The any type weakens TypeScript's type checking. Use a more specific type for the virtualizer parent ref.
As per coding guidelines.
Apply this diff:
- let virtualizerParentRef: any
+ let virtualizerParentRef: HTMLDivElement | undefined📝 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.
| let virtualizerParentRef: any | |
| let virtualizerParentRef: HTMLDivElement | undefined |
🤖 Prompt for AI Agents
In examples/solid/scroll-restoration/src/main.tsx around line 104, the variable
virtualizerParentRef is typed as any which weakens type safety; change its type
to a concrete DOM/ref type such as HTMLDivElement | null (or a Solid ref type
like Ref<HTMLDivElement | null> / (el: HTMLDivElement | null) => void if using
function refs), update any related assignments/uses to match the chosen type,
and add necessary imports or type annotations so TypeScript enforces correct DOM
element handling.
* docs(solid-router): scroll restoration example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Summary by CodeRabbit