From 66013ee0c62f3888395db8c124c24440b2e74c8d Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Wed, 3 Sep 2025 13:06:21 +0200 Subject: [PATCH 1/3] add drizzle devtools to examples --- examples/react/drizzle/.gitignore | 20 + examples/react/drizzle/.prettierignore | 4 + examples/react/drizzle/README.md | 72 + examples/react/drizzle/drizzle.config.ts | 11 + examples/react/drizzle/package.json | 30 + examples/react/drizzle/src/routeTree.gen.ts | 59 + examples/react/drizzle/src/router.tsx | 17 + examples/react/drizzle/src/routes/__root.tsx | 48 + examples/react/drizzle/src/routes/index.tsx | 32 + examples/react/drizzle/tsconfig.json | 22 + examples/react/drizzle/vite.config.ts | 10 + pnpm-lock.yaml | 1443 ++++++++++++++---- 12 files changed, 1497 insertions(+), 271 deletions(-) create mode 100644 examples/react/drizzle/.gitignore create mode 100644 examples/react/drizzle/.prettierignore create mode 100644 examples/react/drizzle/README.md create mode 100644 examples/react/drizzle/drizzle.config.ts create mode 100644 examples/react/drizzle/package.json create mode 100644 examples/react/drizzle/src/routeTree.gen.ts create mode 100644 examples/react/drizzle/src/router.tsx create mode 100644 examples/react/drizzle/src/routes/__root.tsx create mode 100644 examples/react/drizzle/src/routes/index.tsx create mode 100644 examples/react/drizzle/tsconfig.json create mode 100644 examples/react/drizzle/vite.config.ts diff --git a/examples/react/drizzle/.gitignore b/examples/react/drizzle/.gitignore new file mode 100644 index 000000000..08eba9e70 --- /dev/null +++ b/examples/react/drizzle/.gitignore @@ -0,0 +1,20 @@ +node_modules +package-lock.json +yarn.lock + +.DS_Store +.cache +.env +.vercel +.output +/build/ +/api/ +/server/build +/public/build# Sentry Config File +.env.sentry-build-plugin +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ + +count.txt diff --git a/examples/react/drizzle/.prettierignore b/examples/react/drizzle/.prettierignore new file mode 100644 index 000000000..2be5eaa6e --- /dev/null +++ b/examples/react/drizzle/.prettierignore @@ -0,0 +1,4 @@ +**/build +**/public +pnpm-lock.yaml +routeTree.gen.ts \ No newline at end of file diff --git a/examples/react/drizzle/README.md b/examples/react/drizzle/README.md new file mode 100644 index 000000000..90cba4aac --- /dev/null +++ b/examples/react/drizzle/README.md @@ -0,0 +1,72 @@ +# Welcome to TanStack.com! + +This site is built with TanStack Router! + +- [TanStack Router Docs](https://tanstack.com/router) + +It's deployed automagically with Netlify! + +- [Netlify](https://netlify.com/) + +## Development + +From your terminal: + +```sh +pnpm install +pnpm dev +``` + +This starts your app in development mode, rebuilding assets on file changes. + +## Editing and previewing the docs of TanStack projects locally + +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. +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. + +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 : + +1. Create a new directory called `tanstack`. + +```sh +mkdir tanstack +``` + +2. Enter the directory and clone this repo and the repo of the project there. + +```sh +cd tanstack +git clone git@github.com:TanStack/tanstack.com.git +git clone git@github.com:TanStack/form.git +``` + +> [!NOTE] +> Your `tanstack` directory should look like this: +> +> ``` +> tanstack/ +> | +> +-- form/ +> | +> +-- tanstack.com/ +> ``` + +> [!WARNING] +> 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. + +3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: + +```sh +cd tanstack.com +pnpm i +# The app will run on https://localhost:3000 by default +pnpm dev +``` + +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`. + +> [!NOTE] +> The updated pages need to be manually reloaded in the browser. + +> [!WARNING] +> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! diff --git a/examples/react/drizzle/drizzle.config.ts b/examples/react/drizzle/drizzle.config.ts new file mode 100644 index 000000000..ecad90bc2 --- /dev/null +++ b/examples/react/drizzle/drizzle.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from 'drizzle-kit'; + +export default defineConfig({ + out: './drizzle', + dialect: 'postgresql', + dbCredentials: { + url: process.env.DATABASE_URL!, + }, + strict: true, + verbose: true, +}); diff --git a/examples/react/drizzle/package.json b/examples/react/drizzle/package.json new file mode 100644 index 000000000..ca5d70737 --- /dev/null +++ b/examples/react/drizzle/package.json @@ -0,0 +1,30 @@ +{ + "name": "tanstack-start-example-counter", + "private": true, + "sideEffects": false, + "type": "module", + "scripts": { + "dev": "drizzle-kit studio & vite dev", + "build": "vite build && tsc --noEmit", + "start": "vite start" + }, + "dependencies": { + "@tanstack/react-devtools": "^0.6.1", + "@tanstack/react-router": "^1.131.2", + "@tanstack/react-router-devtools": "^1.131.2", + "@tanstack/react-start": "^1.131.2", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@tanstack/devtools-vite": "0.2.11", + "@types/node": "^22.5.4", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.0.3", + "drizzle-kit": "^0.31.4", + "drizzle-orm": "^0.44.4", + "pg": "^8.16.3", + "typescript": "^5.7.2", + "vite": "^6.3.5" + } +} diff --git a/examples/react/drizzle/src/routeTree.gen.ts b/examples/react/drizzle/src/routeTree.gen.ts new file mode 100644 index 000000000..d204c269b --- /dev/null +++ b/examples/react/drizzle/src/routeTree.gen.ts @@ -0,0 +1,59 @@ +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. + +import { Route as rootRouteImport } from './routes/__root' +import { Route as IndexRouteImport } from './routes/index' + +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any) + +export interface FileRoutesByFullPath { + '/': typeof IndexRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: '/' + fileRoutesByTo: FileRoutesByTo + to: '/' + id: '__root__' | '/' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute +} + +declare module '@tanstack/react-router' { + interface FileRoutesByPath { + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } + } +} + +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, +} +export const routeTree = rootRouteImport + ._addFileChildren(rootRouteChildren) + ._addFileTypes() diff --git a/examples/react/drizzle/src/router.tsx b/examples/react/drizzle/src/router.tsx new file mode 100644 index 000000000..25729701a --- /dev/null +++ b/examples/react/drizzle/src/router.tsx @@ -0,0 +1,17 @@ +import { createRouter as createTanStackRouter } from '@tanstack/react-router' +import { routeTree } from './routeTree.gen' + +export function createRouter() { + const router = createTanStackRouter({ + routeTree, + scrollRestoration: true, + }) + + return router +} + +declare module '@tanstack/react-router' { + interface Register { + router: ReturnType + } +} diff --git a/examples/react/drizzle/src/routes/__root.tsx b/examples/react/drizzle/src/routes/__root.tsx new file mode 100644 index 000000000..3c5edbfad --- /dev/null +++ b/examples/react/drizzle/src/routes/__root.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import { + HeadContent, + Outlet, + Scripts, + createRootRoute, +} from '@tanstack/react-router' + +export const Route = createRootRoute({ + head: () => ({ + meta: [ + { + charSet: 'utf-8', + }, + { + name: 'viewport', + content: 'width=device-width, initial-scale=1', + }, + { + title: 'TanStack Start Starter', + }, + ], + }), + component: RootComponent, +}) + +function RootComponent() { + return ( + + + + + ) +} + +function RootDocument({ children }: { children: React.ReactNode }) { + return ( + + + + + + {children} + + + + ) +} diff --git a/examples/react/drizzle/src/routes/index.tsx b/examples/react/drizzle/src/routes/index.tsx new file mode 100644 index 000000000..d46eae05b --- /dev/null +++ b/examples/react/drizzle/src/routes/index.tsx @@ -0,0 +1,32 @@ +import { createFileRoute } from '@tanstack/react-router'; +import { TanStackDevtools } from "@tanstack/react-devtools" +import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' + +export const Route = createFileRoute('/')({ + component: Home, +}); + +function Home() { + return ( +
+

Welcome to the Drizzle + TanStack Start example!

+ + }, + { + name: "Drizzle Studio", render: () =>