Skip to content

Commit 6b9283b

Browse files
ha1fstackha1fstack
authored
Merge branch 'main' into feat/view-transition-events
2 parents e482a3a + dfb4f9a commit 6b9283b

File tree

556 files changed

+18081
-562
lines changed

Some content is hidden

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

556 files changed

+18081
-562
lines changed

‎docs/router/config.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,10 @@
610610
"label": "Quickstart (file-based)",
611611
"to": "framework/solid/examples/quickstart-file-based"
612612
},
613+
{
614+
"label": "Quickstart (code-based)",
615+
"to": "framework/solid/examples/quickstart"
616+
},
613617
{
614618
"label": "Basic (file-based)",
615619
"to": "framework/solid/examples/basic-file-based"
@@ -622,6 +626,18 @@
622626
"label": "Basic + Solid Query (code-based)",
623627
"to": "framework/solid/examples/basic-solid-query"
624628
},
629+
{
630+
"label": "Basic + SSR (file-based)",
631+
"to": "framework/solid/examples/basic-ssr-file-based"
632+
},
633+
{
634+
"label": "Basic + SSR Streaming (file-based)",
635+
"to": "framework/solid/examples/basic-ssr-streaming-file-based"
636+
},
637+
{
638+
"label": "Kitchen Sink (code-based)",
639+
"to": "framework/solid/examples/kitchen-sink"
640+
},
625641
{
626642
"label": "Kitchen Sink (file-based)",
627643
"to": "framework/solid/examples/kitchen-sink-file-based"
@@ -634,13 +650,49 @@
634650
"label": "Kitchen Sink + Solid Query (code-based)",
635651
"to": "framework/solid/examples/kitchen-sink-solid-query"
636652
},
653+
{
654+
"label": "Location Masking",
655+
"to": "framework/solid/examples/location-masking"
656+
},
657+
{
658+
"label": "Authenticated Routes",
659+
"to": "framework/solid/examples/authenticated-routes"
660+
},
661+
{
662+
"label": "Scroll Restoration",
663+
"to": "framework/solid/examples/scroll-restoration"
664+
},
665+
{
666+
"label": "Deferred Data",
667+
"to": "framework/solid/examples/deferred-data"
668+
},
669+
{
670+
"label": "Navigation Blocking",
671+
"to": "framework/solid/examples/navigation-blocking"
672+
},
637673
{
638674
"label": "View Transitions",
639675
"to": "framework/solid/examples/view-transitions"
640676
},
641677
{
642678
"label": "Framer Motion",
643679
"to": "framework/solid/examples/with-framer-motion"
680+
},
681+
{
682+
"label": "With tRPC",
683+
"to": "framework/solid/examples/with-trpc"
684+
},
685+
{
686+
"label": "Monorepo basic",
687+
"to": "framework/solid/examples/router-monorepo-simple"
688+
},
689+
{
690+
"label": "Monorepo basic (with lazy loading)",
691+
"to": "framework/solid/examples/router-monorepo-simple-lazy"
692+
},
693+
{
694+
"label": "Monorepo with Solid Query",
695+
"to": "framework/solid/examples/router-monorepo-solid-query"
644696
}
645697
]
646698
}

‎docs/router/framework/solid/guide/authenticated-routes.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
---
22
ref: docs/router/framework/react/guide/authenticated-routes.md
3-
replace: { 'react-router': 'solid-router' }
3+
replace:
4+
{
5+
'react-router': 'solid-router',
6+
'auth.isAuthenticated': 'auth.isAuthenticated()',
7+
'react': 'solid',
8+
}
49
---

‎docs/router/framework/solid/installation/with-esbuild.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: Installation with Esbuild
3+
---
4+
5+
[//]: # 'BundlerConfiguration'
6+
7+
To use file-based routing with **Esbuild**, you'll need to install the `@tanstack/router-plugin` package.
8+
9+
```sh
10+
npm install -D @tanstack/router-plugin
11+
```
12+
13+
Once installed, you'll need to add the plugin to your configuration.
14+
15+
```tsx
16+
// build.js
17+
import * as esbuild from 'esbuild'
18+
import { solidPlugin } from 'esbuild-plugin-solid'
19+
import { tanstackRouter } from '@tanstack/router-plugin/esbuild'
20+
21+
const isDev = process.argv.includes('--dev')
22+
23+
const ctx = await esbuild.context({
24+
entryPoints: ['src/main.tsx'],
25+
outfile: 'dist/main.js',
26+
minify: !isDev,
27+
bundle: true,
28+
format: 'esm',
29+
target: ['esnext'],
30+
sourcemap: true,
31+
plugins: [
32+
solidPlugin(),
33+
tanstackRouter({ target: 'solid', autoCodeSplitting: true }),
34+
],
35+
})
36+
37+
if (isDev) {
38+
await ctx.watch()
39+
const { host, port } = await ctx.serve({ servedir: '.', port: 3005 })
40+
console.log(`Server running at http://${host || 'localhost'}:${port}`)
41+
} else {
42+
await ctx.rebuild()
43+
await ctx.dispose()
44+
}
45+
```
46+
47+
Or, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-esbuild-file-based) and get started.
48+
49+
Now that you've added the plugin to your Esbuild configuration, you're all set to start using file-based routing with TanStack Router.
50+
51+
[//]: # 'BundlerConfiguration'
52+
53+
## Ignoring the generated route tree file
54+
55+
If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
56+
57+
Here are some resources to help you ignore the generated route tree file:
58+
59+
- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
60+
- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
61+
- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
62+
63+
> [!WARNING]
64+
> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
65+
66+
You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
67+
68+
```json
69+
{
70+
"files.readonlyInclude": {
71+
"**/routeTree.gen.ts": true
72+
},
73+
"files.watcherExclude": {
74+
"**/routeTree.gen.ts": true
75+
},
76+
"search.exclude": {
77+
"**/routeTree.gen.ts": true
78+
}
79+
}
80+
```
81+
82+
You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
83+
84+
## Configuration
85+
86+
When using the TanStack Router Plugin with Esbuild for File-based routing, it comes with some sane defaults that should work for most projects:
87+
88+
```json
89+
{
90+
"routesDirectory": "./src/routes",
91+
"generatedRouteTree": "./src/routeTree.gen.ts",
92+
"routeFileIgnorePrefix": "-",
93+
"quoteStyle": "single"
94+
}
95+
```
96+
97+
If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
98+
99+
You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).

‎docs/router/framework/solid/installation/with-rspack.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Installation with Rspack
3+
---
4+
5+
[//]: # 'BundlerConfiguration'
6+
7+
To use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the `@tanstack/router-plugin` package.
8+
9+
```sh
10+
npm install -D @tanstack/router-plugin
11+
```
12+
13+
Once installed, you'll need to add the plugin to your configuration.
14+
15+
```tsx
16+
// rsbuild.config.ts
17+
import { defineConfig } from '@rsbuild/core'
18+
import { pluginBabel } from '@rsbuild/plugin-babel'
19+
import { pluginSolid } from '@rsbuild/plugin-solid'
20+
import { tanstackRouter } from '@tanstack/router-plugin/rspack'
21+
22+
export default defineConfig({
23+
plugins: [
24+
pluginBabel({
25+
include: /\.(?:jsx|tsx)$/,
26+
}),
27+
pluginSolid(),
28+
],
29+
tools: {
30+
rspack: {
31+
plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],
32+
},
33+
},
34+
})
35+
```
36+
37+
Or, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-rspack-file-based) and get started.
38+
39+
Now that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.
40+
41+
[//]: # 'BundlerConfiguration'
42+
43+
## Ignoring the generated route tree file
44+
45+
If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
46+
47+
Here are some resources to help you ignore the generated route tree file:
48+
49+
- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
50+
- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
51+
- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
52+
53+
> [!WARNING]
54+
> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
55+
56+
You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
57+
58+
```json
59+
{
60+
"files.readonlyInclude": {
61+
"**/routeTree.gen.ts": true
62+
},
63+
"files.watcherExclude": {
64+
"**/routeTree.gen.ts": true
65+
},
66+
"search.exclude": {
67+
"**/routeTree.gen.ts": true
68+
}
69+
}
70+
```
71+
72+
You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
73+
74+
## Configuration
75+
76+
When using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:
77+
78+
```json
79+
{
80+
"routesDirectory": "./src/routes",
81+
"generatedRouteTree": "./src/routeTree.gen.ts",
82+
"routeFileIgnorePrefix": "-",
83+
"quoteStyle": "single"
84+
}
85+
```
86+
87+
If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
88+
89+
You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).

‎docs/router/framework/solid/installation/with-webpack.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Installation with Webpack
3+
---
4+
5+
[//]: # 'BundlerConfiguration'
6+
7+
To use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.
8+
9+
```sh
10+
npm install -D @tanstack/router-plugin
11+
```
12+
13+
Once installed, you'll need to add the plugin to your configuration.
14+
15+
```tsx
16+
// webpack.config.ts
17+
import { tanstackRouter } from '@tanstack/router-plugin/webpack'
18+
19+
export default {
20+
plugins: [
21+
tanstackRouter({
22+
target: 'solid',
23+
autoCodeSplitting: true,
24+
}),
25+
],
26+
}
27+
```
28+
29+
And in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:
30+
31+
```tsx
32+
// .babelrc
33+
34+
{
35+
"presets": ["babel-preset-solid", "@babel/preset-typescript"]
36+
}
37+
38+
```
39+
40+
Or, for a full webpack.config.js, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-webpack-file-based) and get started.
41+
42+
Now that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.
43+
44+
[//]: # 'BundlerConfiguration'
45+
46+
## Ignoring the generated route tree file
47+
48+
If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
49+
50+
Here are some resources to help you ignore the generated route tree file:
51+
52+
- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
53+
- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
54+
- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
55+
56+
> [!WARNING]
57+
> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
58+
59+
You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
60+
61+
```json
62+
{
63+
"files.readonlyInclude": {
64+
"**/routeTree.gen.ts": true
65+
},
66+
"files.watcherExclude": {
67+
"**/routeTree.gen.ts": true
68+
},
69+
"search.exclude": {
70+
"**/routeTree.gen.ts": true
71+
}
72+
}
73+
```
74+
75+
You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
76+
77+
## Configuration
78+
79+
When using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:
80+
81+
```json
82+
{
83+
"routesDirectory": "./src/routes",
84+
"generatedRouteTree": "./src/routeTree.gen.ts",
85+
"routeFileIgnorePrefix": "-",
86+
"quoteStyle": "single"
87+
}
88+
```
89+
90+
If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
91+
92+
You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).

0 commit comments

Comments
 (0)