docs(solid-router): kitchensink example #5840
Conversation
WalkthroughThis PR adds a new code-based Solid.js kitchen-sink example project to the TanStack Router repository. The addition includes project scaffolding, configuration files, an HTML entry point, and comprehensive application code demonstrating TanStack Router features with Solid.js, including route definitions, data loading, mutations, and authentication flows. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
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 5cef952
☁️ Nx Cloud last updated this comment at |
birkskyum
force-pushed
the
docs(solid-router)--kitchensink-example
branch
from
f960dbf to
5cef952
Compare
![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 (6)
examples/solid/kitchen-sink/src/Expensive.tsx (1)
3-3: Template literal unnecessary for static string.The backticks can be replaced with regular quotes since the class name is static.
Apply this diff:
- <div class={`p-2`}> + <div class="p-2">examples/solid/kitchen-sink/src/useMutation.tsx (1)
3-13: Consider adding explicit return type annotation.While TypeScript infers the return type, adding an explicit annotation improves API discoverability and catches unintended changes.
Example:
export function useMutation<TVariables, TData, TError = Error>(opts: { fn: (variables: TVariables) => Promise<TData> onSuccess?: (ctx: { data: TData }) => void | Promise<void> }): { status: 'idle' | 'pending' | 'success' | 'error' variables: TVariables | undefined submittedAt: number | undefined mutate: (variables: TVariables) => Promise<TData | undefined> error: TError | undefined data: TData | undefined } { // ... implementation }examples/solid/kitchen-sink/src/mockTodos.ts (4)
44-45: Avoid null assertions for module-level state.Using
null!assertions bypasses TypeScript's type safety. While the code works because all public functions callensureInvoices()/ensureUsers()first, this pattern is fragile and could cause runtime errors if the code evolves.Consider initializing with empty arrays instead:
-let invoices: Array<Invoice> = null! -let users: Array<User> = null! +let invoices: Array<Invoice> = [] +let users: Array<User> = []Then update the ensure functions to check for empty arrays:
const ensureInvoices = async () => { - if (!invoicesPromise) { + if (invoices.length === 0 && !invoicesPromise) { invoicesPromise = Promise.resolve().then(async () => {
126-127: Remove unnecessary optional chaining.The second optional chaining operator (
?.) aftertoLocaleLowerCase()is unnecessary becausetoLocaleLowerCase()always returns a string, nevernullorundefined. The eslint-disable comment is suppressing a valid warning.- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (updatedInvoice.title?.toLocaleLowerCase()?.includes('error')) { + if (updatedInvoice.title?.toLowerCase()?.includes('error')) {Note: Also consider using
toLowerCase()instead oftoLocaleLowerCase()for consistency withfetchUsers(line 149), unless locale-specific behavior is required.
133-133: Add non-null assertion for type safety.TypeScript cannot infer that the invoice exists here because the error was thrown inside the
producecallback. Thefindcould theoretically returnundefined, causing a type mismatch.- return invoices.find((d) => d.id === id) + return invoices.find((d) => d.id === id)!
164-168: Note: Inconsistent error handling pattern.
fetchUserByIdreturnsUser | undefinedwhen a user is not found, whilefetchInvoiceById(line 85) throws an error. This inconsistency may be intentional to demonstrate different error handling patterns in the kitchen-sink example, but it's worth noting for consistency.If consistency is preferred, consider either approach:
- Make both throw when not found, or
- Make both return
T | undefined
📜 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 (15)
docs/router/config.json(1 hunks)examples/solid/kitchen-sink/.gitignore(1 hunks)examples/solid/kitchen-sink/.vscode/settings.json(1 hunks)examples/solid/kitchen-sink/README.md(1 hunks)examples/solid/kitchen-sink/index.html(1 hunks)examples/solid/kitchen-sink/package.json(1 hunks)examples/solid/kitchen-sink/postcss.config.mjs(1 hunks)examples/solid/kitchen-sink/src/Expensive.tsx(1 hunks)examples/solid/kitchen-sink/src/main.tsx(1 hunks)examples/solid/kitchen-sink/src/mockTodos.ts(1 hunks)examples/solid/kitchen-sink/src/styles.css(1 hunks)examples/solid/kitchen-sink/src/useMutation.tsx(1 hunks)examples/solid/kitchen-sink/src/utils.tsx(1 hunks)examples/solid/kitchen-sink/tsconfig.json(1 hunks)examples/solid/kitchen-sink/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/kitchen-sink/src/styles.cssexamples/solid/kitchen-sink/index.htmlexamples/solid/kitchen-sink/src/main.tsxexamples/solid/kitchen-sink/vite.config.jsexamples/solid/kitchen-sink/README.mdexamples/solid/kitchen-sink/src/useMutation.tsxexamples/solid/kitchen-sink/postcss.config.mjsexamples/solid/kitchen-sink/src/mockTodos.tsexamples/solid/kitchen-sink/src/utils.tsxexamples/solid/kitchen-sink/tsconfig.jsonexamples/solid/kitchen-sink/package.jsonexamples/solid/kitchen-sink/src/Expensive.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/kitchen-sink/src/main.tsxexamples/solid/kitchen-sink/src/useMutation.tsxexamples/solid/kitchen-sink/src/mockTodos.tsexamples/solid/kitchen-sink/src/utils.tsxexamples/solid/kitchen-sink/src/Expensive.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/kitchen-sink/package.json
🧠 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 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/kitchen-sink/src/main.tsxexamples/solid/kitchen-sink/tsconfig.jsonexamples/solid/kitchen-sink/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/kitchen-sink/src/main.tsxexamples/solid/kitchen-sink/.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 docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Applied to files:
docs/router/config.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:
docs/router/config.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/kitchen-sink/.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/kitchen-sink/tsconfig.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/kitchen-sink/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-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/kitchen-sink/package.json
🧬 Code graph analysis (2)
examples/solid/kitchen-sink/src/main.tsx (2)
examples/solid/kitchen-sink/src/mockTodos.ts (7)
fetchInvoices(76-78)postInvoice(92-114)Invoice(8-12)fetchInvoiceById(80-90)patchInvoice(116-135)fetchUsers(139-162)fetchUserById(164-168)examples/solid/kitchen-sink/src/useMutation.tsx (2)
useMutation(3-51)error(44-46)
examples/solid/kitchen-sink/src/mockTodos.ts (1)
examples/solid/kitchen-sink/src/utils.tsx (3)
loaderDelayFn(1-11)actionDelayFn(13-19)shuffle(21-33)
🪛 Biome (2.1.2)
examples/solid/kitchen-sink/src/main.tsx
[error] 539-539: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
⏰ 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 (9)
examples/solid/kitchen-sink/.gitignore (1)
1-5: LGTM!Standard gitignore patterns appropriate for a Vite-based Solid.js project.
examples/solid/kitchen-sink/README.md (1)
1-6: LGTM!Clear and concise run instructions for the example.
examples/solid/kitchen-sink/.vscode/settings.json (1)
1-11: LGTM!Appropriate VSCode settings to exclude the autogenerated route tree file from watching, searching, and editing. Based on learnings.
examples/solid/kitchen-sink/tsconfig.json (1)
1-13: LGTM!TypeScript configuration properly enables strict mode and is correctly configured for Solid.js. As per coding guidelines.
examples/solid/kitchen-sink/vite.config.js (1)
1-7: LGTM!Standard Vite configuration with the Solid.js plugin correctly applied.
examples/solid/kitchen-sink/postcss.config.mjs (1)
1-5: LGTM!Standard PostCSS configuration for Tailwind CSS v4 using the new
@tailwindcss/postcssplugin.examples/solid/kitchen-sink/index.html (1)
1-11: HTML shell looks good.The minimal Vite entry point aligns with the other Solid examples—no issues spotted.
examples/solid/kitchen-sink/src/styles.css (1)
1-21: Tailwind base layer setup looks solid.The import and base styles follow the v4 patterns and match the rest of the example’s design—looks good.
examples/solid/kitchen-sink/src/utils.tsx (1)
1-33: Utility helpers look correct.The delay wrappers and Fisher–Yates shuffle match their usage in the loaders/actions—looks good to me.
| { | ||
| "label": "Kitchen Sink (code-based)", | ||
| "to": "framework/solid/examples/kitchen-sink" | ||
| }, |
There was a problem hiding this comment.
Add the matching docs page before merging.
This new nav item points to framework/solid/examples/kitchen-sink, but I don’t see an accompanying page in this PR. Without it, the menu link will 404 on the site. Please add the corresponding MDX page (or adjust the link if it already exists elsewhere) so the navigation remains functional.
🤖 Prompt for AI Agents
In docs/router/config.json around lines 637 to 640, the new navigation entry
"framework/solid/examples/kitchen-sink" points to a page that isn't present in
this PR, causing a 404; add a corresponding MDX page at
docs/framework/solid/examples/kitchen-sink.mdx (or adjust the "to" path to an
existing page) containing the Kitchen Sink documentation and frontmatter so the
link resolves, then ensure the file is exported/registered by the docs build
(and update any index or sidebar if your system requires explicit inclusion).
| "@tailwindcss/postcss": "^4.1.15", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "immer": "^10.1.1", | ||
| "postcss": "^8.5.1", | ||
| "solid-js": "^1.9.10", | ||
| "redaxios": "^0.5.1", | ||
| "tailwindcss": "^4.1.15", | ||
| "zod": "^3.24.2" |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Switch local TanStack deps to workspace:*.
Per the repo convention, internal packages should resolve through the workspace to pick up local changes. Please update both router packages accordingly.
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.
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "immer": "^10.1.1", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "immer": "^10.1.1", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" |
🤖 Prompt for AI Agents
In examples/solid/kitchen-sink/package.json around lines 12 to 20 the two
TanStack packages are declared with fixed versions; update
"@tanstack/solid-router" and "@tanstack/solid-router-devtools" to use the
workspace protocol so they resolve to local packages by replacing their version
strings with "workspace:*" (leave all other dependencies unchanged).
| {['name', 'id', 'email'].map((d) => { | ||
| return <option value={d} children={d} /> | ||
| })} |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Render <option> content directly.
Biome flags children={...} on JSX elements as an error here. Switching to normal JSX children keeps the code clear and resolves the lint failure.
Apply this diff:
- {['name', 'id', 'email'].map((d) => {
- return <option value={d} children={d} />
- })}
+ {['name', 'id', 'email'].map((d) => {
+ return <option value={d}>{d}</option>
+ })}📝 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.
| {['name', 'id', 'email'].map((d) => { | |
| return <option value={d} children={d} /> | |
| })} | |
| {['name', 'id', 'email'].map((d) => { | |
| return <option value={d}>{d}</option> | |
| })} |
🧰 Tools
🪛 Biome (2.1.2)
[error] 539-539: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🤖 Prompt for AI Agents
In examples/solid/kitchen-sink/src/main.tsx around lines 538 to 540, the mapped
<option> elements are using the JSX prop children={d}, which Biome flags as an
error; change each option to render its content as normal JSX children (e.g.,
<option value={d}>{d}</option>) when returning from the map to resolve the lint
failure.
| } catch (err: any) { | ||
| setStatus('error') | ||
| setError(() => err) | ||
| } |
There was a problem hiding this comment.
Avoid any type in error handling.
Using any type in the catch block violates TypeScript strict mode best practices and the coding guideline for extensive type safety. Use unknown with proper type handling or cast to the error type.
As per coding guidelines.
Apply this diff:
- } catch (err: any) {
+ } catch (err) {
setStatus('error')
- setError(() => err)
+ setError(() => err as TError)
}📝 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.
| } catch (err: any) { | |
| setStatus('error') | |
| setError(() => err) | |
| } | |
| } catch (err) { | |
| setStatus('error') | |
| setError(() => err as TError) | |
| } |
🤖 Prompt for AI Agents
In examples/solid/kitchen-sink/src/useMutation.tsx around lines 27 to 30, the
catch block types the error as `any`; change it to `unknown` and normalize it
before calling setError. Replace `catch (err: any)` with `catch (err: unknown)`
and update setError to accept a proper Error instance (e.g. use a short type
guard: if (err instanceof Error) return err; else return new
Error(String(err))). Keep setStatus('error') as is.
* docs(solid-router): kitchensink example * add listing * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Summary by CodeRabbit
Documentation