Hi {auth.user}!
+You are currently on the dashboard route.
++ Invoice No. #{invoice.id.toString().padStart(2, '0')} +
++ Invoice title: {invoice.title} +
++ Invoice body: {invoice.body} +
+Select an invoice to view it!
,
+})
diff --git a/examples/preact/authenticated-routes/src/routes/_auth.invoices.tsx b/examples/preact/authenticated-routes/src/routes/_auth.invoices.tsx
new file mode 100644
index 00000000000..e46c564b21c
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/routes/_auth.invoices.tsx
@@ -0,0 +1,42 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/preact-router'
+
+import { fetchInvoices } from '../posts'
+
+export const Route = createFileRoute('/_auth/invoices')({
+ loader: async () => ({
+ invoices: await fetchInvoices(),
+ }),
+ component: InvoicesRoute,
+})
+
+function InvoicesRoute() {
+ const { invoices } = Route.useLoaderData()
+
+ return (
+
+
+ )
+}
diff --git a/examples/preact/authenticated-routes/src/routes/_auth.tsx b/examples/preact/authenticated-routes/src/routes/_auth.tsx
new file mode 100644
index 00000000000..324b5fab794
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/routes/_auth.tsx
@@ -0,0 +1,75 @@
+import {
+ Link,
+ Outlet,
+ createFileRoute,
+ redirect,
+ useRouter,
+} from '@tanstack/preact-router'
+
+import { useAuth } from '../auth'
+
+export const Route = createFileRoute('/_auth')({
+ beforeLoad: ({ context, location }) => {
+ if (!context.auth.isAuthenticated) {
+ throw redirect({
+ to: '/login',
+ search: {
+ redirect: location.href,
+ },
+ })
+ }
+ },
+ component: AuthLayout,
+})
+
+function AuthLayout() {
+ const router = useRouter()
+ const navigate = Route.useNavigate()
+ const auth = useAuth()
+
+ const handleLogout = () => {
+ if (window.confirm('Are you sure you want to logout?')) {
+ auth.logout().then(() => {
+ router.invalidate().finally(() => {
+ navigate({ to: '/' })
+ })
+ })
+ }
+ }
+
+ return (
+
+
+ Choose an invoice from the list below.
+-
+ {invoices.map((invoice) => (
+
- + + + #{invoice.id.toString().padStart(2, '0')} + {' '} + - {invoice.title.slice(0, 16)}... + + + ))} +
+
+
+
+
+ )
+}
diff --git a/examples/preact/authenticated-routes/src/routes/index.tsx b/examples/preact/authenticated-routes/src/routes/index.tsx
new file mode 100644
index 00000000000..bd4578caa23
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/routes/index.tsx
@@ -0,0 +1,46 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { Link } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/')({
+ component: HomeComponent,
+})
+
+function HomeComponent() {
+ return (
+ Authenticated Route
+This route's content is only visible to authenticated users.
+-
+
- + + Dashboard + + +
- + + Invoices + + +
- + + +
+
+
+ )
+}
diff --git a/examples/preact/authenticated-routes/src/routes/login.tsx b/examples/preact/authenticated-routes/src/routes/login.tsx
new file mode 100644
index 00000000000..0694775e4b8
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/routes/login.tsx
@@ -0,0 +1,94 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { useState } from 'preact/hooks'
+import { redirect, useRouter, useRouterState } from '@tanstack/preact-router'
+import { z } from 'zod'
+
+import { useAuth } from '../auth'
+import { sleep } from '../utils'
+
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+const fallback = '/dashboard' as const
+
+export const Route = createFileRoute('/login')({
+ validateSearch: z.object({
+ redirect: z.string().optional().catch(''),
+ }),
+ beforeLoad: ({ context, search }) => {
+ if (context.auth.isAuthenticated) {
+ throw redirect({ to: search.redirect || fallback })
+ }
+ },
+ component: LoginComponent,
+})
+
+function LoginComponent() {
+ const auth = useAuth()
+ const router = useRouter()
+ const isLoading = useRouterState({ select: (s) => s.isLoading })
+ const navigate = Route.useNavigate()
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ const search = Route.useSearch()
+
+ const onFormSubmit = async (evt: Event) => {
+ setIsSubmitting(true)
+ try {
+ evt.preventDefault()
+ const form = evt.target as HTMLFormElement
+ const data = new FormData(form)
+ const fieldValue = data.get('username')
+
+ if (!fieldValue) return
+ const username = fieldValue.toString()
+ await auth.login(username)
+
+ await router.invalidate()
+
+ // This is just a hack being used to wait for the auth state to update
+ // in a real app, you'd want to use a more robust solution
+ await sleep(1)
+
+ await navigate({ to: search.redirect || fallback })
+ } catch (error) {
+ console.error('Error logging in: ', error)
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ const isLoggingIn = isLoading || isSubmitting
+
+ return (
+ Welcome!
+
+ IMPORTANT!!! This is just an
+ example of how to use authenticated routes with TanStack Router.
+
+ This is NOT an example how you'd write a production-level authentication
+ system.
+
+ You'll need to take the concepts and patterns used in this example and
+ adapt then to work with your authentication flow/system for your app.
+
+ You are currently on the index route of the{' '} + authenticated-routes example. +
+You can try going through these options.
+-
+
- + + Go to the public login page. + + +
- + + Go to the auth-only dashboard page. + + +
- + + Go to the auth-only invoices page. + + +
+
+ )
+}
diff --git a/examples/preact/authenticated-routes/src/styles.css b/examples/preact/authenticated-routes/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/styles.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+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;
+}
diff --git a/examples/preact/authenticated-routes/src/utils.ts b/examples/preact/authenticated-routes/src/utils.ts
new file mode 100644
index 00000000000..4f3faad1343
--- /dev/null
+++ b/examples/preact/authenticated-routes/src/utils.ts
@@ -0,0 +1,3 @@
+export async function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms))
+}
diff --git a/examples/preact/authenticated-routes/tsconfig.json b/examples/preact/authenticated-routes/tsconfig.json
new file mode 100644
index 00000000000..3b34947304d
--- /dev/null
+++ b/examples/preact/authenticated-routes/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
+ }
+}
diff --git a/examples/preact/authenticated-routes/vite.config.js b/examples/preact/authenticated-routes/vite.config.js
new file mode 100644
index 00000000000..b239d60f4f7
--- /dev/null
+++ b/examples/preact/authenticated-routes/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ tanstackRouter({
+ target: 'preact',
+ autoCodeSplitting: true,
+ }),
+ preact(),
+ ],
+})
diff --git a/examples/preact/basic-file-based/index.html b/examples/preact/basic-file-based/index.html
new file mode 100644
index 00000000000..f9d481eb748
--- /dev/null
+++ b/examples/preact/basic-file-based/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Login page
+ {search.redirect ? ( +You need to login to access this page.
+ ) : ( +Login to see all the cool content in here.
+ )} + +
+
+ )
+ },
+})
+
+function RootComponent() {
+ return (
+ <>
+ This is the notFoundComponent configured on root route
+ Start Over +
+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Pathless Layout
+ {' '}
+
+ Anchor
+ {' '}
+
+ This Route Does Not Exist
+
+
+ +
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx
new file mode 100644
index 00000000000..b7110984deb
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout.tsx
@@ -0,0 +1,35 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { Link, Outlet } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+ I'm a pathless layout
+
+
+
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx
new file mode 100644
index 00000000000..957fa5f89bd
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-a.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/preact-router'
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')(
+ {
+ component: LayoutAComponent,
+ },
+)
+
+function LayoutAComponent() {
+ return I'm a nested pathless layout
+
+
+ Go to route A
+
+
+ Go to route B
+
+
+
+
+ I'm layout A!
+}
diff --git a/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx
new file mode 100644
index 00000000000..0adb241a1da
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/_pathlessLayout/_nested-layout/route-b.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/preact-router'
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')(
+ {
+ component: LayoutBComponent,
+ },
+)
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/examples/preact/basic-file-based/src/routes/anchor.tsx b/examples/preact/basic-file-based/src/routes/anchor.tsx
new file mode 100644
index 00000000000..1c7b9419e2f
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/anchor.tsx
@@ -0,0 +1,209 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { useLayoutEffect, useRef, useState } from 'preact/hooks'
+import { Link, useLocation, useNavigate } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/anchor')({
+ component: AnchorComponent,
+})
+
+const anchors: Array<{
+ id: string
+ title: string
+ hashScrollIntoView?: boolean | ScrollIntoViewOptions
+}> = [
+ {
+ id: 'default-anchor',
+ title: 'Default Anchor',
+ },
+ {
+ id: 'false-anchor',
+ title: 'No Scroll Into View',
+ hashScrollIntoView: false,
+ },
+ {
+ id: 'smooth-scroll',
+ title: 'Smooth Scroll',
+ hashScrollIntoView: { behavior: 'smooth' },
+ },
+] as const
+
+function AnchorSection({ id, title }: { id: string; title: string }) {
+ const [hasShown, setHasShown] = useState(false)
+ const elementRef = useRef
+
+ )
+}
+
+function AnchorComponent() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const [withScroll, setWithScroll] = useState(true)
+
+ return (
+ + {title} + {hasShown ? ' (shown)' : ''} +
+
+
+
+
+
+ {anchors.map((anchor) => (
+
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/routes/index.tsx b/examples/preact/basic-file-based/src/routes/index.tsx
new file mode 100644
index 00000000000..ebf57a66ddb
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/routes/posts.$postId.tsx b/examples/preact/basic-file-based/src/routes/posts.$postId.tsx
new file mode 100644
index 00000000000..22f006148c0
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/posts.$postId.tsx
@@ -0,0 +1,28 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { ErrorComponent } from '@tanstack/preact-router'
+import { fetchPost } from '../posts'
+import type { ErrorComponentProps } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+ loader: async ({ params: { postId } }) => fetchPost(postId),
+ errorComponent: PostErrorComponent,
+ notFoundComponent: () => {
+ return Welcome Home!
+Post not found
+ }, + component: PostComponent, +}) + +export function PostErrorComponent({ error }: ErrorComponentProps) { + return
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/routes/posts.index.tsx b/examples/preact/basic-file-based/src/routes/posts.index.tsx
new file mode 100644
index 00000000000..b9404656d90
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/posts.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/preact-router'
+
+export const Route = createFileRoute('/posts/')({
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return {post.title}
+{post.body}
+ Select a post.
+}
diff --git a/examples/preact/basic-file-based/src/routes/posts.route.tsx b/examples/preact/basic-file-based/src/routes/posts.route.tsx
new file mode 100644
index 00000000000..07fac1f75c5
--- /dev/null
+++ b/examples/preact/basic-file-based/src/routes/posts.route.tsx
@@ -0,0 +1,39 @@
+import { createFileRoute } from '@tanstack/preact-router'
+import { Link, Outlet } from '@tanstack/preact-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsLayoutComponent,
+})
+
+function PostsLayoutComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+
+
+ )
+}
diff --git a/examples/preact/basic-file-based/src/styles.css b/examples/preact/basic-file-based/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/examples/preact/basic-file-based/src/styles.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+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;
+}
diff --git a/examples/preact/basic-file-based/tailwind.config.mjs b/examples/preact/basic-file-based/tailwind.config.mjs
new file mode 100644
index 00000000000..7141e4528c6
--- /dev/null
+++ b/examples/preact/basic-file-based/tailwind.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/examples/preact/basic-file-based/tsconfig.json b/examples/preact/basic-file-based/tsconfig.json
new file mode 100644
index 00000000000..3b34947304d
--- /dev/null
+++ b/examples/preact/basic-file-based/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
+ }
+}
diff --git a/examples/preact/basic-file-based/vite.config.js b/examples/preact/basic-file-based/vite.config.js
new file mode 100644
index 00000000000..b239d60f4f7
--- /dev/null
+++ b/examples/preact/basic-file-based/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ tanstackRouter({
+ target: 'preact',
+ autoCodeSplitting: true,
+ }),
+ preact(),
+ ],
+})
diff --git a/examples/preact/basic-preact-query/index.html b/examples/preact/basic-preact-query/index.html
new file mode 100644
index 00000000000..63fbc3049ab
--- /dev/null
+++ b/examples/preact/basic-preact-query/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ -
+ {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+ (post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ },
+ )}
+
+
+
+ )
+ },
+})
+
+function RootComponent() {
+ return (
+ <>
+ This is the notFoundComponent configured on root route
+ Start Over +
+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Pathless Layout
+ {' '}
+
+ This Route Does Not Exist
+
+
+ +
+
+ )
+}
+
+const postsLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: ({ context: { queryClient } }) =>
+ queryClient.ensureQueryData(postsQueryOptions),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '/',
+ component: PostsIndexRouteComponent,
+})
+
+function PostsIndexRouteComponent() {
+ return Welcome Home!
+Select a post.
+}
+
+const postRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '$postId',
+ errorComponent: PostErrorComponent,
+ loader: ({ context: { queryClient }, params: { postId } }) =>
+ queryClient.ensureQueryData(postQueryOptions(postId)),
+ component: PostRouteComponent,
+})
+
+function PostErrorComponent({ error }: ErrorComponentProps) {
+ const router = useRouter()
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+ const queryErrorResetBoundary = useQueryErrorResetBoundary()
+
+ useEffect(() => {
+ queryErrorResetBoundary.reset()
+ }, [queryErrorResetBoundary])
+
+ return (
+
+
+
+ )
+}
+
+function PostRouteComponent() {
+ const { postId } = postRoute.useParams()
+ const postQuery = useSuspenseQuery(postQueryOptions(postId))
+ const post = postQuery.data
+
+ return (
+
+
+ )
+}
+
+const pathlessLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ id: '_pathlessLayout',
+ component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+ return (
+ {post.title}
+{post.body}
+
+
+ )
+}
+
+const nestedPathlessLayoutRoute = createRoute({
+ getParentRoute: () => pathlessLayoutRoute,
+ id: '_nestedPathlessLayout',
+ component: Layout2Component,
+})
+
+function Layout2Component() {
+ return (
+ I'm a pathless layout
+
+
+
+
+ )
+}
+
+const pathlessLayoutARoute = createRoute({
+ getParentRoute: () => nestedPathlessLayoutRoute,
+ path: '/route-a',
+ component: PathlessLayoutAComponent,
+})
+
+function PathlessLayoutAComponent() {
+ return I'm a nested pathless layout
+
+
+ Go to route A
+
+
+ Go to route B
+
+
+
+
+ I'm layout A!
+}
+
+const pathlessLayoutBRoute = createRoute({
+ getParentRoute: () => nestedPathlessLayoutRoute,
+ path: '/route-b',
+ component: PathlessLayoutBComponent,
+})
+
+function PathlessLayoutBComponent() {
+ return I'm layout B!
+}
+
+const routeTree = rootRoute.addChildren([
+ postsLayoutRoute.addChildren([postRoute, postsIndexRoute]),
+ pathlessLayoutRoute.addChildren([
+ nestedPathlessLayoutRoute.addChildren([
+ pathlessLayoutARoute,
+ pathlessLayoutBRoute,
+ ]),
+ ]),
+ indexRoute,
+])
+
+const queryClient = new QueryClient()
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ // Since we're using React Query, we don't want loader calls to ever be stale
+ // This will ensure that the loader is always called when the route is preloaded or visited
+ defaultPreloadStaleTime: 0,
+ scrollRestoration: true,
+ context: {
+ queryClient,
+ },
+})
+
+// Register things for typesafety
+declare module '@tanstack/preact-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(
+
+
+ )
+}
diff --git a/examples/preact/basic-preact-query/src/posts.ts b/examples/preact/basic-preact-query/src/posts.ts
new file mode 100644
index 00000000000..54e126683e3
--- /dev/null
+++ b/examples/preact/basic-preact-query/src/posts.ts
@@ -0,0 +1,44 @@
+import axios from 'redaxios'
+import { queryOptions } from '@tanstack/react-query'
+
+export class NotFoundError extends Error {}
+
+type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+const fetchPosts = async () => {
+ console.info('Fetching posts...')
+ await new Promise((r) => setTimeout(r, 500))
+ return axios
+ .get-
+ {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+ (post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ },
+ )}
+
+
+ )
+ },
+})
+
+function RootComponent() {
+ return (
+ <>
+ This is the notFoundComponent configured on root route
+ Start Over +
+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Pathless Layout
+ {' '}
+
+ This Route Does Not Exist
+
+
+
+
+ )
+}
+
+export const postsLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: () => fetchPosts(),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '/',
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return Welcome Home!
+Select a post.
+}
+
+const postRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '$postId',
+ errorComponent: PostErrorComponent,
+ loader: ({ params }) => fetchPost(params.postId),
+ component: PostComponent,
+})
+
+function PostErrorComponent({ error }: ErrorComponentProps) {
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+
+ return
+
+
+ )
+}
+
+const pathlessLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ id: '_pathlessLayout',
+ component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+ return (
+ {post.title}
++
{post.body}
+
+
+ )
+}
+
+const nestedPathlessLayout2Route = createRoute({
+ getParentRoute: () => pathlessLayoutRoute,
+ id: '_nestedPathlessLayout',
+ component: PathlessLayout2Component,
+})
+
+function PathlessLayout2Component() {
+ return (
+ I'm a pathless layout
+
+
+
+
+ )
+}
+
+const pathlessLayoutARoute = createRoute({
+ getParentRoute: () => nestedPathlessLayout2Route,
+ path: '/route-a',
+ component: PathlessLayoutAComponent,
+})
+
+function PathlessLayoutAComponent() {
+ return I'm a nested pathless layout
+
+
+ Go to Route A
+
+
+ Go to Route B
+
+
+
+
+ I'm route A!
+}
+
+const pathlessLayoutBRoute = createRoute({
+ getParentRoute: () => nestedPathlessLayout2Route,
+ path: '/route-b',
+ component: PathlessLayoutBComponent,
+})
+
+function PathlessLayoutBComponent() {
+ return I'm route B!
+}
+
+const routeTree = rootRoute.addChildren([
+ postsLayoutRoute.addChildren([postRoute, postsIndexRoute]),
+ pathlessLayoutRoute.addChildren([
+ nestedPathlessLayout2Route.addChildren([
+ pathlessLayoutARoute,
+ pathlessLayoutBRoute,
+ ]),
+ ]),
+ indexRoute,
+])
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/preact-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(
+
+ )
+}
diff --git a/examples/preact/basic/src/posts.ts b/examples/preact/basic/src/posts.ts
new file mode 100644
index 00000000000..54d62e57886
--- /dev/null
+++ b/examples/preact/basic/src/posts.ts
@@ -0,0 +1,32 @@
+import axios from 'redaxios'
+
+export class NotFoundError extends Error {}
+
+type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...')
+ await new Promise((r) => setTimeout(r, 500))
+ return axios
+ .get-
+ {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+ (post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ },
+ )}
+
+
+ )
+ },
+})
+
+function RootComponent() {
+ return (
+ <>
+
+ This is the notFoundComponent configured on root route
+ Start Over +
+
+ )
+}
+
+export const postsLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: () => fetchPosts(),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '/',
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return Welcome Home!
+Select a post.
+}
+
+const postRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '$postId',
+ errorComponent: PostErrorComponent,
+ loader: ({ params }) => fetchPost(params.postId),
+ component: PostComponent,
+})
+
+function PostErrorComponent({ error }: ErrorComponentProps) {
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+ return Error: {String(error)}
+}
+
+function PostComponent() {
+ const post = postRoute.useLoaderData()
+ return (
+
+
+
+ )
+}
+
+const routeTree = rootRoute.addChildren([
+ postsLayoutRoute.addChildren([postRoute, postsIndexRoute]),
+ indexRoute,
+])
+
+export function createRouterInstance() {
+ return createRouter({
+ routeTree,
+ context: {
+ head: '',
+ },
+ defaultPreload: 'intent',
+ scrollRestoration: true,
+ })
+}
+
+declare module '@tanstack/preact-router' {
+ interface Register {
+ router: ReturnType{post.title}
++
{post.body}
+
+
+ Home
+ {' '}
+
+ About
+
+
+ About (No Reset)
+
+
+ By-Element
+
+
+
+
+ )
+}
+
+const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ loader: () => new PromiseWelcome Home!
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ Home Item {i + 1}
+
+ ))}
+
+
+ )
+}
+
+const byElementRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/by-element',
+ loader: () => new PromiseHello from About!
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ About Item {i + 1}
+
+ ))}
+
+
+ )
+}
+
+const routeTree = rootRoute.addChildren([
+ indexRoute,
+ aboutRoute,
+ byElementRoute,
+])
+
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ scrollRestoration: true,
+})
+
+declare module '@tanstack/preact-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(Hello from By-Element!
+
+
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ About Item {i + 1}
+
+ ))}
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+ ))}
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+
+ About Item {i + 1}
+
+ ))}
+
+
+ Virtualized
+
+
+
+ {virtualizer.getVirtualItems().map((item) => (
+
+
+
+ ))}
+
+ Virtualized Item {item.index + 1}
+
+
+
+ `
+}
+
+const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: IndexComponent,
+})
+
+// Login component (public, but redirects if already authenticated)
+const LoginComponent = (router: ReturnTypeWelcome Home!
+This is a public page. Anyone can access it.
+ ${ + user + ? ` +You are logged in as ${user.username}.
+ Go to Dashboard + ` + : ` +You are not logged in.
+ Login + ` + } +
+
+ `
+}
+
+const loginRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/login',
+ beforeLoad: ({ context }) => {
+ // Redirect to dashboard if already authenticated
+ if (context.auth.isAuthenticated) {
+ throw redirect({ to: '/dashboard' })
+ }
+ },
+ component: LoginComponent,
+})
+
+// Dashboard component (protected)
+const DashboardComponent = (router: ReturnTypeLogin
+ + +
+ Demo credentials:
+ Username: admin
+ Password: password
+
+
+ `
+}
+
+const dashboardRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/dashboard',
+ beforeLoad: ({ context }) => {
+ // Redirect to login if not authenticated
+ if (!context.auth.isAuthenticated) {
+ throw redirect({ to: '/login' })
+ }
+ },
+ component: DashboardComponent,
+})
+
+// Create router
+const routeTree = rootRoute.addChildren([
+ indexRoute,
+ loginRoute,
+ dashboardRoute,
+])
+
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ context: {
+ auth: {
+ isAuthenticated: false,
+ user: null,
+ },
+ },
+})
+
+// Render function
+const rootElement = document.getElementById('app')
+if (!rootElement) throw new Error('App element not found')
+
+function render() {
+ if (!rootElement) return
+
+ // Update router context with current auth state
+ router.options.context = {
+ auth: {
+ isAuthenticated: isAuthenticated(),
+ user: getCurrentUser(),
+ },
+ }
+
+ const htmlParts = getMatchesHtml(router, router.state.matches)
+ rootElement.innerHTML = htmlParts.join('')
+
+ // Update active links
+ const currentPath = router.state.location.pathname
+ const links = rootElement.querySelectorAll('nav a')
+ links.forEach((link) => {
+ const href = link.getAttribute('href')
+ if (href === currentPath) {
+ link.classList.add('active')
+ } else {
+ link.classList.remove('active')
+ }
+ })
+
+ // Setup login form handler
+ const loginForm = rootElement.querySelector('#login-form') as HTMLFormElement
+ if (loginForm) {
+ loginForm.onsubmit = async (e) => {
+ e.preventDefault()
+ const formData = new FormData(loginForm)
+ const username = formData.get('username') as string
+ const password = formData.get('password') as string
+ const errorDiv = rootElement.querySelector(
+ '#login-error',
+ ) as HTMLDivElement
+
+ try {
+ await login(username, password)
+ errorDiv.style.display = 'none'
+ // Navigate to dashboard after successful login
+ await router.navigate({ to: '/dashboard' })
+ } catch (error) {
+ errorDiv.style.display = 'block'
+ errorDiv.className = 'error'
+ errorDiv.textContent =
+ error instanceof Error ? error.message : 'Login failed'
+ }
+ }
+ }
+}
+
+// Setup logout function
+;(window as any).logout = async () => {
+ logout()
+ await router.navigate({ to: '/' })
+}
+
+// Setup router
+vanillaRouter(router, render).catch(console.error)
diff --git a/examples/vanilla/authenticated-routes/tsconfig.json b/examples/vanilla/authenticated-routes/tsconfig.json
new file mode 100644
index 00000000000..1b0362ce9bf
--- /dev/null
+++ b/examples/vanilla/authenticated-routes/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/vanilla/authenticated-routes/vite.config.ts b/examples/vanilla/authenticated-routes/vite.config.ts
new file mode 100644
index 00000000000..9306ffab9eb
--- /dev/null
+++ b/examples/vanilla/authenticated-routes/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '@tanstack/vanilla-router': path.resolve(
+ __dirname,
+ '../../../packages/vanilla-router/src',
+ ),
+ },
+ },
+})
diff --git a/examples/vanilla/basic/index.html b/examples/vanilla/basic/index.html
new file mode 100644
index 00000000000..8bf7c2fc097
--- /dev/null
+++ b/examples/vanilla/basic/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Dashboard
+Welcome, ${user?.username}!
+This is a protected route. Only authenticated users can access it.
+If you try to access this page while logged out, you'll be redirected to the login page.
+ +
+
+ `
+ },
+})
+
+// Index component
+const IndexComponent = (router: ReturnTypeThis is the notFoundComponent configured on root route
+ Start Over +
+
+ `
+}
+
+const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: IndexComponent,
+})
+
+// Posts layout route with component
+export const postsLayoutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: () => fetchPosts(),
+ component: (router: ReturnTypeWelcome Home!
+Loading posts...
`
+ }
+
+ return `
+
+
+ `
+ },
+})
+
+// Posts index component
+const PostsIndexComponent = (router: ReturnType-
+ ${posts
+ .map(
+ (post) => `
+
- + ${post.title} + + `, + ) + .join('')} +
Select a post.
`
+}
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '/',
+ component: PostsIndexComponent,
+})
+
+// Post route
+const postRoute = createRoute({
+ getParentRoute: () => postsLayoutRoute,
+ path: '$postId',
+ errorComponent:
+ ({ error }) =>
+ (router: ReturnType${error.message}
`
+ }
+ return `Error: ${String(error)}
`
+ },
+ loader: ({ params }) => fetchPost(params.postId),
+ component: (router: ReturnTypeLoading...
`
+ }
+
+ return `
+
+
+
+ `
+ },
+})
+
+const routeTree = rootRoute.addChildren([
+ postsLayoutRoute.addChildren([postRoute, postsIndexRoute]),
+ indexRoute,
+])
+
+// Create router
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ scrollRestoration: true,
+})
+
+// Register router for type safety
+declare module '@tanstack/vanilla-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+// Initialize router
+const rootElement = document.getElementById('app')!
+
+// Render function - direct DOM manipulation
+function render() {
+ rootElement.innerHTML = ''
+
+ const state = router.state
+
+ // Use getMatchesHtml utility to get nested HTML strings (outlet replacement is handled internally)
+ const htmlParts = getMatchesHtml(router, state.matches)
+ rootElement.innerHTML = htmlParts.join('')
+}
+
+// Setup router with state subscription and link handlers
+await vanillaRouter(router, render)
diff --git a/examples/vanilla/basic/src/posts.ts b/examples/vanilla/basic/src/posts.ts
new file mode 100644
index 00000000000..13620952577
--- /dev/null
+++ b/examples/vanilla/basic/src/posts.ts
@@ -0,0 +1,31 @@
+import axios from 'redaxios'
+
+export class NotFoundError extends Error {}
+
+type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...')
+ await new Promise((r) => setTimeout(r, 500))
+ return axios
+ .get${post.title}
++
${post.body}
+ Error: ${error.message || String(error)}
`
+ }
+ }
+
+ destroy() {
+ this.cleanupFunctions.forEach((cleanup) => {
+ try {
+ cleanup()
+ } catch (error) {
+ console.error('Error during component cleanup:', error)
+ }
+ })
+ this.cleanupFunctions.clear()
+ this.componentInstances.clear()
+ this.childHtmlCache.clear()
+ this.currentContexts = []
+ }
+}
+
+function escapeHtml(text: string): string {
+ if (typeof document === 'undefined') {
+ return String(text)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+ }
+ const div = document.createElement('div')
+ div.textContent = String(text)
+ return div.innerHTML
+}
+
+function renderChild(child: any): string {
+ if (child === null || child === undefined || child === false) return ''
+ if (typeof child === 'string' && child.trim().startsWith('<')) {
+ return child
+ }
+ if (typeof child === 'string' || typeof child === 'number')
+ return escapeHtml(String(child))
+ if (Array.isArray(child)) return child.map(renderChild).join('')
+ if (
+ typeof child === 'object' &&
+ child.$$typeof === Symbol.for('react.element')
+ ) {
+ return jsx(child.type, child.props)
+ }
+ return String(child)
+}
+
+export function jsx(type: any, props: any, ...children: any[]): string {
+ const normalizedChildren = children.filter(
+ (child) => child !== undefined && child !== null,
+ )
+
+ if (type === Symbol.for('react.fragment') || type === null) {
+ return normalizedChildren.map((child) => renderChild(child)).join('')
+ }
+
+ if (typeof type === 'function') {
+ const componentResult = type(props || {})
+ if (typeof componentResult === 'function') {
+ return componentResult(
+ normalizedChildren.map((child) => renderChild(child)).join(''),
+ )
+ }
+ return renderChild(componentResult)
+ }
+
+ const tagName = String(type).toLowerCase()
+ const attrs = props
+ ? Object.entries(props)
+ .filter(([key]) => key !== 'children')
+ .map(([key, value]) => {
+ if (key === 'className') {
+ return `class="${escapeHtml(String(value))}"`
+ }
+ const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+ if (value === true) return attrName
+ if (value === false || value === null || value === undefined)
+ return ''
+ return `${attrName}="${escapeHtml(String(value))}"`
+ })
+ .filter(Boolean)
+ .join(' ')
+ : ''
+
+ const childrenHtml =
+ normalizedChildren.length > 0
+ ? normalizedChildren
+ .map((child) => {
+ if (child && typeof child === 'object' && child.__html) {
+ return child.__html
+ }
+ return renderChild(child)
+ })
+ .join('')
+ : ''
+
+ const selfClosingTags = [
+ 'input',
+ 'img',
+ 'br',
+ 'hr',
+ 'meta',
+ 'link',
+ 'area',
+ 'base',
+ 'col',
+ 'embed',
+ 'source',
+ 'track',
+ 'wbr',
+ ]
+ if (selfClosingTags.includes(tagName)) {
+ return `<${tagName}${attrs ? ' ' + attrs : ''} />`
+ }
+
+ return `<${tagName}${attrs ? ' ' + attrs : ''}>${childrenHtml}`
+}
+
+export function jsxs(type: any, props: any, ...children: any[]): string {
+ return jsx(type, props, ...children)
+}
+
+export function Fragment({ children = [] }: { children?: any[] }): string {
+ return (Array.isArray(children) ? children : [children])
+ .filter((child) => child !== undefined && child !== null)
+ .map((child) => renderChild(child))
+ .join('')
+}
diff --git a/examples/vanilla/jsx-router/tsconfig.json b/examples/vanilla/jsx-router/tsconfig.json
new file mode 100644
index 00000000000..de6b7eedefd
--- /dev/null
+++ b/examples/vanilla/jsx-router/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react",
+ "jsxFactory": "jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/vanilla/jsx-router/vite.config.ts b/examples/vanilla/jsx-router/vite.config.ts
new file mode 100644
index 00000000000..9306ffab9eb
--- /dev/null
+++ b/examples/vanilla/jsx-router/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '@tanstack/vanilla-router': path.resolve(
+ __dirname,
+ '../../../packages/vanilla-router/src',
+ ),
+ },
+ },
+})
diff --git a/examples/vanilla/scroll-restoration/index.html b/examples/vanilla/scroll-restoration/index.html
new file mode 100644
index 00000000000..cbafc9fda24
--- /dev/null
+++ b/examples/vanilla/scroll-restoration/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ Scroll Restoration Demo: Scroll down on this page, then navigate to another page and come back.
+ Your scroll position should be restored automatically!
+
+ Welcome Home!
+
+ ${Array.from(
+ { length: 50 },
+ (_, i) => `
+
+ `
+}
+
+const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ loader: () => new PromiseHome Item ${i + 1}
+ `,
+ ).join('')}
+
+ Scroll Restoration Demo: Scroll down on this page, navigate away, and come back.
+ Your scroll position should be restored!
+
+ About Page
+
+ ${Array.from(
+ { length: 50 },
+ (_, i) => `
+
+ `
+}
+
+const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ loader: () => new PromiseAbout Item ${i + 1}
+ `,
+ ).join('')}
+
+ Element-Level Scroll Restoration: Scroll within the container below, navigate away, and come back.
+ The scroll position within the container should be restored!
+
+ Scrollable Container Demo
+
+ ${Array.from(
+ { length: 50 },
+ (_, i) => `
+
+ `
+}
+
+const scrollableRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/scrollable',
+ loader: () => new PromiseScrollable Item ${i + 1}
+ `,
+ ).join('')}
+ 
+
+# TanStack React Router
+
+
+
+🤖 Type-safe router w/ built-in caching & URL state management for React!
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/tannerlinsley/react-query), [React Table](https://github.com/tanstack/react-table), [React Charts](https://github.com/tannerlinsley/react-charts), [React Virtual](https://github.com/tannerlinsley/react-virtual)
+
+## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
diff --git a/packages/preact-router/build-no-check.js b/packages/preact-router/build-no-check.js
new file mode 100644
index 00000000000..08e3c75359f
--- /dev/null
+++ b/packages/preact-router/build-no-check.js
@@ -0,0 +1,9 @@
+import { build } from 'vite'
+build({
+ mode: 'production',
+ build: { emptyOutDir: true },
+ logLevel: 'warn',
+}).catch((err) => {
+ console.error(err)
+ process.exit(1)
+})
diff --git a/packages/preact-router/eslint.config.ts b/packages/preact-router/eslint.config.ts
new file mode 100644
index 00000000000..a2f17156678
--- /dev/null
+++ b/packages/preact-router/eslint.config.ts
@@ -0,0 +1,24 @@
+import pluginReact from '@eslint-react/eslint-plugin'
+// @ts-expect-error
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+ ...rootConfig,
+ {
+ files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'],
+ },
+ {
+ plugins: {
+ 'react-hooks': pluginReactHooks,
+ '@eslint-react': pluginReact,
+ },
+ rules: {
+ '@eslint-react/no-unstable-context-value': 'off',
+ '@eslint-react/no-unstable-default-props': 'off',
+ '@eslint-react/dom/no-missing-button-type': 'off',
+ 'react-hooks/exhaustive-deps': 'error',
+ 'react-hooks/rules-of-hooks': 'error',
+ },
+ },
+]
diff --git a/packages/preact-router/package.json b/packages/preact-router/package.json
new file mode 100644
index 00000000000..f7399658098
--- /dev/null
+++ b/packages/preact-router/package.json
@@ -0,0 +1,117 @@
+{
+ "name": "@tanstack/preact-router",
+ "version": "1.133.13",
+ "description": "Modern and scalable routing for Preact applications",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/router.git",
+ "directory": "packages/preact-router"
+ },
+ "homepage": "https://tanstack.com/router",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "preact",
+ "location",
+ "router",
+ "routing",
+ "async",
+ "async router",
+ "typescript"
+ ],
+ "scripts": {
+ "clean": "rimraf ./dist && rimraf ./coverage",
+ "test:eslint": "eslint",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js -p tsconfig.legacy.json",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js -p tsconfig.legacy.json",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js -p tsconfig.legacy.json",
+ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js -p tsconfig.legacy.json",
+ "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js -p tsconfig.legacy.json",
+ "test:types:ts59": "tsc -p tsconfig.legacy.json",
+ "test:unit": "vitest",
+ "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests",
+ "test:perf": "vitest bench",
+ "test:perf:dev": "pnpm run test:perf --watch --hideSkippedTests",
+ "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+ "build": "pnpm run build:lib",
+ "build:lib": "vite build"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "main": "dist/cjs/index.cjs",
+ "module": "dist/esm/index.js",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./ssr/server": {
+ "import": {
+ "types": "./dist/esm/ssr/server.d.ts",
+ "default": "./dist/esm/ssr/server.js"
+ },
+ "require": {
+ "types": "./dist/cjs/ssr/server.d.cts",
+ "default": "./dist/cjs/ssr/server.cjs"
+ }
+ },
+ "./ssr/client": {
+ "import": {
+ "types": "./dist/esm/ssr/client.d.ts",
+ "default": "./dist/esm/ssr/client.js"
+ },
+ "require": {
+ "types": "./dist/cjs/ssr/client.d.cts",
+ "default": "./dist/cjs/ssr/client.cjs"
+ }
+ },
+ "./package.json": "./package.json",
+ "./llms": {
+ "import": {
+ "types": "./dist/llms/index.d.ts",
+ "default": "./dist/llms/index.js"
+ }
+ }
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "engines": {
+ "node": ">=12"
+ },
+ "dependencies": {
+ "@tanstack/history": "workspace:*",
+ "@tanstack/react-store": "^0.7.0",
+ "@tanstack/router-core": "workspace:*",
+ "@tanstack/store": "^0.7.0",
+ "isbot": "^5.1.22",
+ "preact-render-to-string": "^6.3.1",
+ "tiny-invariant": "^1.3.3",
+ "tiny-warning": "^1.0.3"
+ },
+ "devDependencies": {
+ "@preact/preset-vite": "^2.9.3",
+ "@testing-library/jest-dom": "^6.6.3",
+ "@testing-library/preact": "^3.2.4",
+ "combinate": "^1.1.11",
+ "preact": "^10.24.3",
+ "vibe-rules": "^0.2.57",
+ "zod": "^3.24.2"
+ },
+ "peerDependencies": {
+ "preact": ">=10.0.0"
+ }
+}
diff --git a/packages/preact-router/src/Asset.tsx b/packages/preact-router/src/Asset.tsx
new file mode 100644
index 00000000000..e4356c92f7a
--- /dev/null
+++ b/packages/preact-router/src/Asset.tsx
@@ -0,0 +1,155 @@
+import type { ComponentChildren } from 'preact'
+import { useEffect } from 'preact/hooks'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+interface ScriptAttrs {
+ [key: string]: string | boolean | undefined
+ src?: string
+}
+
+export function Asset({
+ tag,
+ attrs,
+ children,
+ nonce,
+}: RouterManagedTag & { nonce?: string }): any {
+ switch (tag) {
+ case 'title':
+ return
+
+ )
+}
diff --git a/packages/preact-router/src/ClientOnly.tsx b/packages/preact-router/src/ClientOnly.tsx
new file mode 100644
index 00000000000..8b1c78ec194
--- /dev/null
+++ b/packages/preact-router/src/ClientOnly.tsx
@@ -0,0 +1,66 @@
+import { Fragment } from 'preact'
+import { useSyncExternalStore } from 'preact/compat'
+import type { ComponentChildren } from 'preact'
+
+export interface ClientOnlyProps {
+ /**
+ * The children to render when the JS is loaded.
+ */
+ children: ComponentChildren
+ /**
+ * The fallback component to render if the JS is not yet loaded.
+ */
+ fallback?: ComponentChildren
+}
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *
+ Something went wrong!
+
+
+
+ {show ? (
+
+
+ ) : null}
+
+ {error.message ? {error.message} : null}
+
+