Skip to content

Commit 6c7fb1a

Browse files
AlemTuzlakautofix-ci[bot]
AlemTuzlak
and
autofix-ci[bot]
authored
add drizzle devtools to examples (#102)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 4ffcd09 commit 6c7fb1a

File tree

18 files changed

+1481
-519
lines changed

18 files changed

+1481
-519
lines changed

‎examples/react/basic/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
"@tanstack/react-devtools": "^0.6.1",
1414
"@tanstack/react-query": "^5.83.0",
1515
"@tanstack/react-query-devtools": "^5.83.0",
16-
"@tanstack/react-router": "^1.130.2",
17-
"@tanstack/react-router-devtools": "^1.130.2",
16+
"@tanstack/react-router": "^1.131.2",
17+
"@tanstack/react-router-devtools": "^1.131.2",
1818
"react": "^19.1.0",
1919
"react-dom": "^19.1.0",
2020
"zod": "^4.0.14"
2121
},
2222
"devDependencies": {
2323
"@tanstack/devtools-ui": "0.3.4",
2424
"@tanstack/devtools-vite": "0.2.11",
25-
"@types/react": "^19.1.2",
25+
"@types/react": "^19.1.12",
2626
"@types/react-dom": "^19.1.2",
2727
"@vitejs/plugin-react": "^4.5.2",
2828
"vite": "^7.0.6",

‎examples/react/custom-devtools/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"react-dom": "^19.1.0"
1616
},
1717
"devDependencies": {
18-
"@types/react": "^19.1.2",
18+
"@types/react": "^19.1.12",
1919
"@types/react-dom": "^19.1.2",
2020
"@vitejs/plugin-react": "^4.5.2",
2121
"vite": "^7.0.6"

‎examples/react/drizzle/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
5+
.DS_Store
6+
.cache
7+
.env
8+
.vercel
9+
.output
10+
/build/
11+
/api/
12+
/server/build
13+
/public/build# Sentry Config File
14+
.env.sentry-build-plugin
15+
/test-results/
16+
/playwright-report/
17+
/blob-report/
18+
/playwright/.cache/
19+
20+
count.txt

‎examples/react/drizzle/.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/build
2+
**/public
3+
pnpm-lock.yaml
4+
routeTree.gen.ts

‎examples/react/drizzle/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Welcome to TanStack.com!
2+
3+
This site is built with TanStack Router!
4+
5+
- [TanStack Router Docs](https://tanstack.com/router)
6+
7+
It's deployed automagically with Netlify!
8+
9+
- [Netlify](https://netlify.com/)
10+
11+
## Development
12+
13+
From your terminal:
14+
15+
```sh
16+
pnpm install
17+
pnpm dev
18+
```
19+
20+
This starts your app in development mode, rebuilding assets on file changes.
21+
22+
## Editing and previewing the docs of TanStack projects locally
23+
24+
The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
25+
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
26+
27+
Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
28+
29+
1. Create a new directory called `tanstack`.
30+
31+
```sh
32+
mkdir tanstack
33+
```
34+
35+
2. Enter the directory and clone this repo and the repo of the project there.
36+
37+
```sh
38+
cd tanstack
39+
git clone git@github.com:TanStack/tanstack.com.git
40+
git clone git@github.com:TanStack/form.git
41+
```
42+
43+
> [!NOTE]
44+
> Your `tanstack` directory should look like this:
45+
>
46+
> ```
47+
> tanstack/
48+
> |
49+
> +-- form/
50+
> |
51+
> +-- tanstack.com/
52+
> ```
53+
54+
> [!WARNING]
55+
> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
56+
57+
3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
58+
59+
```sh
60+
cd tanstack.com
61+
pnpm i
62+
# The app will run on https://localhost:3000 by default
63+
pnpm dev
64+
```
65+
66+
4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
67+
68+
> [!NOTE]
69+
> The updated pages need to be manually reloaded in the browser.
70+
71+
> [!WARNING]
72+
> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!

‎examples/react/drizzle/drizzle.config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'drizzle-kit'
2+
3+
export default defineConfig({
4+
out: './drizzle',
5+
dialect: 'postgresql',
6+
dbCredentials: {
7+
url: process.env.DATABASE_URL!,
8+
},
9+
strict: true,
10+
verbose: true,
11+
})

‎examples/react/drizzle/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "tanstack-start-example-counter",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "drizzle-kit studio & vite dev",
8+
"start": "vite start"
9+
},
10+
"dependencies": {
11+
"@tanstack/react-devtools": "^0.6.1",
12+
"@tanstack/react-router": "^1.131.2",
13+
"@tanstack/react-router-devtools": "^1.131.2",
14+
"@tanstack/react-start": "^1.131.2",
15+
"react": "^19.1.0",
16+
"react-dom": "^19.1.0"
17+
},
18+
"devDependencies": {
19+
"@tanstack/devtools-vite": "0.2.11",
20+
"@types/node": "^22.15.2",
21+
"@types/react": "^19.1.12",
22+
"@types/react-dom": "^19.1.2",
23+
"drizzle-kit": "^0.31.4",
24+
"drizzle-orm": "^0.44.4",
25+
"pg": "^8.16.3",
26+
"typescript": "5.8.3",
27+
"vite": "^7.0.6"
28+
}
29+
}

‎examples/react/drizzle/src/routeTree.gen.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* eslint-disable */
2+
3+
// @ts-nocheck
4+
5+
// noinspection JSUnusedGlobalSymbols
6+
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
10+
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as IndexRouteImport } from './routes/index'
13+
14+
const IndexRoute = IndexRouteImport.update({
15+
id: '/',
16+
path: '/',
17+
getParentRoute: () => rootRouteImport,
18+
} as any)
19+
20+
export interface FileRoutesByFullPath {
21+
'/': typeof IndexRoute
22+
}
23+
export interface FileRoutesByTo {
24+
'/': typeof IndexRoute
25+
}
26+
export interface FileRoutesById {
27+
__root__: typeof rootRouteImport
28+
'/': typeof IndexRoute
29+
}
30+
export interface FileRouteTypes {
31+
fileRoutesByFullPath: FileRoutesByFullPath
32+
fullPaths: '/'
33+
fileRoutesByTo: FileRoutesByTo
34+
to: '/'
35+
id: '__root__' | '/'
36+
fileRoutesById: FileRoutesById
37+
}
38+
export interface RootRouteChildren {
39+
IndexRoute: typeof IndexRoute
40+
}
41+
42+
declare module '@tanstack/react-router' {
43+
interface FileRoutesByPath {
44+
'/': {
45+
id: '/'
46+
path: '/'
47+
fullPath: '/'
48+
preLoaderRoute: typeof IndexRouteImport
49+
parentRoute: typeof rootRouteImport
50+
}
51+
}
52+
}
53+
54+
const rootRouteChildren: RootRouteChildren = {
55+
IndexRoute: IndexRoute,
56+
}
57+
export const routeTree = rootRouteImport
58+
._addFileChildren(rootRouteChildren)
59+
._addFileTypes<FileRouteTypes>()

‎examples/react/drizzle/src/router.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
2+
import { routeTree } from './routeTree.gen'
3+
4+
export function createRouter() {
5+
const router = createTanStackRouter({
6+
routeTree,
7+
scrollRestoration: true,
8+
})
9+
10+
return router
11+
}
12+
13+
declare module '@tanstack/react-router' {
14+
interface Register {
15+
router: ReturnType<typeof createRouter>
16+
}
17+
}

‎examples/react/drizzle/src/routes/__root.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from 'react'
2+
import {
3+
HeadContent,
4+
Outlet,
5+
Scripts,
6+
createRootRoute,
7+
} from '@tanstack/react-router'
8+
9+
export const Route = createRootRoute({
10+
head: () => ({
11+
meta: [
12+
{
13+
charSet: 'utf-8',
14+
},
15+
{
16+
name: 'viewport',
17+
content: 'width=device-width, initial-scale=1',
18+
},
19+
{
20+
title: 'TanStack Start Starter',
21+
},
22+
],
23+
}),
24+
component: RootComponent,
25+
})
26+
27+
function RootComponent() {
28+
return (
29+
<RootDocument>
30+
<Outlet />
31+
</RootDocument>
32+
)
33+
}
34+
35+
function RootDocument({ children }: { children: React.ReactNode }) {
36+
return (
37+
<html>
38+
<head>
39+
<HeadContent />
40+
</head>
41+
<body style={{ margin: 0, padding: 0, height: '100vh' }}>
42+
{children}
43+
<Scripts />
44+
</body>
45+
</html>
46+
)
47+
}

0 commit comments

Comments
 (0)