TanStack · birkskyum · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/examples/solid/search-validator-adapters/.gitignore b/examples/solid/search-validator-adapters/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/solid/search-validator-adapters/.vscode/settings.json b/examples/solid/search-validator-adapters/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
diff --git a/examples/solid/search-validator-adapters/README.md b/examples/solid/search-validator-adapters/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`
diff --git a/examples/solid/search-validator-adapters/index.html b/examples/solid/search-validator-adapters/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/solid/search-validator-adapters/package.json b/examples/solid/search-validator-adapters/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "tanstack-solid-router-search-validator-adapters",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc --noEmit",
+    "serve": "vite preview",
+    "start": "vite",
+    "test:unit": "vitest"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@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",
+    "arktype": "^2.1.7",
+    "postcss": "^8.5.1",
+    "solid-js": "^1.9.10",
+    "tailwindcss": "^4.1.15",
+    "valibot": "1.0.0-beta.15",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@solidjs/testing-library": "^0.8.10",
+    "vite-plugin-solid": "^2.11.10",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/examples/solid/search-validator-adapters/postcss.config.mjs b/examples/solid/search-validator-adapters/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/examples/solid/search-validator-adapters/src/components/Content.tsx b/examples/solid/search-validator-adapters/src/components/Content.tsx
@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js'
+
+export interface ContentProps {
+  readonly children: JSX.Element
+}
+
+export const Content = ({ children }: ContentProps) => {
+  return <section class="my-2 flex flex-col gap-2">{children}</section>
+}
diff --git a/examples/solid/search-validator-adapters/src/components/Header.tsx b/examples/solid/search-validator-adapters/src/components/Header.tsx
@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/solid-router'
+
+const HeaderLink: typeof Link = (props) => {
+  return <Link class="text-lg text-blue-700" {...props} />
+}
+
+export interface HeaderProps {
+  readonly title: string
+}
+
+export const Header = ({ title }: HeaderProps) => {
+  return (
+    <header class="flex items-end gap-8 border-b-2 border-slate-150 py-4">
+      <h1 class="text-4xl">{title}</h1>
+      <nav class="flex gap-4">
+        <HeaderLink to="/users/zod">Zod</HeaderLink>
+        <HeaderLink to="/users/valibot">Valibot</HeaderLink>
+        <HeaderLink to="/users/arktype">Arktype</HeaderLink>
+      </nav>
+    </header>
+  )
+}
diff --git a/examples/solid/search-validator-adapters/src/components/Search.tsx b/examples/solid/search-validator-adapters/src/components/Search.tsx
@@ -0,0 +1,18 @@
+export interface SearchProps {
+  search: string
+  onChange: (search: string) => void
+}
+
+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>
+    </div>
+  )
+}
diff --git a/examples/solid/search-validator-adapters/src/components/Users.tsx b/examples/solid/search-validator-adapters/src/components/Users.tsx
@@ -0,0 +1,84 @@
+import { queryOptions, useQuery } from '@tanstack/solid-query'
+
+export interface Geo {
+  lat: string
+  lng: string
+}
+
+export interface Address {
+  street: string
+  suite: string
+  city: string
+  zipcode: string
+  geo: Geo
+}
+
+export interface Company {
+  name: string
+  catchPhrase: string
+  bs: string
+}
+
+export interface User {
+  id: number
+  name: string
+  username: string
+  email: string
+  address: Address
+  phone: string
+  website: string
+  company: Company
+}
+
+export const getUsers = async (): Promise<Array<User>> => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/users')
+  const users: Array<User> = await response.json()
+  return users
+}
+
+export const searchUsers = async (search: string): Promise<Array<User>> => {
+  const users = await getUsers()
+  const normalizedSearch = search.toLowerCase()
+  return users.filter(
+    (user) =>
+      user.name.toLowerCase().includes(normalizedSearch) ||
+      user.username.toLowerCase().includes(normalizedSearch),
+  )
+}
+
+export const usersQueryOptions = (search: string) =>
+  queryOptions({
+    queryKey: ['users', search],
+    queryFn: async () => {
+      return await searchUsers(search)
+    },
+  })
+
+export interface UsersProps {
+  search: string
+}
+
+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>
+  )
+}
diff --git a/examples/solid/search-validator-adapters/src/main.tsx b/examples/solid/search-validator-adapters/src/main.tsx
@@ -0,0 +1,39 @@
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { routeTree } from './routeTree.gen'
+import './styles.css'
+
+export const queryClient = new QueryClient()
+
+export const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+  },
+  scrollRestoration: true,
+})
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+export function App() {
+  return <RouterProvider router={router} />
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  render(
+    () => (
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    ),
+
+    rootElement,
+  )
+}