Skip to content

Commit 864a2e0

Browse files
birkskyumautofix-ci[bot]
birkskyum
and
autofix-ci[bot]
authored
docs(solid-router): port view-transitions example (#5815)
* docs(solid-router): port view-transition example * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent d0e33fa commit 864a2e0

21 files changed

+723
-0
lines changed

‎docs/router/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -629,6 +629,10 @@
629629
{
630630
"label": "Kitchen Sink + Solid Query (code-based)",
631631
"to": "framework/solid/examples/kitchen-sink-solid-query"
632+
},
633+
{
634+
"label": "View Transitions",
635+
"to": "framework/solid/examples/view-transitions"
632636
}
633637
]
634638
}

‎examples/solid/view-transitions/.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
7+
/test-results/
8+
/playwright-report/
9+
/blob-report/
10+
/playwright/.cache/

‎examples/solid/view-transitions/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/view-transitions/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm start` or `yarn start`

‎examples/solid/view-transitions/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/solid/view-transitions/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "tanstack-router-solid-example-view-transitions",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port 3000",
7+
"build": "vite build && tsc --noEmit",
8+
"serve": "vite preview",
9+
"start": "vite"
10+
},
11+
"dependencies": {
12+
"@tailwindcss/postcss": "^4.1.15",
13+
"@tanstack/solid-router": "^1.135.0",
14+
"@tanstack/solid-router-devtools": "^1.135.0",
15+
"@tanstack/router-plugin": "^1.135.0",
16+
"postcss": "^8.5.1",
17+
"solid-js": "^1.9.10",
18+
"redaxios": "^0.5.1",
19+
"tailwindcss": "^4.1.15",
20+
"zod": "^3.24.2"
21+
},
22+
"devDependencies": {
23+
"vite-plugin-solid": "^2.11.10",
24+
"typescript": "^5.7.2",
25+
"vite": "^7.1.7"
26+
}
27+
}

‎examples/solid/view-transitions/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

‎examples/solid/view-transitions/src/main.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { render } from 'solid-js/web'
2+
import { RouterProvider, createRouter } from '@tanstack/solid-router'
3+
import { routeTree } from './routeTree.gen'
4+
import './styles.css'
5+
6+
// Set up a Router instance
7+
const router = createRouter({
8+
routeTree,
9+
defaultPreload: 'intent',
10+
defaultStaleTime: 5000,
11+
scrollRestoration: true,
12+
/*
13+
Using defaultViewTransition would prevent the need to
14+
manually add `viewTransition: true` to every navigation.
15+
16+
If defaultViewTransition.types is a function, it will be called with the
17+
location change info and should return an array of view transition types.
18+
This is useful if you want to have different view transitions depending on
19+
the navigation's specifics.
20+
21+
An example use case is sliding in a direction based on the index of the
22+
previous and next routes when navigating via browser history back and forth.
23+
*/
24+
// defaultViewTransition: true
25+
// OR
26+
// defaultViewTransition: {
27+
// types: ({ fromLocation, toLocation }) => {
28+
// let direction = 'none'
29+
30+
// if (fromLocation) {
31+
// const fromIndex = fromLocation.state.__TSR_index
32+
// const toIndex = toLocation.state.__TSR_index
33+
34+
// direction = fromIndex > toIndex ? 'right' : 'left'
35+
// }
36+
37+
// return [`slide-${direction}`]
38+
// },
39+
// },
40+
})
41+
42+
// Register things for typesafety
43+
declare module '@tanstack/solid-router' {
44+
interface Register {
45+
router: typeof router
46+
}
47+
}
48+
49+
const rootElement = document.getElementById('app')!
50+
51+
if (!rootElement.innerHTML) {
52+
render(() => <RouterProvider router={router} />, rootElement)
53+
}

‎examples/solid/view-transitions/src/posts.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { notFound } from '@tanstack/solid-router'
2+
import axios from 'redaxios'
3+
4+
export type PostType = {
5+
id: string
6+
title: string
7+
body: string
8+
}
9+
10+
export const fetchPost = async (postId: string) => {
11+
console.info(`Fetching post with id ${postId}...`)
12+
await new Promise((r) => setTimeout(r, 0))
13+
const post = await axios
14+
.get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
15+
.then((r) => r.data)
16+
.catch((err) => {
17+
if (err.status === 404) {
18+
throw notFound()
19+
}
20+
throw err
21+
})
22+
23+
return post
24+
}
25+
26+
export const fetchPosts = async () => {
27+
console.info('Fetching posts...')
28+
await new Promise((r) => setTimeout(r, 0))
29+
return axios
30+
.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
31+
.then((r) => r.data.slice(0, 10))
32+
}

‎examples/solid/view-transitions/src/routeTree.gen.ts‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
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 HowItWorksRouteImport } from './routes/how-it-works'
13+
import { Route as ExploreRouteImport } from './routes/explore'
14+
import { Route as PostsRouteRouteImport } from './routes/posts.route'
15+
import { Route as IndexRouteImport } from './routes/index'
16+
import { Route as PostsIndexRouteImport } from './routes/posts.index'
17+
import { Route as PostsPostIdRouteImport } from './routes/posts.$postId'
18+
19+
const HowItWorksRoute = HowItWorksRouteImport.update({
20+
id: '/how-it-works',
21+
path: '/how-it-works',
22+
getParentRoute: () => rootRouteImport,
23+
} as any)
24+
const ExploreRoute = ExploreRouteImport.update({
25+
id: '/explore',
26+
path: '/explore',
27+
getParentRoute: () => rootRouteImport,
28+
} as any)
29+
const PostsRouteRoute = PostsRouteRouteImport.update({
30+
id: '/posts',
31+
path: '/posts',
32+
getParentRoute: () => rootRouteImport,
33+
} as any)
34+
const IndexRoute = IndexRouteImport.update({
35+
id: '/',
36+
path: '/',
37+
getParentRoute: () => rootRouteImport,
38+
} as any)
39+
const PostsIndexRoute = PostsIndexRouteImport.update({
40+
id: '/',
41+
path: '/',
42+
getParentRoute: () => PostsRouteRoute,
43+
} as any)
44+
const PostsPostIdRoute = PostsPostIdRouteImport.update({
45+
id: '/$postId',
46+
path: '/$postId',
47+
getParentRoute: () => PostsRouteRoute,
48+
} as any)
49+
50+
export interface FileRoutesByFullPath {
51+
'/': typeof IndexRoute
52+
'/posts': typeof PostsRouteRouteWithChildren
53+
'/explore': typeof ExploreRoute
54+
'/how-it-works': typeof HowItWorksRoute
55+
'/posts/$postId': typeof PostsPostIdRoute
56+
'/posts/': typeof PostsIndexRoute
57+
}
58+
export interface FileRoutesByTo {
59+
'/': typeof IndexRoute
60+
'/explore': typeof ExploreRoute
61+
'/how-it-works': typeof HowItWorksRoute
62+
'/posts/$postId': typeof PostsPostIdRoute
63+
'/posts': typeof PostsIndexRoute
64+
}
65+
export interface FileRoutesById {
66+
__root__: typeof rootRouteImport
67+
'/': typeof IndexRoute
68+
'/posts': typeof PostsRouteRouteWithChildren
69+
'/explore': typeof ExploreRoute
70+
'/how-it-works': typeof HowItWorksRoute
71+
'/posts/$postId': typeof PostsPostIdRoute
72+
'/posts/': typeof PostsIndexRoute
73+
}
74+
export interface FileRouteTypes {
75+
fileRoutesByFullPath: FileRoutesByFullPath
76+
fullPaths:
77+
| '/'
78+
| '/posts'
79+
| '/explore'
80+
| '/how-it-works'
81+
| '/posts/$postId'
82+
| '/posts/'
83+
fileRoutesByTo: FileRoutesByTo
84+
to: '/' | '/explore' | '/how-it-works' | '/posts/$postId' | '/posts'
85+
id:
86+
| '__root__'
87+
| '/'
88+
| '/posts'
89+
| '/explore'
90+
| '/how-it-works'
91+
| '/posts/$postId'
92+
| '/posts/'
93+
fileRoutesById: FileRoutesById
94+
}
95+
export interface RootRouteChildren {
96+
IndexRoute: typeof IndexRoute
97+
PostsRouteRoute: typeof PostsRouteRouteWithChildren
98+
ExploreRoute: typeof ExploreRoute
99+
HowItWorksRoute: typeof HowItWorksRoute
100+
}
101+
102+
declare module '@tanstack/solid-router' {
103+
interface FileRoutesByPath {
104+
'/how-it-works': {
105+
id: '/how-it-works'
106+
path: '/how-it-works'
107+
fullPath: '/how-it-works'
108+
preLoaderRoute: typeof HowItWorksRouteImport
109+
parentRoute: typeof rootRouteImport
110+
}
111+
'/explore': {
112+
id: '/explore'
113+
path: '/explore'
114+
fullPath: '/explore'
115+
preLoaderRoute: typeof ExploreRouteImport
116+
parentRoute: typeof rootRouteImport
117+
}
118+
'/posts': {
119+
id: '/posts'
120+
path: '/posts'
121+
fullPath: '/posts'
122+
preLoaderRoute: typeof PostsRouteRouteImport
123+
parentRoute: typeof rootRouteImport
124+
}
125+
'/': {
126+
id: '/'
127+
path: '/'
128+
fullPath: '/'
129+
preLoaderRoute: typeof IndexRouteImport
130+
parentRoute: typeof rootRouteImport
131+
}
132+
'/posts/': {
133+
id: '/posts/'
134+
path: '/'
135+
fullPath: '/posts/'
136+
preLoaderRoute: typeof PostsIndexRouteImport
137+
parentRoute: typeof PostsRouteRoute
138+
}
139+
'/posts/$postId': {
140+
id: '/posts/$postId'
141+
path: '/$postId'
142+
fullPath: '/posts/$postId'
143+
preLoaderRoute: typeof PostsPostIdRouteImport
144+
parentRoute: typeof PostsRouteRoute
145+
}
146+
}
147+
}
148+
149+
interface PostsRouteRouteChildren {
150+
PostsPostIdRoute: typeof PostsPostIdRoute
151+
PostsIndexRoute: typeof PostsIndexRoute
152+
}
153+
154+
const PostsRouteRouteChildren: PostsRouteRouteChildren = {
155+
PostsPostIdRoute: PostsPostIdRoute,
156+
PostsIndexRoute: PostsIndexRoute,
157+
}
158+
159+
const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(
160+
PostsRouteRouteChildren,
161+
)
162+
163+
const rootRouteChildren: RootRouteChildren = {
164+
IndexRoute: IndexRoute,
165+
PostsRouteRoute: PostsRouteRouteWithChildren,
166+
ExploreRoute: ExploreRoute,
167+
HowItWorksRoute: HowItWorksRoute,
168+
}
169+
export const routeTree = rootRouteImport
170+
._addFileChildren(rootRouteChildren)
171+
._addFileTypes<FileRouteTypes>()

0 commit comments

Comments
 (0)