this repo has no description
commnets, add back in local db
+21
-62
-54
.cursor/rules/tanstack-router-createfileroute.mdc
-54
.cursor/rules/tanstack-router-createfileroute.mdc
···
1
-
---
2
-
description:
3
-
globs: src/routes/**/*.tsx
4
-
alwaysApply: false
5
-
---
6
-
# TanStack Router: Do NOT Import createFileRoute
7
-
8
-
When working with TanStack Router route files in the [src/routes](mdc:src/routes) directory, **NEVER** import the `createFileRoute` function.
9
-
10
-
## Why This Rule Exists
11
-
12
-
The `createFileRoute` function is automatically made available in each route file through TypeScript module declarations in [src/routeTree.gen.ts](mdc:src/routeTree.gen.ts). This file contains module augmentation that declares `createFileRoute` for each specific route:
13
-
14
-
```typescript
15
-
declare module './routes/index' {
16
-
const createFileRoute: CreateFileRoute<...>
17
-
}
18
-
declare module './routes/basic' {
19
-
const createFileRoute: CreateFileRoute<...>
20
-
}
21
-
// ... and so on for each route
22
-
```
23
-
24
-
## Correct Usage
25
-
26
-
✅ **DO THIS** - Use `createFileRoute` directly without importing:
27
-
```tsx
28
-
// src/routes/example.tsx
29
-
export const Route = createFileRoute({
30
-
component: RouteComponent,
31
-
});
32
-
33
-
function RouteComponent() {
34
-
// component logic
35
-
}
36
-
```
37
-
38
-
❌ **DON'T DO THIS** - Never import createFileRoute:
39
-
```tsx
40
-
// src/routes/example.tsx
41
-
import { createFileRoute } from '@tanstack/react-router' // ❌ WRONG!
42
-
43
-
export const Route = createFileRoute({
44
-
component: RouteComponent,
45
-
});
46
-
```
47
-
48
-
## Key Points
49
-
50
-
- `createFileRoute` is globally available in route files through module declarations
51
-
- Each route file gets its own typed version of `createFileRoute` with proper type safety
52
-
- Importing it manually will cause TypeScript conflicts and is unnecessary
53
-
- This pattern is automatically maintained by TanStack Router's code generation
54
-
+6
-3
.gitignore
+6
-3
.gitignore
pokemon-with-types.db
pokemon-with-types.db
This is a binary file and will not be displayed.
+1
-3
src/data/db.ts
+1
-3
src/data/db.ts
···
8
8
import * as schema from "./schema";
9
9
10
10
const client = createClient({
11
-
// biome-ignore lint/style/noNonNullAssertion: <explanation>
12
-
url: process.env.TURSO_DATABASE_URL!,
13
-
authToken: process.env.TURSO_AUTH_TOKEN,
11
+
url: "file:./pokemon-with-types.db",
14
12
});
15
13
16
14
const db = drizzle({ client, schema });
+1
src/routes/basic.tsx
+1
src/routes/basic.tsx
+1
src/routes/debounced-preload-filters.tsx
+1
src/routes/debounced-preload-filters.tsx
+2
src/routes/filters.tsx
+2
src/routes/filters.tsx
···
27
27
name: v.optional(v.string(), ""),
28
28
});
29
29
30
+
// Now we add in filtering, this is the basic version that does no preloading
30
31
function FilterSubmitContextProvider(props: {
31
32
initialName: string;
32
33
handleSubmit: (nameFilter: string) => void;
···
169
170
)}
170
171
171
172
<PaginationNav
173
+
prefetch="intent"
172
174
prevOffset={data.prevOffset ?? undefined}
173
175
nextOffset={data.nextOffset ?? undefined}
174
176
to="/filters"
-1
src/routes/index.tsx
-1
src/routes/index.tsx
+2
src/routes/intent-preloading.tsx
+2
src/routes/intent-preloading.tsx
···
20
20
offset: v.optional(v.number(), 0),
21
21
});
22
22
23
+
// Now we're sucking diesel
23
24
export const Route = createFileRoute({
24
25
validateSearch: searchParamsSchema,
25
26
loaderDeps: ({ search }) => ({
···
87
88
</TableBody>
88
89
</Table>
89
90
<PaginationNav
91
+
prefetch="intent"
90
92
prevOffset={data.prevOffset ?? undefined}
91
93
nextOffset={data.nextOffset ?? undefined}
92
94
to="/intent-preloading"
+2
src/routes/pagination.tsx
+2
src/routes/pagination.tsx
···
24
24
offset: v.optional(v.number(), 0),
25
25
});
26
26
27
+
// Gold standard
27
28
export const Route = createFileRoute({
28
29
validateSearch: searchParamsSchema,
29
30
loaderDeps: ({ search }) => ({
···
106
107
</TableBody>
107
108
</Table>
108
109
<PaginationNav
110
+
prefetch="intent"
109
111
prevOffset={data.prevOffset ?? undefined}
110
112
nextOffset={data.nextOffset ?? undefined}
111
113
to="/pagination"
+2
src/routes/preloading.tsx
+2
src/routes/preloading.tsx