docs(solid-router): search-validator-adapters #5848
Merged
+840
−0
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
|
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 36 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 (1)
WalkthroughAdds a new Solid.js example "search-validator-adapters" with UI components, three validator-backed routes (Zod, Valibot, ArkType), generated route typings, app bootstrap (QueryClient + Router), Vite/Vitest config, styles, README, and runtime/type tests. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant Router as Solid Router
participant Validator as Validator (Zod/Valibot/ArkType)
participant Loader as Route Loader
participant QC as QueryClient
participant API as Users API
Note over User,Router: User navigates or updates search
User->>Router: Navigate /users/:validator?search=...
Router->>Validator: validateSearch(queryString)
alt valid
Validator-->>Router: parsedSearch
Router->>Loader: call loader(parsedSearch)
Loader->>QC: ensureQueryData(usersQueryOptions(parsedSearch.search))
QC->>API: fetch users (if needed)
API-->>QC: users[]
QC-->>Loader: resolved data
Loader-->>Router: loader completes
Router->>User: render component (Users via Suspense)
else invalid
Validator-->>Router: validation error / fallback
Router-->>User: render fallback or default
end
User->>Router: update search via navigation API
Router->>Validator: validateSearch(newQuery)
Validator-->>Router: parsedNew
Router->>QC: ensureQueryData(usersQueryOptions(parsedNew.search))
Router->>User: render updated Users
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes
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 ddaced6
☁️ 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: 10
📜 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 (24)
examples/solid/search-validator-adapters/.gitignore(1 hunks)examples/solid/search-validator-adapters/.vscode/settings.json(1 hunks)examples/solid/search-validator-adapters/README.md(1 hunks)examples/solid/search-validator-adapters/index.html(1 hunks)examples/solid/search-validator-adapters/package.json(1 hunks)examples/solid/search-validator-adapters/postcss.config.mjs(1 hunks)examples/solid/search-validator-adapters/src/components/Content.tsx(1 hunks)examples/solid/search-validator-adapters/src/components/Header.tsx(1 hunks)examples/solid/search-validator-adapters/src/components/Search.tsx(1 hunks)examples/solid/search-validator-adapters/src/components/Users.tsx(1 hunks)examples/solid/search-validator-adapters/src/main.tsx(1 hunks)examples/solid/search-validator-adapters/src/routeTree.gen.ts(1 hunks)examples/solid/search-validator-adapters/src/routes/__root.tsx(1 hunks)examples/solid/search-validator-adapters/src/routes/index.tsx(1 hunks)examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx(1 hunks)examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx(1 hunks)examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx(1 hunks)examples/solid/search-validator-adapters/src/styles.css(1 hunks)examples/solid/search-validator-adapters/tests/arktype.test-d.tsx(1 hunks)examples/solid/search-validator-adapters/tests/arktype.test.tsx(1 hunks)examples/solid/search-validator-adapters/tests/valibot.test-d.tsx(1 hunks)examples/solid/search-validator-adapters/tests/valibot.test.tsx(1 hunks)examples/solid/search-validator-adapters/tsconfig.json(1 hunks)examples/solid/search-validator-adapters/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/search-validator-adapters/src/routes/index.tsxexamples/solid/search-validator-adapters/src/components/Content.tsxexamples/solid/search-validator-adapters/src/routes/users/zod.index.tsxexamples/solid/search-validator-adapters/tests/arktype.test.tsxexamples/solid/search-validator-adapters/tests/valibot.test-d.tsxexamples/solid/search-validator-adapters/src/routes/users/valibot.index.tsxexamples/solid/search-validator-adapters/src/components/Header.tsxexamples/solid/search-validator-adapters/tests/valibot.test.tsxexamples/solid/search-validator-adapters/src/components/Users.tsxexamples/solid/search-validator-adapters/src/components/Search.tsxexamples/solid/search-validator-adapters/src/main.tsxexamples/solid/search-validator-adapters/tests/arktype.test-d.tsxexamples/solid/search-validator-adapters/src/routes/users/arktype.index.tsxexamples/solid/search-validator-adapters/src/routes/__root.tsxexamples/solid/search-validator-adapters/src/routeTree.gen.tsexamples/solid/search-validator-adapters/vite.config.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/search-validator-adapters/src/routes/index.tsxexamples/solid/search-validator-adapters/src/routes/users/zod.index.tsxexamples/solid/search-validator-adapters/src/routes/users/valibot.index.tsxexamples/solid/search-validator-adapters/src/routes/users/arktype.index.tsxexamples/solid/search-validator-adapters/src/routes/__root.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/search-validator-adapters/src/routes/index.tsxexamples/solid/search-validator-adapters/src/components/Content.tsxexamples/solid/search-validator-adapters/src/routes/users/zod.index.tsxexamples/solid/search-validator-adapters/tests/arktype.test.tsxexamples/solid/search-validator-adapters/tests/valibot.test-d.tsxexamples/solid/search-validator-adapters/src/routes/users/valibot.index.tsxexamples/solid/search-validator-adapters/src/components/Header.tsxexamples/solid/search-validator-adapters/README.mdexamples/solid/search-validator-adapters/tests/valibot.test.tsxexamples/solid/search-validator-adapters/src/styles.cssexamples/solid/search-validator-adapters/src/components/Users.tsxexamples/solid/search-validator-adapters/src/components/Search.tsxexamples/solid/search-validator-adapters/tsconfig.jsonexamples/solid/search-validator-adapters/postcss.config.mjsexamples/solid/search-validator-adapters/index.htmlexamples/solid/search-validator-adapters/src/main.tsxexamples/solid/search-validator-adapters/tests/arktype.test-d.tsxexamples/solid/search-validator-adapters/src/routes/users/arktype.index.tsxexamples/solid/search-validator-adapters/src/routes/__root.tsxexamples/solid/search-validator-adapters/package.jsonexamples/solid/search-validator-adapters/src/routeTree.gen.tsexamples/solid/search-validator-adapters/vite.config.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/search-validator-adapters/package.json
🧠 Learnings (12)
📓 Common learnings
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.
📚 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/search-validator-adapters/src/routes/index.tsxexamples/solid/search-validator-adapters/src/routes/users/zod.index.tsxexamples/solid/search-validator-adapters/tests/arktype.test.tsxexamples/solid/search-validator-adapters/src/routes/users/valibot.index.tsxexamples/solid/search-validator-adapters/tests/valibot.test.tsxexamples/solid/search-validator-adapters/tsconfig.jsonexamples/solid/search-validator-adapters/src/main.tsxexamples/solid/search-validator-adapters/src/routes/__root.tsxexamples/solid/search-validator-adapters/package.jsonexamples/solid/search-validator-adapters/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/search-validator-adapters/src/routes/index.tsxexamples/solid/search-validator-adapters/tests/arktype.test.tsxexamples/solid/search-validator-adapters/tests/valibot.test-d.tsxexamples/solid/search-validator-adapters/.vscode/settings.jsonexamples/solid/search-validator-adapters/tests/valibot.test.tsxexamples/solid/search-validator-adapters/tests/arktype.test-d.tsxexamples/solid/search-validator-adapters/package.jsonexamples/solid/search-validator-adapters/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/search-validator-adapters/src/routes/users/zod.index.tsxexamples/solid/search-validator-adapters/tests/arktype.test.tsxexamples/solid/search-validator-adapters/tests/valibot.test-d.tsxexamples/solid/search-validator-adapters/tests/valibot.test.tsxexamples/solid/search-validator-adapters/tests/arktype.test-d.tsxexamples/solid/search-validator-adapters/package.jsonexamples/solid/search-validator-adapters/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/search-validator-adapters/tests/valibot.test-d.tsxexamples/solid/search-validator-adapters/tsconfig.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/search-validator-adapters/.vscode/settings.jsonexamples/solid/search-validator-adapters/src/routeTree.gen.ts
📚 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/search-validator-adapters/src/main.tsxexamples/solid/search-validator-adapters/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/search-validator-adapters/package.jsonexamples/solid/search-validator-adapters/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-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
examples/solid/search-validator-adapters/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{zod-adapter,valibot-adapter,arktype-adapter}/** : Maintain validation adapters in their respective adapter packages
Applied to files:
examples/solid/search-validator-adapters/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/search-validator-adapters/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/search-validator-adapters/src/routeTree.gen.ts
🧬 Code graph analysis (11)
examples/solid/search-validator-adapters/src/routes/index.tsx (4)
examples/solid/search-validator-adapters/src/components/Header.tsx (1)
Header(11-22)examples/solid/search-validator-adapters/src/components/Content.tsx (1)
Content(7-9)examples/solid/search-validator-adapters/src/routes/__root.tsx (1)
Route(9-11)examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx (1)
Route(32-45)
examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx (6)
examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx (1)
Route(35-44)examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx (1)
Route(29-40)examples/solid/search-validator-adapters/src/components/Header.tsx (1)
Header(11-22)examples/solid/search-validator-adapters/src/components/Content.tsx (1)
Content(7-9)examples/solid/search-validator-adapters/src/components/Search.tsx (1)
Search(6-18)examples/solid/search-validator-adapters/src/components/Users.tsx (2)
Users(61-84)usersQueryOptions(49-55)
examples/solid/search-validator-adapters/tests/arktype.test.tsx (3)
examples/solid/search-validator-adapters/src/routeTree.gen.ts (1)
routeTree(150-152)examples/solid/search-validator-adapters/src/main.tsx (1)
router(9-15)examples/react/search-validator-adapters/tests/arktype.test.tsx (1)
rootRoute(14-64)
examples/solid/search-validator-adapters/tests/valibot.test-d.tsx (1)
examples/solid/search-validator-adapters/src/main.tsx (1)
router(9-15)
examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx (6)
examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx (1)
Route(35-44)examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx (1)
Route(32-45)examples/solid/search-validator-adapters/src/components/Header.tsx (1)
Header(11-22)examples/solid/search-validator-adapters/src/components/Content.tsx (1)
Content(7-9)examples/solid/search-validator-adapters/src/components/Search.tsx (1)
Search(6-18)examples/solid/search-validator-adapters/src/components/Users.tsx (2)
Users(61-84)usersQueryOptions(49-55)
examples/solid/search-validator-adapters/tests/valibot.test.tsx (2)
examples/solid/search-validator-adapters/src/routeTree.gen.ts (1)
routeTree(150-152)examples/solid/search-validator-adapters/src/main.tsx (1)
router(9-15)
examples/solid/search-validator-adapters/src/components/Users.tsx (1)
e2e/e2e-utils/src/users.ts (1)
users(27-258)
examples/solid/search-validator-adapters/tests/arktype.test-d.tsx (1)
examples/solid/search-validator-adapters/src/main.tsx (1)
router(9-15)
examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx (6)
examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx (1)
Route(29-40)examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx (1)
Route(32-45)examples/solid/search-validator-adapters/src/components/Header.tsx (1)
Header(11-22)examples/solid/search-validator-adapters/src/components/Content.tsx (1)
Content(7-9)examples/solid/search-validator-adapters/src/components/Search.tsx (1)
Search(6-18)examples/solid/search-validator-adapters/src/components/Users.tsx (2)
Users(61-84)usersQueryOptions(49-55)
examples/solid/search-validator-adapters/src/routes/__root.tsx (3)
examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx (1)
Route(35-44)examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx (1)
Route(29-40)examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx (1)
Route(32-45)
examples/solid/search-validator-adapters/vite.config.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
🔇 Additional comments (2)
examples/solid/search-validator-adapters/.vscode/settings.json (1)
1-11: LGTM! Good practice for generated files.Properly excludes the generated
routeTree.gen.tsfrom file watching, search, and marks it as readonly to prevent accidental modifications.examples/solid/search-validator-adapters/src/styles.css (1)
1-21: LGTM! Proper Tailwind CSS setup.The configuration includes dark mode support and consistent border color styling across elements.
Comment on lines
+14
to
+20
| "@tanstack/arktype-adapter": "^1.135.2", | ||
| "@tanstack/solid-query": "^5.90.0", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/router-plugin": "^1.135.2", | ||
| "@tanstack/valibot-adapter": "^1.135.2", | ||
| "@tanstack/zod-adapter": "^1.135.2", |
Contributor
There was a problem hiding this comment.
Use workspace:* protocol for internal dependencies.
All @tanstack/* packages are internal dependencies and should use the workspace:* protocol instead of semver ranges.
As per coding guidelines.
Apply this diff:
- "@tanstack/arktype-adapter": "^1.135.2",
+ "@tanstack/arktype-adapter": "workspace:*",
"@tanstack/solid-query": "^5.90.0",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/router-plugin": "^1.135.2",
- "@tanstack/valibot-adapter": "^1.135.2",
- "@tanstack/zod-adapter": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/router-plugin": "workspace:*",
+ "@tanstack/valibot-adapter": "workspace:*",
+ "@tanstack/zod-adapter": "workspace:*",Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/package.json around lines 14 to 20,
the @tanstack/* dependencies use semver ranges; update each internal @tanstack/*
dependency to use the workspace:* protocol (e.g., replace "^1.135.2" or
"^5.90.0" with "workspace:*") so the package.json references local workspace
packages per the coding guidelines; ensure you change all listed @tanstack
entries consistently and run npm/yarn/pnpm install to validate the lockfile.
Comment on lines
+6
to
+15
| export const Search = ({ search, onChange }: SearchProps) => { | ||
| return ( | ||
| <div class="flex gap-2 align-center items-center"> | ||
| <label>Search</label> | ||
| <input | ||
| type="search" | ||
| class="border p-1 px-2 rounded-sm" | ||
| value={search} | ||
| onInput={(e) => onChange(e.currentTarget.value)} | ||
| ></input> |
Contributor
There was a problem hiding this comment.
Give the search input an accessible name
Without associating the <label> to the <input>, assistive tech sees the control as unnamed. Please wire them together so the field remains usable for screen-reader users.
+import { createUniqueId } from 'solid-js'
+
export interface SearchProps {
search: string
onChange: (search: string) => void
}
export const Search = ({ search, onChange }: SearchProps) => {
+ const inputId = createUniqueId()
+
return (
<div class="flex gap-2 align-center items-center">
- <label>Search</label>
+ <label for={inputId}>Search</label>
<input
type="search"
class="border p-1 px-2 rounded-sm"
+ id={inputId}
value={search}
onInput={(e) => onChange(e.currentTarget.value)}
></input>
</div>
)
}🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/components/Search.tsx around
lines 6 to 15, the <label> is not associated with the <input>, so screen readers
can't identify the control; fix this by giving the input a stable id (e.g.,
"search-input") and set the label's htmlFor attribute to that id (or
alternatively wrap the input inside the <label>), ensuring the input retains its
value and onInput handler so the field is properly named for assistive
technology.
Comment on lines
+61
to
+84
| export const Users = ({ search }: UsersProps) => { | ||
| const users = useQuery(() => usersQueryOptions(search)) | ||
|
|
||
| return ( | ||
| <table class="table-auto"> | ||
| <thead> | ||
| <tr class="border text-left"> | ||
| <th class="p-4">Username</th> | ||
| <th class="p-4">Name</th> | ||
| <th class="p-4">Email</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {users.data?.map((user) => ( | ||
| <tr class="border"> | ||
| <td class="p-4">{user.username}</td> | ||
| <td class="p-4">{user.name}</td> | ||
| <td class="p-4">{user.email}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| ) | ||
| } |
Contributor
There was a problem hiding this comment.
Keep the search prop reactive.
Solid components execute once; destructuring props in the parameter list snapshots their initial values and severs reactivity. As a result, useQuery(() => usersQueryOptions(search)) never sees updates when the route search param changes, so the users list keeps filtering with the initial search string. Keep the props object intact (or wrap in an accessor) so the query tracks changes.
-export const Users = ({ search }: UsersProps) => {
- const users = useQuery(() => usersQueryOptions(search))
+export const Users = (props: UsersProps) => {
+ const users = useQuery(() => usersQueryOptions(props.search))🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/components/Users.tsx around
lines 61 to 84, the component currently destructures the search prop in the
parameter list which snapshots its initial value and breaks Solid reactivity;
change the function signature to accept the props object (e.g., props:
UsersProps) or define a search accessor that reads from props (e.g., const
search = () => props.search) and update the useQuery call to reference that
reactive accessor (useQuery(() => usersQueryOptions(search())) or useQuery(() =>
usersQueryOptions(() => props.search))). Ensure all usages inside the component
read from the props object/accessor so updates to the route search param trigger
the query and re-render.
Comment on lines
+13
to
+15
| export const Route = createFileRoute({ | ||
| component: Index, | ||
| }) |
Contributor
There was a problem hiding this comment.
Missing import for createFileRoute.
The function createFileRoute is used but not imported, which will cause a runtime error.
Apply this diff to add the missing import:
+import { createFileRoute } from '@tanstack/solid-router'
import { Header } from '../components/Header'
import { Content } from '../components/Content'Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/routes/index.tsx around lines 13
to 15, the call to createFileRoute is missing its import; add an import for
createFileRoute at the top of the file (e.g. import { createFileRoute } from
'solid-start/file-routes' or the appropriate module used by your project) so the
symbol is defined before use.
Comment on lines
1
to
44
| import { useNavigate } from '@tanstack/solid-router' | ||
| import { type } from 'arktype' | ||
| import { Suspense } from 'solid-js' | ||
| import { Header } from '../../components/Header' | ||
| import { Users, usersQueryOptions } from '../../components/Users' | ||
| import { Content } from '../../components/Content' | ||
| import { Search } from '../../components/Search' | ||
|
|
||
| const ArkType = () => { | ||
| const search = Route.useSearch({ | ||
| select: (search) => search.search, | ||
| }) | ||
| const navigate = useNavigate({ from: Route.fullPath }) | ||
|
|
||
| return ( | ||
| <> | ||
| <Header title="ArkType" /> | ||
| <Content> | ||
| <Search | ||
| search={search()} | ||
| onChange={(search) => navigate({ search: { search }, replace: true })} | ||
| /> | ||
| <Suspense> | ||
| <Users search={search()} /> | ||
| </Suspense> | ||
| </Content> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const search = type({ | ||
| search: 'string = ""', | ||
| }) | ||
|
|
||
| export const Route = createFileRoute({ | ||
| validateSearch: search, | ||
| loaderDeps: (opt) => ({ search: opt.search }), | ||
| loader: (opt) => { | ||
| opt.context.queryClient.ensureQueryData( | ||
| usersQueryOptions(opt.deps.search.search), | ||
| ) | ||
| }, | ||
| component: ArkType, | ||
| }) |
Contributor
There was a problem hiding this comment.
Import createFileRoute here as well
Same problem as the Zod route: createFileRoute is referenced but never imported, so compilation fails.
-import { useNavigate } from '@tanstack/solid-router'
+import { createFileRoute, useNavigate } from '@tanstack/solid-router'📝 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
| import { useNavigate } from '@tanstack/solid-router' | |
| import { type } from 'arktype' | |
| import { Suspense } from 'solid-js' | |
| import { Header } from '../../components/Header' | |
| import { Users, usersQueryOptions } from '../../components/Users' | |
| import { Content } from '../../components/Content' | |
| import { Search } from '../../components/Search' | |
| const ArkType = () => { | |
| const search = Route.useSearch({ | |
| select: (search) => search.search, | |
| }) | |
| const navigate = useNavigate({ from: Route.fullPath }) | |
| return ( | |
| <> | |
| <Header title="ArkType" /> | |
| <Content> | |
| <Search | |
| search={search()} | |
| onChange={(search) => navigate({ search: { search }, replace: true })} | |
| /> | |
| <Suspense> | |
| <Users search={search()} /> | |
| </Suspense> | |
| </Content> | |
| </> | |
| ) | |
| } | |
| const search = type({ | |
| search: 'string = ""', | |
| }) | |
| export const Route = createFileRoute({ | |
| validateSearch: search, | |
| loaderDeps: (opt) => ({ search: opt.search }), | |
| loader: (opt) => { | |
| opt.context.queryClient.ensureQueryData( | |
| usersQueryOptions(opt.deps.search.search), | |
| ) | |
| }, | |
| component: ArkType, | |
| }) | |
| import { createFileRoute, useNavigate } from '@tanstack/solid-router' | |
| import { type } from 'arktype' | |
| import { Suspense } from 'solid-js' | |
| import { Header } from '../../components/Header' | |
| import { Users, usersQueryOptions } from '../../components/Users' | |
| import { Content } from '../../components/Content' | |
| import { Search } from '../../components/Search' | |
| const ArkType = () => { | |
| const search = Route.useSearch({ | |
| select: (search) => search.search, | |
| }) | |
| const navigate = useNavigate({ from: Route.fullPath }) | |
| return ( | |
| <> | |
| <Header title="ArkType" /> | |
| <Content> | |
| <Search | |
| search={search()} | |
| onChange={(search) => navigate({ search: { search }, replace: true })} | |
| /> | |
| <Suspense> | |
| <Users search={search()} /> | |
| </Suspense> | |
| </Content> | |
| </> | |
| ) | |
| } | |
| const search = type({ | |
| search: 'string = ""', | |
| }) | |
| export const Route = createFileRoute({ | |
| validateSearch: search, | |
| loaderDeps: (opt) => ({ search: opt.search }), | |
| loader: (opt) => { | |
| opt.context.queryClient.ensureQueryData( | |
| usersQueryOptions(opt.deps.search.search), | |
| ) | |
| }, | |
| component: ArkType, | |
| }) |
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/routes/users/arktype.index.tsx
lines 1-44, the code references createFileRoute but never imports it; add an
import for createFileRoute (same place as the Zod route) at the top of the
file—e.g. import { createFileRoute } from 'solid-start'—so the symbol is defined
and the file compiles.
Comment on lines
+29
to
+40
| export const Route = createFileRoute({ | ||
| validateSearch: v.object({ | ||
| search: v.fallback(v.optional(v.string(), ''), ''), | ||
| }), | ||
| loaderDeps: (opt) => ({ search: opt.search }), | ||
| loader: (opt) => { | ||
| opt.context.queryClient.ensureQueryData( | ||
| usersQueryOptions(opt.deps.search.search), | ||
| ) | ||
| }, | ||
| component: Valibot, | ||
| }) |
Contributor
There was a problem hiding this comment.
Bring createFileRoute into scope.
createFileRoute is referenced here but never imported, so the module will crash at runtime with ReferenceError: createFileRoute is not defined. Pull it in alongside useNavigate.
-import { useNavigate } from '@tanstack/solid-router'
+import { createFileRoute, useNavigate } from '@tanstack/solid-router'Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/routes/users/valibot.index.tsx
around lines 29 to 40, the code uses createFileRoute but never imports it,
causing a ReferenceError at runtime; update the module imports to include
createFileRoute (import it alongside useNavigate as suggested) so the identifier
is in scope, and ensure the import path matches where createFileRoute is
exported in the project.
Comment on lines
+1
to
+45
| import { useNavigate } from '@tanstack/solid-router' | ||
| import { fallback, zodValidator } from '@tanstack/zod-adapter' | ||
| import { z } from 'zod' | ||
| import { Suspense } from 'solid-js' | ||
| import { Header } from '../../components/Header' | ||
| import { Users, usersQueryOptions } from '../../components/Users' | ||
| import { Content } from '../../components/Content' | ||
| import { Search } from '../../components/Search' | ||
|
|
||
| const Zod = () => { | ||
| const search = Route.useSearch({ | ||
| select: (search) => search.search ?? '', | ||
| }) | ||
| const navigate = useNavigate({ from: Route.fullPath }) | ||
|
|
||
| return ( | ||
| <> | ||
| <Header title="Zod" /> | ||
| <Content> | ||
| <Search | ||
| search={search()} | ||
| onChange={(search) => navigate({ search: { search }, replace: true })} | ||
| /> | ||
| <Suspense> | ||
| <Users search={search()} /> | ||
| </Suspense> | ||
| </Content> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const Route = createFileRoute({ | ||
| validateSearch: zodValidator( | ||
| z.object({ | ||
| search: fallback(z.string().optional(), undefined), | ||
| }), | ||
| ), | ||
| loaderDeps: (opt) => ({ search: opt.search }), | ||
| loader: (opt) => { | ||
| opt.context.queryClient.ensureQueryData( | ||
| usersQueryOptions(opt.deps.search.search ?? ''), | ||
| ) | ||
| }, | ||
| component: Zod, | ||
| }) |
Contributor
There was a problem hiding this comment.
Import createFileRoute so the route compiles
createFileRoute is used but never imported, so this file won’t type-check or build. Pull it in alongside useNavigate.
-import { useNavigate } from '@tanstack/solid-router'
+import { createFileRoute, useNavigate } from '@tanstack/solid-router'📝 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
| import { useNavigate } from '@tanstack/solid-router' | |
| import { fallback, zodValidator } from '@tanstack/zod-adapter' | |
| import { z } from 'zod' | |
| import { Suspense } from 'solid-js' | |
| import { Header } from '../../components/Header' | |
| import { Users, usersQueryOptions } from '../../components/Users' | |
| import { Content } from '../../components/Content' | |
| import { Search } from '../../components/Search' | |
| const Zod = () => { | |
| const search = Route.useSearch({ | |
| select: (search) => search.search ?? '', | |
| }) | |
| const navigate = useNavigate({ from: Route.fullPath }) | |
| return ( | |
| <> | |
| <Header title="Zod" /> | |
| <Content> | |
| <Search | |
| search={search()} | |
| onChange={(search) => navigate({ search: { search }, replace: true })} | |
| /> | |
| <Suspense> | |
| <Users search={search()} /> | |
| </Suspense> | |
| </Content> | |
| </> | |
| ) | |
| } | |
| export const Route = createFileRoute({ | |
| validateSearch: zodValidator( | |
| z.object({ | |
| search: fallback(z.string().optional(), undefined), | |
| }), | |
| ), | |
| loaderDeps: (opt) => ({ search: opt.search }), | |
| loader: (opt) => { | |
| opt.context.queryClient.ensureQueryData( | |
| usersQueryOptions(opt.deps.search.search ?? ''), | |
| ) | |
| }, | |
| component: Zod, | |
| }) | |
| import { createFileRoute, useNavigate } from '@tanstack/solid-router' | |
| import { fallback, zodValidator } from '@tanstack/zod-adapter' | |
| import { z } from 'zod' | |
| import { Suspense } from 'solid-js' | |
| import { Header } from '../../components/Header' | |
| import { Users, usersQueryOptions } from '../../components/Users' | |
| import { Content } from '../../components/Content' | |
| import { Search } from '../../components/Search' | |
| const Zod = () => { | |
| const search = Route.useSearch({ | |
| select: (search) => search.search ?? '', | |
| }) | |
| const navigate = useNavigate({ from: Route.fullPath }) | |
| return ( | |
| <> | |
| <Header title="Zod" /> | |
| <Content> | |
| <Search | |
| search={search()} | |
| onChange={(search) => navigate({ search: { search }, replace: true })} | |
| /> | |
| <Suspense> | |
| <Users search={search()} /> | |
| </Suspense> | |
| </Content> | |
| </> | |
| ) | |
| } | |
| export const Route = createFileRoute({ | |
| validateSearch: zodValidator( | |
| z.object({ | |
| search: fallback(z.string().optional(), undefined), | |
| }), | |
| ), | |
| loaderDeps: (opt) => ({ search: opt.search }), | |
| loader: (opt) => { | |
| opt.context.queryClient.ensureQueryData( | |
| usersQueryOptions(opt.deps.search.search ?? ''), | |
| ) | |
| }, | |
| component: Zod, | |
| }) |
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/src/routes/users/zod.index.tsx
around lines 1 to 45, the file uses createFileRoute but does not import it; add
createFileRoute to the imports from '@tanstack/solid-router' (alongside
useNavigate) so the symbol is available and the file type-checks and builds.
| import { Route as ArkTypeRoute } from '../src/routes/users/arktype.index' | ||
| import type { router } from '../src/main' | ||
|
|
||
| test('infers correct input and output type for valibot', () => { |
Contributor
There was a problem hiding this comment.
Fix the test description.
The test description mentions "valibot" but this file tests ArkType integration.
Apply this diff:
-test('infers correct input and output type for valibot', () => {
+test('infers correct input and output type for arktype', () => {📝 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
| test('infers correct input and output type for valibot', () => { | |
| test('infers correct input and output type for arktype', () => { |
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/tests/arktype.test-d.tsx around line
6, the test description incorrectly mentions "valibot"; update the test name
string to reference ArkType (e.g., "infers correct input and output type for
ArkType" or "infers correct input and output type for ArkType integration") so
the description matches the file's ArkType tests.
Comment on lines
+40
to
+45
| const arkTypeRoute = createRoute({ | ||
| getParentRoute: () => rootRoute, | ||
| path: '/users/arkType', | ||
| validateSearch: search, | ||
| component: ArkType, | ||
| }) |
Contributor
There was a problem hiding this comment.
Fix path case mismatch.
The route path is defined as /users/arkType (camelCase) but the Links at lines 20 and 29 use /users/arktype (lowercase). This case mismatch will cause navigation to fail.
Apply this diff to fix the path:
const arkTypeRoute = createRoute({
getParentRoute: () => rootRoute,
- path: '/users/arkType',
+ path: '/users/arktype',
validateSearch: search,
component: ArkType,
})📝 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
| const arkTypeRoute = createRoute({ | |
| getParentRoute: () => rootRoute, | |
| path: '/users/arkType', | |
| validateSearch: search, | |
| component: ArkType, | |
| }) | |
| const arkTypeRoute = createRoute({ | |
| getParentRoute: () => rootRoute, | |
| path: '/users/arktype', | |
| validateSearch: search, | |
| component: ArkType, | |
| }) |
🤖 Prompt for AI Agents
In examples/solid/search-validator-adapters/tests/arktype.test.tsx around lines
40 to 45 the route path is defined as '/users/arkType' (camelCase) while the
Links use '/users/arktype' (lowercase), causing navigation mismatch; change the
createRoute path to '/users/arktype' to match the Links (or alternatively update
the Links to '/users/arkType' if you prefer camelCase), and run the tests to
confirm navigation now resolves correctly.
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
New Features
Documentation
Tests
Chores