docs(solid-router): quickstart example (code based) #5830
Conversation
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.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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" |
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".
| "@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.*
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.
| "@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.
Summary by CodeRabbit
New Features
Documentation