diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json index 28ffb9676..c31817156 100644 --- a/examples/react/basic/package.json +++ b/examples/react/basic/package.json @@ -13,8 +13,8 @@ "@tanstack/react-devtools": "^0.6.1", "@tanstack/react-query": "^5.83.0", "@tanstack/react-query-devtools": "^5.83.0", - "@tanstack/react-router": "^1.130.2", - "@tanstack/react-router-devtools": "^1.130.2", + "@tanstack/react-router": "^1.131.2", + "@tanstack/react-router-devtools": "^1.131.2", "react": "^19.1.0", "react-dom": "^19.1.0", "zod": "^4.0.14" @@ -22,7 +22,7 @@ "devDependencies": { "@tanstack/devtools-ui": "0.3.4", "@tanstack/devtools-vite": "0.2.11", - "@types/react": "^19.1.2", + "@types/react": "^19.1.12", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.5.2", "vite": "^7.0.6", diff --git a/examples/react/custom-devtools/package.json b/examples/react/custom-devtools/package.json index 49c900a94..2f4b305b2 100644 --- a/examples/react/custom-devtools/package.json +++ b/examples/react/custom-devtools/package.json @@ -15,7 +15,7 @@ "react-dom": "^19.1.0" }, "devDependencies": { - "@types/react": "^19.1.2", + "@types/react": "^19.1.12", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.5.2", "vite": "^7.0.6" 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..d3c8e4b9c --- /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..3eff4a524 --- /dev/null +++ b/examples/react/drizzle/package.json @@ -0,0 +1,29 @@ +{ + "name": "tanstack-start-example-counter", + "private": true, + "sideEffects": false, + "type": "module", + "scripts": { + "dev": "drizzle-kit studio & vite dev", + "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.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@tanstack/devtools-vite": "0.2.11", + "@types/node": "^22.15.2", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.2", + "drizzle-kit": "^0.31.4", + "drizzle-orm": "^0.44.4", + "pg": "^8.16.3", + "typescript": "5.8.3", + "vite": "^7.0.6" + } +} 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..38664f83f --- /dev/null +++ b/examples/react/drizzle/src/routes/__root.tsx @@ -0,0 +1,47 @@ +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..188e2a705 --- /dev/null +++ b/examples/react/drizzle/src/routes/index.tsx @@ -0,0 +1,39 @@ +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: () => ( +