Skip to content

Commit 1a74c9e

Browse files
schiller-manuelschiller-manuel
authored
add tanstack start react example (#4)
1 parent 976ccb8 commit 1a74c9e

File tree

15 files changed

+1532
-38
lines changed

15 files changed

+1532
-38
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
pnpm-lock.yaml
3+
examples/tanstack-react-start/src/routeTree.gen.ts

‎README.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@
1111

1212
<!-- automd:examples -->
1313

14-
| Example | Source | Playground | Clone |
15-
| --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
14+
| Example | Source | Playground | Clone |
15+
| --- | --- | --- | --- |
1616
| `basic-service` | [examples/basic-service](./examples/basic-service/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/basic-service?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/basic-service basic-service-app` |
17-
| `h3` | [examples/h3](./examples/h3/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/h3?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/h3 h3-app` |
18-
| `hono` | [examples/hono](./examples/hono/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/hono?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/hono hono-app` |
19-
| `node-compat` | [examples/node-compat](./examples/node-compat/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/node-compat?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/node-compat node-compat-app` |
20-
| `react-ssr` | [examples/react-ssr](./examples/react-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/react-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/react-ssr react-ssr-app` |
21-
| `vue-ssr` | [examples/vue-ssr](./examples/vue-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/vue-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/vue-ssr vue-ssr-app` |
17+
| `h3` | [examples/h3](./examples/h3/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/h3?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/h3 h3-app` |
18+
| `hono` | [examples/hono](./examples/hono/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/hono?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/hono hono-app` |
19+
| `node-compat` | [examples/node-compat](./examples/node-compat/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/node-compat?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/node-compat node-compat-app` |
20+
| `react-ssr` | [examples/react-ssr](./examples/react-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/react-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/react-ssr react-ssr-app` |
21+
| `tanstack-start-react` | [examples/tanstack-start-react](./examples/tanstack-start-react/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/tanstack-start-react?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/tanstack-start-react tanstack-start-react-app` |
22+
| `vue-ssr` | [examples/vue-ssr](./examples/vue-ssr/) | [stackblitz](https://stackblitz.com/fork/github/nitrojs/nitro-vite-examples/tree/main/examples/vue-ssr?startScript=dev&file=vite.config.mjs,server.ts) | `npx giget gh:nitrojs/vite-examples/examples/vue-ssr vue-ssr-app` |
2223

2324
<!-- /automd -->
2425

‎examples/tanstack-start-react/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "tanstack-start-react-example",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"build": "vite build",
8+
"dev": "vite dev"
9+
},
10+
"devDependencies": {
11+
"@tanstack/react-router": "^1.132.0-alpha.4",
12+
"@tanstack/react-router-devtools": "^1.132.0-alpha.4",
13+
"@tanstack/react-start": "^1.132.0-alpha.6",
14+
"@types/node": "^22.5.4",
15+
"@types/react": "^19.0.8",
16+
"@types/react-dom": "^19.0.3",
17+
"@vitejs/plugin-react": "^4.3.4",
18+
"nitro": "npm:nitro-nightly",
19+
"react": "^19.0.0",
20+
"react-dom": "^19.0.0",
21+
"typescript": "^5.7.2",
22+
"vite": "^7.1.1",
23+
"vite-tsconfig-paths": "^5.1.4"
24+
}
25+
}

‎examples/tanstack-start-react/public/favicon.ico

15 KB
Binary file not shown.

‎examples/tanstack-start-react/src/components/Counter.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.increment {
2+
font-family: inherit;
3+
font-size: inherit;
4+
padding: 1em 2em;
5+
color: #335d92;
6+
background-color: rgba(68, 107, 158, 0.1);
7+
border-radius: 2em;
8+
border: 2px solid rgba(68, 107, 158, 0);
9+
outline: none;
10+
width: 200px;
11+
font-variant-numeric: tabular-nums;
12+
cursor: pointer;
13+
}
14+
15+
.increment:focus {
16+
border: 2px solid #335d92;
17+
}
18+
19+
.increment:active {
20+
background-color: rgba(68, 107, 158, 0.2);
21+
}

‎examples/tanstack-start-react/src/components/Counter.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useState } from "react";
2+
import "./Counter.css";
3+
4+
export default function Counter() {
5+
const [count, setCount] = useState(0);
6+
return (
7+
<button
8+
className="increment"
9+
onClick={() => setCount(count + 1)}
10+
type="button"
11+
>
12+
Clicks: {count}
13+
</button>
14+
);
15+
}

‎examples/tanstack-start-react/src/routeTree.gen.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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 AboutRouteImport } from './routes/about'
13+
import { Route as IndexRouteImport } from './routes/index'
14+
15+
const AboutRoute = AboutRouteImport.update({
16+
id: '/about',
17+
path: '/about',
18+
getParentRoute: () => rootRouteImport,
19+
} as any)
20+
const IndexRoute = IndexRouteImport.update({
21+
id: '/',
22+
path: '/',
23+
getParentRoute: () => rootRouteImport,
24+
} as any)
25+
26+
export interface FileRoutesByFullPath {
27+
'/': typeof IndexRoute
28+
'/about': typeof AboutRoute
29+
}
30+
export interface FileRoutesByTo {
31+
'/': typeof IndexRoute
32+
'/about': typeof AboutRoute
33+
}
34+
export interface FileRoutesById {
35+
__root__: typeof rootRouteImport
36+
'/': typeof IndexRoute
37+
'/about': typeof AboutRoute
38+
}
39+
export interface FileRouteTypes {
40+
fileRoutesByFullPath: FileRoutesByFullPath
41+
fullPaths: '/' | '/about'
42+
fileRoutesByTo: FileRoutesByTo
43+
to: '/' | '/about'
44+
id: '__root__' | '/' | '/about'
45+
fileRoutesById: FileRoutesById
46+
}
47+
export interface RootRouteChildren {
48+
IndexRoute: typeof IndexRoute
49+
AboutRoute: typeof AboutRoute
50+
}
51+
52+
declare module '@tanstack/react-router' {
53+
interface FileRoutesByPath {
54+
'/about': {
55+
id: '/about'
56+
path: '/about'
57+
fullPath: '/about'
58+
preLoaderRoute: typeof AboutRouteImport
59+
parentRoute: typeof rootRouteImport
60+
}
61+
'/': {
62+
id: '/'
63+
path: '/'
64+
fullPath: '/'
65+
preLoaderRoute: typeof IndexRouteImport
66+
parentRoute: typeof rootRouteImport
67+
}
68+
}
69+
}
70+
71+
const rootRouteChildren: RootRouteChildren = {
72+
IndexRoute: IndexRoute,
73+
AboutRoute: AboutRoute,
74+
}
75+
export const routeTree = rootRouteImport
76+
._addFileChildren(rootRouteChildren)
77+
._addFileTypes<FileRouteTypes>()

‎examples/tanstack-start-react/src/router.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
defaultPreload: "intent",
8+
defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
9+
defaultNotFoundComponent: () => <p>not found</p>,
10+
scrollRestoration: true,
11+
});
12+
13+
return router;
14+
}
15+
16+
declare module "@tanstack/react-router" {
17+
interface Register {
18+
router: ReturnType<typeof createRouter>;
19+
}
20+
}

‎examples/tanstack-start-react/src/routes/__root.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/// <reference types="vite/client" />
2+
import * as React from "react";
3+
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
4+
import {
5+
HeadContent,
6+
Link,
7+
Outlet,
8+
Scripts,
9+
createRootRoute,
10+
} from "@tanstack/react-router";
11+
import appCss from "~/styles/app.css?url";
12+
13+
export const Route = createRootRoute({
14+
head: () => ({ links: [{ rel: "stylesheet", href: appCss }] }),
15+
component: RootComponent,
16+
});
17+
18+
function RootComponent() {
19+
return (
20+
<RootDocument>
21+
<Outlet />
22+
</RootDocument>
23+
);
24+
}
25+
26+
function RootDocument({ children }: { children: React.ReactNode }) {
27+
return (
28+
<html>
29+
<head>
30+
<HeadContent />
31+
</head>
32+
<body>
33+
<div>
34+
<Link to="/">Index</Link>
35+
<Link to="/about">About</Link>
36+
</div>
37+
38+
{children}
39+
<TanStackRouterDevtools position="bottom-right" />
40+
<Scripts />
41+
</body>
42+
</html>
43+
);
44+
}

‎examples/tanstack-start-react/src/routes/about.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { createFileRoute } from "@tanstack/react-router";
2+
import Counter from "~/components/Counter";
3+
4+
export const Route = createFileRoute("/about")({
5+
component: RouteComponent,
6+
});
7+
8+
function RouteComponent() {
9+
return (
10+
<main>
11+
<h1>About</h1>
12+
<Counter />
13+
</main>
14+
);
15+
}

0 commit comments

Comments
 (0)