diff --git a/docs/router/config.json b/docs/router/config.json index 94eff6070d..9f6e202f84 100644 --- a/docs/router/config.json +++ b/docs/router/config.json @@ -629,6 +629,10 @@ { "label": "Kitchen Sink + Solid Query (code-based)", "to": "framework/solid/examples/kitchen-sink-solid-query" + }, + { + "label": "View Transitions", + "to": "framework/solid/examples/view-transitions" } ] } diff --git a/examples/solid/view-transitions/.gitignore b/examples/solid/view-transitions/.gitignore new file mode 100644 index 0000000000..a6ea47e508 --- /dev/null +++ b/examples/solid/view-transitions/.gitignore @@ -0,0 +1,10 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local + +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/examples/solid/view-transitions/.vscode/settings.json b/examples/solid/view-transitions/.vscode/settings.json new file mode 100644 index 0000000000..00b5278e58 --- /dev/null +++ b/examples/solid/view-transitions/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "files.watcherExclude": { + "**/routeTree.gen.ts": true + }, + "search.exclude": { + "**/routeTree.gen.ts": true + }, + "files.readonlyInclude": { + "**/routeTree.gen.ts": true + } +} diff --git a/examples/solid/view-transitions/README.md b/examples/solid/view-transitions/README.md new file mode 100644 index 0000000000..115199d292 --- /dev/null +++ b/examples/solid/view-transitions/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm start` or `yarn start` diff --git a/examples/solid/view-transitions/index.html b/examples/solid/view-transitions/index.html new file mode 100644 index 0000000000..9b6335c0ac --- /dev/null +++ b/examples/solid/view-transitions/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App + + +
+ + + diff --git a/examples/solid/view-transitions/package.json b/examples/solid/view-transitions/package.json new file mode 100644 index 0000000000..3ef56ced13 --- /dev/null +++ b/examples/solid/view-transitions/package.json @@ -0,0 +1,27 @@ +{ + "name": "tanstack-router-solid-example-view-transitions", + "private": true, + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "vite build && tsc --noEmit", + "serve": "vite preview", + "start": "vite" + }, + "dependencies": { + "@tailwindcss/postcss": "^4.1.15", + "@tanstack/solid-router": "^1.135.0", + "@tanstack/solid-router-devtools": "^1.135.0", + "@tanstack/router-plugin": "^1.135.0", + "postcss": "^8.5.1", + "solid-js": "^1.9.10", + "redaxios": "^0.5.1", + "tailwindcss": "^4.1.15", + "zod": "^3.24.2" + }, + "devDependencies": { + "vite-plugin-solid": "^2.11.10", + "typescript": "^5.7.2", + "vite": "^7.1.7" + } +} diff --git a/examples/solid/view-transitions/postcss.config.mjs b/examples/solid/view-transitions/postcss.config.mjs new file mode 100644 index 0000000000..a7f73a2d1d --- /dev/null +++ b/examples/solid/view-transitions/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +} diff --git a/examples/solid/view-transitions/src/main.tsx b/examples/solid/view-transitions/src/main.tsx new file mode 100644 index 0000000000..740315c011 --- /dev/null +++ b/examples/solid/view-transitions/src/main.tsx @@ -0,0 +1,53 @@ +import { render } from 'solid-js/web' +import { RouterProvider, createRouter } from '@tanstack/solid-router' +import { routeTree } from './routeTree.gen' +import './styles.css' + +// Set up a Router instance +const router = createRouter({ + routeTree, + defaultPreload: 'intent', + defaultStaleTime: 5000, + scrollRestoration: true, + /* + Using defaultViewTransition would prevent the need to + manually add `viewTransition: true` to every navigation. + + If defaultViewTransition.types is a function, it will be called with the + location change info and should return an array of view transition types. + This is useful if you want to have different view transitions depending on + the navigation's specifics. + + An example use case is sliding in a direction based on the index of the + previous and next routes when navigating via browser history back and forth. + */ + // defaultViewTransition: true + // OR + // defaultViewTransition: { + // types: ({ fromLocation, toLocation }) => { + // let direction = 'none' + + // if (fromLocation) { + // const fromIndex = fromLocation.state.__TSR_index + // const toIndex = toLocation.state.__TSR_index + + // direction = fromIndex > toIndex ? 'right' : 'left' + // } + + // return [`slide-${direction}`] + // }, + // }, +}) + +// Register things for typesafety +declare module '@tanstack/solid-router' { + interface Register { + router: typeof router + } +} + +const rootElement = document.getElementById('app')! + +if (!rootElement.innerHTML) { + render(() => , rootElement) +} diff --git a/examples/solid/view-transitions/src/posts.tsx b/examples/solid/view-transitions/src/posts.tsx new file mode 100644 index 0000000000..e306f15d18 --- /dev/null +++ b/examples/solid/view-transitions/src/posts.tsx @@ -0,0 +1,32 @@ +import { notFound } from '@tanstack/solid-router' +import axios from 'redaxios' + +export type PostType = { + id: string + title: string + body: string +} + +export const fetchPost = async (postId: string) => { + console.info(`Fetching post with id ${postId}...`) + await new Promise((r) => setTimeout(r, 0)) + const post = await axios + .get(`https://jsonplaceholder.typicode.com/posts/${postId}`) + .then((r) => r.data) + .catch((err) => { + if (err.status === 404) { + throw notFound() + } + throw err + }) + + return post +} + +export const fetchPosts = async () => { + console.info('Fetching posts...') + await new Promise((r) => setTimeout(r, 0)) + return axios + .get>('https://jsonplaceholder.typicode.com/posts') + .then((r) => r.data.slice(0, 10)) +} diff --git a/examples/solid/view-transitions/src/routeTree.gen.ts b/examples/solid/view-transitions/src/routeTree.gen.ts new file mode 100644 index 0000000000..114e34ed9d --- /dev/null +++ b/examples/solid/view-transitions/src/routeTree.gen.ts @@ -0,0 +1,171 @@ +/* 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 HowItWorksRouteImport } from './routes/how-it-works' +import { Route as ExploreRouteImport } from './routes/explore' +import { Route as PostsRouteRouteImport } from './routes/posts.route' +import { Route as IndexRouteImport } from './routes/index' +import { Route as PostsIndexRouteImport } from './routes/posts.index' +import { Route as PostsPostIdRouteImport } from './routes/posts.$postId' + +const HowItWorksRoute = HowItWorksRouteImport.update({ + id: '/how-it-works', + path: '/how-it-works', + getParentRoute: () => rootRouteImport, +} as any) +const ExploreRoute = ExploreRouteImport.update({ + id: '/explore', + path: '/explore', + getParentRoute: () => rootRouteImport, +} as any) +const PostsRouteRoute = PostsRouteRouteImport.update({ + id: '/posts', + path: '/posts', + getParentRoute: () => rootRouteImport, +} as any) +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any) +const PostsIndexRoute = PostsIndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => PostsRouteRoute, +} as any) +const PostsPostIdRoute = PostsPostIdRouteImport.update({ + id: '/$postId', + path: '/$postId', + getParentRoute: () => PostsRouteRoute, +} as any) + +export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/posts': typeof PostsRouteRouteWithChildren + '/explore': typeof ExploreRoute + '/how-it-works': typeof HowItWorksRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute + '/explore': typeof ExploreRoute + '/how-it-works': typeof HowItWorksRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts': typeof PostsIndexRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute + '/posts': typeof PostsRouteRouteWithChildren + '/explore': typeof ExploreRoute + '/how-it-works': typeof HowItWorksRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: + | '/' + | '/posts' + | '/explore' + | '/how-it-works' + | '/posts/$postId' + | '/posts/' + fileRoutesByTo: FileRoutesByTo + to: '/' | '/explore' | '/how-it-works' | '/posts/$postId' | '/posts' + id: + | '__root__' + | '/' + | '/posts' + | '/explore' + | '/how-it-works' + | '/posts/$postId' + | '/posts/' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + PostsRouteRoute: typeof PostsRouteRouteWithChildren + ExploreRoute: typeof ExploreRoute + HowItWorksRoute: typeof HowItWorksRoute +} + +declare module '@tanstack/solid-router' { + interface FileRoutesByPath { + '/how-it-works': { + id: '/how-it-works' + path: '/how-it-works' + fullPath: '/how-it-works' + preLoaderRoute: typeof HowItWorksRouteImport + parentRoute: typeof rootRouteImport + } + '/explore': { + id: '/explore' + path: '/explore' + fullPath: '/explore' + preLoaderRoute: typeof ExploreRouteImport + parentRoute: typeof rootRouteImport + } + '/posts': { + id: '/posts' + path: '/posts' + fullPath: '/posts' + preLoaderRoute: typeof PostsRouteRouteImport + parentRoute: typeof rootRouteImport + } + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } + '/posts/': { + id: '/posts/' + path: '/' + fullPath: '/posts/' + preLoaderRoute: typeof PostsIndexRouteImport + parentRoute: typeof PostsRouteRoute + } + '/posts/$postId': { + id: '/posts/$postId' + path: '/$postId' + fullPath: '/posts/$postId' + preLoaderRoute: typeof PostsPostIdRouteImport + parentRoute: typeof PostsRouteRoute + } + } +} + +interface PostsRouteRouteChildren { + PostsPostIdRoute: typeof PostsPostIdRoute + PostsIndexRoute: typeof PostsIndexRoute +} + +const PostsRouteRouteChildren: PostsRouteRouteChildren = { + PostsPostIdRoute: PostsPostIdRoute, + PostsIndexRoute: PostsIndexRoute, +} + +const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren( + PostsRouteRouteChildren, +) + +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, + PostsRouteRoute: PostsRouteRouteWithChildren, + ExploreRoute: ExploreRoute, + HowItWorksRoute: HowItWorksRoute, +} +export const routeTree = rootRouteImport + ._addFileChildren(rootRouteChildren) + ._addFileTypes() diff --git a/examples/solid/view-transitions/src/routes/__root.tsx b/examples/solid/view-transitions/src/routes/__root.tsx new file mode 100644 index 0000000000..2409a92311 --- /dev/null +++ b/examples/solid/view-transitions/src/routes/__root.tsx @@ -0,0 +1,52 @@ +import { + HeadContent, + Link, + Outlet, + createRootRoute, +} from '@tanstack/solid-router' +import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools' + +export const Route = createRootRoute({ + component: RootComponent, + notFoundComponent: () => { + return ( +
+

This is the notFoundComponent configured on root route

+ Start Over +
+ ) + }, +}) + +function RootComponent() { + return ( + <> + +
+ + Home + {' '} + + Posts + {' '} +
+
+ + {/* Start rendering router matches */} + + + ) +} diff --git a/examples/solid/view-transitions/src/routes/explore.tsx b/examples/solid/view-transitions/src/routes/explore.tsx new file mode 100644 index 0000000000..d0a4565619 --- /dev/null +++ b/examples/solid/view-transitions/src/routes/explore.tsx @@ -0,0 +1,30 @@ +import { Link, createFileRoute } from '@tanstack/solid-router' + +export const Route = createFileRoute('/explore')({ + component: RouteComponent, +}) + +function RouteComponent() { + return ( +
+

+ Explore the CSS to see how to use active-view-transition-type to create + new viewTransitions to use with Tanstack Router. +

+

+ Disclaimer: View Transition Types may not be supported in all browsers + and will fall back to the default browser transition if not available. +

+
+ + <- Previous Page + +
+
+ ) +} diff --git a/examples/solid/view-transitions/src/routes/how-it-works.tsx b/examples/solid/view-transitions/src/routes/how-it-works.tsx new file mode 100644 index 0000000000..ac217070ad --- /dev/null +++ b/examples/solid/view-transitions/src/routes/how-it-works.tsx @@ -0,0 +1,31 @@ +import { Link, createFileRoute } from '@tanstack/solid-router' + +export const Route = createFileRoute('/how-it-works')({ + component: RouteComponent, +}) + +function RouteComponent() { + return ( +
+

This example demonstrates a variety of custom page transitions.

+
+ + <- Previous Page + + + Next Page -> + +
+
+ ) +} diff --git a/examples/solid/view-transitions/src/routes/index.tsx b/examples/solid/view-transitions/src/routes/index.tsx new file mode 100644 index 0000000000..76a70bc5dd --- /dev/null +++ b/examples/solid/view-transitions/src/routes/index.tsx @@ -0,0 +1,23 @@ +import { Link, createFileRoute } from '@tanstack/solid-router' + +export const Route = createFileRoute('/')({ + component: Home, +}) + +function Home() { + return ( +
+

Welcome To The View Transitions Example!

+
+ + Next Page -> + +
+
+ ) +} diff --git a/examples/solid/view-transitions/src/routes/posts.$postId.tsx b/examples/solid/view-transitions/src/routes/posts.$postId.tsx new file mode 100644 index 0000000000..55f8871d03 --- /dev/null +++ b/examples/solid/view-transitions/src/routes/posts.$postId.tsx @@ -0,0 +1,27 @@ +import { ErrorComponent, createFileRoute } from '@tanstack/solid-router' +import { fetchPost } from '../posts' +import type { ErrorComponentProps } from '@tanstack/solid-router' + +export function PostErrorComponent({ error }: ErrorComponentProps) { + return +} + +export const Route = createFileRoute('/posts/$postId')({ + loader: async ({ params: { postId } }) => fetchPost(postId), + errorComponent: PostErrorComponent, + notFoundComponent: () => { + return

Post not found

+ }, + component: PostComponent, +}) + +function PostComponent() { + const post = Route.useLoaderData() + + return ( +
+

{post().title}

+
{post().body}
+
+ ) +} diff --git a/examples/solid/view-transitions/src/routes/posts.index.tsx b/examples/solid/view-transitions/src/routes/posts.index.tsx new file mode 100644 index 0000000000..33d0386c19 --- /dev/null +++ b/examples/solid/view-transitions/src/routes/posts.index.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/solid-router' + +export const Route = createFileRoute('/posts/')({ + component: PostsIndexComponent, +}) + +function PostsIndexComponent() { + return
Select a post.
+} diff --git a/examples/solid/view-transitions/src/routes/posts.route.tsx b/examples/solid/view-transitions/src/routes/posts.route.tsx new file mode 100644 index 0000000000..a54b99f36a --- /dev/null +++ b/examples/solid/view-transitions/src/routes/posts.route.tsx @@ -0,0 +1,42 @@ +import { Link, Outlet, createFileRoute } from '@tanstack/solid-router' +import { fetchPosts } from '../posts' + +export const Route = createFileRoute('/posts')({ + loader: fetchPosts, + component: PostsLayoutComponent, +}) + +function PostsLayoutComponent() { + const posts = Route.useLoaderData() + + return ( +
+
    + {[...posts(), { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( + (post) => { + return ( +
  • + +
    {post.title.substring(0, 20)}
    + +
    • + ) + }, + )} +
+
+
+ +
+
+ ) +} diff --git a/examples/solid/view-transitions/src/styles.css b/examples/solid/view-transitions/src/styles.css new file mode 100644 index 0000000000..818667133d --- /dev/null +++ b/examples/solid/view-transitions/src/styles.css @@ -0,0 +1,114 @@ +@import 'tailwindcss'; + +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} + +html { + color-scheme: light dark; +} +* { + @apply border-gray-200 dark:border-gray-800; +} +body { + @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200; +} + +/* Slide Left Transition */ +html:active-view-transition-type(slide-left) { + &::view-transition-old(main-content) { + animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left; + } + &::view-transition-new(main-content) { + animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-left; + } +} + +@keyframes slide-out-left { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} + +@keyframes slide-in-left { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} + +/* Slide Right Transition */ +html:active-view-transition-type(slide-right) { + &::view-transition-old(main-content) { + animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-right; + } + &::view-transition-new(main-content) { + animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right; + } +} + +@keyframes slide-out-right { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} + +@keyframes slide-in-right { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} + +/* Warp/Rotate Transition */ +html:active-view-transition-type(warp) { + &::view-transition-old(post) { + animation: 400ms ease-out both warp-out; + } + + &::view-transition-new(post) { + animation: 400ms ease-out both warp-in; + } +} + +@keyframes warp-out { + from { + opacity: 1; + filter: blur(0) brightness(1); + transform: scale(1) rotate(0deg); + } + to { + opacity: 0; + filter: blur(15px) brightness(1.8); + transform: scale(1.1) rotate(90deg); + } +} + +@keyframes warp-in { + from { + opacity: 0; + filter: blur(15px) brightness(1.8); + transform: scale(0.9) rotate(-45deg); + } + to { + opacity: 1; + filter: blur(0) brightness(1); + transform: scale(1) rotate(0deg); + } +} diff --git a/examples/solid/view-transitions/tsconfig.json b/examples/solid/view-transitions/tsconfig.json new file mode 100644 index 0000000000..6e3ba6f110 --- /dev/null +++ b/examples/solid/view-transitions/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "strict": true, + "esModuleInterop": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + "lib": ["DOM", "DOM.Iterable", "ES2022"], + "skipLibCheck": true + } +} diff --git a/examples/solid/view-transitions/vite.config.js b/examples/solid/view-transitions/vite.config.js new file mode 100644 index 0000000000..74e9ca3db3 --- /dev/null +++ b/examples/solid/view-transitions/vite.config.js @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' +import { tanstackRouter } from '@tanstack/router-plugin/vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + tanstackRouter({ + target: 'solid', + autoCodeSplitting: true, + }), + solid(), + ], +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f9f0052714..868c3a3cd0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7691,6 +7691,46 @@ importers: specifier: ^5.1.4 version: 5.1.4(typescript@5.9.2)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + examples/solid/view-transitions: + dependencies: + '@tailwindcss/postcss': + specifier: ^4.1.15 + version: 4.1.15 + '@tanstack/router-plugin': + specifier: workspace:* + version: link:../../../packages/router-plugin + '@tanstack/solid-router': + specifier: ^1.135.0 + version: link:../../../packages/solid-router + '@tanstack/solid-router-devtools': + specifier: workspace:^ + version: link:../../../packages/solid-router-devtools + postcss: + specifier: ^8.5.1 + version: 8.5.6 + redaxios: + specifier: ^0.5.1 + version: 0.5.1 + solid-js: + specifier: 1.9.10 + version: 1.9.10 + tailwindcss: + specifier: ^4.1.15 + version: 4.1.17 + zod: + specifier: ^3.24.2 + version: 3.25.57 + devDependencies: + typescript: + specifier: ^5.7.2 + version: 5.9.2 + vite: + specifier: ^7.1.7 + version: 7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1) + vite-plugin-solid: + specifier: ^2.11.10 + version: 2.11.10(@testing-library/jest-dom@6.6.3)(solid-js@1.9.10)(vite@7.1.7(@types/node@22.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)) + packages/arktype-adapter: devDependencies: '@tanstack/react-router':