docs(solid-start): start-basic-cloudflare example #5567
Conversation
|
Warning Rate limit exceeded@birkskyum has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 7 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughAdds a complete Solid Start example configured for Cloudflare Workers: project config, build tooling, Tailwind/PostCSS, generated strongly-typed route tree, router factory, file-based routes (pages and APIs), components, utilities (fetchers, SEO, middleware), styles, and README. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant Router as getRouter()
participant RouteTree as routeTree
participant Loader as Loader/Handler
participant Server as Cloudflare Worker
Client->>Router: Navigate / request
Router->>RouteTree: match route
alt static route/component
RouteTree->>Client: render component (hydration)
else server-side loader or API
Router->>Loader: run loader or server handler
Loader->>Server: fetch external data / perform logic
Server-->>Loader: response
Loader-->>Router: loader data / Response
Router-->>Client: rendered page / Response
end
alt error
Loader-->>Router: throw
Router->>Client: DefaultCatchBoundary / NotFound
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Rationale: many new files but patterned; heavy generated routeTree plus router, server handlers, middleware, and interdependent loaders warrant careful review. Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 3550bf7
☁️ Nx Cloud last updated this comment at |
birkskyum
force-pushed
the
docs(solid-start)--start-basic-cloudflare-example
branch
from
6e3547f to
40b494a
Compare
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: 13
🧹 Nitpick comments (9)
examples/solid/start-basic-cloudflare/public/site.webmanifest (1)
2-3: Consider populating example values fornameandshort_name.The manifest file is well-structured, but the
nameandshort_namefields are left empty. While this is acceptable for a template, it would be more helpful to include placeholder values that users can customize (e.g.,"Solid Start Cloudflare") to provide a better example and guide.- "name": "", - "short_name": "", + "name": "Solid Start Cloudflare", + "short_name": "SS Cloudflare",examples/solid/start-basic-cloudflare/src/routes/customScript[.]js.ts (1)
1-15: LGTM! Clean example of serving dynamic JavaScript via route handler.This implementation correctly demonstrates serving custom JavaScript content through a file-based route. The route path
/customScript.jsproperly integrates with the script reference in__root.tsx, and theContent-Typeheader is correctly set.Optional enhancement: Consider adding charset to the Content-Type header for completeness:
- 'Content-Type': 'application/javascript', + 'Content-Type': 'application/javascript; charset=utf-8',While browsers typically assume UTF-8 by default, explicitly specifying the charset follows best practices and can prevent edge-case encoding issues.
examples/solid/start-basic-cloudflare/src/utils/users.tsx (1)
1-5: Consider using .ts extension instead of .tsx.Since this file contains only a type definition with no JSX, the file extension should be
.tsrather than.tsxto follow TypeScript conventions.examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
3-25: Tighten prop typing for better DX.Type children more precisely to avoid
any.-import { Link } from '@tanstack/solid-router' +import { Link } from '@tanstack/solid-router' +import type { JSX } from 'solid-js' -export function NotFound({ children }: { children?: any }) { +export function NotFound({ children }: { children?: JSX.Element }) {examples/solid/start-basic-cloudflare/src/utils/seo.ts (1)
12-33: Avoid emitting meta tags withcontent: undefinedFilter tags so only entries with defined
contentare emitted (while preserving the{ title }entry).Apply:
@@ - const tags = [ + const tags = [ { title }, { name: 'description', content: description }, { name: 'keywords', content: keywords }, @@ - return tags + // Keep { title } and drop meta entries with undefined content + return tags.filter((t) => + 'content' in t ? t.content != null : true, + )examples/solid/start-basic-cloudflare/src/routes/users.tsx (1)
1-17: Consistent imports for shared typesElsewhere the project imports
Uservia~/utils/users. For consistency and easier refactors, consider switching this file to the same alias.Apply:
-import type { User } from '../utils/users' +import type { User } from '~/utils/users'examples/solid/start-basic-cloudflare/src/routes/__root.tsx (2)
69-74: Render HeadContent insideHead elements should be emitted from within
<head>, not<body>.<head> - <HydrationScript /> + <HydrationScript /> + <HeadContent /> </head> <body> - <HeadContent />
68-68: Add html lang for a11ySet document language.
- <html> + <html lang="en">examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
2-2: Use consistent path alias for importsStick to
~like elsewhere for consistency and TS path mapping.-import { fetchPost } from '../utils/posts' +import { fetchPost } from '~/utils/posts'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
examples/solid/start-basic-cloudflare/public/android-chrome-192x192.pngis excluded by!**/*.pngexamples/solid/start-basic-cloudflare/public/android-chrome-512x512.pngis excluded by!**/*.pngexamples/solid/start-basic-cloudflare/public/apple-touch-icon.pngis excluded by!**/*.pngexamples/solid/start-basic-cloudflare/public/favicon-16x16.pngis excluded by!**/*.pngexamples/solid/start-basic-cloudflare/public/favicon-32x32.pngis excluded by!**/*.pngexamples/solid/start-basic-cloudflare/public/favicon.icois excluded by!**/*.icoexamples/solid/start-basic-cloudflare/public/favicon.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (40)
examples/solid/start-basic-cloudflare/.gitignore(1 hunks)examples/solid/start-basic-cloudflare/.prettierignore(1 hunks)examples/solid/start-basic-cloudflare/.vscode/settings.json(1 hunks)examples/solid/start-basic-cloudflare/README.md(1 hunks)examples/solid/start-basic-cloudflare/package.json(1 hunks)examples/solid/start-basic-cloudflare/postcss.config.mjs(1 hunks)examples/solid/start-basic-cloudflare/public/site.webmanifest(1 hunks)examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/components/PostError.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/components/UserError.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routeTree.gen.ts(1 hunks)examples/solid/start-basic-cloudflare/src/router.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/__root.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/api/users.$userId.ts(1 hunks)examples/solid/start-basic-cloudflare/src/routes/api/users.ts(1 hunks)examples/solid/start-basic-cloudflare/src/routes/customScript[.]js.ts(1 hunks)examples/solid/start-basic-cloudflare/src/routes/deferred.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/index.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/posts.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/redirect.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/users.index.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/users.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/styles/app.css(1 hunks)examples/solid/start-basic-cloudflare/src/utils/loggingMiddleware.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/utils/posts.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/utils/seo.ts(1 hunks)examples/solid/start-basic-cloudflare/src/utils/users.tsx(1 hunks)examples/solid/start-basic-cloudflare/tailwind.config.mjs(1 hunks)examples/solid/start-basic-cloudflare/tsconfig.json(1 hunks)examples/solid/start-basic-cloudflare/vite.config.ts(1 hunks)examples/solid/start-basic-cloudflare/wrangler.jsonc(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/start-basic-cloudflare/wrangler.jsoncexamples/solid/start-basic-cloudflare/src/styles/app.cssexamples/solid/start-basic-cloudflare/src/utils/seo.tsexamples/solid/start-basic-cloudflare/README.mdexamples/solid/start-basic-cloudflare/src/components/UserError.tsxexamples/solid/start-basic-cloudflare/src/routes/deferred.tsxexamples/solid/start-basic-cloudflare/src/utils/users.tsxexamples/solid/start-basic-cloudflare/src/components/PostError.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.index.tsxexamples/solid/start-basic-cloudflare/src/utils/posts.tsxexamples/solid/start-basic-cloudflare/src/routes/users.index.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsxexamples/solid/start-basic-cloudflare/public/site.webmanifestexamples/solid/start-basic-cloudflare/src/routes/users.$userId.tsxexamples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsxexamples/solid/start-basic-cloudflare/package.jsonexamples/solid/start-basic-cloudflare/postcss.config.mjsexamples/solid/start-basic-cloudflare/src/routes/api/users.$userId.tsexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsxexamples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.tsxexamples/solid/start-basic-cloudflare/src/routes/users.tsxexamples/solid/start-basic-cloudflare/tsconfig.jsonexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsxexamples/solid/start-basic-cloudflare/src/routes/index.tsxexamples/solid/start-basic-cloudflare/src/routes/customScript[.]js.tsexamples/solid/start-basic-cloudflare/src/router.tsxexamples/solid/start-basic-cloudflare/tailwind.config.mjsexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsxexamples/solid/start-basic-cloudflare/src/routes/__root.tsxexamples/solid/start-basic-cloudflare/src/routeTree.gen.tsexamples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsxexamples/solid/start-basic-cloudflare/src/routes/redirect.tsxexamples/solid/start-basic-cloudflare/src/utils/loggingMiddleware.tsxexamples/solid/start-basic-cloudflare/src/components/NotFound.tsxexamples/solid/start-basic-cloudflare/vite.config.tsexamples/solid/start-basic-cloudflare/src/routes/api/users.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-basic-cloudflare/src/utils/seo.tsexamples/solid/start-basic-cloudflare/src/components/UserError.tsxexamples/solid/start-basic-cloudflare/src/routes/deferred.tsxexamples/solid/start-basic-cloudflare/src/utils/users.tsxexamples/solid/start-basic-cloudflare/src/components/PostError.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.index.tsxexamples/solid/start-basic-cloudflare/src/utils/posts.tsxexamples/solid/start-basic-cloudflare/src/routes/users.index.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsxexamples/solid/start-basic-cloudflare/src/routes/users.$userId.tsxexamples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsxexamples/solid/start-basic-cloudflare/src/routes/api/users.$userId.tsexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsxexamples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.tsxexamples/solid/start-basic-cloudflare/src/routes/users.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsxexamples/solid/start-basic-cloudflare/src/routes/index.tsxexamples/solid/start-basic-cloudflare/src/routes/customScript[.]js.tsexamples/solid/start-basic-cloudflare/src/router.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsxexamples/solid/start-basic-cloudflare/src/routes/__root.tsxexamples/solid/start-basic-cloudflare/src/routeTree.gen.tsexamples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsxexamples/solid/start-basic-cloudflare/src/routes/redirect.tsxexamples/solid/start-basic-cloudflare/src/utils/loggingMiddleware.tsxexamples/solid/start-basic-cloudflare/src/components/NotFound.tsxexamples/solid/start-basic-cloudflare/vite.config.tsexamples/solid/start-basic-cloudflare/src/routes/api/users.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-basic-cloudflare/src/routes/deferred.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.index.tsxexamples/solid/start-basic-cloudflare/src/routes/users.index.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsxexamples/solid/start-basic-cloudflare/src/routes/users.$userId.tsxexamples/solid/start-basic-cloudflare/src/routes/api/users.$userId.tsexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsxexamples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.tsxexamples/solid/start-basic-cloudflare/src/routes/users.tsxexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsxexamples/solid/start-basic-cloudflare/src/routes/index.tsxexamples/solid/start-basic-cloudflare/src/routes/customScript[.]js.tsexamples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsxexamples/solid/start-basic-cloudflare/src/routes/__root.tsxexamples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsxexamples/solid/start-basic-cloudflare/src/routes/redirect.tsxexamples/solid/start-basic-cloudflare/src/routes/api/users.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/start-basic-cloudflare/package.json
🧠 Learnings (2)
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#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/start-basic-cloudflare/.vscode/settings.jsonexamples/solid/start-basic-cloudflare/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#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/start-basic-cloudflare/tsconfig.json
🧬 Code graph analysis (24)
examples/solid/start-basic-cloudflare/src/utils/seo.ts (1)
examples/solid/start-basic/src/utils/seo.ts (1)
title(1-33)
examples/solid/start-basic-cloudflare/src/components/UserError.tsx (2)
examples/solid/start-basic/src/components/UserError.tsx (1)
UserErrorComponent(3-5)examples/solid/start-basic-solid-query/src/routes/users.$userId.tsx (1)
UserErrorComponent(7-9)
examples/solid/start-basic-cloudflare/src/routes/deferred.tsx (1)
examples/solid/start-basic/src/routes/deferred.tsx (1)
Deferred(31-62)
examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)
Route(5-12)examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/routes/posts.tsx (1)
Route(4-7)
examples/solid/start-basic-cloudflare/src/routes/users.index.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/api/users.ts (1)
Route(41-64)examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx (1)
Route(6-26)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)
examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx (4)
examples/solid/start-basic-cloudflare/src/routes/api/users.$userId.ts (1)
Route(5-33)examples/solid/start-basic-cloudflare/src/utils/users.tsx (1)
User(1-5)examples/solid/start-basic-cloudflare/src/components/UserError.tsx (1)
UserErrorComponent(4-6)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (3)
e2e/solid-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/react/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)
examples/solid/start-basic-cloudflare/src/routes/api/users.$userId.ts (3)
examples/solid/start-basic-cloudflare/src/routes/api/users.ts (1)
Route(41-64)examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx (1)
Route(6-26)examples/solid/start-basic-cloudflare/src/utils/users.tsx (1)
User(1-5)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (4)
examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/utils/posts.tsx (1)
fetchPost(10-28)examples/solid/start-basic-cloudflare/src/components/PostError.tsx (1)
PostErrorComponent(4-6)examples/solid/start-basic/src/routes/posts_.$postId.deep.tsx (1)
PostDeepComponent(14-26)
examples/solid/start-basic-cloudflare/src/routes/posts.tsx (2)
examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/utils/posts.tsx (1)
fetchPosts(30-40)
examples/solid/start-basic-cloudflare/src/routes/users.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/users.index.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/api/users.ts (1)
Route(41-64)examples/solid/start-basic-cloudflare/src/utils/users.tsx (1)
User(1-5)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (4)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
LayoutBComponent(9-11)
examples/solid/start-basic-cloudflare/src/routes/index.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/routes/posts.tsx (1)
Route(4-7)examples/solid/start-basic-cloudflare/worker-configuration.d.ts (1)
env(7814-7814)
examples/solid/start-basic-cloudflare/src/routes/customScript[.]js.ts (1)
examples/solid/start-basic-cloudflare/src/routes/__root.tsx (1)
Route(16-64)
examples/solid/start-basic-cloudflare/src/router.tsx (2)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)
examples/solid/start-basic-cloudflare/src/routes/__root.tsx (16)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)
Route(5-12)examples/solid/start-basic-cloudflare/src/routes/users.index.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
Route(3-7)examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
Route(3-7)examples/solid/start-basic-cloudflare/src/routes/customScript[.]js.ts (1)
Route(3-15)examples/solid/start-basic-cloudflare/src/routes/deferred.tsx (1)
Route(18-29)examples/solid/start-basic-cloudflare/src/routes/index.tsx (1)
Route(5-8)examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/posts.tsx (1)
Route(4-7)examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx (1)
Route(6-26)examples/solid/start-basic-cloudflare/src/utils/seo.ts (1)
seo(1-33)examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-cloudflare/src/routeTree.gen.ts (2)
e2e/react-router/js-only-file-based/src/routeTree.gen.js (12)
PathlessLayoutRoute(21-24)IndexRoute(30-34)PostsIndexRoute(35-39)PostsPostIdRoute(40-44)PathlessLayoutNestedLayoutRoute(45-49)PathlessLayoutNestedLayoutRouteBRoute(50-55)PathlessLayoutNestedLayoutRouteARoute(56-61)PathlessLayoutRouteWithChildren(86-88)PathlessLayoutNestedLayoutRouteWithChildren(77-80)PathlessLayoutNestedLayoutRouteChildren(72-75)PathlessLayoutRouteChildren(82-84)rootRouteChildren(90-94)examples/solid/start-basic-cloudflare/src/router.tsx (1)
getRouter(6-16)
examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (4)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)
Route(5-12)examples/solid/start-basic-cloudflare/src/utils/posts.tsx (1)
fetchPost(10-28)examples/solid/start-basic-cloudflare/src/components/PostError.tsx (1)
PostErrorComponent(4-6)examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-cloudflare/src/routes/redirect.tsx (2)
examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx (1)
Route(3-5)examples/solid/start-basic-cloudflare/src/routes/posts.tsx (1)
Route(4-7)
examples/solid/start-basic-cloudflare/src/components/NotFound.tsx (3)
examples/solid/start-basic-solid-query/src/components/NotFound.tsx (1)
NotFound(3-25)e2e/solid-start/server-routes/src/components/NotFound.tsx (1)
NotFound(3-25)examples/solid/start-basic/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/solid/start-basic-cloudflare/src/routes/api/users.ts (3)
packages/start-server-core/src/request-response.ts (1)
getRequestHeaders(77-80)examples/solid/start-basic-cloudflare/src/routes/api/users.$userId.ts (1)
Route(5-33)examples/solid/start-basic-cloudflare/src/utils/users.tsx (1)
User(1-5)
🪛 Biome (2.1.2)
examples/solid/start-basic-cloudflare/src/routes/deferred.tsx
[error] 43-43: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 53-53: 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: Test
- GitHub Check: Preview
🔇 Additional comments (28)
examples/solid/start-basic-cloudflare/.gitignore (1)
1-6: Appropriate.gitignorepatterns for a Solid Start + Cloudflare example.The entries correctly exclude build outputs (
dist), caches (.cache), environment files (.env), Wrangler CLI state (.wrangler), Node dependencies, and system files. This is a well-chosen set for the example project.examples/solid/start-basic-cloudflare/.prettierignore (1)
1-4: LGTM! Appropriate ignore patterns.The ignore patterns correctly exclude generated files (routeTree.gen.ts, worker-configuration.d.ts), lock files, and public directories from formatting.
examples/solid/start-basic-cloudflare/README.md (1)
1-43: LGTM! Clear and comprehensive documentation.The README provides all necessary commands and helpful context about accessing Cloudflare bindings. The import pattern
import { env } from 'cloudflare:workers'is correct for Cloudflare Workers.examples/solid/start-basic-cloudflare/src/routes/redirect.tsx (1)
1-9: LGTM! Correct redirect implementation.The route correctly uses the
beforeLoadhook withthrow redirect()to perform navigation, which is the proper pattern for TanStack Router.examples/solid/start-basic-cloudflare/.vscode/settings.json (1)
1-11: LGTM! Appropriate settings for generated files.These settings correctly treat the autogenerated
routeTree.gen.tsas readonly and exclude it from watching and search, which prevents accidental modifications and improves editor performance. Based on learnings.examples/solid/start-basic-cloudflare/src/styles/app.css (1)
1-18: LGTM! Proper Tailwind setup with theme support.The Tailwind directives and custom base layer correctly configure light/dark mode theming with appropriate color schemes.
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout.tsx (1)
1-16: LGTM! Correct pathless layout implementation.The route correctly uses the underscore prefix convention for pathless layouts and properly renders nested routes via the
Outletcomponent.examples/solid/start-basic-cloudflare/tailwind.config.mjs (1)
1-4: LGTM! Proper Tailwind configuration.The configuration correctly specifies the content paths for Tailwind to scan, and includes proper JSDoc type annotation for IDE support.
examples/solid/start-basic-cloudflare/postcss.config.mjs (1)
1-6: LGTM!The PostCSS configuration is correct and follows standard practices for integrating Tailwind CSS and Autoprefixer. The empty configuration objects will use the default settings from both plugins.
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1)
1-11: LGTM!The route definition follows the correct file-based routing pattern for TanStack Router. The path string matches the file location, and the component implementation is straightforward.
examples/solid/start-basic-cloudflare/tsconfig.json (1)
1-23: LGTM!The TypeScript configuration is well-structured with strict mode enabled, proper Solid.js JSX settings, and appropriate module resolution for a Vite-based project. The path alias configuration aligns with the vite-tsconfig-paths plugin usage.
As per coding guidelines.
examples/solid/start-basic-cloudflare/vite.config.ts (1)
7-19: Plugin order looks correct for Solid Start + Cloudflare SSR.The configuration properly sequences:
- Path resolution (tsConfigPaths)
- Environment setup (cloudflare)
- Framework integration (tanstackStart, viteSolid)
This order ensures that path aliases are resolved first, then the Cloudflare SSR environment is configured, and finally the Solid.js and TanStack Start transformations are applied.
examples/solid/start-basic-cloudflare/src/routes/users.index.tsx (1)
7-16: LGTM!The use of a regular
<a>tag for the API endpoint link is correct. Since/api/usersis an API route that returns JSON (not a client-side route), a standard anchor tag is appropriate for triggering the browser to fetch and potentially display/download the JSON response.examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1)
1-11: LGTM!The route definition correctly follows the file-based routing pattern, consistent with the sibling route-a.tsx file. The implementation is clean and straightforward.
examples/solid/start-basic-cloudflare/src/routes/deferred.tsx (3)
5-16: Server functions defined correctly.The server functions properly use
createServerFnwith input validators and handlers. TheslowServerFnappropriately simulates async work with a 1-second delay, which is useful for demonstrating deferred data loading.
18-29: Loader correctly demonstrates deferred data loading.The loader returns a mix of immediately resolved data (
person) and deferred promises (deferredStuff,deferredPerson), which effectively demonstrates streaming SSR capabilities with Solid Start.
40-55: Biome lint warnings are false positives for Solid.js.The static analysis tool (Biome) flags the
childrenprop usage in theAwaitcomponent, but this is a React-specific rule. In Solid.js, theAwaitcomponent correctly accepts achildrenprop as a render function, which is the idiomatic pattern for this framework.The Suspense/Await implementation is correct for Solid.js and properly handles the deferred data loading with appropriate fallback states.
examples/solid/start-basic-cloudflare/src/utils/loggingMiddleware.tsx (2)
3-26: LGTM! Context passing is correctly implemented.The
preLogMiddlewareproperly captures timing data on both client and server phases:
- Client phase: records
clientTimeand sends it to the server viasendContext- Server phase: records
serverTime, calculatesdurationToServer, and sends both back viasendContextThe use of
sendContextensures timing data flows correctly across the client-server boundary.
28-41: LGTM! Middleware composition and timing logic are correct.The
logMiddlewareeffectively:
- Composes
preLogMiddlewareto gather timing data- Waits for the complete request/response cycle
- Calculates and logs three useful metrics:
- Total round-trip duration
- Client-to-server latency
- Server-to-client latency
This provides valuable performance insights for debugging SSR applications.
examples/solid/start-basic-cloudflare/src/components/PostError.tsx (1)
4-6: LGTM — simple, correct passthrough wrapper.examples/solid/start-basic-cloudflare/src/routes/posts.index.tsx (1)
3-5: LGTM — index route wiring looks correct.examples/solid/start-basic-cloudflare/src/components/UserError.tsx (1)
4-6: LGTM — consistent with PostErrorComponent.examples/solid/start-basic-cloudflare/src/router.tsx (1)
6-16: LGTM — router factory is well-configured for SSR (new instance per call).examples/solid/start-basic-cloudflare/src/routes/posts.tsx (1)
4-38: LGTMLoader wiring, link params, and UI rendering look correct for the example.
examples/solid/start-basic-cloudflare/src/utils/posts.tsx (1)
10-28: Looks solidServer fns, typing, and notFound handling are correct and consistent with usage in routes.
Also applies to: 30-40
examples/solid/start-basic-cloudflare/src/routes/api/users.ts (1)
45-61: GET handler is straightforward and OKFetch, sanitize, and respond with json; headers from middleware applied. Nice.
examples/solid/start-basic-cloudflare/src/routeTree.gen.ts (1)
7-10: Autogenerated file — no manual review
routeTree.gen.tsis generated and should not be edited; skipping review. Based on learnings.examples/solid/start-basic-cloudflare/src/routes/__root.tsx (1)
33-50: All favicon and manifest assets are present—no action neededVerification confirms that
apple-touch-icon.png,favicon-32x32.png,favicon-16x16.png, andsite.webmanifestall exist inexamples/solid/start-basic-cloudflare/public/. No 404 risks.
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx
Outdated
Show resolved
Hide resolved
| ...seo({ | ||
| title: | ||
| 'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework', | ||
| description: `TanStack Start is a type-safe, client-first, full-stack React framework. `, | ||
| }), | ||
| ], |
There was a problem hiding this comment.
Align SEO text with Solid Start + Cloudflare example
Title/description mention “React framework” but this example is Solid Start on Cloudflare. Update copy.
Apply:
- ...seo({
- title:
- 'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
- description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
- }),
+ ...seo({
+ title: 'TanStack Router + Solid Start (Cloudflare)',
+ description: 'Example Solid Start app using TanStack Router on Cloudflare Workers.',
+ }),📝 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.
| ...seo({ | |
| title: | |
| 'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework', | |
| description: `TanStack Start is a type-safe, client-first, full-stack React framework. `, | |
| }), | |
| ], | |
| ...seo({ | |
| title: 'TanStack Router + Solid Start (Cloudflare)', | |
| description: 'Example Solid Start app using TanStack Router on Cloudflare Workers.', | |
| }), | |
| ], |
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/__root.tsx around lines 26
to 31, the SEO title and description incorrectly reference "React framework";
update them to mention "Solid Start" and Cloudflare instead. Replace the title
with wording like "Start | Type-Safe, Client-First, Full-Stack Solid Start on
Cloudflare" and change the description to describe Solid Start on Cloudflare
(e.g., "Solid Start is a type-safe, client-first, full-stack framework running
on Cloudflare."). Ensure messaging consistently references Solid Start and
Cloudflare rather than React.
| { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' }, | ||
| { rel: 'icon', href: '/favicon.ico' }, | ||
| ], |
There was a problem hiding this comment.
Fix manifest link: invalid attribute and hex
color isn’t valid on a manifest link, and #fffff is not a valid hex code. Remove color here and add a proper theme-color meta.
- { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+ { rel: 'manifest', href: '/site.webmanifest' },Also add in meta:
...seo({
title: 'TanStack Router + Solid Start (Cloudflare)',
description: 'Example Solid Start app using TanStack Router on Cloudflare Workers.',
}),
+ { name: 'theme-color', content: '#ffffff' },📝 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.
| { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' }, | |
| { rel: 'icon', href: '/favicon.ico' }, | |
| ], | |
| { rel: 'manifest', href: '/site.webmanifest' }, | |
| { rel: 'icon', href: '/favicon.ico' }, | |
| ], |
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/__root.tsx around lines 51
to 53, the <link rel="manifest"> entry incorrectly includes a nonstandard color
attribute and an invalid hex value; remove the color property from the manifest
link and instead add a proper <meta name="theme-color" content="#ffffff"> (or
another valid 6‑digit hex) in the document head; ensure the manifest link only
includes rel and href and that the theme-color meta is added to the meta array.
| <Link | ||
| to="/route-a" | ||
| activeProps={{ | ||
| class: 'font-bold', | ||
| }} | ||
| > | ||
| Go to route A | ||
| </Link> | ||
| <Link | ||
| to="/route-b" |
There was a problem hiding this comment.
Broken navigation: links point to non-existent paths
to="/route-a" and to="/route-b" won’t match the defined nested routes. Use relative targets under the nested layout.
Apply:
- <Link
- to="/route-a"
+ <Link
+ to="./route-a"
@@
- <Link
- to="/route-b"
+ <Link
+ to="./route-b"📝 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.
| <Link | |
| to="/route-a" | |
| activeProps={{ | |
| class: 'font-bold', | |
| }} | |
| > | |
| Go to route A | |
| </Link> | |
| <Link | |
| to="/route-b" | |
| <Link | |
| to="./route-a" | |
| activeProps={{ | |
| class: 'font-bold', | |
| }} | |
| > | |
| Go to route A | |
| </Link> | |
| <Link | |
| to="./route-b" |
🤖 Prompt for AI Agents
In
examples/solid/start-basic-cloudflare/src/routes/_pathlessLayout/_nested-layout.tsx
around lines 12 to 21, the Link components use absolute targets (to="/route-a"
and to="/route-b") that do not match the nested routes; change them to relative
targets under the nested layout by replacing the leading slash with a relative
path (e.g., to="./route-a" and to="./route-b" or to="route-a" depending on
router conventions) so the links resolve to the nested routes.
| GET: async ({ params, request }) => { | ||
| console.info(`Fetching users by id=${params.userId}... @`, request.url) | ||
| try { | ||
| const res = await fetch( | ||
| 'https://jsonplaceholder.typicode.com/users/' + params.userId, | ||
| ) | ||
| if (!res.ok) { | ||
| throw new Error('Failed to fetch user') | ||
| } | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion | ||
| const user = (await res.json()) as User | ||
|
|
||
| return json({ | ||
| id: user.id, | ||
| name: user.name, | ||
| email: user.email, | ||
| }) | ||
| } catch (e) { | ||
| console.error(e) | ||
| return json({ error: 'User not found' }, { status: 404 }) | ||
| } |
There was a problem hiding this comment.
Handle invalid IDs, distinguish 404 vs 5xx, and guard the response shape
Right now, non-numeric IDs and upstream non-404 failures both become 404s, and an empty JSON response could return undefined fields. Tighten validation and error mapping.
Apply:
@@
- GET: async ({ params, request }) => {
- console.info(`Fetching users by id=${params.userId}... @`, request.url)
- try {
- const res = await fetch(
- 'https://jsonplaceholder.typicode.com/users/' + params.userId,
- )
- if (!res.ok) {
- throw new Error('Failed to fetch user')
- }
-
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
- const user = (await res.json()) as User
-
- return json({
- id: user.id,
- name: user.name,
- email: user.email,
- })
- } catch (e) {
- console.error(e)
- return json({ error: 'User not found' }, { status: 404 })
- }
- },
+ GET: async ({ params, request }) => {
+ console.info(`Fetching user id=${params.userId} @`, request.url)
+ try {
+ const id = Number(params.userId)
+ if (!Number.isInteger(id) || id <= 0) {
+ return json({ error: 'Invalid user id' }, { status: 400 })
+ }
+
+ const res = await fetch(
+ `https://jsonplaceholder.typicode.com/users/${id}`,
+ )
+
+ if (res.status === 404) {
+ return json({ error: 'User not found' }, { status: 404 })
+ }
+ if (!res.ok) {
+ throw new Error(`Upstream error: ${res.status}`)
+ }
+
+ const user = (await res.json()) as unknown as User
+ if (!user || typeof (user as { id?: unknown }).id !== 'number') {
+ return json({ error: 'User not found' }, { status: 404 })
+ }
+
+ return json({
+ id: user.id,
+ name: user.name,
+ email: user.email,
+ })
+ } catch (e) {
+ console.error('GET /api/users/:id failed', e)
+ return json({ error: 'Internal server error' }, { status: 500 })
+ }
+ },Additionally, consider using a consistent import path for User (e.g., ~/utils/users) across files.
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/api/users.$userId.ts around
lines 8 to 29, validate params.userId (return json error 400 if missing or not a
positive integer), map upstream fetch status: if res.status === 404 return
json({ error: 'User not found' }, { status: 404 }), if res.ok is false for other
statuses return json({ error: 'Upstream error' }, { status: 502 }), and wrap
parsing by checking the parsed object has required fields (id, name, email)
before returning them—otherwise return json({ error: 'Invalid user data' }, {
status: 502 }); also catch and log exceptions and return a 500 on unexpected
errors. Finally, use the consistent import path for the User type (e.g., import
{ User } from '~/utils/users') across files.
| import { NotFound } from 'src/components/NotFound' | ||
| import { UserErrorComponent } from 'src/components/UserError' |
There was a problem hiding this comment.
Fix import aliases to match project config
Use ~ alias (or consistent baseUrl) to avoid resolution failures.
-import { NotFound } from 'src/components/NotFound'
-import { UserErrorComponent } from 'src/components/UserError'
+import { NotFound } from '~/components/NotFound'
+import { UserErrorComponent } from '~/components/UserError'🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx around
lines 2 to 3, the imports use 'src/...' which doesn't match the project's '~'
path alias; update the import specifiers to use the alias (e.g. import {
NotFound } from '~/components/NotFound' and import { UserErrorComponent } from
'~/components/UserError') or alternatively ensure tsconfig/jsconfig
baseUrl/paths are configured consistently for 'src' if you prefer that pattern
so the resolver matches the project's alias configuration.
| export const Route = createFileRoute('/users/$userId')({ | ||
| loader: async ({ params: { userId } }) => { | ||
| try { | ||
| const res = await fetch('/api/users/' + userId) | ||
| if (!res.ok) { | ||
| throw new Error('Unexpected status code') | ||
| } | ||
|
|
||
| const data = await res.json() | ||
|
|
||
| return data as User | ||
| } catch { | ||
| throw new Error('Failed to fetch user') | ||
| } | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Return notFound on 404 to trigger notFoundComponent
Currently all failures throw a generic Error, bypassing notFoundComponent. Map 404 to notFound().
-import { createFileRoute } from '@tanstack/solid-router'
+import { createFileRoute, notFound } from '@tanstack/solid-router'
@@
- if (!res.ok) {
- throw new Error('Unexpected status code')
- }
+ if (!res.ok) {
+ if (res.status === 404) {
+ throw notFound()
+ }
+ throw new Error('Unexpected status code')
+ }📝 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 const Route = createFileRoute('/users/$userId')({ | |
| loader: async ({ params: { userId } }) => { | |
| try { | |
| const res = await fetch('/api/users/' + userId) | |
| if (!res.ok) { | |
| throw new Error('Unexpected status code') | |
| } | |
| const data = await res.json() | |
| return data as User | |
| } catch { | |
| throw new Error('Failed to fetch user') | |
| } | |
| }, | |
| import { createFileRoute, notFound } from '@tanstack/solid-router' | |
| export const Route = createFileRoute('/users/$userId')({ | |
| loader: async ({ params: { userId } }) => { | |
| try { | |
| const res = await fetch('/api/users/' + userId) | |
| if (!res.ok) { | |
| if (res.status === 404) { | |
| throw notFound() | |
| } | |
| throw new Error('Unexpected status code') | |
| } | |
| const data = await res.json() | |
| return data as User | |
| } catch { | |
| throw new Error('Failed to fetch user') | |
| } | |
| }, |
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx around
lines 6 to 20, the loader currently throws a generic Error for all failures
which bypasses the route's notFoundComponent; update the loader so that after
the fetch you check res.status (or res.ok) and if res.status === 404 call and
return notFound() instead of throwing, otherwise for other non-ok statuses throw
a descriptive Error; also ensure notFound is imported from your
routing/framework module at the top of the file.
examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx
Outdated
Show resolved
Hide resolved
| .using-mouse * { | ||
| outline: none !important; | ||
| } |
There was a problem hiding this comment.
Accessibility concern: blanket outline removal harms keyboard navigation.
Removing all outlines with outline: none !important prevents keyboard users from seeing focus indicators, which is a WCAG violation. Consider using :focus-visible to remove outlines only when appropriate, or implement custom focus styles instead.
Apply this diff to use a more accessible approach:
- .using-mouse * {
- outline: none !important;
- }
+ .using-mouse *:focus:not(:focus-visible) {
+ outline: none;
+ }This removes outlines only when focus is applied via mouse (not keyboard), without using !important.
📝 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.
| .using-mouse * { | |
| outline: none !important; | |
| } | |
| .using-mouse *:focus:not(:focus-visible) { | |
| outline: none; | |
| } |
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/styles/app.css around lines 19-21,
the rule ".using-mouse * { outline: none !important; }" removes focus outlines
for all users; change it to only suppress outlines for elements focused via
mouse and remove the !important, e.g. target focused elements that are not
focus-visible by replacing the selector with ".using-mouse
*:focus:not(:focus-visible) { outline: none; }" and add or ensure an accessible
custom focus style for :focus-visible so keyboard users retain a clear focus
indicator.
| { | ||
| "$schema": "node_modules/wrangler/config-schema.json", | ||
| "name": "tanstack-start-app", | ||
| "compatibility_date": "2025-09-24", | ||
| "compatibility_flags": ["nodejs_compat"], | ||
| "main": "@tanstack/solid-start/server-entry", | ||
| "vars": { | ||
| "MY_VAR": "Hello from Cloudflare", | ||
| }, | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Please verify Wrangler format, entry point, and flags.
- Confirm that your Wrangler version supports wrangler.jsonc (JSONC with trailing commas). If not, switch to wrangler.json (remove trailing commas) or wrangler.toml.
- Ensure "main" = "@tanstack/solid-start/server-entry" is the intended Worker entry for this example; some setups point "main" to the built worker file instead.
- Double‑check whether "nodejs_compat" is still the correct flag for your chosen compatibility_date.
You can run a quick web check for the latest guidance:
Optionally, consider a more specific name than "tanstack-start-app" to avoid collisions when deploying multiple examples.
🌐 Web query:
Does Cloudflare Wrangler support wrangler.jsonc, and is nodejs_compat still valid as of October 2025? For Solid Start on Cloudflare Workers, what should the wrangler "main" entry point be?
💡 Result:
Short answers:
-
Yes — Wrangler supports wrangler.jsonc (Wrangler v3.91.0+; Cloudflare recommends wrangler.jsonc for new projects). [1]
-
Yes — the nodejs_compat / nodejs compatibility flag is still a valid compatibility flag (shown in Cloudflare docs and examples for Workers/Pages and framework guides). [2][3]
-
For Solid Start on Cloudflare Workers, point Wrangler's "main" at the built server entry — typically .output/server/index.mjs (most SolidStart builds produce .output/server/index.mjs as the Worker entry). Use that path as "main" in wrangler.jsonc. [3][4]
Sources:
- Cloudflare Wrangler configuration docs (wrangler.jsonc support). [developers.cloudflare.com — Configuration].
- Cloudflare Pages/Workers docs showing compatibility_flags / nodejs_compat usage. [developers.cloudflare.com — Pages/Functions & config].
- Framework guides / examples (SolidStart / server builds and example wrangler main = .output/server/index.mjs). [developers.cloudflare.com framework guides / SolidStart examples / Sentry SolidStart docs].
Fix "main" entry point — should reference the built server output, not the package entry.
The wrangler.jsonc format and nodejs_compat flag are correct. However, the "main" field is incorrect:
- Current:
"main": "@tanstack/solid-start/server-entry"(package entry point) - Should be:
"main": ".output/server/index.mjs"(or the actual built output path from your SolidStart build)
For Solid Start on Cloudflare Workers, Wrangler's "main" should point to the built server entry — typically .output/server/index.mjs produced after the build.
Optionally, consider a more specific app name than "tanstack-start-app" to avoid collisions when deploying multiple examples.
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/wrangler.jsonc around lines 1 to 10,
the "main" field incorrectly points to the package entry
"@tanstack/solid-start/server-entry" instead of the built server output; update
"main" to reference the Solid Start build output (for example
".output/server/index.mjs" or the actual path your build produces) so Wrangler
loads the built server entry at deploy time, and optionally rename "name" from
"tanstack-start-app" to a more specific app name to avoid deployment collisions.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (1)
19-51: LGTM! Past issue resolved.The JSX structure correctly calls
isRoot()as a function on line 31, addressing the previous review comment. The implementation is consistent with other examples in the codebase and follows Solid.js patterns correctly.
🧹 Nitpick comments (1)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)
6-6: Consider removing redundantasynckeyword.Since
fetchPostalready returns a Promise, theasynckeyword is unnecessary. For consistency withposts.$postId.tsx(shown in relevant snippets), consider removing it.Apply this diff:
- loader: async ({ params: { postId } }) => + loader: ({ params: { postId } }) => fetchPost({ data: postId, }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/index.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx(1 hunks)examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- examples/solid/start-basic-cloudflare/src/routes/index.tsx
- examples/solid/start-basic-cloudflare/src/routes/users.$userId.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsxexamples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsxexamples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx
🧬 Code graph analysis (2)
examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (3)
examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx (1)
Route(6-13)examples/solid/start-basic-cloudflare/src/utils/posts.tsx (1)
fetchPost(10-28)examples/solid/start-basic-cloudflare/src/components/PostError.tsx (1)
PostErrorComponent(4-6)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (3)
e2e/solid-start/server-routes/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic-solid-query/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/solid/start-basic/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)
⏰ 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 (3)
examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx (2)
1-8: LGTM!Imports are clean and properly organized with correct type annotations.
10-15: LGTM!Component setup and hook usage follow Solid.js patterns correctly. The
useMatchhook is properly configured with a select function that returns a boolean accessor.examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (1)
14-26: LGTM! Previous signal accessor bug has been fixed.The component correctly invokes
post()as an accessor before accessing.titleand.body(lines 22-23). This is the proper pattern for Solid.js signals returned byuseLoaderData().
| import { fetchPost } from '../utils/posts' | ||
| import { PostErrorComponent } from '~/components/PostError' | ||
|
|
||
| export const Route = createFileRoute('/posts_/$postId/deep')({ |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the route path underscore is intentional.
The route path /posts_/$postId/deep includes an underscore, creating URLs like /posts_/123/deep. If the intended path is /posts/$postId/deep, the filename should be posts.$postId.deep.tsx (without the underscore).
Run the following script to check for related route patterns:
🏁 Script executed:
#!/bin/bash
# Description: Check for posts route patterns to verify if underscore is intentional
# Find all posts-related route files
fd -e tsx -e ts 'posts' examples/solid/start-basic-cloudflare/src/routes/
# Search for route definitions and Link components referencing posts paths
rg -n --type=tsx --type=ts -C2 "to=\"/posts" examples/solid/start-basic-cloudflare/Length of output: 291
I need to verify the file contents and check how this route is referenced in the codebase. The rg search had a syntax issue, so let me try with corrected commands.
🏁 Script executed:
#!/bin/bash
# View the actual file to understand the route definition and check for intent
echo "=== File content of posts_.$postId.deep.tsx ==="
cat examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx
echo -e "\n=== File content of posts.$postId.tsx for comparison ==="
cat examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx
echo -e "\n=== Search for references to /posts_ or /posts/ routes ==="
rg -n "posts" examples/solid/start-basic-cloudflare/src/ --type tsx -C2 | head -60Length of output: 369
🏁 Script executed:
#!/bin/bash
# Use proper quoting to handle filenames with special characters
echo "=== File content of posts_.\$postId.deep.tsx ==="
cat 'examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx'
echo -e "\n=== File content of posts.\$postId.tsx for comparison ==="
cat 'examples/solid/start-basic-cloudflare/src/routes/posts.$postId.tsx'
echo -e "\n=== Search for Link/navigation references to posts routes ==="
rg -n "posts" examples/solid/start-basic-cloudflare/src/ -C2 2>/dev/null | head -80
echo -e "\n=== Check if underscore route is referenced anywhere ==="
rg -n "posts_" examples/solid/start-basic-cloudflare/src/ 2>/dev/null || echo "No references to posts_ found"Length of output: 10391
Fix accessor pattern for loader data: use post().title and post().body instead of post.title and post.body.
On lines 22-23, the code accesses post.title and post.body directly. However, the loader returns data that should be accessed as a function (like posts.$postId.tsx does with post().title). Both routes use the same fetchPost function, so the accessor pattern should be consistent.
- <h4 class="text-xl font-bold underline">{post.title}</h4>
- <div class="text-sm">{post.body}</div>
+ <h4 class="text-xl font-bold underline">{post().title}</h4>
+ <div class="text-sm">{post().body}</div>
Note: The underscore in the filename posts_.$postId.deep.tsx is intentional—TanStack Router generates the route ID as /posts_/$postId/deep for internal tracking, but the actual URL path is /posts/$postId/deep (without underscore), which is correct.
🤖 Prompt for AI Agents
In examples/solid/start-basic-cloudflare/src/routes/posts_.$postId.deep.tsx (see
around lines 22-23), the loader data is being accessed as properties (post.title
and post.body) but should use the accessor function pattern; change post.title
to post().title and post.body to post().body so the component calls the loader
accessor function like the other route that uses fetchPost.
birkskyum
deleted the
docs(solid-start)--start-basic-cloudflare-example
branch
Summary by CodeRabbit