Skip to content

Commit c1ce053

Browse files
piehpieh
authored
Merge branch 'main' into feat/allow-nitro-zero-conf
2 parents 39dfd6c + fff6941 commit c1ce053

File tree

123 files changed

+653
-395
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+653
-395
lines changed

‎docs/router/framework/react/comparison.md

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ Feature/Capability Key:
6161
| Async Scroll Restoration | ✅ | 🛑 | 🛑 |
6262
| Router Invalidation | ✅ | ✅ | ✅ |
6363
| Runtime Route Manipulation (Fog of War) | 🛑 | ✅ | ✅ |
64+
| Parallel Routes | 🛑 | 🛑 | ✅ |
6465
| -- | -- | -- | -- |
6566
| **Full Stack** | -- | -- | -- |
6667
| SSR | ✅ | ✅ | ✅ |

‎docs/router/framework/react/quick-start.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ Alternatively, you can manually setup the project using the following steps:
2323
#### Install TanStack Router, Vite Plugin, and the Router Devtools
2424

2525
```sh
26-
npm install @tanstack/react-router
27-
npm install -D @tanstack/router-plugin @tanstack/react-router-devtools
26+
npm install @tanstack/react-router @tanstack/react-router-devtools
27+
npm install -D @tanstack/router-plugin
2828
# or
29-
pnpm add @tanstack/react-router
30-
pnpm add -D @tanstack/router-plugin @tanstack/react-router-devtools
29+
pnpm add @tanstack/react-router @tanstack/react-router-devtools
30+
pnpm add -D @tanstack/router-plugin
3131
# or
32-
yarn add @tanstack/react-router
33-
yarn add -D @tanstack/router-plugin @tanstack/react-router-devtools
32+
yarn add @tanstack/react-router @tanstack/react-router-devtools
33+
yarn add -D @tanstack/router-plugin
3434
# or
35-
bun add @tanstack/react-router
36-
bun add -D @tanstack/router-plugin @tanstack/react-router-devtools
35+
bun add @tanstack/react-router @tanstack/react-router-devtools
36+
bun add -D @tanstack/router-plugin
3737
# or
3838
deno add npm:@tanstack/react-router npm:@tanstack/router-plugin npm:@tanstack/react-router-devtools
3939
```

‎docs/router/framework/react/routing/file-naming-conventions.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ title: File Naming Conventions
44

55
File-based routing requires that you follow a few simple file naming conventions to ensure that your routes are generated correctly. The concepts these conventions enable are covered in detail in the [Route Trees & Nesting](./route-trees.md) guide.
66

7-
| Feature | Description |
8-
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
9-
| **`__root.tsx`** | The root route file must be named `__root.tsx` and must be placed in the root of the configured `routesDirectory`. |
10-
| **`.` Separator** | Routes can use the `.` character to denote a nested route. For example, `blog.post` will be generated as a child of `blog`. |
11-
| **`$` Token** | Route segments with the `$` token are parameterized and will extract the value from the URL pathname as a route `param`. |
12-
| **`_` Prefix** | Route segments with the `_` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname. |
13-
| **`_` Suffix** | Route segments with the `_` suffix exclude the route from being nested under any parent routes. |
14-
| **`(folder)` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path. |
15-
| **`index` Token** | Route segments ending with the `index` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the `indexToken` configuration option, see [options](#options). |
16-
| **`.route.tsx` File Type** | When using directories to organise routes, the `route` suffix can be used to create a route file at the directory's path. For example, `blog.post.route.tsx` or `blog/post/route.tsx` can be used as the route file for the `/blog/post` route. This can be configured via the `routeToken` configuration option, see [options](#options). |
7+
| Feature | Description |
8+
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9+
| **`__root.tsx`** | The root route file must be named `__root.tsx` and must be placed in the root of the configured `routesDirectory`. |
10+
| **`.` Separator** | Routes can use the `.` character to denote a nested route. For example, `blog.post` will be generated as a child of `blog`. |
11+
| **`$` Token** | Route segments with the `$` token are parameterized and will extract the value from the URL pathname as a route `param`. |
12+
| **`_` Prefix** | Route segments with the `_` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname. |
13+
| **`_` Suffix** | Route segments with the `_` suffix exclude the route from being nested under any parent routes. |
14+
| **`(folder)` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path. |
15+
| **`index` Token** | Route segments ending with the `index` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the `indexToken` configuration option, see [options](../../../api/file-based-routing.md#indextoken). |
16+
| **`.route.tsx` File Type** | When using directories to organise routes, the `route` suffix can be used to create a route file at the directory's path. For example, `blog.post.route.tsx` or `blog/post/route.tsx` can be used as the route file for the `/blog/post` route. This can be configured via the `routeToken` configuration option, see [options](../../../api/file-based-routing.md#routetoken). |
1717

1818
> **💡 Remember:** The file-naming conventions for your project could be affected by what [options](../../../api/file-based-routing.md) are configured.
1919

‎docs/router/framework/solid/quick-start.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ Alternatively, you can manually setup the project using the following steps:
2323
#### Install TanStack Router, Vite Plugin, and the Router Devtools
2424

2525
```sh
26-
npm install @tanstack/solid-router
27-
npm install -D @tanstack/router-plugin @tanstack/solid-router-devtools
26+
npm install @tanstack/solid-router @tanstack/solid-router-devtools
27+
npm install -D @tanstack/router-plugin
2828
# or
29-
pnpm add @tanstack/solid-router
30-
pnpm add -D @tanstack/router-plugin @tanstack/solid-router-devtools
29+
pnpm add @tanstack/solid-router @tanstack/solid-router-devtools
30+
pnpm add -D @tanstack/router-plugin
3131
# or
32-
yarn add @tanstack/solid-router
33-
yarn add -D @tanstack/router-plugin @tanstack/solid-router-devtools
32+
yarn add @tanstack/solid-router @tanstack/solid-router-devtools
33+
yarn add -D @tanstack/router-plugin
3434
# or
35-
bun add @tanstack/solid-router
36-
bun add -D @tanstack/router-plugin @tanstack/solid-router-devtools
35+
bun add @tanstack/solid-router @tanstack/solid-router-devtools
36+
bun add -D @tanstack/router-plugin
3737
# or
38-
deno add npm:@tanstack/solid-router npm:@tanstack/router-plugin @tanstack/solid-router-devtools
38+
deno add npm:@tanstack/solid-router npm:@tanstack/router-plugin npm:@tanstack/solid-router-devtools
3939
```
4040

4141
#### Configure the Vite Plugin

‎docs/start/framework/react/build-from-scratch.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ npm init -y
3030

3131
We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.json` file with at least the following settings:
3232

33-
```jsonc
33+
```json
3434
{
3535
"compilerOptions": {
3636
"jsx": "react-jsx",
3737
"moduleResolution": "Bundler",
3838
"module": "ESNext",
3939
"target": "ES2022",
4040
"skipLibCheck": true,
41-
"strictNullChecks": true,
42-
},
41+
"strictNullChecks": true
42+
}
4343
}
4444
```
4545

‎docs/start/framework/react/learn-the-basics.md

+42-8
Original file line numberDiff line numberDiff line change
@@ -275,23 +275,57 @@ Here's a quick example of how you can use server functions to perform a mutation
275275

276276
```tsx
277277
import { createServerFn } from '@tanstack/react-start'
278+
import { z } from 'zod'
279+
import { dbUpdateUser } from '...'
278280

279281
const UserSchema = z.object({
280282
id: z.string(),
281283
name: z.string(),
282284
})
285+
export type User = z.infer<typeof UserSchema>
283286

284-
const updateUser = createServerFn({ method: 'POST' })
287+
export const updateUser = createServerFn({ method: 'POST' })
285288
.validator(UserSchema)
286-
.handler(async ({ data }) => {
287-
return db
288-
.update(users)
289-
.set({ name: data.name })
290-
.where(eq(users.id, data.id))
291-
})
289+
.handler(({ data }) => dbUpdateUser(data))
292290

293291
// Somewhere else in your application
294-
await updateUser({ data: { id: '1', name: 'John' } })
292+
import { useQueryClient } from '@tanstack/react-query'
293+
import { useRouter } from '@tanstack/react-router'
294+
import { useServerFunction } from '@tanstack/react-start'
295+
import { updateUser, type User } from '...'
296+
297+
export function useUpdateUser() {
298+
const router = useRouter()
299+
const queryClient = useQueryClient()
300+
const _updateUser = useServerFunction(updateUser)
301+
302+
return useCallback(
303+
async (user: User) => {
304+
const result = await _updateUser({ data: user })
305+
306+
router.invalidate()
307+
queryClient.invalidateQueries({
308+
queryKey: ['users', 'updateUser', user.id],
309+
})
310+
311+
return result
312+
},
313+
[router, queryClient, _updateUser],
314+
)
315+
}
316+
317+
// Somewhere else in your application
318+
import { useUpdateUser } from '...'
319+
320+
function MyComponent() {
321+
const updateUser = useUpdateUser()
322+
const onClick = useCallback(async () => {
323+
await updateUser({ id: '1', name: 'John' })
324+
console.log('Updated user')
325+
}, [updateUser])
326+
327+
return <button onClick={onClick}>Click Me</button>
328+
}
295329
```
296330

297331
To learn more about mutations, check out the [mutations guide](/router/latest/docs/framework/react/guide/data-mutations).

‎docs/start/framework/react/overview.md

+15-6
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,15 @@ TanStack Start is not for you if:
6868

6969
TanStack works closely with our partners to provide the best possible developer experience while also providing solutions that work anywhere and are vetted by industry experts. Each of our partners plays a unique role in the TanStack ecosystem:
7070

71+
- **Clerk**
72+
<a href="https://go.clerk.com/wOwHtuJ" alt="Clerk Logo">
73+
<picture>
74+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-dark.svg" style="height: 40px;">
75+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
76+
<img alt="Convex logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
77+
</picture>
78+
</a>
79+
The best possible authentication experience for modern web applications, including TanStack Start applications. Clerk provides TanStack Start users with first-class integrations and solutions to auth and collaborates closely with the TanStack team to ensure that TanStack Start provides APIs that are up to date with the latest in auth best practices.
7180
- **Netlify**
7281
<a href="https://www.netlify.com?utm_source=tanstack" alt="Netlify Logo">
7382
<picture>
@@ -77,15 +86,15 @@ TanStack works closely with our partners to provide the best possible developer
7786
</picture>
7887
</a>
7988
The leading hosting platform for web applications that provides a fast, secure, and reliable environment for deploying your web applications. We work closely with Netlify to ensure that TanStack Start applications not only deploy seamlessly to their platform, but also implement best practices for performance, security, and reliability regardless of where you end up deploying.
80-
- **Clerk**
81-
<a href="https://go.clerk.com/wOwHtuJ" alt="Clerk Logo">
89+
- **Neon**
90+
<a href="https://neon.tech?utm_source=tanstack" alt="Neon Logo">
8291
<picture>
83-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-dark.svg" style="height: 40px;">
84-
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
85-
<img alt="Convex logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
92+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-dark.svg" style="height: 60px;">
93+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-light.svg" style="height: 60px;">
94+
<img alt="Neon logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-light.svg" style="height: 60px;">
8695
</picture>
8796
</a>
88-
The best possible authentication experience for modern web applications, including TanStack Start applications. Clerk provides TanStack Start users with first-class integrations and solutions to auth and collaborates closely with the TanStack team to ensure that TanStack Start provides APIs that are up to date with the latest in auth best practices.
97+
A serverless, autoscaling Postgres solution purpose-built for modern full-stack apps. Neon offers rich integration opportunities with TanStack Start, including server functions and database-backed routing. Together, we’re simplifying the database experience for developers using TanStack.
8998
- **Convex**
9099
<a href="https://convex.dev?utm_source=tanstack" alt="Convex Logo">
91100
<picture>

‎docs/start/framework/react/server-functions.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ There are many context functions available to you for things like:
371371
- Dealing with multi-part form data
372372
- Reading/Setting custom server context properties
373373

374-
For a full list of available context functions, see all of the available [h3 Methods](https://h3.unjs.io/utils/request) or inspect the [@tanstack/react-start/server Source Code](https://github.com/tanstack/router/tree/main/packages/start/src/server/index.tsx).
374+
For a full list of available context functions, see all of the available [h3 Methods](https://h3.unjs.io/utils/request) or inspect the [@tanstack/start-server-core Source Code](https://github.com/TanStack/router/tree/main/packages/start-server-core/src).
375375

376376
For starters, here are a few examples:
377377

‎docs/start/framework/solid/build-from-scratch.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ npm init -y
3030

3131
We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.json` file with at least the following settings:
3232

33-
```jsonc
33+
```json
3434
{
3535
"compilerOptions": {
3636
"jsx": "preserve",
@@ -39,8 +39,8 @@ We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.jso
3939
"module": "ESNext",
4040
"target": "ES2022",
4141
"skipLibCheck": true,
42-
"strictNullChecks": true,
43-
},
42+
"strictNullChecks": true
43+
}
4444
}
4545
```
4646

‎examples/react/authenticated-routes-firebase/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"start": "vite"
1010
},
1111
"dependencies": {
12-
"@tanstack/react-router": "^1.116.0",
13-
"@tanstack/react-router-devtools": "^1.116.0",
14-
"@tanstack/router-plugin": "^1.116.1",
12+
"@tanstack/react-router": "^1.117.0",
13+
"@tanstack/react-router-devtools": "^1.117.0",
14+
"@tanstack/router-plugin": "^1.117.0",
1515
"autoprefixer": "^10.4.20",
1616
"firebase": "^11.4.0",
1717
"postcss": "^8.5.1",

0 commit comments

Comments
 (0)