docs(solid-start): start-large example #5847
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughA new Solid Start example project is added to Changes
Sequence DiagramsequenceDiagram
participant Browser
participant App as Solid Start App
participant Router as TanStack Router
participant QueryClient as QueryClient
Browser->>App: Request /
App->>Router: Initialize Router (routeTree.gen)
Router->>QueryClient: Create & attach QueryClient
Router->>Router: Build typed route tree
Note over Router: FileRoutesByPath, FileRoutesByTo<br/>augmented via module declarations
Router-->>App: Configured Router
App-->>Browser: Render RootComponent + Outlet
Browser->>App: Navigate to /params/value
App->>Router: useNavigate({ to: '/params/$value' })
Router->>QueryClient: Execute loader via getQueryData
QueryClient-->>Router: Cached/fetched data
Router->>Browser: Render route component with data
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 08deea1
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
examples/solid/start-large/src/styles.css (1)
3-30: Consider consolidating the two@layer baseblocks.The file defines two separate
@layer baseblocks (lines 3-11 and 13-30) that could be merged into a single block for better organization.Apply this diff to consolidate:
@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentcolor); } -} - -@layer base { + html { color-scheme: light dark; } * { @apply border-gray-200 dark:border-gray-800; } html, body { @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200; } .using-mouse * { outline: none !important; } }
📜 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 (20)
examples/solid/start-large/.gitignore(1 hunks)examples/solid/start-large/.vscode/settings.json(1 hunks)examples/solid/start-large/package.json(1 hunks)examples/solid/start-large/postcss.config.mjs(1 hunks)examples/solid/start-large/src/createRoutes.mjs(1 hunks)examples/solid/start-large/src/routeTree.gen.ts(1 hunks)examples/solid/start-large/src/router.tsx(1 hunks)examples/solid/start-large/src/routes/__root.tsx(1 hunks)examples/solid/start-large/src/routes/absolute.tsx(1 hunks)examples/solid/start-large/src/routes/index.tsx(1 hunks)examples/solid/start-large/src/routes/linkProps.tsx(1 hunks)examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx(1 hunks)examples/solid/start-large/src/routes/params/route.tsx(1 hunks)examples/solid/start-large/src/routes/relative.tsx(1 hunks)examples/solid/start-large/src/routes/search/route.tsx(1 hunks)examples/solid/start-large/src/routes/search/searchPlaceholder.tsx(1 hunks)examples/solid/start-large/src/styles.css(1 hunks)examples/solid/start-large/src/typePrimitives.tsx(1 hunks)examples/solid/start-large/tsconfig.json(1 hunks)examples/solid/start-large/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-large/src/routes/linkProps.tsxexamples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/routes/__root.tsxexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsxexamples/solid/start-large/src/router.tsxexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/typePrimitives.tsxexamples/solid/start-large/vite.config.tsexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/src/routes/search/searchPlaceholder.tsxexamples/solid/start-large/src/routes/index.tsxexamples/solid/start-large/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-large/src/routes/linkProps.tsxexamples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/routes/__root.tsxexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsxexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/src/routes/search/searchPlaceholder.tsxexamples/solid/start-large/src/routes/index.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/start-large/src/routes/linkProps.tsxexamples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/routes/__root.tsxexamples/solid/start-large/src/createRoutes.mjsexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsxexamples/solid/start-large/src/router.tsxexamples/solid/start-large/src/styles.cssexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/typePrimitives.tsxexamples/solid/start-large/vite.config.tsexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/package.jsonexamples/solid/start-large/postcss.config.mjsexamples/solid/start-large/src/routes/search/searchPlaceholder.tsxexamples/solid/start-large/tsconfig.jsonexamples/solid/start-large/src/routes/index.tsxexamples/solid/start-large/src/routeTree.gen.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/start-large/package.json
🧠 Learnings (11)
📓 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 examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
📚 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/start-large/src/routes/linkProps.tsxexamples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/routes/__root.tsxexamples/solid/start-large/src/createRoutes.mjsexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsxexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/typePrimitives.tsxexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/src/routes/search/searchPlaceholder.tsxexamples/solid/start-large/tsconfig.jsonexamples/solid/start-large/src/routes/index.tsxexamples/solid/start-large/src/routeTree.gen.ts
📚 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 **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/createRoutes.mjsexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/src/routes/index.tsxexamples/solid/start-large/src/routeTree.gen.ts
📚 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/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/createRoutes.mjsexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsxexamples/solid/start-large/.vscode/settings.jsonexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/routes/absolute.tsxexamples/solid/start-large/src/routeTree.gen.ts
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
examples/solid/start-large/src/routes/params/route.tsxexamples/solid/start-large/src/routes/params/$paramsPlaceholder.tsxexamples/solid/start-large/src/routes/search/route.tsx
📚 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/start-large/src/routes/__root.tsxexamples/solid/start-large/src/createRoutes.mjsexamples/solid/start-large/.gitignoreexamples/solid/start-large/.vscode/settings.jsonexamples/solid/start-large/src/routes/relative.tsxexamples/solid/start-large/src/routeTree.gen.ts
📚 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/start-large/src/createRoutes.mjsexamples/solid/start-large/.gitignoreexamples/solid/start-large/src/routeTree.gen.ts
📚 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/start-large/src/typePrimitives.tsxexamples/solid/start-large/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/start-large/package.jsonexamples/solid/start-large/tsconfig.jsonexamples/solid/start-large/src/routeTree.gen.ts
📚 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/start-large/src/routeTree.gen.ts
📚 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:
examples/solid/start-large/src/routeTree.gen.ts
🧬 Code graph analysis (9)
examples/solid/start-large/src/routes/linkProps.tsx (3)
examples/solid/start-large/src/routes/absolute.tsx (1)
Route(3-5)examples/solid/start-large/src/routes/search/searchPlaceholder.tsx (1)
Route(43-69)examples/solid/start-large/src/typePrimitives.tsx (4)
customRedirect(15-17)useCustomNavigate(22-25)MyLink(30-32)ListItems(48-50)
examples/solid/start-large/src/routes/params/route.tsx (1)
examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx (1)
Route(46-63)
examples/solid/start-large/src/routes/__root.tsx (2)
examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx (1)
Route(46-63)examples/solid/start-large/src/routes/search/searchPlaceholder.tsx (1)
Route(43-69)
examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx (2)
examples/solid/start-large/src/routes/params/route.tsx (1)
Route(3-5)examples/solid/start-large/src/routes/search/searchPlaceholder.tsx (1)
Route(43-69)
examples/solid/start-large/src/routes/search/route.tsx (2)
examples/solid/start-large/src/routes/linkProps.tsx (1)
Route(9-23)examples/solid/start-large/src/routes/search/searchPlaceholder.tsx (1)
Route(43-69)
examples/solid/start-large/src/routes/relative.tsx (2)
examples/solid/start-large/src/routes/absolute.tsx (1)
Route(3-5)examples/solid/start-large/src/routes/index.tsx (1)
Route(3-5)
examples/solid/start-large/src/routes/absolute.tsx (2)
examples/solid/start-large/src/routes/index.tsx (1)
Route(3-5)examples/solid/start-large/src/routes/relative.tsx (1)
Route(3-5)
examples/solid/start-large/src/routes/search/searchPlaceholder.tsx (4)
examples/solid/start-large/src/createRoutes.mjs (1)
search(12-14)examples/solid/start-large/src/routes/linkProps.tsx (1)
Route(9-23)examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx (1)
Route(46-63)examples/solid/start-large/src/routes/search/route.tsx (1)
Route(8-11)
examples/solid/start-large/src/routeTree.gen.ts (1)
examples/solid/start-large/src/router.tsx (1)
getRouter(5-15)
⏰ 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 (6)
examples/solid/start-large/.vscode/settings.json (1)
1-11: Best practice configuration for autogenerated files.The VSCode settings appropriately configure the workspace to protect the autogenerated
routeTree.gen.tsfile from accidental edits and reduce IDE noise. The glob pattern and three-pronged approach (excluding from file watching, search, and marking readonly) aligns with the guidance that autogenerated files should not be manually modified.examples/solid/start-large/postcss.config.mjs (1)
1-5: LGTM!The PostCSS configuration correctly integrates the Tailwind CSS plugin with standard setup.
examples/solid/start-large/vite.config.ts (1)
1-17: LGTM!The Vite configuration correctly sets up Solid Start with SSR, TypeScript path resolution, and appropriate plugin ordering.
examples/solid/start-large/src/typePrimitives.tsx (1)
1-50: LGTM!The type-safe router primitive wrappers demonstrate proper usage of TypeScript generics and function overloads for type safety. The implementations correctly delegate to the underlying router primitives.
examples/solid/start-large/src/router.tsx (1)
1-15: LGTM!The router initialization correctly integrates Solid Query's QueryClient into the router context and follows standard patterns for TanStack Router setup.
examples/solid/start-large/src/routes/search/route.tsx (1)
1-11: LGTM!The route definition correctly integrates Valibot validation for search parameters and follows standard TanStack Router file-based routing patterns.
Comment on lines
+1
to
+19
| node_modules | ||
| .DS_Store | ||
| dist | ||
| dist-ssr | ||
| *.local | ||
| (gen) | ||
| node_modules | ||
| package-lock.json | ||
| yarn.lock | ||
|
|
||
| .DS_Store | ||
| .cache | ||
| .env | ||
| .vercel | ||
| .output | ||
| /build/ | ||
| /api/ | ||
| /server/build | ||
| /public/build No newline at end of file |
Contributor
There was a problem hiding this comment.
Remove duplicate entries.
The file contains duplicate entries for node_modules (lines 1 and 7) and .DS_Store (lines 2 and 11).
Apply this diff to remove the duplicates:
node_modules
.DS_Store
dist
dist-ssr
*.local
(gen)
-node_modules
package-lock.json
yarn.lock
-.DS_Store
.cache
.env
.vercel
.output
/build/
/api/
/server/build
/public/build📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| node_modules | |
| .DS_Store | |
| dist | |
| dist-ssr | |
| *.local | |
| (gen) | |
| node_modules | |
| package-lock.json | |
| yarn.lock | |
| .DS_Store | |
| .cache | |
| .env | |
| .vercel | |
| .output | |
| /build/ | |
| /api/ | |
| /server/build | |
| /public/build | |
| node_modules | |
| .DS_Store | |
| dist | |
| dist-ssr | |
| *.local | |
| (gen) | |
| package-lock.json | |
| yarn.lock | |
| .cache | |
| .env | |
| .vercel | |
| .output | |
| /build/ | |
| /api/ | |
| /server/build | |
| /public/build |
🤖 Prompt for AI Agents
In examples/solid/start-large/.gitignore around lines 1 to 19 there are
duplicate entries for node_modules and .DS_Store; remove the repeated lines so
each pattern appears only once (keep one node_modules and one .DS_Store entry)
and ensure the remaining ordering is sensible, leaving the rest of the ignore
patterns unchanged.
Comment on lines
+13
to
+21
| "dependencies": { | ||
| "@tanstack/solid-query": "^5.90.0", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/solid-start": "^1.135.2", | ||
| "solid-js": "^1.9.10", | ||
| "redaxios": "^0.5.1", | ||
| "tailwind-merge": "^2.6.0", | ||
| "valibot": "^1.0.0-beta.15" |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* protocol for internal dependencies.
Per the coding guidelines, internal TanStack packages should use the workspace:* protocol instead of pinned versions to ensure consistency across the monorepo.
As per coding guidelines.
Apply this diff:
"dependencies": {
- "@tanstack/solid-query": "^5.90.0",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/solid-start": "^1.135.2",
+ "@tanstack/solid-query": "workspace:*",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/solid-start": "workspace:*",
"solid-js": "^1.9.10",
"redaxios": "^0.5.1",
"tailwind-merge": "^2.6.0",
"valibot": "^1.0.0-beta.15"
},🤖 Prompt for AI Agents
In examples/solid/start-large/package.json around lines 13 to 21, change
internal TanStack package dependency versions to use the workspace:* protocol;
specifically replace the pinned versions for @tanstack/solid-query,
@tanstack/solid-router, @tanstack/solid-router-devtools, and
@tanstack/solid-start with "workspace:*" (leave external packages like solid-js,
redaxios, tailwind-merge, valibot unchanged), then save the file.
Comment on lines
+37
to
+49
| for (let y = 0; y < length; y = y + 1) { | ||
| const replacedAbsolute = absolute.replaceAll('/absolute', `/absolute${y}`) | ||
| const replacedRelative = relative.replaceAll('/relative', `/relative${y}`) | ||
| const replacedSearch = search.replaceAll('searchPlaceholder', `search${y}`) | ||
| const replacedParams = params.replaceAll('paramsPlaceholder', `param${y}`) | ||
| await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute) | ||
| await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative) | ||
| await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch) | ||
| await writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams) | ||
| } | ||
| } | ||
|
|
||
| main() |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Handle main() rejections.
main() is async and its errors currently surface as unhandled promise rejections. Wrap the call so failures exit cleanly. (tanstack.com)
-main()
+main().catch((err) => {
+ console.error(err)
+ process.exit(1)
+})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| for (let y = 0; y < length; y = y + 1) { | |
| const replacedAbsolute = absolute.replaceAll('/absolute', `/absolute${y}`) | |
| const replacedRelative = relative.replaceAll('/relative', `/relative${y}`) | |
| const replacedSearch = search.replaceAll('searchPlaceholder', `search${y}`) | |
| const replacedParams = params.replaceAll('paramsPlaceholder', `param${y}`) | |
| await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute) | |
| await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative) | |
| await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch) | |
| await writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams) | |
| } | |
| } | |
| main() | |
| for (let y = 0; y < length; y = y + 1) { | |
| const replacedAbsolute = absolute.replaceAll('/absolute', `/absolute${y}`) | |
| const replacedRelative = relative.replaceAll('/relative', `/relative${y}`) | |
| const replacedSearch = search.replaceAll('searchPlaceholder', `search${y}`) | |
| const replacedParams = params.replaceAll('paramsPlaceholder', `param${y}`) | |
| await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute) | |
| await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative) | |
| await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch) | |
| await writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams) | |
| } | |
| } | |
| main().catch((err) => { | |
| console.error(err) | |
| process.exit(1) | |
| }) |
🤖 Prompt for AI Agents
In examples/solid/start-large/src/createRoutes.mjs around lines 37 to 49, the
top-level async main() call is unhandled and can produce unhandled promise
rejections; update the invocation to handle rejections by either awaiting it
inside an immediately-invoked async function with try/catch or by appending
.catch(err => { console.error(err); process.exit(1); }) to main(), ensuring any
thrown error is logged and the process exits with a non-zero code.
Comment on lines
+33
to
+37
| const fn = createServerFn() | ||
| .middleware([middleware]) | ||
| .handler(() => { | ||
| return v.parse(loaderResult, {}) | ||
| }) |
Contributor
There was a problem hiding this comment.
Server handler never returns valid data
v.parse(loaderResult, {}) runs with an empty object, so Valibot throws before returning. Every call to fn(...) will therefore reject, and the route’s loader/context can never succeed. Return the validated payload from the middleware (e.g. wrap the validated params under the params key) instead of parsing {}.
const fn = createServerFn()
.middleware([middleware])
- .handler(() => {
- return v.parse(loaderResult, {})
- })
+ .handler(({ data }) => v.parse(loaderResult, { params: data }))
Comment on lines
+61
to
+62
| loader: (opts) => | ||
| opts.context.queryClient.ensureQueryData(paramsQueryOptions), |
Contributor
There was a problem hiding this comment.
Loader is using the wrong query options
ensureQueryData points at the module-level paramsQueryOptions, whose queryFn still calls v.parse(loaderResult, {}) and never hits your server function. This throws immediately and bypasses the per-request options you placed in context. Call the query options from opts.context (and drop the broken global constant) so the loader reuses the server-backed query.
-const paramsQueryOptions = queryOptions({
- queryKey: ['paramsPlaceholder'],
- queryFn: () => {
- return v.parse(loaderResult, {})
- },
-})
-
export const Route = createFileRoute('/params/$paramsPlaceholder')({
component: ParamsComponent,
context: () => ({
@@
}),
loader: (opts) =>
- opts.context.queryClient.ensureQueryData(paramsQueryOptions),
+ opts.context.queryClient.ensureQueryData(
+ opts.context.paramsQueryOptions,
+ ),
})Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/start-large/src/routes/params/$paramsPlaceholder.tsx around
lines 61-62, the loader is calling ensureQueryData with the module-level
paramsQueryOptions which contains a queryFn that calls v.parse(...) and never
invokes the server-backed function; replace that call to use the per-request
query options stored on opts.context (e.g. opts.context.paramsQueryOptions or
opts.context.queryOptions) so the loader reuses the server-backed queryFn, and
remove the broken module-level paramsQueryOptions constant to avoid accidentally
referencing it elsewhere.
Comment on lines
+6
to
+84
| const search = v.object({ | ||
| searchPlaceholder: v.literal('searchPlaceholder'), | ||
| page: v.number(), | ||
| offset: v.number(), | ||
| search: v.string(), | ||
| }) | ||
|
|
||
| const loaderResult = v.object({ | ||
| searchPlaceholder: v.number(), | ||
| }) | ||
|
|
||
| const middleware = createMiddleware({ type: 'function' }) | ||
| .inputValidator(search) | ||
| .client(({ next }) => { | ||
| const context = { client: { searchPlaceholder: 'searchPlaceholder' } } | ||
| return next({ | ||
| context, | ||
| sendContext: context, | ||
| }) | ||
| }) | ||
| .server(({ next }) => { | ||
| const context = { server: { searchPlaceholder: 'searchPlaceholder' } } | ||
| return next({ | ||
| context, | ||
| sendContext: context, | ||
| }) | ||
| }) | ||
|
|
||
| const fn = createServerFn() | ||
| .middleware([middleware]) | ||
| .handler(() => { | ||
| const result = v.parse(loaderResult, { | ||
| searchPlaceholder: 0, | ||
| }) | ||
| return result | ||
| }) | ||
|
|
||
| export const Route = createFileRoute('/search/searchPlaceholder')({ | ||
| server: { | ||
| handlers: { | ||
| GET: () => { | ||
| return new Response('searchPlaceholder') | ||
| }, | ||
| }, | ||
| }, | ||
| component: SearchComponent, | ||
| validateSearch: search, | ||
| loaderDeps: ({ search }) => ({ search }), | ||
| context: (ctx) => ({ | ||
| searchQueryOptions: queryOptions({ | ||
| queryKey: ['searchPlaceholder'], | ||
| queryFn: () => fn({ data: ctx.deps.search }), | ||
| }), | ||
| }), | ||
| loader: async (opts) => { | ||
| const search = await opts.context.queryClient.ensureQueryData( | ||
| opts.context.searchQueryOptions, | ||
| ) | ||
|
|
||
| return { | ||
| search, | ||
| } | ||
| }, | ||
| }) | ||
|
|
||
| function SearchComponent() { | ||
| return ( | ||
| <div class="p-2 space-y-2"> | ||
| <Link | ||
| to="/search/searchPlaceholder" | ||
| class="block py-1 text-blue-800 hover:text-blue-600" | ||
| search={{ | ||
| searchPlaceholder: 'searchPlaceholder', | ||
| page: 0, | ||
| offset: 10, | ||
| search: 'search', | ||
| rootSearch: 0, | ||
| }} | ||
| > |
Contributor
There was a problem hiding this comment.
Search schema drops rootSearch.
validateSearch uses v.object. That parser removes keys not declared in the schema, so the rootSearch you pass in the <Link> (and that upstream routes may rely on) gets stripped before loaders run. Either add rootSearch to this schema (with the right validator) or switch to v.objectWithRest if you intentionally need to forward unknown keys. (valibot.dev)
🤖 Prompt for AI Agents
In examples/solid/start-large/src/routes/search/searchPlaceholder.tsx around
lines 6 to 84, the search schema (v.object) omits the rootSearch key so
validateSearch strips it before loaders run; fix by either adding rootSearch to
the schema with the correct validator (e.g., rootSearch: v.number() or whatever
type upstream expects) or replace v.object(...) with v.objectWithRest(...) to
allow unknown keys to pass through, then update any related types/usages to
match the chosen validator.
Comment on lines
+1
to
+23
| { | ||
| "include": ["**/*.ts", "**/*.tsx"], | ||
| "compilerOptions": { | ||
| "strict": true, | ||
| "esModuleInterop": true, | ||
| "jsx": "preserve", | ||
| "jsxImportSource": "solid-js", | ||
| "module": "ESNext", | ||
| "moduleResolution": "Bundler", | ||
| "lib": ["DOM", "DOM.Iterable", "ES2022"], | ||
| "isolatedModules": true, | ||
| "resolveJsonModule": true, | ||
| "skipLibCheck": true, | ||
| "target": "ES2022", | ||
| "allowJs": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "~/*": ["./src/*"] | ||
| }, | ||
| "noEmit": true | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
TypeScript configuration is well-configured for Solid.js development.
The configuration appropriately enables strict mode (line 4), preserves JSX for Solid.js (lines 6-7), sets modern compilation targets (ES2022), and includes helpful path aliases for cleaner imports. The setup follows best practices and aligns with the project's TypeScript guidelines.
To ensure consistency across the example projects, could you verify that this configuration aligns with the TypeScript settings in other examples (e.g., examples/react/*/tsconfig.json or examples/solid/*/tsconfig.json)? Run the following to compare:
🏁 Script executed:
#!/bin/bash
# Description: Compare tsconfig.json configurations across example projects
echo "=== Solid examples tsconfig.json files ==="
find examples/solid -name "tsconfig.json" -type f | head -10
echo -e "\n=== React examples tsconfig.json files ==="
find examples/react -name "tsconfig.json" -type f | head -10
# Show if any other tsconfig.json files exist for comparison
if [ -f "examples/solid/*/tsconfig.json" ]; then
echo -e "\n=== Comparing strict and target settings ==="
for file in $(find examples -name "tsconfig.json" -type f); do
echo "$file:"
grep -E '"strict"|"target"' "$file" | head -2
done
fiLength of output: 1150
---
🏁 Script executed:
```shell
#!/bin/bash
# Verify start-large exists and compare TypeScript configurations
echo "=== Checking if examples/solid/start-large exists ==="
if [ -d "examples/solid/start-large" ]; then
echo "✓ Directory exists"
ls -la examples/solid/start-large/ | grep tsconfig
else
echo "✗ Directory does not exist"
fi
echo -e "\n=== Strict and Target settings across all examples ==="
for file in $(find examples -name "tsconfig.json" -type f | sort); do
strict=$(grep -o '"strict":\s*[^,}]*' "$file" 2>/dev/null | head -1)
target=$(grep -o '"target":\s*"[^"]*' "$file" 2>/dev/null | head -1)
echo "$file: $strict | $target"
done | head -20
echo -e "\n=== Sample: React basic-file-based tsconfig.json ==="
cat examples/react/basic-file-based/tsconfig.json 2>/dev/null | head -20
Length of output: 2101
---
🏁 Script executed:
```shell
#!/bin/bash
# Compare Solid examples specifically and show existing configuration
echo "=== Target settings for Solid examples only ==="
for file in $(find examples/solid -name "tsconfig.json" -type f | sort); do
target=$(grep -o '"target":\s*"[^"]*' "$file" 2>/dev/null | head -1)
echo "$file: $target"
done | head -15
echo -e "\n=== Sample Solid example (basic-file-based) full config ==="
cat examples/solid/basic-file-based/tsconfig.json 2>/dev/null
echo -e "\n=== Sample Solid example (kitchen-sink) full config ==="
cat examples/solid/kitchen-sink/tsconfig.json 2>/dev/null | head -25
Length of output: 1769
Change target to "ESNext" to align with other Solid examples.
All other Solid examples use "target": "ESNext" (13 out of 14). The reviewed file uses "ES2022", creating an inconsistency. Change line 14 to match the project standard. Additionally, review whether the extra compiler options (isolatedModules, resolveJsonModule, allowJs, forceConsistentCasingInFileNames, baseUrl, paths, noEmit) are needed for this example or if they should be removed for consistency with simpler Solid examples like examples/solid/basic-file-based/tsconfig.json.
🤖 Prompt for AI Agents
In examples/solid/start-large/tsconfig.json lines 1-23, the compiler target is
set to "ES2022" which is inconsistent with other Solid examples; change "target"
to "ESNext" and update that line accordingly; then compare this file to
examples/solid/basic-file-based/tsconfig.json and remove any extra
compilerOptions that are not needed for the example (e.g., consider dropping
isolatedModules, resolveJsonModule, allowJs, forceConsistentCasingInFileNames,
baseUrl/paths, noEmit) so the file matches the simpler, consistent set used
across other Solid examples.
roduyemi
pushed a commit
to roduyemi/oss-router
that referenced
this pull request
Nov 19, 2025
* docs(solid-start): start-large example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This was referenced Nov 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit