Skip to content

Commit

Permalink
chore: update docs and tests for arktype
Browse files Browse the repository at this point in the history
  • Loading branch information
chorobin committed Oct 21, 2024
1 parent 2eb5980 commit 395cdc6
Show file tree
Hide file tree
Showing 9 changed files with 367 additions and 202 deletions.
9 changes: 4 additions & 5 deletions docs/framework/react/guide/search-params.md
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ This provides flexibility in which type you want to infer for navigation and whi

### Valibot

When using [Valibot](https://valibot.dev/) an adapter is not needed to ensure the correct `input` an `output` types are used for navigation and reading search params. This is because `valibot` implements a standard schema
When using [Valibot](https://valibot.dev/) an adapter is not needed to ensure the correct `input` an `output` types are used for navigation and reading search params. This is because `valibot` implements [Standard Schema](https://github.com/standard-schema/standard-schema)

```tsx
import { createFileRoute } from '@tanstack/react-router'
Expand All @@ -294,14 +294,13 @@ export const Route = createFileRoute('/shop/products/')({
### Arktype

> [!WARNING]
> This adapter expects the arktype 2.0-beta package to be installed.
> Router expects the arktype 2.0-rc package to be installed.
When using [ArkType](https://arktype.io/) we recommend using the adapter. This ensures the correct `input` and `output` types are used for navigation and reading search params
When using [ArkType](https://arktype.io/) an adapter is not needed to ensure the correct `input` and `output` types are used for navigation and reading search params. This is because [ArkType](https://arktype.io/) implements [Standard Schema](https://github.com/standard-schema/standard-schema)

```tsx
import { arkTypeSearchValidator } from '@tanstack/router-arktype-adapter'
import { createFileRoute } from '@tanstack/react-router'
import * as v from 'valibot'
import { type } from 'arktype'

const productSearchSchema = type({
Expand All @@ -311,7 +310,7 @@ const productSearchSchema = type({
})

export const Route = createFileRoute('/shop/products/')({
validateSearch: arkTypeSearchValidator(productSearchSchema),
validateSearch: productSearchSchema,
})
```

Expand Down
2 changes: 1 addition & 1 deletion examples/react/search-validator-adapters/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@tanstack/router-plugin": "^1.74.2",
"@tanstack/router-valibot-adapter": "^1.74.2",
"@tanstack/router-zod-adapter": "^1.74.2",
"arktype": "^2.0.0-rc.15",
"arktype": "^2.0.0-rc.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"valibot": "1.0.0-beta.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react'
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { arkTypeSearchValidator } from '@tanstack/router-arktype-adapter'

import { type } from 'arktype'
import { Header } from '../../components/Header'
import { Users, usersQueryOptions } from '../../components/Users'
Expand All @@ -9,7 +9,7 @@ import { Search } from '../../components/Search'

const ArkType = () => {
const search = Route.useSearch({
select: (search) => search.search ?? '',
select: (search) => search.search,
})
const navigate = useNavigate({ from: Route.fullPath })

Expand All @@ -29,16 +29,16 @@ const ArkType = () => {
)
}

const search = type({
search: 'string = ""',
})

export const Route = createFileRoute('/users/arktype/')({
validateSearch: arkTypeSearchValidator(
type({
'search?': 'string',
}),
),
validateSearch: search,
loaderDeps: (opt) => ({ search: opt.search }),
loader: (opt) => {
opt.context.queryClient.ensureQueryData(
usersQueryOptions(opt.deps.search.search ?? ''),
usersQueryOptions(opt.deps.search.search),
)
},
component: ArkType,
Expand Down
16 changes: 16 additions & 0 deletions examples/react/search-validator-adapters/tests/arktype.test-d.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Link } from '@tanstack/react-router'
import { expectTypeOf, test } from 'vitest'
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', () => {
expectTypeOf(Link<typeof router, string, '/users/arktype'>)
.parameter(0)
.toHaveProperty('search')
.exclude<boolean | ((...args: ReadonlyArray<any>) => any)>()
.toEqualTypeOf<{ search?: string } | undefined>()

expectTypeOf(ArkTypeRoute.useSearch()).toEqualTypeOf<{
search: string
}>()
})
64 changes: 64 additions & 0 deletions examples/react/search-validator-adapters/tests/arktype.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { expect, test } from 'vitest'
import {
Link,
RouterProvider,
createRootRoute,
createRoute,
createRouter,
} from '@tanstack/react-router'

import '@testing-library/jest-dom/vitest'
import { type } from 'arktype'

test('can navigate to the route', async () => {
const rootRoute = createRootRoute()

const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: () => <Link to="/users/arktype">Arktype</Link>,
})

const ArkType = () => {
const { search } = arkTypeRoute.useSearch()

return (
<div>
<div>{search}</div>
<Link from="/users/arktype" search={{ search: 'updated' }}>
Update
</Link>
</div>
)
}

const search = type({
'search?': 'string = "default"',
})

const arkTypeRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/users/arkType',
validateSearch: search,
component: ArkType,
})

const routeTree = rootRoute.addChildren([indexRoute, arkTypeRoute])

const router = createRouter({ routeTree })

render(<RouterProvider router={router as any} />)

const link = await screen.findByText('Arktype')

fireEvent.click(link)

expect(await screen.findByText('default')).toBeInTheDocument()

const updateLink = await screen.findByText('Update')

fireEvent.click(updateLink)

expect(await screen.findByText('updated')).toBeInTheDocument()
})
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Link } from '@tanstack/react-router'
import { expectTypeOf, test } from 'vitest'

import { router } from '../src/main'
import { Route as ValibotRoute } from '../src/routes/users/valibot.index'
import type { router } from '../src/main'

test('infers correct input and output type for valibot', () => {
expectTypeOf(Link<typeof router, string, '/users/valibot'>)
.parameter(0)
.toHaveProperty('search')
.exclude<boolean | ((...args: any[]) => any)>()
.exclude<boolean | ((...args: ReadonlyArray<any>) => any)>()
.toEqualTypeOf<{ search?: string } | undefined>()

expectTypeOf(ValibotRoute.useSearch()).toEqualTypeOf<{ search: string }>()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { test, expect } from 'vitest'
import { expect, test } from 'vitest'
import {
Link,
RouterProvider,
createRootRoute,
createRoute,
createRouter,
Link,
RouterProvider,
} from '@tanstack/react-router'
import * as v from 'valibot'
import '@testing-library/jest-dom/vitest'
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"react-dom": "^18.3.1",
"redaxios": "^0.5.1",
"rimraf": "^6.0.1",
"typescript": "^5.6.2",
"typescript": "^5.6.3",
"typescript51": "npm:[email protected]",
"typescript52": "npm:[email protected]",
"typescript53": "npm:[email protected]",
Expand Down
Loading

0 comments on commit 395cdc6

Please sign in to comment.