()
diff --git a/e2e/solid-router/basic-file-based/src/routes/(another-group)/onlyrouteinside.tsx b/e2e/solid-router/basic-file-based/src/routes/(another-group)/onlyrouteinside.tsx
new file mode 100644
index 00000000000..5dfc82fc334
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(another-group)/onlyrouteinside.tsx
@@ -0,0 +1,27 @@
+import { createFileRoute, getRouteApi, useSearch } from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const routeApi = getRouteApi('/(another-group)/onlyrouteinside')
+
+export const Route = createFileRoute('/(another-group)/onlyrouteinside')({
+ validateSearch: zodValidator(z.object({ hello: z.string().optional() })),
+ component: () => {
+ const searchViaHook = useSearch({
+ from: '/(another-group)/onlyrouteinside',
+ })
+ const searchViaRouteHook = Route.useSearch()
+ const searchViaRouteApi = routeApi.useSearch()
+ return (
+ <>
+ {searchViaHook().hello}
+
+ {searchViaRouteHook().hello}
+
+
+ {searchViaRouteApi().hello}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.insidelayout.tsx b/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.insidelayout.tsx
new file mode 100644
index 00000000000..dd06459a357
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.insidelayout.tsx
@@ -0,0 +1,25 @@
+import { createFileRoute, getRouteApi, useSearch } from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const routeApi = getRouteApi('/(group)/_layout/insidelayout')
+
+export const Route = createFileRoute('/(group)/_layout/insidelayout')({
+ validateSearch: zodValidator(z.object({ hello: z.string().optional() })),
+ component: () => {
+ const searchViaHook = useSearch({ from: '/(group)/_layout/insidelayout' })
+ const searchViaRouteHook = Route.useSearch()
+ const searchViaRouteApi = routeApi.useSearch()
+ return (
+ <>
+ {searchViaHook().hello}
+
+ {searchViaRouteHook().hello}
+
+
+ {searchViaRouteApi().hello}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.tsx b/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.tsx
new file mode 100644
index 00000000000..660cfb70e67
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(group)/_layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/(group)/_layout')({
+ component: () => (
+ <>
+ /(group)/_layout!
+ {searchViaHook().hello}
+
+ {searchViaRouteHook().hello}
+
+
+ {searchViaRouteApi().hello}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.lazy.tsx b/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.lazy.tsx
new file mode 100644
index 00000000000..a68febeaddf
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.lazy.tsx
@@ -0,0 +1,26 @@
+import {
+ createLazyFileRoute,
+ getRouteApi,
+ useSearch,
+} from '@tanstack/solid-router'
+
+const routeApi = getRouteApi('/(group)/lazyinside')
+
+export const Route = createLazyFileRoute('/(group)/lazyinside')({
+ component: () => {
+ const searchViaHook = useSearch({ from: '/(group)/lazyinside' })
+ const searchViaRouteHook = Route.useSearch()
+ const searchViaRouteApi = routeApi.useSearch()
+ return (
+ <>
+ {searchViaHook().hello}
+
+ {searchViaRouteHook().hello}
+
+
+ {searchViaRouteApi().hello}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.tsx b/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.tsx
new file mode 100644
index 00000000000..dcaf7b07270
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(group)/lazyinside.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+export const Route = createFileRoute('/(group)/lazyinside')({
+ validateSearch: zodValidator(z.object({ hello: z.string().optional() })),
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/(group)/subfolder/inside.tsx b/e2e/solid-router/basic-file-based/src/routes/(group)/subfolder/inside.tsx
new file mode 100644
index 00000000000..9e963d170c6
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/(group)/subfolder/inside.tsx
@@ -0,0 +1,25 @@
+import { createFileRoute, getRouteApi, useSearch } from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+
+const routeApi = getRouteApi('/(group)/subfolder/inside')
+
+export const Route = createFileRoute('/(group)/subfolder/inside')({
+ validateSearch: zodValidator(z.object({ hello: z.string().optional() })),
+ component: () => {
+ const searchViaHook = useSearch({ from: '/(group)/subfolder/inside' })
+ const searchViaRouteHook = Route.useSearch()
+ const searchViaRouteApi = routeApi.useSearch()
+ return (
+ <>
+ {searchViaHook().hello}
+
+ {searchViaRouteHook().hello}
+
+
+ {searchViaRouteApi().hello}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/__root.tsx b/e2e/solid-router/basic-file-based/src/routes/__root.tsx
new file mode 100644
index 00000000000..8dca5f31041
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/__root.tsx
@@ -0,0 +1,136 @@
+import {
+ Link,
+ Outlet,
+ createRootRoute,
+ useCanGoBack,
+ useRouter,
+} from '@tanstack/solid-router'
+// // import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+ router.history.back()}
+ class={!canGoBack() ? 'line-through' : undefined}
+ >
+ Back
+ {' '}
+
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx b/e2e/solid-router/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx
new file mode 100644
index 00000000000..30dbcce90fa
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/anchor.tsx b/e2e/solid-router/basic-file-based/src/routes/anchor.tsx
new file mode 100644
index 00000000000..77c0e5a6de4
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/anchor.tsx
@@ -0,0 +1,226 @@
+import {
+ Link,
+ createFileRoute,
+ useLocation,
+ useNavigate,
+} from '@tanstack/solid-router'
+import {
+ createEffect,
+ createRenderEffect,
+ createSignal,
+ onCleanup,
+} from 'solid-js'
+
+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] = createSignal(false)
+ let elementRef: HTMLHeadingElement | null = null
+
+ createEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (!hasShown() && entry.isIntersecting) {
+ setHasShown(true)
+ }
+ },
+ { threshold: 0.01 },
+ )
+
+ const currentRef = elementRef
+ if (currentRef) {
+ observer.observe(currentRef)
+ }
+
+ onCleanup(() => {
+ if (currentRef) {
+ observer.unobserve(currentRef)
+ }
+ })
+ })
+
+ return (
+
+
+ {`${title} ${hasShown() ? '(shown)' : ''}`}
+
+
+ )
+}
+
+function AnchorComponent() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const [withScroll, setWithScroll] = createSignal(true)
+
+ return (
+
+
+
+ {anchors.map((anchor) => (
+
+
+ ))}
+
+
+
+
+
+ {anchors.map((anchor) => (
+
+
+
Editing A
+
+ Enter your name:
+
+ {
+ navigate({ to: '/editing-b' })
+ }}
+ >
+ Go to next step
+
+ {blocker().status === 'blocked' && (
+ blocker().proceed?.()}>Proceed
+ )}
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/editing-b.tsx b/e2e/solid-router/basic-file-based/src/routes/editing-b.tsx
new file mode 100644
index 00000000000..3dc2d1655f3
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/editing-b.tsx
@@ -0,0 +1,41 @@
+import { createFileRoute, useBlocker } from '@tanstack/solid-router'
+import { createEffect, createSignal, createMemo } from 'solid-js'
+
+export const Route = createFileRoute('/editing-b')({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const navigate = Route.useNavigate()
+ const [input, setInput] = createSignal('')
+
+ const blocker = createMemo(() =>
+ useBlocker({
+ condition: input(),
+ }),
+ )
+
+ return (
+
+
Editing B
+
+ Enter your name:
+
+ {
+ navigate({ to: '/editing-a' })
+ }}
+ >
+ Go back
+
+ {blocker()().status === 'blocked' && (
+ blocker()().proceed?.()}>Proceed
+ )}
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/index.tsx b/e2e/solid-router/basic-file-based/src/routes/index.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/posts.$postId.tsx b/e2e/solid-router/basic-file-based/src/routes/posts.$postId.tsx
new file mode 100644
index 00000000000..a48895f3391
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/posts.$postId.tsx
@@ -0,0 +1,29 @@
+import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import { fetchPost } from '../posts'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+export function PostErrorComponent({ error }: ErrorComponentProps) {
+ return Post not found
+ },
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+
+
+ {post().title}
+
+
{post().body}
+
Select a post.
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/posts.tsx b/e2e/solid-router/basic-file-based/src/routes/posts.tsx
new file mode 100644
index 00000000000..fd42972ee9a
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/posts.tsx
@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/posts_.$postId.edit.tsx b/e2e/solid-router/basic-file-based/src/routes/posts_.$postId.edit.tsx
new file mode 100644
index 00000000000..f38f369b7a5
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/posts_.$postId.edit.tsx
@@ -0,0 +1,23 @@
+import { createFileRoute, getRouteApi, useParams } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts_/$postId/edit')({
+ component: PostEditPage,
+})
+
+const api = getRouteApi('/posts_/$postId/edit')
+
+function PostEditPage() {
+ const paramsViaApi = api.useParams()
+ const paramsViaHook = useParams({ from: '/posts_/$postId/edit' })
+ const paramsViaRouteHook = Route.useParams()
+
+ return (
+ <>
+ {paramsViaHook().postId}
+
+ {paramsViaRouteHook().postId}
+
+ {paramsViaApi().postId}
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/$target.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/$target.tsx
new file mode 100644
index 00000000000..525dd9da254
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/$target.tsx
@@ -0,0 +1,21 @@
+import { createFileRoute, retainSearchParams } from '@tanstack/solid-router'
+import z from 'zod'
+
+export const Route = createFileRoute('/redirect/$target')({
+ params: {
+ parse: (p) =>
+ z
+ .object({
+ target: z.union([z.literal('internal'), z.literal('external')]),
+ })
+ .parse(p),
+ },
+ validateSearch: z.object({
+ reloadDocument: z.boolean().optional(),
+ preload: z.literal(false).optional(),
+ externalHost: z.string().optional(),
+ }),
+ search: {
+ middlewares: [retainSearchParams(['externalHost'])],
+ },
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/$target/index.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/$target/index.tsx
new file mode 100644
index 00000000000..a44008e3c6b
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/$target/index.tsx
@@ -0,0 +1,65 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/$target/')({
+ component: () => {
+ const preload = Route.useSearch({ select: (s) => s.preload })
+ return (
+
+
+
+
+
+
+
+
+
+
{Route.fullPath}
,
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/$target/via-loader.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/$target/via-loader.tsx
new file mode 100644
index 00000000000..5c059717c5c
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/$target/via-loader.tsx
@@ -0,0 +1,18 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/$target/via-loader')({
+ loaderDeps: ({ search: { reloadDocument, externalHost } }) => ({
+ reloadDocument,
+ externalHost,
+ }),
+ loader: ({ params: { target }, deps: { externalHost, reloadDocument } }) => {
+ switch (target) {
+ case 'internal':
+ throw redirect({ to: '/posts', reloadDocument })
+ case 'external':
+ const href = externalHost ?? 'http://example.com'
+ throw redirect({ href })
+ }
+ },
+ component: () => {Route.fullPath}
,
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/index.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/index.tsx
new file mode 100644
index 00000000000..043f305e574
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/index.tsx
@@ -0,0 +1,28 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/')({
+ component: () => (
+
+
+ ),
+})
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/preload/first.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/first.tsx
new file mode 100644
index 00000000000..68752e5a238
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/first.tsx
@@ -0,0 +1,23 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/preload/first')({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ return (
+
+
+ )
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/preload/second.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/second.tsx
new file mode 100644
index 00000000000..0ecd74ef80c
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/second.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/preload/second')({
+ loader: async () => {
+ await new Promise((r) => setTimeout(r, 1000))
+ throw redirect({ from: Route.fullPath, to: '../third' })
+ },
+ component: RouteComponent,
+ pendingComponent: () => second pending
,
+})
+
+function RouteComponent() {
+ return Hello "/redirect/preload/second"!
+}
diff --git a/e2e/solid-router/basic-file-based/src/routes/redirect/preload/third.tsx b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/third.tsx
new file mode 100644
index 00000000000..e831276d29a
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/src/routes/redirect/preload/third.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/preload/third')({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ return Hello "/redirect/preload/third"!
+}
diff --git a/e2e/solid-router/basic-file-based/src/styles.css b/e2e/solid-router/basic-file-based/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/e2e/solid-router/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/e2e/solid-router/basic-file-based/tailwind.config.mjs b/e2e/solid-router/basic-file-based/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/e2e/solid-router/basic-file-based/tests/app.spec.ts b/e2e/solid-router/basic-file-based/tests/app.spec.ts
new file mode 100644
index 00000000000..fd2627c9378
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/tests/app.spec.ts
@@ -0,0 +1,255 @@
+import { expect, test } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/')
+})
+
+test('Navigating to a post page', async ({ page }) => {
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating nested layouts', async ({ page }) => {
+ await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+ await expect(page.locator('#app')).toContainText("I'm a layout")
+ await expect(page.locator('#app')).toContainText("I'm a nested layout")
+
+ await page.getByRole('link', { name: 'Layout A' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout A!")
+
+ await page.getByRole('link', { name: 'Layout B' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout B!")
+})
+
+test('Navigating to a not-found route', async ({ page }) => {
+ await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
+ await expect(page.getByRole('paragraph')).toContainText(
+ 'This is the notFoundComponent configured on root route',
+ )
+ await page.getByRole('link', { name: 'Start Over' }).click()
+ await expect(page.getByRole('heading')).toContainText('Welcome Home!')
+})
+
+test("useBlocker doesn't block navigation if condition is not met", async ({
+ page,
+}) => {
+ await page.goto('/editing-a')
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+
+ await page.getByRole('button', { name: 'Go to next step' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+})
+
+test('useBlocker does block navigation if condition is met', async ({
+ page,
+}) => {
+ await page.goto('/editing-a')
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+
+ await page.getByLabel('Enter your name:').fill('foo')
+
+ await page.getByRole('button', { name: 'Go to next step' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+
+ await expect(page.getByRole('button', { name: 'Proceed' })).toBeVisible()
+})
+
+test('Proceeding through blocked navigation works', async ({ page }) => {
+ await page.goto('/editing-a')
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+
+ await page.getByLabel('Enter your name:').fill('foo')
+
+ await page.getByRole('button', { name: 'Go to next step' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+
+ await page.getByRole('button', { name: 'Proceed' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+})
+
+test("legacy useBlocker doesn't block navigation if condition is not met", async ({
+ page,
+}) => {
+ await page.goto('/editing-b')
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+
+ await page.getByRole('button', { name: 'Go back' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+})
+
+test('legacy useBlocker does block navigation if condition is met', async ({
+ page,
+}) => {
+ await page.goto('/editing-b')
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+
+ await page.getByLabel('Enter your name:').fill('foo')
+
+ await page.getByRole('button', { name: 'Go back' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+
+ await expect(page.getByRole('button', { name: 'Proceed' })).toBeVisible()
+})
+
+test('legacy Proceeding through blocked navigation works', async ({ page }) => {
+ await page.goto('/editing-b')
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+
+ await page.getByLabel('Enter your name:').fill('foo')
+
+ await page.getByRole('button', { name: 'Go back' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing B')
+
+ await page.getByRole('button', { name: 'Proceed' }).click()
+ await expect(page.getByRole('heading')).toContainText('Editing A')
+})
+
+test('useCanGoBack correctly disables back button', async ({ page }) => {
+ const getBackButtonDisabled = async () => {
+ const backButton = page.getByTestId('back-button')
+ const isDisabled = (await backButton.getAttribute('disabled')) !== null
+ return isDisabled
+ }
+
+ expect(await getBackButtonDisabled()).toBe(true)
+
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await expect(page.getByTestId('posts-links')).toBeInViewport()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByTestId('post-title')).toBeInViewport()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.reload()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.goBack()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.goForward()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.goBack()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.goBack()
+ expect(await getBackButtonDisabled()).toBe(true)
+
+ await page.reload()
+ expect(await getBackButtonDisabled()).toBe(true)
+})
+
+test('useCanGoBack correctly disables back button, using router.history and window.history', async ({
+ page,
+}) => {
+ const getBackButtonDisabled = async () => {
+ const backButton = page.getByTestId('back-button')
+ const isDisabled = (await backButton.getAttribute('disabled')) !== null
+ return isDisabled
+ }
+
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await expect(page.getByTestId('posts-links')).toBeInViewport()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByTestId('post-title')).toBeInViewport()
+ await page.getByTestId('back-button').click()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.reload()
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.getByTestId('back-button').click()
+ expect(await getBackButtonDisabled()).toBe(true)
+
+ await page.evaluate('window.history.forward()')
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.evaluate('window.history.forward()')
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.evaluate('window.history.back()')
+ expect(await getBackButtonDisabled()).toBe(false)
+
+ await page.evaluate('window.history.back()')
+ expect(await getBackButtonDisabled()).toBe(true)
+
+ await page.reload()
+ expect(await getBackButtonDisabled()).toBe(true)
+})
+
+const testCases = [
+ {
+ description: 'Navigating to a route inside a route group',
+ testId: 'link-to-route-inside-group',
+ },
+ {
+ description:
+ 'Navigating to a route inside a subfolder inside a route group ',
+ testId: 'link-to-route-inside-group-inside-subfolder',
+ },
+ {
+ description: 'Navigating to a route inside a route group inside a layout',
+ testId: 'link-to-route-inside-group-inside-layout',
+ },
+ {
+ description: 'Navigating to a lazy route inside a route group',
+ testId: 'link-to-lazy-route-inside-group',
+ },
+
+ {
+ description: 'Navigating to the only route inside a route group ',
+ testId: 'link-to-only-route-inside-group',
+ },
+]
+
+testCases.forEach(({ description, testId }) => {
+ test(description, async ({ page }) => {
+ await page.getByTestId(testId).click()
+ await expect(page.getByTestId('search-via-hook')).toContainText('world')
+ await expect(page.getByTestId('search-via-route-hook')).toContainText(
+ 'world',
+ )
+ await expect(page.getByTestId('search-via-route-api')).toContainText(
+ 'world',
+ )
+ })
+})
+
+test('navigating to an unnested route', async ({ page }) => {
+ const postId = 'hello-world'
+ page.goto(`/posts/${postId}/edit`)
+ await expect(page.getByTestId('params-via-hook')).toContainText(postId)
+ await expect(page.getByTestId('params-via-route-hook')).toContainText(postId)
+ await expect(page.getByTestId('params-via-route-api')).toContainText(postId)
+})
+
+async function getRenderCount(page: Page) {
+ const renderCount = parseInt(
+ await page.getByTestId('render-count').innerText(),
+ )
+ return renderCount
+}
+async function structuralSharingTest(page: Page, enabled: boolean) {
+ page.goto(`/structural-sharing/${enabled}/?foo=f1&bar=b1`)
+ await expect(page.getByTestId('enabled')).toHaveText(JSON.stringify(enabled))
+
+ async function checkSearch({ foo, bar }: { foo: string; bar: string }) {
+ expect(page.url().endsWith(`?foo=${foo}&bar=${bar}`)).toBe(true)
+ const expectedSearch = JSON.stringify({ values: [foo, bar] })
+ await expect(page.getByTestId('search-via-hook')).toHaveText(expectedSearch)
+ await expect(page.getByTestId('search-via-route-hook')).toHaveText(
+ expectedSearch,
+ )
+ await expect(page.getByTestId('search-via-route-api-hook')).toHaveText(
+ expectedSearch,
+ )
+ }
+
+ await checkSearch({ bar: 'b1', foo: 'f1' })
+ await page.getByTestId('link').click()
+ await checkSearch({ bar: 'b2', foo: 'f2' })
+}
diff --git a/e2e/solid-router/basic-file-based/tests/redirect.spec.ts b/e2e/solid-router/basic-file-based/tests/redirect.spec.ts
new file mode 100644
index 00000000000..7026b047019
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/tests/redirect.spec.ts
@@ -0,0 +1,137 @@
+import { expect, test } from '@playwright/test'
+import combinateImport from 'combinate'
+import { derivePort, localDummyServer } from '@tanstack/router-e2e-utils'
+import packageJson from '../package.json' with { type: 'json' }
+import { Server } from 'node:http'
+import queryString from 'node:querystring'
+
+// somehow playwright does not correctly import default exports
+const combinate = (combinateImport as any).default as typeof combinateImport
+
+const PORT = derivePort(packageJson.name)
+const EXTERNAL_HOST_PORT = derivePort(`${packageJson.name}-external`)
+
+test.describe('redirects', () => {
+ let server: Server
+ test.beforeAll(async () => {
+ server = await localDummyServer(EXTERNAL_HOST_PORT)
+ })
+ test.afterAll(async () => {
+ server.close()
+ })
+
+ const internalNavigationTestMatrix = combinate({
+ thrower: ['beforeLoad', 'loader'] as const,
+ reloadDocument: [false, true] as const,
+ preload: [false, true] as const,
+ })
+
+ internalNavigationTestMatrix.forEach(
+ ({ thrower, reloadDocument, preload }) => {
+ test(`internal target, navigation: thrower: ${thrower}, reloadDocument: ${reloadDocument}, preload: ${preload}`, async ({
+ page,
+ }) => {
+ await page.waitForLoadState('networkidle')
+ await page.goto(
+ `/redirect/internal${preload === false ? '?preload=false' : ''}`,
+ )
+ const link = page.getByTestId(
+ `via-${thrower}${reloadDocument ? '-reloadDocument' : ''}`,
+ )
+
+ await page.waitForLoadState('networkidle')
+ let requestHappened = false
+
+ const requestPromise = new Promise((resolve) => {
+ page.on('request', (request) => {
+ if (
+ request.url() === 'https://jsonplaceholder.typicode.com/posts'
+ ) {
+ requestHappened = true
+ resolve()
+ }
+ })
+ })
+ await link.focus()
+
+ const expectRequestHappened = preload && !reloadDocument
+ const timeoutPromise = new Promise((resolve) =>
+ setTimeout(resolve, expectRequestHappened ? 5000 : 500),
+ )
+ await Promise.race([requestPromise, timeoutPromise])
+ expect(requestHappened).toBe(expectRequestHappened)
+ await link.click()
+ let fullPageLoad = false
+ page.on('domcontentloaded', () => {
+ fullPageLoad = true
+ })
+
+ const url = `http://localhost:${PORT}/posts`
+
+ await page.waitForURL(url)
+ expect(page.url()).toBe(url)
+ await expect(page.getByTestId('PostsIndexComponent')).toBeInViewport()
+ expect(fullPageLoad).toBe(reloadDocument)
+ })
+ },
+ )
+
+ const internalDirectVisitTestMatrix = combinate({
+ thrower: ['beforeLoad', 'loader'] as const,
+ reloadDocument: [false, true] as const,
+ })
+
+ internalDirectVisitTestMatrix.forEach(({ thrower, reloadDocument }) => {
+ test(`internal target, direct visit: thrower: ${thrower}, reloadDocument: ${reloadDocument}`, async ({
+ page,
+ }) => {
+ await page.waitForLoadState('networkidle')
+
+ await page.goto(`/redirect/internal/via-${thrower}`)
+
+ const url = `http://localhost:${PORT}/posts`
+
+ await page.waitForURL(url)
+ expect(page.url()).toBe(url)
+ await page.waitForLoadState('networkidle')
+ await expect(page.getByTestId('PostsIndexComponent')).toBeInViewport()
+ })
+ })
+
+ const externalTestMatrix = combinate({
+ scenario: ['navigate', 'direct_visit'] as const,
+ thrower: ['beforeLoad', 'loader'] as const,
+ })
+
+ externalTestMatrix.forEach(({ scenario, thrower }) => {
+ test(`external target: scenario: ${scenario}, thrower: ${thrower}`, async ({
+ page,
+ }) => {
+ await page.waitForLoadState('networkidle')
+
+ let q = queryString.stringify({
+ externalHost: `http://localhost:${EXTERNAL_HOST_PORT}/`,
+ })
+ if (scenario === 'navigate') {
+ await page.goto(`/redirect/external?${q}`)
+ await page.getByTestId(`via-${thrower}`).click()
+ } else {
+ await page.goto(`/redirect/external/via-${thrower}?${q}`)
+ }
+
+ const url = `http://localhost:${EXTERNAL_HOST_PORT}/`
+
+ await page.waitForURL(url)
+ expect(page.url()).toBe(url)
+ })
+ })
+
+ test('regression test for #3097', async ({ page }) => {
+ await page.goto(`/redirect/preload/first`)
+ const link = page.getByTestId(`link`)
+ await link.focus()
+ await link.click()
+ await page.waitForURL('/redirect/preload/third')
+ await expect(page.getByTestId(`third`)).toBeInViewport()
+ })
+})
diff --git a/e2e/solid-router/basic-file-based/tests/scroll-into-view.spec.ts b/e2e/solid-router/basic-file-based/tests/scroll-into-view.spec.ts
new file mode 100644
index 00000000000..d1af86adfb2
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/tests/scroll-into-view.spec.ts
@@ -0,0 +1,213 @@
+import { expect, test } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+const anchors = {
+ defaultAnchor: 'default-anchor',
+ noScrollIntoView: 'false-anchor',
+ smoothScroll: 'smooth-scroll',
+} as const
+
+const formTestIds = {
+ targetAnchor: 'hash-select',
+ scrollIntoView: 'with-scroll',
+ behaviorSelect: 'behavior-select',
+ blockSelect: 'block-select',
+ inlineSelect: 'inline-select',
+ navigateButton: 'navigate-button',
+}
+
+const shownSuffix = '(shown)'
+
+const activeClass = 'font-bold active'
+
+function getAnchorTarget(page: Page, anchor: string) {
+ return page.getByTestId(`heading-${anchor}`)
+}
+
+function getAnchorLink(page: Page, anchor: string) {
+ return page.getByTestId(`link-${anchor}`)
+}
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/anchor')
+})
+
+// Testing the `Link` component with the `hashScrollIntoView` prop
+test('Navigating via anchor `Link` with default hash scrolling behavior', async ({
+ page,
+}) => {
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(
+ shownSuffix,
+ )
+
+ await getAnchorLink(page, anchors.defaultAnchor).click()
+
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).toBeVisible()
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorLink(page, anchors.defaultAnchor)).toHaveClass(
+ activeClass,
+ )
+})
+
+test('Navigating via anchor `Link` with hash scrolling disabled', async ({
+ page,
+}) => {
+ const initialScrollPosition = await page.evaluate(() => window.scrollY)
+
+ await expect(
+ getAnchorTarget(page, anchors.noScrollIntoView),
+ ).not.toContainText(shownSuffix)
+
+ await getAnchorLink(page, anchors.noScrollIntoView).click()
+
+ // The active anchor should have updated
+ await expect(getAnchorLink(page, anchors.noScrollIntoView)).toHaveClass(
+ activeClass,
+ )
+
+ // The anchor should not have been visible, because the scroll should not have been activated
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(
+ shownSuffix,
+ )
+
+ // Expect the same scroll position as before
+ expect(await page.evaluate(() => window.scrollY)).toBe(initialScrollPosition)
+})
+
+test('Navigating via anchor `Link` with smooth hash scrolling behavior', async ({
+ page,
+}) => {
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(
+ shownSuffix,
+ )
+
+ await getAnchorLink(page, anchors.smoothScroll).click()
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).toBeVisible()
+
+ // Smooth scrolling should activate the IntersectionObserver on all headings, making them all render "(shown)"
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(
+ shownSuffix,
+ )
+ await expect(getAnchorTarget(page, anchors.noScrollIntoView)).toContainText(
+ shownSuffix,
+ )
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(
+ activeClass,
+ )
+})
+
+// Testing the `useNavigate` hook with the `hashScrollIntoView` option
+test('Navigating via `useNavigate` with instant scroll behavior', async ({
+ page,
+}) => {
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(
+ shownSuffix,
+ )
+
+ // Scroll to the last anchor instantly, should not activate Intersection Observers for the other anchors
+ await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')
+ await page.getByTestId(formTestIds.scrollIntoView).check()
+ await page.getByTestId(formTestIds.behaviorSelect).selectOption('instant')
+ await page.getByTestId(formTestIds.blockSelect).selectOption('start')
+ await page.getByTestId(formTestIds.inlineSelect).selectOption('nearest')
+ await page.getByTestId(formTestIds.navigateButton).click()
+
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(
+ shownSuffix,
+ )
+
+ await expect(
+ getAnchorTarget(page, anchors.noScrollIntoView),
+ ).not.toContainText(shownSuffix)
+
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorLink(page, anchors.smoothScroll)).toBeVisible()
+
+ await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(
+ activeClass,
+ )
+})
+
+test('Navigating via `useNavigate` with scrollIntoView disabled', async ({
+ page,
+}) => {
+ const initialScrollPosition = await page.evaluate(() => window.scrollY)
+
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(
+ shownSuffix,
+ )
+
+ await expect(
+ getAnchorTarget(page, anchors.noScrollIntoView),
+ ).not.toContainText(shownSuffix)
+
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(
+ shownSuffix,
+ )
+
+ // Navigate to the last anchor, but with scrollIntoView disabled should not activate Intersection Observers for any anchors
+ await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')
+ await page.getByTestId(formTestIds.scrollIntoView).uncheck()
+ await page.getByTestId(formTestIds.navigateButton).click()
+
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).not.toContainText(
+ shownSuffix,
+ )
+
+ await expect(
+ getAnchorTarget(page, anchors.noScrollIntoView),
+ ).not.toContainText(shownSuffix)
+
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(
+ activeClass,
+ )
+
+ // Expect the same scroll position as before
+ expect(await page.evaluate(() => window.scrollY)).toBe(initialScrollPosition)
+})
+
+test('Navigating via `useNavigate` with smooth scroll behavior', async ({
+ page,
+}) => {
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).not.toContainText(
+ shownSuffix,
+ )
+
+ // Scroll to the last anchor smoothly, should activate Intersection Observers for the other anchors, making them all render "(shown)"
+ await page.getByTestId(formTestIds.targetAnchor).selectOption('Smooth Scroll')
+ await page.getByTestId(formTestIds.scrollIntoView).check()
+ await page.getByTestId(formTestIds.behaviorSelect).selectOption('smooth')
+ await page.getByTestId(formTestIds.blockSelect).selectOption('start')
+ await page.getByTestId(formTestIds.inlineSelect).selectOption('nearest')
+ await page.getByTestId(formTestIds.navigateButton).click()
+
+ await expect(getAnchorTarget(page, anchors.defaultAnchor)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorTarget(page, anchors.noScrollIntoView)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorTarget(page, anchors.smoothScroll)).toContainText(
+ shownSuffix,
+ )
+
+ await expect(getAnchorLink(page, anchors.smoothScroll)).toHaveClass(
+ activeClass,
+ )
+})
diff --git a/e2e/solid-router/basic-file-based/tsconfig.json b/e2e/solid-router/basic-file-based/tsconfig.json
new file mode 100644
index 00000000000..98f80160757
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "allowJs": true
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/basic-file-based/vite.config.js b/e2e/solid-router/basic-file-based/vite.config.js
new file mode 100644
index 00000000000..0d2f08b695a
--- /dev/null
+++ b/e2e/solid-router/basic-file-based/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [TanStackRouterVite({ target: 'solid' }), solid()],
+})
diff --git a/e2e/solid-router/basic-scroll-restoration/.gitignore b/e2e/solid-router/basic-scroll-restoration/.gitignore
new file mode 100644
index 00000000000..8354e4d50d5
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
\ No newline at end of file
diff --git a/e2e/solid-router/basic-scroll-restoration/index.html b/e2e/solid-router/basic-scroll-restoration/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic-scroll-restoration/package.json b/e2e/solid-router/basic-scroll-restoration/package.json
new file mode 100644
index 00000000000..95387e1a701
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "tanstack-router-e2e-solid-basic-scroll-restoration",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/solid-virtual": "^3.13.0",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic-scroll-restoration/playwright.config.ts b/e2e/solid-router/basic-scroll-restoration/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic-scroll-restoration/postcss.config.mjs b/e2e/solid-router/basic-scroll-restoration/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic-scroll-restoration/src/main.tsx b/e2e/solid-router/basic-scroll-restoration/src/main.tsx
new file mode 100644
index 00000000000..f1a9dae0f9d
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/src/main.tsx
@@ -0,0 +1,229 @@
+import { render } from 'solid-js/web'
+import {
+ Link,
+ Outlet,
+ RouterProvider,
+ createRootRoute,
+ createRoute,
+ createRouter,
+ useElementScrollRestoration,
+} from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { createVirtualizer } from '@tanstack/solid-virtual'
+import './styles.css'
+import { createRenderEffect } from 'solid-js'
+
+const rootRoute = createRootRoute({
+ component: RootComponent,
+})
+
+function RootComponent() {
+ return (
+ <>
+
+
+
+
+ Welcome Home!
+
+
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+ Home Item {i + 1}
+
+ ))}
+
+
+
Hello from About!
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+ About Item {i + 1}
+
+ ))}
+
+
+
Hello from By-Element!
+
+
+
+ First Regular List Item
+
+
+ {Array.from({ length: 50 }).map((_, i) => (
+
+ Regular List 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}
+
+
+ ))}
+
+
+
+
+
+
+ }
+}
+window.invokeOrders = []
+router.subscribe('onBeforeRouteMount', (event) => {
+ window.invokeOrders.push(event.type)
+})
+
+router.subscribe('onResolved', (event) => {
+ window.invokeOrders.push(event.type)
+})
+
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(() => (
+ array: Array,
+ firstItem: TItem,
+ secondItem: TItem,
+) {
+ const firstIndex = array.findIndex((item) => item === firstItem)
+ const secondIndex = array.findIndex((item) => item === secondItem)
+
+ if (firstIndex === -1 || secondIndex === -1) {
+ throw new Error('One or both items were not found in the array ' + array)
+ }
+
+ expect(firstIndex).toBeLessThan(secondIndex)
+}
diff --git a/e2e/solid-router/basic-scroll-restoration/tsconfig.json b/e2e/solid-router/basic-scroll-restoration/tsconfig.json
new file mode 100644
index 00000000000..98f80160757
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "allowJs": true
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/basic-scroll-restoration/vite.config.js b/e2e/solid-router/basic-scroll-restoration/vite.config.js
new file mode 100644
index 00000000000..05041cc6d83
--- /dev/null
+++ b/e2e/solid-router/basic-scroll-restoration/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [solid()],
+})
diff --git a/e2e/solid-router/basic-solid-query-file-based/.gitignore b/e2e/solid-router/basic-solid-query-file-based/.gitignore
new file mode 100644
index 00000000000..a6ea47e5085
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/basic-solid-query-file-based/index.html b/e2e/solid-router/basic-solid-query-file-based/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic-solid-query-file-based/package.json b/e2e/solid-router/basic-solid-query-file-based/package.json
new file mode 100644
index 00000000000..93c299cecb6
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "tanstack-router-e2e-solid-basic-solid-query-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-query": "^5.66.0",
+ "@tanstack/solid-query-devtools": "^5.66.0",
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/router-plugin": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/playwright.config.ts b/e2e/solid-router/basic-solid-query-file-based/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic-solid-query-file-based/postcss.config.mjs b/e2e/solid-router/basic-solid-query-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/main.tsx b/e2e/solid-router/basic-solid-query-file-based/src/main.tsx
new file mode 100644
index 00000000000..7f1d2165f16
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/main.tsx
@@ -0,0 +1,40 @@
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { routeTree } from './routeTree.gen'
+import './styles.css'
+
+export const queryClient = new QueryClient()
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ context: {
+ queryClient,
+ },
+ scrollRestoration: true,
+ 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,
+})
+
+// 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/e2e/solid-router/basic-solid-query-file-based/src/postQueryOptions.tsx b/e2e/solid-router/basic-solid-query-file-based/src/postQueryOptions.tsx
new file mode 100644
index 00000000000..fe118d7bdea
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/postQueryOptions.tsx
@@ -0,0 +1,8 @@
+import { queryOptions } from '@tanstack/solid-query'
+import { fetchPost } from './posts'
+
+export const postQueryOptions = (postId: string) =>
+ queryOptions({
+ queryKey: ['posts', { postId }],
+ queryFn: () => fetchPost(postId),
+ })
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/posts.tsx b/e2e/solid-router/basic-solid-query-file-based/src/posts.tsx
new file mode 100644
index 00000000000..d551659b92e
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/posts.tsx
@@ -0,0 +1,33 @@
+import axios from 'redaxios'
+
+export type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+export class PostNotFoundError extends Error {}
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`)
+ await new Promise((r) => setTimeout(r, 500))
+ const post = await axios
+ .get(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then((r) => r.data)
+ .catch((err) => {
+ if (err.status === 404) {
+ throw new PostNotFoundError(`Post with id "${postId}" not found!`)
+ }
+ throw err
+ })
+
+ return post
+}
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...')
+ await new Promise((r) => setTimeout(r, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/postsQueryOptions.tsx b/e2e/solid-router/basic-solid-query-file-based/src/postsQueryOptions.tsx
new file mode 100644
index 00000000000..ce59b8a0bb4
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/postsQueryOptions.tsx
@@ -0,0 +1,7 @@
+import { queryOptions } from '@tanstack/solid-query'
+import { fetchPosts } from './posts'
+
+export const postsQueryOptions = queryOptions({
+ queryKey: ['posts'],
+ queryFn: () => fetchPosts(),
+})
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routeTree.gen.ts b/e2e/solid-router/basic-solid-query-file-based/src/routeTree.gen.ts
new file mode 100644
index 00000000000..586c996b9bf
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routeTree.gen.ts
@@ -0,0 +1,243 @@
+/* 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 Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as PostsImport } from './routes/posts'
+import { Route as LayoutImport } from './routes/_layout'
+import { Route as IndexImport } from './routes/index'
+import { Route as PostsIndexImport } from './routes/posts.index'
+import { Route as PostsPostIdImport } from './routes/posts.$postId'
+import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2'
+import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b'
+import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a'
+
+// Create/Update Routes
+
+const PostsRoute = PostsImport.update({
+ id: '/posts',
+ path: '/posts',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LayoutRoute = LayoutImport.update({
+ id: '/_layout',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const PostsIndexRoute = PostsIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => PostsRoute,
+} as any)
+
+const PostsPostIdRoute = PostsPostIdImport.update({
+ id: '/$postId',
+ path: '/$postId',
+ getParentRoute: () => PostsRoute,
+} as any)
+
+const LayoutLayout2Route = LayoutLayout2Import.update({
+ id: '/_layout-2',
+ getParentRoute: () => LayoutRoute,
+} as any)
+
+const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
+ id: '/layout-b',
+ path: '/layout-b',
+ getParentRoute: () => LayoutLayout2Route,
+} as any)
+
+const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
+ id: '/layout-a',
+ path: '/layout-a',
+ getParentRoute: () => LayoutLayout2Route,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/_layout': {
+ id: '/_layout'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof LayoutImport
+ parentRoute: typeof rootRoute
+ }
+ '/posts': {
+ id: '/posts'
+ path: '/posts'
+ fullPath: '/posts'
+ preLoaderRoute: typeof PostsImport
+ parentRoute: typeof rootRoute
+ }
+ '/_layout/_layout-2': {
+ id: '/_layout/_layout-2'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof LayoutLayout2Import
+ parentRoute: typeof LayoutImport
+ }
+ '/posts/$postId': {
+ id: '/posts/$postId'
+ path: '/$postId'
+ fullPath: '/posts/$postId'
+ preLoaderRoute: typeof PostsPostIdImport
+ parentRoute: typeof PostsImport
+ }
+ '/posts/': {
+ id: '/posts/'
+ path: '/'
+ fullPath: '/posts/'
+ preLoaderRoute: typeof PostsIndexImport
+ parentRoute: typeof PostsImport
+ }
+ '/_layout/_layout-2/layout-a': {
+ id: '/_layout/_layout-2/layout-a'
+ path: '/layout-a'
+ fullPath: '/layout-a'
+ preLoaderRoute: typeof LayoutLayout2LayoutAImport
+ parentRoute: typeof LayoutLayout2Import
+ }
+ '/_layout/_layout-2/layout-b': {
+ id: '/_layout/_layout-2/layout-b'
+ path: '/layout-b'
+ fullPath: '/layout-b'
+ preLoaderRoute: typeof LayoutLayout2LayoutBImport
+ parentRoute: typeof LayoutLayout2Import
+ }
+ }
+}
+
+// Create and export the route tree
+
+interface LayoutLayout2RouteChildren {
+ LayoutLayout2LayoutARoute: typeof LayoutLayout2LayoutARoute
+ LayoutLayout2LayoutBRoute: typeof LayoutLayout2LayoutBRoute
+}
+
+const LayoutLayout2RouteChildren: LayoutLayout2RouteChildren = {
+ LayoutLayout2LayoutARoute: LayoutLayout2LayoutARoute,
+ LayoutLayout2LayoutBRoute: LayoutLayout2LayoutBRoute,
+}
+
+const LayoutLayout2RouteWithChildren = LayoutLayout2Route._addFileChildren(
+ LayoutLayout2RouteChildren,
+)
+
+interface LayoutRouteChildren {
+ LayoutLayout2Route: typeof LayoutLayout2RouteWithChildren
+}
+
+const LayoutRouteChildren: LayoutRouteChildren = {
+ LayoutLayout2Route: LayoutLayout2RouteWithChildren,
+}
+
+const LayoutRouteWithChildren =
+ LayoutRoute._addFileChildren(LayoutRouteChildren)
+
+interface PostsRouteChildren {
+ PostsPostIdRoute: typeof PostsPostIdRoute
+ PostsIndexRoute: typeof PostsIndexRoute
+}
+
+const PostsRouteChildren: PostsRouteChildren = {
+ PostsPostIdRoute: PostsPostIdRoute,
+ PostsIndexRoute: PostsIndexRoute,
+}
+
+const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '': typeof LayoutLayout2RouteWithChildren
+ '/posts': typeof PostsRouteWithChildren
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/posts/': typeof PostsIndexRoute
+ '/layout-a': typeof LayoutLayout2LayoutARoute
+ '/layout-b': typeof LayoutLayout2LayoutBRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '': typeof LayoutLayout2RouteWithChildren
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/posts': typeof PostsIndexRoute
+ '/layout-a': typeof LayoutLayout2LayoutARoute
+ '/layout-b': typeof LayoutLayout2LayoutBRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/_layout': typeof LayoutRouteWithChildren
+ '/posts': typeof PostsRouteWithChildren
+ '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/posts/': typeof PostsIndexRoute
+ '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute
+ '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | ''
+ | '/posts'
+ | '/posts/$postId'
+ | '/posts/'
+ | '/layout-a'
+ | '/layout-b'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/' | '' | '/posts/$postId' | '/posts' | '/layout-a' | '/layout-b'
+ id:
+ | '__root__'
+ | '/'
+ | '/_layout'
+ | '/posts'
+ | '/_layout/_layout-2'
+ | '/posts/$postId'
+ | '/posts/'
+ | '/_layout/_layout-2/layout-a'
+ | '/_layout/_layout-2/layout-b'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ LayoutRoute: typeof LayoutRouteWithChildren
+ PostsRoute: typeof PostsRouteWithChildren
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ LayoutRoute: LayoutRouteWithChildren,
+ PostsRoute: PostsRouteWithChildren,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routes/__root.tsx b/e2e/solid-router/basic-solid-query-file-based/src/routes/__root.tsx
new file mode 100644
index 00000000000..f52862bfbf7
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routes/__root.tsx
@@ -0,0 +1,69 @@
+import {
+ Link,
+ Outlet,
+ createRootRouteWithContext,
+} from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export const Route = createRootRouteWithContext<{
+ queryClient: QueryClient
+}>()({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routes/_layout/_layout-2/layout-b.tsx b/e2e/solid-router/basic-solid-query-file-based/src/routes/_layout/_layout-2/layout-b.tsx
new file mode 100644
index 00000000000..30dbcce90fa
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routes/_layout/_layout-2/layout-b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routes/index.tsx b/e2e/solid-router/basic-solid-query-file-based/src/routes/index.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.$postId.tsx b/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.$postId.tsx
new file mode 100644
index 00000000000..ee729333659
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.$postId.tsx
@@ -0,0 +1,58 @@
+import {
+ ErrorComponent,
+ createFileRoute,
+ useRouter,
+} from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import { PostNotFoundError } from '../posts'
+import { postQueryOptions } from '../postQueryOptions'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+import { createEffect, createMemo } from 'solid-js'
+import { queryClient } from '../main'
+
+export function PostErrorComponent({ error, reset }: ErrorComponentProps) {
+ const router = useRouter()
+ if (error instanceof PostNotFoundError) {
+ return {error.message}
+ }
+
+ createEffect(() => {
+ reset()
+ queryClient.resetQueries()
+ })
+
+ return (
+
+ {
+ router.invalidate()
+ }}
+ >
+ retry
+
+
+ )
+}
+
+export const Route = createFileRoute('/posts/$postId')({
+ loader: ({ context: { queryClient }, params: { postId } }) => {
+ return queryClient.ensureQueryData(postQueryOptions(postId))
+ },
+ errorComponent: PostErrorComponent,
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const params = Route.useParams()
+ const post = createMemo(() =>
+ createQuery(() => postQueryOptions(params().postId)),
+ )
+
+ return (
+
+
{post()?.data?.title}
+
{post()?.data?.body}
+
Select a post.
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.tsx b/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.tsx
new file mode 100644
index 00000000000..8ab5195a348
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/src/routes/posts.tsx
@@ -0,0 +1,48 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import { postsQueryOptions } from '../postsQueryOptions'
+import { createMemo } from 'solid-js'
+
+export const Route = createFileRoute('/posts')({
+ loader: ({ context: { queryClient } }) =>
+ queryClient.ensureQueryData(postsQueryOptions),
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const postsQuery = createQuery(() => postsQueryOptions)
+ const posts = createMemo(() => {
+ if (postsQuery.data) {
+ return postsQuery.data
+ } else {
+ return []
+ }
+ })
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/src/styles.css b/e2e/solid-router/basic-solid-query-file-based/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-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/e2e/solid-router/basic-solid-query-file-based/tailwind.config.mjs b/e2e/solid-router/basic-solid-query-file-based/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/tests/app.spec.ts b/e2e/solid-router/basic-solid-query-file-based/tests/app.spec.ts
new file mode 100644
index 00000000000..3e5a69ccaae
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/tests/app.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/')
+})
+
+test('Navigating to a post page', async ({ page }) => {
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating nested layouts', async ({ page }) => {
+ await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+ await expect(page.locator('#app')).toContainText("I'm a layout")
+ await expect(page.locator('#app')).toContainText("I'm a nested layout")
+
+ await page.getByRole('link', { name: 'Layout A' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout A!")
+
+ await page.getByRole('link', { name: 'Layout B' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout B!")
+})
+
+test('Navigating to a not-found route', async ({ page }) => {
+ await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
+ await expect(page.getByRole('paragraph')).toContainText(
+ 'This is the notFoundComponent configured on root route',
+ )
+ await page.getByRole('link', { name: 'Start Over' }).click()
+ await expect(page.getByRole('heading')).toContainText('Welcome Home!')
+})
diff --git a/e2e/solid-router/basic-solid-query-file-based/tsconfig.json b/e2e/solid-router/basic-solid-query-file-based/tsconfig.json
new file mode 100644
index 00000000000..98f80160757
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "allowJs": true
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/basic-solid-query-file-based/vite.config.js b/e2e/solid-router/basic-solid-query-file-based/vite.config.js
new file mode 100644
index 00000000000..0d2f08b695a
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query-file-based/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [TanStackRouterVite({ target: 'solid' }), solid()],
+})
diff --git a/e2e/solid-router/basic-solid-query/.gitignore b/e2e/solid-router/basic-solid-query/.gitignore
new file mode 100644
index 00000000000..a6ea47e5085
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/basic-solid-query/index.html b/e2e/solid-router/basic-solid-query/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic-solid-query/package.json b/e2e/solid-router/basic-solid-query/package.json
new file mode 100644
index 00000000000..b98a7681fe0
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "tanstack-router-e2e-solid-solid-query",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-query": "^5.66.0",
+ "@tanstack/solid-query-devtools": "^5.66.0",
+ "@tanstack/solid-router": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic-solid-query/playwright.config.ts b/e2e/solid-router/basic-solid-query/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic-solid-query/postcss.config.mjs b/e2e/solid-router/basic-solid-query/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic-solid-query/src/main.tsx b/e2e/solid-router/basic-solid-query/src/main.tsx
new file mode 100644
index 00000000000..c7bbbabcdf0
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/src/main.tsx
@@ -0,0 +1,275 @@
+import { render } from 'solid-js/web'
+import {
+ ErrorComponent,
+ Link,
+ Outlet,
+ RouterProvider,
+ createRootRouteWithContext,
+ createRoute,
+ createRouter,
+ useRouter,
+} from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import {
+ QueryClient,
+ QueryClientProvider,
+ createQuery,
+} from '@tanstack/solid-query'
+import { NotFoundError, postQueryOptions, postsQueryOptions } from './posts'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+import './styles.css'
+import { createEffect, createMemo } from 'solid-js'
+
+const rootRoute = createRootRouteWithContext<{
+ queryClient: QueryClient
+}>()({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+
+
Welcome Home!
+
+ )
+}
+
+const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: ({ context: { queryClient } }) =>
+ queryClient.ensureQueryData(postsQueryOptions),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsRoute,
+ path: '/',
+ component: PostsIndexRouteComponent,
+})
+
+function PostsIndexRouteComponent() {
+ return Select a post.
+}
+
+function PostErrorComponent({ error, reset }: ErrorComponentProps) {
+ const router = useRouter()
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+ createEffect(() => {
+ reset()
+ queryClient.resetQueries()
+ })
+
+ return (
+
+ {
+ router.invalidate()
+ }}
+ >
+ retry
+
+
+ )
+}
+
+const postRoute = createRoute({
+ getParentRoute: () => postsRoute,
+ path: '$postId',
+ errorComponent: PostErrorComponent,
+ loader: ({ context: { queryClient }, params: { postId } }) =>
+ queryClient.ensureQueryData(postQueryOptions(postId)),
+ component: PostRouteComponent,
+})
+
+function PostRouteComponent() {
+ const params = postRoute.useParams()
+ const postQuery = createQuery(() => postQueryOptions(params().postId))
+ const post = createMemo(() => postQuery.data)
+
+ return (
+
+
{post()?.title}
+
{post()?.body}
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
+
+const layoutBRoute = createRoute({
+ getParentRoute: () => layout2Route,
+ path: '/layout-b',
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
+
+const routeTree = rootRoute.addChildren([
+ postsRoute.addChildren([postRoute, postsIndexRoute]),
+ layoutRoute.addChildren([
+ layout2Route.addChildren([layoutARoute, layoutBRoute]),
+ ]),
+ indexRoute,
+])
+
+const queryClient = new QueryClient()
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ scrollRestoration: true,
+ 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,
+ context: {
+ queryClient,
+ },
+})
+
+// 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/e2e/solid-router/basic-solid-query/src/posts.lazy.tsx b/e2e/solid-router/basic-solid-query/src/posts.lazy.tsx
new file mode 100644
index 00000000000..ce21b15cc69
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/src/posts.lazy.tsx
@@ -0,0 +1,49 @@
+import { Link, Outlet, createLazyRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import { postsQueryOptions } from './posts'
+import { createMemo, Suspense } from 'solid-js'
+
+export const Route = createLazyRoute('/posts')({
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const postsQuery = createQuery(() => postsQueryOptions)
+
+ const posts = createMemo(() => {
+ if (postsQuery.data) {
+ return postsQuery.data
+ } else {
+ return []
+ }
+ })
+
+ return (
+
+
+
+ {[
+ ...posts(),
+ { id: 'i-do-not-exist', title: 'Non-existent Post' },
+ ].map((post) => {
+ return (
+
+ {post.title.substring(0, 20)}
+
+
+ )
+ })}
+
+
+
+
>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
+
+const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`)
+ await new Promise((r) => setTimeout(r, 500))
+ const post = await axios
+ .get(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then((r) => r.data)
+
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (!post) {
+ throw new NotFoundError(`Post with id "${postId}" not found!`)
+ }
+
+ return post
+}
+
+export const postQueryOptions = (postId: string) =>
+ queryOptions({
+ queryKey: ['posts', { postId }],
+ queryFn: () => fetchPost(postId),
+ })
+
+export const postsQueryOptions = queryOptions({
+ queryKey: ['posts'],
+ queryFn: () => fetchPosts(),
+})
diff --git a/e2e/solid-router/basic-solid-query/src/styles.css b/e2e/solid-router/basic-solid-query/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/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/e2e/solid-router/basic-solid-query/tailwind.config.mjs b/e2e/solid-router/basic-solid-query/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/e2e/solid-router/basic-solid-query/tests/app.spec.ts b/e2e/solid-router/basic-solid-query/tests/app.spec.ts
new file mode 100644
index 00000000000..3e5a69ccaae
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/tests/app.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/')
+})
+
+test('Navigating to a post page', async ({ page }) => {
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating nested layouts', async ({ page }) => {
+ await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+ await expect(page.locator('#app')).toContainText("I'm a layout")
+ await expect(page.locator('#app')).toContainText("I'm a nested layout")
+
+ await page.getByRole('link', { name: 'Layout A' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout A!")
+
+ await page.getByRole('link', { name: 'Layout B' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout B!")
+})
+
+test('Navigating to a not-found route', async ({ page }) => {
+ await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
+ await expect(page.getByRole('paragraph')).toContainText(
+ 'This is the notFoundComponent configured on root route',
+ )
+ await page.getByRole('link', { name: 'Start Over' }).click()
+ await expect(page.getByRole('heading')).toContainText('Welcome Home!')
+})
diff --git a/e2e/solid-router/basic-solid-query/tsconfig.json b/e2e/solid-router/basic-solid-query/tsconfig.json
new file mode 100644
index 00000000000..98f80160757
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "allowJs": true
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/basic-solid-query/vite.config.js b/e2e/solid-router/basic-solid-query/vite.config.js
new file mode 100644
index 00000000000..05041cc6d83
--- /dev/null
+++ b/e2e/solid-router/basic-solid-query/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [solid()],
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/.gitignore b/e2e/solid-router/basic-virtual-file-based/.gitignore
new file mode 100644
index 00000000000..a6ea47e5085
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/basic-virtual-file-based/index.html b/e2e/solid-router/basic-virtual-file-based/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic-virtual-file-based/package.json b/e2e/solid-router/basic-virtual-file-based/package.json
new file mode 100644
index 00000000000..c97d54dbf14
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "tanstack-router-e2e-solid-basic-virtual-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/router-plugin": "workspace:^",
+ "@tanstack/virtual-file-routes": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/playwright.config.ts b/e2e/solid-router/basic-virtual-file-based/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/postcss.config.mjs b/e2e/solid-router/basic-virtual-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/routes.ts b/e2e/solid-router/basic-virtual-file-based/routes.ts
new file mode 100644
index 00000000000..6c2c144ec5a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/routes.ts
@@ -0,0 +1,22 @@
+import {
+ index,
+ layout,
+ physical,
+ rootRoute,
+ route,
+} from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+ index('home.tsx'),
+ route('/posts', 'posts/posts.tsx', [
+ index('posts/posts-home.tsx'),
+ route('$postId', 'posts/posts-detail.tsx'),
+ ]),
+ layout('first', 'layout/first-layout.tsx', [
+ layout('second', 'layout/second-layout.tsx', [
+ route('/layout-a', 'a.tsx'),
+ route('/layout-b', 'b.tsx'),
+ ]),
+ ]),
+ physical('/classic', 'file-based-subtree'),
+])
diff --git a/e2e/solid-router/basic-virtual-file-based/src/main.tsx b/e2e/solid-router/basic-virtual-file-based/src/main.tsx
new file mode 100644
index 00000000000..8128384193c
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/main.tsx
@@ -0,0 +1,25 @@
+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,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(() => (`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, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routeTree.gen.ts b/e2e/solid-router/basic-virtual-file-based/src/routeTree.gen.ts
new file mode 100644
index 00000000000..fc2a2b44e11
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routeTree.gen.ts
@@ -0,0 +1,345 @@
+/* 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 Routes
+
+import { Route as rootRoute } from './routes/root'
+import { Route as postsPostsImport } from './routes/posts/posts'
+import { Route as layoutFirstLayoutImport } from './routes/layout/first-layout'
+import { Route as homeImport } from './routes/home'
+import { Route as postsPostsDetailImport } from './routes/posts/posts-detail'
+import { Route as layoutSecondLayoutImport } from './routes/layout/second-layout'
+import { Route as postsPostsHomeImport } from './routes/posts/posts-home'
+import { Route as ClassicHelloRouteImport } from './routes/file-based-subtree/hello/route'
+import { Route as ClassicHelloIndexImport } from './routes/file-based-subtree/hello/index'
+import { Route as ClassicHelloWorldImport } from './routes/file-based-subtree/hello/world'
+import { Route as ClassicHelloUniverseImport } from './routes/file-based-subtree/hello/universe'
+import { Route as bImport } from './routes/b'
+import { Route as aImport } from './routes/a'
+
+// Create/Update Routes
+
+const postsPostsRoute = postsPostsImport.update({
+ id: '/posts',
+ path: '/posts',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const layoutFirstLayoutRoute = layoutFirstLayoutImport.update({
+ id: '/_first',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const homeRoute = homeImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const postsPostsDetailRoute = postsPostsDetailImport.update({
+ id: '/$postId',
+ path: '/$postId',
+ getParentRoute: () => postsPostsRoute,
+} as any)
+
+const layoutSecondLayoutRoute = layoutSecondLayoutImport.update({
+ id: '/_second',
+ getParentRoute: () => layoutFirstLayoutRoute,
+} as any)
+
+const postsPostsHomeRoute = postsPostsHomeImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => postsPostsRoute,
+} as any)
+
+const ClassicHelloRouteRoute = ClassicHelloRouteImport.update({
+ id: '/classic/hello',
+ path: '/classic/hello',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ClassicHelloIndexRoute = ClassicHelloIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => ClassicHelloRouteRoute,
+} as any)
+
+const ClassicHelloWorldRoute = ClassicHelloWorldImport.update({
+ id: '/world',
+ path: '/world',
+ getParentRoute: () => ClassicHelloRouteRoute,
+} as any)
+
+const ClassicHelloUniverseRoute = ClassicHelloUniverseImport.update({
+ id: '/universe',
+ path: '/universe',
+ getParentRoute: () => ClassicHelloRouteRoute,
+} as any)
+
+const bRoute = bImport.update({
+ id: '/layout-b',
+ path: '/layout-b',
+ getParentRoute: () => layoutSecondLayoutRoute,
+} as any)
+
+const aRoute = aImport.update({
+ id: '/layout-a',
+ path: '/layout-a',
+ getParentRoute: () => layoutSecondLayoutRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof homeImport
+ parentRoute: typeof rootRoute
+ }
+ '/_first': {
+ id: '/_first'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof layoutFirstLayoutImport
+ parentRoute: typeof rootRoute
+ }
+ '/posts': {
+ id: '/posts'
+ path: '/posts'
+ fullPath: '/posts'
+ preLoaderRoute: typeof postsPostsImport
+ parentRoute: typeof rootRoute
+ }
+ '/classic/hello': {
+ id: '/classic/hello'
+ path: '/classic/hello'
+ fullPath: '/classic/hello'
+ preLoaderRoute: typeof ClassicHelloRouteImport
+ parentRoute: typeof rootRoute
+ }
+ '/posts/': {
+ id: '/posts/'
+ path: '/'
+ fullPath: '/posts/'
+ preLoaderRoute: typeof postsPostsHomeImport
+ parentRoute: typeof postsPostsImport
+ }
+ '/_first/_second': {
+ id: '/_first/_second'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof layoutSecondLayoutImport
+ parentRoute: typeof layoutFirstLayoutImport
+ }
+ '/posts/$postId': {
+ id: '/posts/$postId'
+ path: '/$postId'
+ fullPath: '/posts/$postId'
+ preLoaderRoute: typeof postsPostsDetailImport
+ parentRoute: typeof postsPostsImport
+ }
+ '/_first/_second/layout-a': {
+ id: '/_first/_second/layout-a'
+ path: '/layout-a'
+ fullPath: '/layout-a'
+ preLoaderRoute: typeof aImport
+ parentRoute: typeof layoutSecondLayoutImport
+ }
+ '/_first/_second/layout-b': {
+ id: '/_first/_second/layout-b'
+ path: '/layout-b'
+ fullPath: '/layout-b'
+ preLoaderRoute: typeof bImport
+ parentRoute: typeof layoutSecondLayoutImport
+ }
+ '/classic/hello/universe': {
+ id: '/classic/hello/universe'
+ path: '/universe'
+ fullPath: '/classic/hello/universe'
+ preLoaderRoute: typeof ClassicHelloUniverseImport
+ parentRoute: typeof ClassicHelloRouteImport
+ }
+ '/classic/hello/world': {
+ id: '/classic/hello/world'
+ path: '/world'
+ fullPath: '/classic/hello/world'
+ preLoaderRoute: typeof ClassicHelloWorldImport
+ parentRoute: typeof ClassicHelloRouteImport
+ }
+ '/classic/hello/': {
+ id: '/classic/hello/'
+ path: '/'
+ fullPath: '/classic/hello/'
+ preLoaderRoute: typeof ClassicHelloIndexImport
+ parentRoute: typeof ClassicHelloRouteImport
+ }
+ }
+}
+
+// Create and export the route tree
+
+interface layoutSecondLayoutRouteChildren {
+ aRoute: typeof aRoute
+ bRoute: typeof bRoute
+}
+
+const layoutSecondLayoutRouteChildren: layoutSecondLayoutRouteChildren = {
+ aRoute: aRoute,
+ bRoute: bRoute,
+}
+
+const layoutSecondLayoutRouteWithChildren =
+ layoutSecondLayoutRoute._addFileChildren(layoutSecondLayoutRouteChildren)
+
+interface layoutFirstLayoutRouteChildren {
+ layoutSecondLayoutRoute: typeof layoutSecondLayoutRouteWithChildren
+}
+
+const layoutFirstLayoutRouteChildren: layoutFirstLayoutRouteChildren = {
+ layoutSecondLayoutRoute: layoutSecondLayoutRouteWithChildren,
+}
+
+const layoutFirstLayoutRouteWithChildren =
+ layoutFirstLayoutRoute._addFileChildren(layoutFirstLayoutRouteChildren)
+
+interface postsPostsRouteChildren {
+ postsPostsHomeRoute: typeof postsPostsHomeRoute
+ postsPostsDetailRoute: typeof postsPostsDetailRoute
+}
+
+const postsPostsRouteChildren: postsPostsRouteChildren = {
+ postsPostsHomeRoute: postsPostsHomeRoute,
+ postsPostsDetailRoute: postsPostsDetailRoute,
+}
+
+const postsPostsRouteWithChildren = postsPostsRoute._addFileChildren(
+ postsPostsRouteChildren,
+)
+
+interface ClassicHelloRouteRouteChildren {
+ ClassicHelloUniverseRoute: typeof ClassicHelloUniverseRoute
+ ClassicHelloWorldRoute: typeof ClassicHelloWorldRoute
+ ClassicHelloIndexRoute: typeof ClassicHelloIndexRoute
+}
+
+const ClassicHelloRouteRouteChildren: ClassicHelloRouteRouteChildren = {
+ ClassicHelloUniverseRoute: ClassicHelloUniverseRoute,
+ ClassicHelloWorldRoute: ClassicHelloWorldRoute,
+ ClassicHelloIndexRoute: ClassicHelloIndexRoute,
+}
+
+const ClassicHelloRouteRouteWithChildren =
+ ClassicHelloRouteRoute._addFileChildren(ClassicHelloRouteRouteChildren)
+
+export interface FileRoutesByFullPath {
+ '/': typeof homeRoute
+ '': typeof layoutSecondLayoutRouteWithChildren
+ '/posts': typeof postsPostsRouteWithChildren
+ '/classic/hello': typeof ClassicHelloRouteRouteWithChildren
+ '/posts/': typeof postsPostsHomeRoute
+ '/posts/$postId': typeof postsPostsDetailRoute
+ '/layout-a': typeof aRoute
+ '/layout-b': typeof bRoute
+ '/classic/hello/universe': typeof ClassicHelloUniverseRoute
+ '/classic/hello/world': typeof ClassicHelloWorldRoute
+ '/classic/hello/': typeof ClassicHelloIndexRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof homeRoute
+ '': typeof layoutSecondLayoutRouteWithChildren
+ '/posts': typeof postsPostsHomeRoute
+ '/posts/$postId': typeof postsPostsDetailRoute
+ '/layout-a': typeof aRoute
+ '/layout-b': typeof bRoute
+ '/classic/hello/universe': typeof ClassicHelloUniverseRoute
+ '/classic/hello/world': typeof ClassicHelloWorldRoute
+ '/classic/hello': typeof ClassicHelloIndexRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof homeRoute
+ '/_first': typeof layoutFirstLayoutRouteWithChildren
+ '/posts': typeof postsPostsRouteWithChildren
+ '/classic/hello': typeof ClassicHelloRouteRouteWithChildren
+ '/posts/': typeof postsPostsHomeRoute
+ '/_first/_second': typeof layoutSecondLayoutRouteWithChildren
+ '/posts/$postId': typeof postsPostsDetailRoute
+ '/_first/_second/layout-a': typeof aRoute
+ '/_first/_second/layout-b': typeof bRoute
+ '/classic/hello/universe': typeof ClassicHelloUniverseRoute
+ '/classic/hello/world': typeof ClassicHelloWorldRoute
+ '/classic/hello/': typeof ClassicHelloIndexRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | ''
+ | '/posts'
+ | '/classic/hello'
+ | '/posts/'
+ | '/posts/$postId'
+ | '/layout-a'
+ | '/layout-b'
+ | '/classic/hello/universe'
+ | '/classic/hello/world'
+ | '/classic/hello/'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/'
+ | ''
+ | '/posts'
+ | '/posts/$postId'
+ | '/layout-a'
+ | '/layout-b'
+ | '/classic/hello/universe'
+ | '/classic/hello/world'
+ | '/classic/hello'
+ id:
+ | '__root__'
+ | '/'
+ | '/_first'
+ | '/posts'
+ | '/classic/hello'
+ | '/posts/'
+ | '/_first/_second'
+ | '/posts/$postId'
+ | '/_first/_second/layout-a'
+ | '/_first/_second/layout-b'
+ | '/classic/hello/universe'
+ | '/classic/hello/world'
+ | '/classic/hello/'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ homeRoute: typeof homeRoute
+ layoutFirstLayoutRoute: typeof layoutFirstLayoutRouteWithChildren
+ postsPostsRoute: typeof postsPostsRouteWithChildren
+ ClassicHelloRouteRoute: typeof ClassicHelloRouteRouteWithChildren
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ homeRoute: homeRoute,
+ layoutFirstLayoutRoute: layoutFirstLayoutRouteWithChildren,
+ postsPostsRoute: postsPostsRouteWithChildren,
+ ClassicHelloRouteRoute: ClassicHelloRouteRouteWithChildren,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/a.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/a.tsx
new file mode 100644
index 00000000000..055cba1e6f6
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-a')({
+ component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+ return I'm layout A!
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/b.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/b.tsx
new file mode 100644
index 00000000000..c5bb8051af9
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx
new file mode 100644
index 00000000000..f7ff5379165
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/')({
+ component: () => This is the index
,
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/route.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/route.tsx
new file mode 100644
index 00000000000..f4f30d84256
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/route.tsx
@@ -0,0 +1,27 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello')({
+ component: () => (
+
+ Hello!
+
+ ),
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/universe.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/universe.tsx
new file mode 100644
index 00000000000..2a6bf16c377
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/universe.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/universe')({
+ component: () => Hello /classic/hello/universe!
,
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/world.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/world.tsx
new file mode 100644
index 00000000000..03edc7f484a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/world.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/world')({
+ component: () => Hello /classic/hello/world!
,
+})
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/home.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/home.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/home.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/layout/first-layout.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/layout/first-layout.tsx
new file mode 100644
index 00000000000..5c77421bb29
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/layout/first-layout.tsx
@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/layout/second-layout.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/layout/second-layout.tsx
new file mode 100644
index 00000000000..9ab147de5e9
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/layout/second-layout.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+
I'm a nested layout
+
+
+
+
+
Post not found
+ },
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+
+
{post().title}
+
{post().body}
+
Select a post.
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/posts/posts.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/posts/posts.tsx
new file mode 100644
index 00000000000..9ae6dfc747d
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/posts/posts.tsx
@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-file-based/src/routes/root.tsx b/e2e/solid-router/basic-virtual-file-based/src/routes/root.tsx
new file mode 100644
index 00000000000..95685a9cd3b
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-file-based/src/routes/root.tsx
@@ -0,0 +1,69 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/package.json b/e2e/solid-router/basic-virtual-named-export-config-file-based/package.json
new file mode 100644
index 00000000000..82d97318b3a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "tanstack-router-e2e-solid-basic-virtual-named-export-config-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/router-plugin": "workspace:^",
+ "@tanstack/virtual-file-routes": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/playwright.config.ts b/e2e/solid-router/basic-virtual-named-export-config-file-based/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/postcss.config.mjs b/e2e/solid-router/basic-virtual-named-export-config-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/routes.ts b/e2e/solid-router/basic-virtual-named-export-config-file-based/routes.ts
new file mode 100644
index 00000000000..6c2c144ec5a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/routes.ts
@@ -0,0 +1,22 @@
+import {
+ index,
+ layout,
+ physical,
+ rootRoute,
+ route,
+} from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+ index('home.tsx'),
+ route('/posts', 'posts/posts.tsx', [
+ index('posts/posts-home.tsx'),
+ route('$postId', 'posts/posts-detail.tsx'),
+ ]),
+ layout('first', 'layout/first-layout.tsx', [
+ layout('second', 'layout/second-layout.tsx', [
+ route('/layout-a', 'a.tsx'),
+ route('/layout-b', 'b.tsx'),
+ ]),
+ ]),
+ physical('/classic', 'file-based-subtree'),
+])
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/main.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/main.tsx
new file mode 100644
index 00000000000..8128384193c
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/main.tsx
@@ -0,0 +1,25 @@
+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,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(() => (`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, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/a.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/a.tsx
new file mode 100644
index 00000000000..055cba1e6f6
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-a')({
+ component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+ return I'm layout A!
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/b.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/b.tsx
new file mode 100644
index 00000000000..c5bb8051af9
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx
new file mode 100644
index 00000000000..f7ff5379165
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/')({
+ component: () => This is the index
,
+})
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx
new file mode 100644
index 00000000000..f4f30d84256
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx
@@ -0,0 +1,27 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello')({
+ component: () => (
+
+ Hello!
+
+ ),
+})
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx
new file mode 100644
index 00000000000..2a6bf16c377
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/universe')({
+ component: () => Hello /classic/hello/universe!
,
+})
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx
new file mode 100644
index 00000000000..03edc7f484a
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/world')({
+ component: () => Hello /classic/hello/world!
,
+})
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/home.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/home.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/home.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx
new file mode 100644
index 00000000000..5c77421bb29
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx
@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx
new file mode 100644
index 00000000000..9ab147de5e9
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+
I'm a nested layout
+
+
+
+
+
Post not found
+ },
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+
+
{post().title}
+
{post().body}
+
Select a post.
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx
new file mode 100644
index 00000000000..9ae6dfc747d
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx
@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/root.tsx b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/root.tsx
new file mode 100644
index 00000000000..95685a9cd3b
--- /dev/null
+++ b/e2e/solid-router/basic-virtual-named-export-config-file-based/src/routes/root.tsx
@@ -0,0 +1,69 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/basic/package.json b/e2e/solid-router/basic/package.json
new file mode 100644
index 00000000000..a39bbb9c796
--- /dev/null
+++ b/e2e/solid-router/basic/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "tanstack-router-e2e-solid-basic",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/basic/playwright.config.ts b/e2e/solid-router/basic/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/basic/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/basic/postcss.config.mjs b/e2e/solid-router/basic/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/basic/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/basic/src/main.tsx b/e2e/solid-router/basic/src/main.tsx
new file mode 100644
index 00000000000..f9d53db711b
--- /dev/null
+++ b/e2e/solid-router/basic/src/main.tsx
@@ -0,0 +1,235 @@
+import { render } from 'solid-js/web'
+import {
+ ErrorComponent,
+ Link,
+ Outlet,
+ RouterProvider,
+ createRootRoute,
+ createRoute,
+ createRouter,
+} from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { NotFoundError, fetchPost, fetchPosts } from './posts'
+import './styles.css'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+const rootRoute = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+
+
Welcome Home!
+
+ )
+}
+
+export const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: () => fetchPosts(),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsRoute,
+ path: '/',
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return Select a post.
+}
+
+function PostErrorComponent({ error }: ErrorComponentProps) {
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+
+ return
+
{post().title}
+
+
{post().body}
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
+
+const layoutBRoute = createRoute({
+ getParentRoute: () => layout2Route,
+ path: '/layout-b',
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
+
+const routeTree = rootRoute.addChildren([
+ postsRoute.addChildren([postRoute, postsIndexRoute]),
+ layoutRoute.addChildren([
+ layout2Route.addChildren([layoutARoute, layoutBRoute]),
+ ]),
+ indexRoute,
+])
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ defaultStaleTime: 5000,
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(() => >('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
+
+export const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`)
+ await new Promise((r) => setTimeout(r, 500))
+ const post = await axios
+ .get(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then((r) => r.data)
+
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (!post) {
+ throw new NotFoundError(`Post with id "${postId}" not found!`)
+ }
+
+ return post
+}
diff --git a/e2e/solid-router/basic/src/styles.css b/e2e/solid-router/basic/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/e2e/solid-router/basic/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/e2e/solid-router/basic/tailwind.config.mjs b/e2e/solid-router/basic/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/e2e/solid-router/basic/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/e2e/solid-router/basic/tests/app.spec.ts b/e2e/solid-router/basic/tests/app.spec.ts
new file mode 100644
index 00000000000..5ccdafa513b
--- /dev/null
+++ b/e2e/solid-router/basic/tests/app.spec.ts
@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/')
+})
+
+test('Navigating to a post page', async ({ page }) => {
+ await page.getByRole('link', { name: 'Posts', exact: true }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating nested layouts', async ({ page }) => {
+ await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+ await expect(page.locator('#app')).toContainText("I'm a layout")
+ await expect(page.locator('#app')).toContainText("I'm a nested layout")
+
+ await page.getByRole('link', { name: 'Layout A' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout A!")
+
+ await page.getByRole('link', { name: 'Layout B' }).click()
+ await expect(page.locator('#app')).toContainText("I'm layout B!")
+})
+
+test('Navigating to a not-found route', async ({ page }) => {
+ await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
+ await expect(page.getByRole('paragraph')).toContainText(
+ 'This is the notFoundComponent configured on root route',
+ )
+ await page.getByRole('link', { name: 'Start Over' }).click()
+ await expect(page.getByRole('heading')).toContainText('Welcome Home!')
+})
+
+test('Navigating to a post page with viewTransition', async ({ page }) => {
+ await page.getByRole('link', { name: 'View Transition', exact: true }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating to a post page with viewTransition types', async ({
+ page,
+}) => {
+ await page.getByRole('link', { name: 'View Transition types' }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
diff --git a/e2e/solid-router/basic/tsconfig.json b/e2e/solid-router/basic/tsconfig.json
new file mode 100644
index 00000000000..e011e786b59
--- /dev/null
+++ b/e2e/solid-router/basic/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "skipLibCheck": true
+ },
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/basic/vite.config.js b/e2e/solid-router/basic/vite.config.js
new file mode 100644
index 00000000000..05041cc6d83
--- /dev/null
+++ b/e2e/solid-router/basic/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [solid()],
+})
diff --git a/e2e/solid-router/rspack-basic-file-based/.gitignore b/e2e/solid-router/rspack-basic-file-based/.gitignore
new file mode 100644
index 00000000000..fbb2bd02932
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/.gitignore
@@ -0,0 +1,20 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# E2E
+src/routeTree.gen.ts
+test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/rspack-basic-file-based/README.md b/e2e/solid-router/rspack-basic-file-based/README.md
new file mode 100644
index 00000000000..93f18812e1c
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm dev`
diff --git a/e2e/solid-router/rspack-basic-file-based/package.json b/e2e/solid-router/rspack-basic-file-based/package.json
new file mode 100644
index 00000000000..ff73441f2ca
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "tanstack-router-e2e-solid-rspack-basic-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "rsbuild dev --port 3000",
+ "build": "rsbuild build && tsc --noEmit",
+ "preview": "rsbuild preview",
+ "start": "rsbuild preview",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "@rsbuild/core": "^1.2.4",
+ "@rsbuild/plugin-babel": "^1.0.3",
+ "@rsbuild/plugin-solid": "^1.0.4",
+ "@tanstack/router-plugin": "workspace:^",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "typescript": "^5.7.2"
+ }
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/playwright.config.ts b/e2e/solid-router/rspack-basic-file-based/playwright.config.ts
new file mode 100644
index 00000000000..5989adb1c7b
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/rspack-basic-file-based/postcss.config.mjs b/e2e/solid-router/rspack-basic-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/rsbuild.config.ts b/e2e/solid-router/rspack-basic-file-based/rsbuild.config.ts
new file mode 100644
index 00000000000..93cd6b0f54f
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/rsbuild.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+
+export default defineConfig({
+ plugins: [
+ pluginBabel({
+ include: /\.(?:jsx|tsx)$/,
+ }),
+ pluginSolid(),
+ ],
+ tools: {
+ rspack: {
+ plugins: [TanStackRouterRspack({ target: 'solid' })],
+ },
+ },
+})
diff --git a/e2e/solid-router/rspack-basic-file-based/src/app.tsx b/e2e/solid-router/rspack-basic-file-based/src/app.tsx
new file mode 100644
index 00000000000..0981f90396a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/src/app.tsx
@@ -0,0 +1,23 @@
+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',
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+const App = () => {
+ return (`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, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/routes/__root.tsx b/e2e/solid-router/rspack-basic-file-based/src/routes/__root.tsx
new file mode 100644
index 00000000000..eb544e319f7
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/src/routes/__root.tsx
@@ -0,0 +1,61 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx b/e2e/solid-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx
new file mode 100644
index 00000000000..30dbcce90fa
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/routes/index.tsx b/e2e/solid-router/rspack-basic-file-based/src/routes/index.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/routes/posts.$postId.tsx b/e2e/solid-router/rspack-basic-file-based/src/routes/posts.$postId.tsx
new file mode 100644
index 00000000000..55f8871d03f
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/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 Post not found
+ },
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+
+
{post().title}
+
{post().body}
+
Select a post.
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/routes/posts.tsx b/e2e/solid-router/rspack-basic-file-based/src/routes/posts.tsx
new file mode 100644
index 00000000000..11a999f50aa
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/src/routes/posts.tsx
@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/src/styles.css b/e2e/solid-router/rspack-basic-file-based/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/e2e/solid-router/rspack-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/e2e/solid-router/rspack-basic-file-based/tailwind.config.mjs b/e2e/solid-router/rspack-basic-file-based/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/tests/app.spec.ts b/e2e/solid-router/rspack-basic-file-based/tests/app.spec.ts
new file mode 100644
index 00000000000..10beff655f0
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/tests/app.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('/')
+})
+
+test('Navigating to a post page', async ({ page }) => {
+ await page.getByRole('link', { name: 'Posts' }).click()
+ await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
+ await expect(page.getByRole('heading')).toContainText('sunt aut facere')
+})
+
+test('Navigating nested layouts', async ({ page }) => {
+ await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+ await expect(page.locator('#root')).toContainText("I'm a layout")
+ await expect(page.locator('#root')).toContainText("I'm a nested layout")
+
+ await page.getByRole('link', { name: 'Layout A' }).click()
+ await expect(page.locator('#root')).toContainText("I'm layout A!")
+
+ await page.getByRole('link', { name: 'Layout B' }).click()
+ await expect(page.locator('#root')).toContainText("I'm layout B!")
+})
+
+test('Navigating to a not-found route', async ({ page }) => {
+ await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
+ await expect(page.getByRole('paragraph')).toContainText(
+ 'This is the notFoundComponent configured on root route',
+ )
+ await page.getByRole('link', { name: 'Start Over' }).click()
+ await expect(page.getByRole('heading')).toContainText('Welcome Home!')
+})
diff --git a/e2e/solid-router/rspack-basic-file-based/tsconfig.json b/e2e/solid-router/rspack-basic-file-based/tsconfig.json
new file mode 100644
index 00000000000..e4741a7cfe8
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "moduleResolution": "Bundler",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "module": "ESNext",
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "strict": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "resolveJsonModule": true,
+ "useDefineForClassFields": true,
+ "allowJs": true
+ },
+ "include": ["src", "playwright.config.ts", "tests"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/solid-router/rspack-basic-file-based/tsr.config.json b/e2e/solid-router/rspack-basic-file-based/tsr.config.json
new file mode 100644
index 00000000000..15b57e5ea33
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-file-based/tsr.config.json
@@ -0,0 +1,4 @@
+{
+ "routesDirectory": "./src/routes",
+ "generatedRouteTree": "./src/routeTree.gen.ts"
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/.gitignore b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/.gitignore
new file mode 100644
index 00000000000..fbb2bd02932
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/.gitignore
@@ -0,0 +1,20 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# E2E
+src/routeTree.gen.ts
+test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/README.md b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/README.md
new file mode 100644
index 00000000000..93f18812e1c
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm dev`
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/package.json b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/package.json
new file mode 100644
index 00000000000..0861b672d44
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "tanstack-router-e2e-solid-rspack-basic-virtual-named-export-config-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "rsbuild dev --port 3000",
+ "build": "rsbuild build && tsc --noEmit",
+ "preview": "rsbuild preview",
+ "start": "rsbuild preview",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "@rsbuild/core": "^1.2.4",
+ "@rsbuild/plugin-babel": "^1.0.3",
+ "@rsbuild/plugin-solid": "^1.0.4",
+ "@tanstack/router-plugin": "workspace:^",
+ "@tanstack/virtual-file-routes": "workspace:^",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "typescript": "^5.7.2"
+ }
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts
new file mode 100644
index 00000000000..912664a64e0
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_SERVER_PORT=${PORT} pnpm start --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/routes.ts b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/routes.ts
new file mode 100644
index 00000000000..6c2c144ec5a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/routes.ts
@@ -0,0 +1,22 @@
+import {
+ index,
+ layout,
+ physical,
+ rootRoute,
+ route,
+} from '@tanstack/virtual-file-routes'
+
+export const routes = rootRoute('root.tsx', [
+ index('home.tsx'),
+ route('/posts', 'posts/posts.tsx', [
+ index('posts/posts-home.tsx'),
+ route('$postId', 'posts/posts-detail.tsx'),
+ ]),
+ layout('first', 'layout/first-layout.tsx', [
+ layout('second', 'layout/second-layout.tsx', [
+ route('/layout-a', 'a.tsx'),
+ route('/layout-b', 'b.tsx'),
+ ]),
+ ]),
+ physical('/classic', 'file-based-subtree'),
+])
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.ts b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.ts
new file mode 100644
index 00000000000..93cd6b0f54f
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+
+export default defineConfig({
+ plugins: [
+ pluginBabel({
+ include: /\.(?:jsx|tsx)$/,
+ }),
+ pluginSolid(),
+ ],
+ tools: {
+ rspack: {
+ plugins: [TanStackRouterRspack({ target: 'solid' })],
+ },
+ },
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx
new file mode 100644
index 00000000000..0981f90396a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx
@@ -0,0 +1,23 @@
+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',
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+const App = () => {
+ return (`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, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx
new file mode 100644
index 00000000000..055cba1e6f6
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-a')({
+ component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+ return I'm layout A!
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx
new file mode 100644
index 00000000000..c5bb8051af9
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx
new file mode 100644
index 00000000000..f7ff5379165
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/')({
+ component: () => This is the index
,
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx
new file mode 100644
index 00000000000..f4f30d84256
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx
@@ -0,0 +1,27 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello')({
+ component: () => (
+
+ Hello!
+
+ ),
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx
new file mode 100644
index 00000000000..2a6bf16c377
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/universe')({
+ component: () => Hello /classic/hello/universe!
,
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx
new file mode 100644
index 00000000000..03edc7f484a
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/classic/hello/world')({
+ component: () => Hello /classic/hello/world!
,
+})
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx
new file mode 100644
index 00000000000..bdfb4c76768
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
Welcome Home!
+
+ )
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx
new file mode 100644
index 00000000000..5c77421bb29
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx
@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx
new file mode 100644
index 00000000000..9ab147de5e9
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_first/_second')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+
I'm a nested layout
+
+
+
+
+
Post not found
+ },
+ component: PostComponent,
+})
+
+function PostComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+
+
{post().title}
+
{post().body}
+
Select a post.
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx
new file mode 100644
index 00000000000..9ae6dfc747d
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx
@@ -0,0 +1,38 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { fetchPosts } from '../../posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: fetchPosts,
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+ )
+}
diff --git a/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx
new file mode 100644
index 00000000000..95685a9cd3b
--- /dev/null
+++ b/e2e/solid-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx
@@ -0,0 +1,69 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/package.json b/e2e/solid-router/scroll-restoration-sandbox-vite/package.json
new file mode 100644
index 00000000000..eaf3d8beaf9
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "tanstack-router-e2e-solid-scroll-restoration-sandbox-vite",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "dev:e2e": "vite",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/router-devtools": "workspace:^",
+ "@tanstack/router-plugin": "workspace:^",
+ "@tanstack/zod-adapter": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "vite-plugin-solid": "^2.11.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/playwright.config.ts b/e2e/solid-router/scroll-restoration-sandbox-vite/playwright.config.ts
new file mode 100644
index 00000000000..2eeb79844fc
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: './tests',
+ workers: 1,
+
+ reporter: [['line']],
+
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL,
+ },
+
+ webServer: {
+ command: `VITE_SERVER_PORT=${PORT} pnpm build && VITE_SERVER_PORT=${PORT} pnpm serve --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/postcss.config.mjs b/e2e/solid-router/scroll-restoration-sandbox-vite/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/src/main.tsx b/e2e/solid-router/scroll-restoration-sandbox-vite/src/main.tsx
new file mode 100644
index 00000000000..65b505e952c
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/src/main.tsx
@@ -0,0 +1,23 @@
+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,
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(() => (`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then((r) => r.data)
+ .catch((err) => {
+ if (err.status === 404) {
+ throw new PostNotFoundError(`Post with id "${postId}" not found!`)
+ }
+ throw err
+ })
+
+ return post
+}
+
+export const fetchPosts = async () => {
+ console.info('Fetching posts...')
+ await new Promise((r) => setTimeout(r, 500))
+ return axios
+ .get>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts
new file mode 100644
index 00000000000..969ebba8d6d
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts
@@ -0,0 +1,199 @@
+/* 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 { createFileRoute } from '@tanstack/solid-router'
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+import { Route as testsPageWithSearchImport } from './routes/(tests)/page-with-search'
+import { Route as testsNormalPageImport } from './routes/(tests)/normal-page'
+import { Route as testsLazyWithLoaderPageImport } from './routes/(tests)/lazy-with-loader-page'
+import { Route as testsLazyPageImport } from './routes/(tests)/lazy-page'
+
+// Create Virtual Routes
+
+const testsVirtualPageLazyImport = createFileRoute('/(tests)/virtual-page')()
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsVirtualPageLazyRoute = testsVirtualPageLazyImport
+ .update({
+ id: '/(tests)/virtual-page',
+ path: '/virtual-page',
+ getParentRoute: () => rootRoute,
+ } as any)
+ .lazy(() => import('./routes/(tests)/virtual-page.lazy').then((d) => d.Route))
+
+const testsPageWithSearchRoute = testsPageWithSearchImport.update({
+ id: '/(tests)/page-with-search',
+ path: '/page-with-search',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsNormalPageRoute = testsNormalPageImport.update({
+ id: '/(tests)/normal-page',
+ path: '/normal-page',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsLazyWithLoaderPageRoute = testsLazyWithLoaderPageImport
+ .update({
+ id: '/(tests)/lazy-with-loader-page',
+ path: '/lazy-with-loader-page',
+ getParentRoute: () => rootRoute,
+ } as any)
+ .lazy(() =>
+ import('./routes/(tests)/lazy-with-loader-page.lazy').then((d) => d.Route),
+ )
+
+const testsLazyPageRoute = testsLazyPageImport
+ .update({
+ id: '/(tests)/lazy-page',
+ path: '/lazy-page',
+ getParentRoute: () => rootRoute,
+ } as any)
+ .lazy(() => import('./routes/(tests)/lazy-page.lazy').then((d) => d.Route))
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/lazy-page': {
+ id: '/(tests)/lazy-page'
+ path: '/lazy-page'
+ fullPath: '/lazy-page'
+ preLoaderRoute: typeof testsLazyPageImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/lazy-with-loader-page': {
+ id: '/(tests)/lazy-with-loader-page'
+ path: '/lazy-with-loader-page'
+ fullPath: '/lazy-with-loader-page'
+ preLoaderRoute: typeof testsLazyWithLoaderPageImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/normal-page': {
+ id: '/(tests)/normal-page'
+ path: '/normal-page'
+ fullPath: '/normal-page'
+ preLoaderRoute: typeof testsNormalPageImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/page-with-search': {
+ id: '/(tests)/page-with-search'
+ path: '/page-with-search'
+ fullPath: '/page-with-search'
+ preLoaderRoute: typeof testsPageWithSearchImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/virtual-page': {
+ id: '/(tests)/virtual-page'
+ path: '/virtual-page'
+ fullPath: '/virtual-page'
+ preLoaderRoute: typeof testsVirtualPageLazyImport
+ parentRoute: typeof rootRoute
+ }
+ }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/lazy-page': typeof testsLazyPageRoute
+ '/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute
+ '/normal-page': typeof testsNormalPageRoute
+ '/page-with-search': typeof testsPageWithSearchRoute
+ '/virtual-page': typeof testsVirtualPageLazyRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/lazy-page': typeof testsLazyPageRoute
+ '/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute
+ '/normal-page': typeof testsNormalPageRoute
+ '/page-with-search': typeof testsPageWithSearchRoute
+ '/virtual-page': typeof testsVirtualPageLazyRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/(tests)/lazy-page': typeof testsLazyPageRoute
+ '/(tests)/lazy-with-loader-page': typeof testsLazyWithLoaderPageRoute
+ '/(tests)/normal-page': typeof testsNormalPageRoute
+ '/(tests)/page-with-search': typeof testsPageWithSearchRoute
+ '/(tests)/virtual-page': typeof testsVirtualPageLazyRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | '/lazy-page'
+ | '/lazy-with-loader-page'
+ | '/normal-page'
+ | '/page-with-search'
+ | '/virtual-page'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/'
+ | '/lazy-page'
+ | '/lazy-with-loader-page'
+ | '/normal-page'
+ | '/page-with-search'
+ | '/virtual-page'
+ id:
+ | '__root__'
+ | '/'
+ | '/(tests)/lazy-page'
+ | '/(tests)/lazy-with-loader-page'
+ | '/(tests)/normal-page'
+ | '/(tests)/page-with-search'
+ | '/(tests)/virtual-page'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ testsLazyPageRoute: typeof testsLazyPageRoute
+ testsLazyWithLoaderPageRoute: typeof testsLazyWithLoaderPageRoute
+ testsNormalPageRoute: typeof testsNormalPageRoute
+ testsPageWithSearchRoute: typeof testsPageWithSearchRoute
+ testsVirtualPageLazyRoute: typeof testsVirtualPageLazyRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ testsLazyPageRoute: testsLazyPageRoute,
+ testsLazyWithLoaderPageRoute: testsLazyWithLoaderPageRoute,
+ testsNormalPageRoute: testsNormalPageRoute,
+ testsPageWithSearchRoute: testsPageWithSearchRoute,
+ testsVirtualPageLazyRoute: testsVirtualPageLazyRoute,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx
new file mode 100644
index 00000000000..2e7b3306d21
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx
@@ -0,0 +1,16 @@
+import { createLazyFileRoute } from '@tanstack/solid-router'
+import { ScrollBlock } from '../-components/scroll-block'
+
+export const Route = createLazyFileRoute('/(tests)/lazy-page')({
+ component: Component,
+})
+
+function Component() {
+ return (
+
+
lazy-page
+
+
lazy-with-loader-page
+
+
normal-page
+
+
page-with-search
+
+
virtual-page
+
+ {Array.from({ length: number }).map((_, i) => (
+ {i}
+ ))}
+
+ At the bottom
+
+
+ )
+}
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx
new file mode 100644
index 00000000000..60d576d62be
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx
@@ -0,0 +1,61 @@
+import {
+ Link,
+ Outlet,
+ createRootRoute,
+ linkOptions,
+} from '@tanstack/solid-router'
+import { Dynamic } from 'solid-js/web'
+// import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+ component: RootComponent,
+})
+
+function RootComponent() {
+ return (
+ <>
+
+
+ )
+}
diff --git a/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/index.tsx b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/index.tsx
new file mode 100644
index 00000000000..991ecc34353
--- /dev/null
+++ b/e2e/solid-router/scroll-restoration-sandbox-vite/src/routes/index.tsx
@@ -0,0 +1,36 @@
+import { Link, createFileRoute, linkOptions } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: HomeComponent,
+})
+
+function HomeComponent() {
+ return (
+
+
Welcome Home!
+
+ The are the links to be tested when navigating away from the index page.
+ Otherwise known as NOT first-load tests, rather known as navigation
+ tests.
+
+ {(
+ [
+ linkOptions({ to: '/normal-page' }),
+ linkOptions({ to: '/lazy-page' }),
+ linkOptions({ to: '/virtual-page' }),
+ linkOptions({ to: '/lazy-with-loader-page' }),
+ linkOptions({ to: '/page-with-search', search: { where: 'footer' } }),
+ ] as const
+ ).map((options, i) => (
+
+
{options.to} tests
+
+
+
+ ))}
+
Vite App
+
+
+
+
+
+
diff --git a/examples/solid/basic-solid-query/package.json b/examples/solid/basic-solid-query/package.json
new file mode 100644
index 00000000000..6e0c23b42a8
--- /dev/null
+++ b/examples/solid/basic-solid-query/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "tanstack-router-solid-example-solid-query",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/solid-query": "^5.66.0",
+ "@tanstack/solid-query-devtools": "^5.66.0",
+ "@tanstack/solid-router": "workspace:^",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17"
+ },
+ "devDependencies": {
+ "vite-plugin-solid": "^2.11.2",
+ "typescript": "^5.7.2",
+ "vite": "^6.1.0"
+ }
+}
diff --git a/examples/solid/basic-solid-query/postcss.config.mjs b/examples/solid/basic-solid-query/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/examples/solid/basic-solid-query/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/examples/solid/basic-solid-query/src/main.tsx b/examples/solid/basic-solid-query/src/main.tsx
new file mode 100644
index 00000000000..5326a9569b5
--- /dev/null
+++ b/examples/solid/basic-solid-query/src/main.tsx
@@ -0,0 +1,276 @@
+import {
+ ErrorComponent,
+ Link,
+ Outlet,
+ RouterProvider,
+ createRootRouteWithContext,
+ createRoute,
+ createRouter,
+ useRouter,
+} from '@tanstack/solid-router'
+
+import {
+ createQuery,
+ QueryClient,
+ QueryClientProvider,
+} from '@tanstack/solid-query'
+import { NotFoundError, postQueryOptions, postsQueryOptions } from './posts'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+import './styles.css'
+import { render } from 'solid-js/web'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import { createEffect, createMemo, Suspense } from 'solid-js'
+
+const rootRoute = createRootRouteWithContext<{
+ queryClient: QueryClient
+}>()({
+ component: RootComponent,
+ notFoundComponent: () => {
+ return (
+
+
This is the notFoundComponent configured on root route
+
Start Over
+
+
+
+
Welcome Home!
+
+ )
+}
+
+const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: 'posts',
+ loader: ({ context: { queryClient } }) =>
+ queryClient.ensureQueryData(postsQueryOptions),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+ getParentRoute: () => postsRoute,
+ path: '/',
+ component: PostsIndexRouteComponent,
+})
+
+function PostsIndexRouteComponent() {
+ return Select a post.
+}
+
+const postRoute = createRoute({
+ getParentRoute: () => postsRoute,
+ path: '$postId',
+ errorComponent: PostErrorComponent,
+ loader: ({ context: { queryClient }, params: { postId } }) =>
+ queryClient.ensureQueryData(postQueryOptions(postId)),
+ component: PostRouteComponent,
+})
+
+function PostErrorComponent({ error, reset }: ErrorComponentProps) {
+ const router = useRouter()
+ if (error instanceof NotFoundError) {
+ return {error.message}
+ }
+
+ createEffect(() => {
+ reset()
+ queryClient.resetQueries()
+ })
+
+ return (
+
+ {
+ router.invalidate()
+ }}
+ >
+ retry
+
+
+ )
+}
+
+function PostRouteComponent() {
+ const params = postRoute.useParams()
+ const postQuery = createQuery(() => postQueryOptions(params().postId))
+ const post = createMemo(() => postQuery.data)
+
+ return (
+
+
{post()?.title}
+
{post()?.body}
+
+
I'm a nested layout
+
+
+
+
+
I'm layout A!
+}
+
+const layoutBRoute = createRoute({
+ getParentRoute: () => layout2Route,
+ path: '/layout-b',
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm layout B!
+}
+
+const routeTree = rootRoute.addChildren([
+ postsRoute.addChildren([postRoute, postsIndexRoute]),
+ layoutRoute.addChildren([
+ layout2Route.addChildren([layoutARoute, layoutBRoute]),
+ ]),
+ 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/solid-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+ render(
+ () => (
+
+
+ ),
+ rootElement,
+ )
+}
diff --git a/examples/solid/basic-solid-query/src/posts.lazy.tsx b/examples/solid/basic-solid-query/src/posts.lazy.tsx
new file mode 100644
index 00000000000..466926dd1be
--- /dev/null
+++ b/examples/solid/basic-solid-query/src/posts.lazy.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Link, Outlet, createLazyRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import { postsQueryOptions } from './posts'
+import { createMemo } from 'solid-js'
+
+export const Route = createLazyRoute('/posts')({
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const postsQuery = createQuery(() => postsQueryOptions)
+
+ const posts = createMemo(() => {
+ if (postsQuery.data) {
+ return postsQuery.data
+ } else {
+ return []
+ }
+ })
+
+ return (
+
+ )
+}
diff --git a/examples/solid/basic-solid-query/src/posts.ts b/examples/solid/basic-solid-query/src/posts.ts
new file mode 100644
index 00000000000..cc07134ab2d
--- /dev/null
+++ b/examples/solid/basic-solid-query/src/posts.ts
@@ -0,0 +1,44 @@
+import axios from 'redaxios'
+import { queryOptions } from '@tanstack/solid-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>('https://jsonplaceholder.typicode.com/posts')
+ .then((r) => r.data.slice(0, 10))
+}
+
+const fetchPost = async (postId: string) => {
+ console.info(`Fetching post with id ${postId}...`)
+ await new Promise((r) => setTimeout(r, 500))
+ const post = await axios
+ .get(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+ .then((r) => r.data)
+
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (!post) {
+ throw new NotFoundError(`Post with id "${postId}" not found!`)
+ }
+
+ return post
+}
+
+export const postQueryOptions = (postId: string) =>
+ queryOptions({
+ queryKey: ['posts', { postId }],
+ queryFn: () => fetchPost(postId),
+ })
+
+export const postsQueryOptions = queryOptions({
+ queryKey: ['posts'],
+ queryFn: () => fetchPosts(),
+})
diff --git a/examples/solid/basic-solid-query/src/styles.css b/examples/solid/basic-solid-query/src/styles.css
new file mode 100644
index 00000000000..0b8e317099c
--- /dev/null
+++ b/examples/solid/basic-solid-query/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/solid/basic-solid-query/tailwind.config.mjs b/examples/solid/basic-solid-query/tailwind.config.mjs
new file mode 100644
index 00000000000..4986094b9d5
--- /dev/null
+++ b/examples/solid/basic-solid-query/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
+}
diff --git a/examples/solid/basic-solid-query/tsconfig.dev.json b/examples/solid/basic-solid-query/tsconfig.dev.json
new file mode 100644
index 00000000000..285a09b0dcf
--- /dev/null
+++ b/examples/solid/basic-solid-query/tsconfig.dev.json
@@ -0,0 +1,10 @@
+{
+ "composite": true,
+ "extends": "../../../tsconfig.base.json",
+
+ "files": ["src/main.tsx"],
+ "include": [
+ "src"
+ // "__tests__/**/*.test.*"
+ ]
+}
diff --git a/examples/solid/basic-solid-query/tsconfig.json b/examples/solid/basic-solid-query/tsconfig.json
new file mode 100644
index 00000000000..a972899814c
--- /dev/null
+++ b/examples/solid/basic-solid-query/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "target": "ESNext",
+ "moduleResolution": "Bundler",
+ "module": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
+ }
+}
diff --git a/examples/solid/basic-solid-query/vite.config.js b/examples/solid/basic-solid-query/vite.config.js
new file mode 100644
index 00000000000..05041cc6d83
--- /dev/null
+++ b/examples/solid/basic-solid-query/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [solid()],
+})
diff --git a/examples/solid/kitchen-sink-file-based/.gitignore b/examples/solid/kitchen-sink-file-based/.gitignore
new file mode 100644
index 00000000000..d451ff16c10
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/solid/kitchen-sink-file-based/README.md b/examples/solid/kitchen-sink-file-based/README.md
new file mode 100644
index 00000000000..115199d292c
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/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/kitchen-sink-file-based/index.html b/examples/solid/kitchen-sink-file-based/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/index.html
@@ -0,0 +1,12 @@
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/examples/solid/kitchen-sink-file-based/package.json b/examples/solid/kitchen-sink-file-based/package.json
new file mode 100644
index 00000000000..fa171c899c5
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "tanstack-router-solid-example-kitchen-sink-file-based",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite --port 3000",
+ "build": "vite build && tsc --noEmit",
+ "serve": "vite preview",
+ "start": "vite"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/router-devtools": "^1.99.6",
+ "@tanstack/router-plugin": "workspace:*",
+ "immer": "^10.1.1",
+ "solid-js": "^1.9.4",
+ "redaxios": "^0.5.1",
+ "postcss": "^8.5.1",
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "vite-plugin-solid": "^2.11.2",
+ "typescript": "^5.7.2",
+ "vite": "^6.0.11"
+ }
+}
diff --git a/examples/solid/kitchen-sink-file-based/postcss.config.mjs b/examples/solid/kitchen-sink-file-based/postcss.config.mjs
new file mode 100644
index 00000000000..2e7af2b7f1a
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/components/Breadcrumbs.tsx b/examples/solid/kitchen-sink-file-based/src/components/Breadcrumbs.tsx
new file mode 100644
index 00000000000..0714a0d8460
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/components/Breadcrumbs.tsx
@@ -0,0 +1,28 @@
+import { isMatch, Link, useMatches } from '@tanstack/solid-router'
+
+export const Breadcrumbs = () => {
+ const matches = useMatches()
+
+ if (matches().some((match) => match.status === 'pending')) return null
+
+ const matchesWithCrumbs = matches().filter((match) =>
+ isMatch(match, 'loaderData.crumb'),
+ )
+
+ return (
+
+
+ {matchesWithCrumbs.map((match, i) => (
+
+ {'>'}
+ ) : null}
+
+ ))}
+
+
+ )
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/components/InvoiceFields.tsx b/examples/solid/kitchen-sink-file-based/src/components/InvoiceFields.tsx
new file mode 100644
index 00000000000..a3da8363072
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/components/InvoiceFields.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import type { Invoice } from '../utils/mockTodos'
+
+export function InvoiceFields(props: { invoice: Invoice; disabled?: boolean }) {
+ return (
+
+ )
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/components/Spinner.tsx b/examples/solid/kitchen-sink-file-based/src/components/Spinner.tsx
new file mode 100644
index 00000000000..2c853ed6ffa
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/components/Spinner.tsx
@@ -0,0 +1,13 @@
+export function Spinner(props: { show?: boolean; wait?: `delay-${number}` }) {
+ return (
+
+ ⍥
+
+ )
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx b/examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx
new file mode 100644
index 00000000000..a63b9cd3671
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/hooks/useMutation.tsx
@@ -0,0 +1,41 @@
+import * as Solid from 'solid-js'
+
+export function useMutation(opts: {
+ fn: (variables: TVariables) => Promise
+ onSuccess?: (ctx: { data: TData }) => void | Promise
+}) {
+ const [submittedAt, setSubmittedAt] = Solid.createSignal()
+ const [variables, setVariables] = Solid.createSignal()
+ const [error, setError] = Solid.createSignal()
+ const [data, setData] = Solid.createSignal()
+ const [status, setStatus] = Solid.createSignal<
+ 'idle' | 'pending' | 'success' | 'error'
+ >('idle')
+
+ const mutate = async (variables: TVariables): Promise => {
+ setStatus(() => 'pending')
+ setSubmittedAt(() => Date.now())
+ setVariables(() => variables)
+ //
+ try {
+ const data = await opts.fn(variables)
+ await opts.onSuccess?.({ data })
+ setStatus(() => 'success')
+ setError(() => undefined)
+ setData((prev) => data)
+ return data
+ } catch (err: any) {
+ setStatus(() => 'error')
+ setError(() => err)
+ }
+ }
+
+ return {
+ status,
+ variables,
+ submittedAt,
+ mutate,
+ error,
+ data,
+ }
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/hooks/useSessionStorage.tsx b/examples/solid/kitchen-sink-file-based/src/hooks/useSessionStorage.tsx
new file mode 100644
index 00000000000..c08528dde60
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/hooks/useSessionStorage.tsx
@@ -0,0 +1,21 @@
+import * as Solid from 'solid-js'
+
+export function useSessionStorage(key: string, initialValue: any) {
+ const [state, setState] = Solid.createSignal(
+ (() => {
+ const stored = sessionStorage.getItem(key)
+ console.log('stored', key, stored, initialValue, typeof stored)
+ const reutrnval =
+ stored && stored !== 'undefined' ? JSON.parse(stored) : initialValue
+ console.log('returning', reutrnval)
+ return reutrnval
+ })(),
+ )
+
+ Solid.createEffect(() => {
+ console.log('setting', JSON.stringify(state()))
+ sessionStorage.setItem(key, JSON.stringify(state()))
+ })
+
+ return [state, setState]
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/main.tsx b/examples/solid/kitchen-sink-file-based/src/main.tsx
new file mode 100644
index 00000000000..c30c1c6515f
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/main.tsx
@@ -0,0 +1,144 @@
+import * as Solid from 'solid-js'
+import {
+ ErrorComponent,
+ RouterProvider,
+ createRouter,
+} from '@tanstack/solid-router'
+import { auth } from './utils/auth'
+import { Spinner } from './components/Spinner'
+import { routeTree } from './routeTree.gen'
+import { useSessionStorage } from './hooks/useSessionStorage'
+import './styles.css'
+import { render } from 'solid-js/web'
+
+//
+
+const router = createRouter({
+ routeTree,
+ defaultPendingComponent: () => (
+
+
+ ),
+ defaultErrorComponent: ({ error }) => (
+ 'loaderDelay',
+ 500,
+ )
+ const [pendingMs, setPendingMs] = useSessionStorage('pendingMs', 1000)
+ const [pendingMinMs, setPendingMinMs] = useSessionStorage(
+ 'pendingMinMs',
+ 500,
+ )
+
+ return (
+ <>
+
+
+
+ {
+ setLoaderDelay(() => 150)
+ }}
+ >
+ Fast
+
+ {
+ setLoaderDelay(() => 500)
+ }}
+ >
+ Fast 3G
+
+ {
+ setLoaderDelay(() => 2000)
+ }}
+ >
+ Slow 3G
+
+
+
+
Loader Delay: {loaderDelay()}ms
+
setLoaderDelay(e.target.valueAsNumber)}
+ class="w-full"
+ />
+
+
+
+
+ {
+ setPendingMs(() => 1000)
+ setPendingMinMs(() => 500)
+ }}
+ >
+ Reset to Default
+
+
+
+
defaultPendingMs: {pendingMs()}ms
+
setPendingMs(e.target.valueAsNumber)}
+ class="w-full"
+ />
+
+
+
defaultPendingMinMs: {pendingMinMs()}ms
+
setPendingMinMs(e.target.valueAsNumber)}
+ class="w-full"
+ />
+
+
+
()
diff --git a/examples/solid/kitchen-sink-file-based/src/routes/(this-folder-is-not-in-the-url)/route-group.tsx b/examples/solid/kitchen-sink-file-based/src/routes/(this-folder-is-not-in-the-url)/route-group.tsx
new file mode 100644
index 00000000000..c06e439a1b7
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/routes/(this-folder-is-not-in-the-url)/route-group.tsx
@@ -0,0 +1,17 @@
+import * as Solid from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute(
+ '/(this-folder-is-not-in-the-url)/route-group',
+)({
+ component: RouteGroupExample,
+})
+
+function RouteGroupExample() {
+ return (
+
+
Welcome to the Route Group Example!
+
+
+
+
Kitchen Sink
+
+ {/* Show a global spinner when the router is transitioning */}
+
+
+
+
+
+ {(
+ [
+ ['/', 'Home'],
+ ['/dashboard', 'Dashboard'],
+ ['/expensive', 'Expensive'],
+ ['/layout-a', 'Layout A'],
+ ['/layout-b', 'Layout B'],
+ ['/profile', 'Profile'],
+ ['/login', 'Login'],
+ ['/route-group', 'Route Group'],
+ ] as const
+ ).map(([to, label]) => {
+ return (
+
+
+ )
+ })}
+
+
+ {/* Render our first route match */}
+
+
+
+
+ Username:{context().username}
+
+
I'm A!
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/routes/_layout.layout-b.tsx b/examples/solid/kitchen-sink-file-based/src/routes/_layout.layout-b.tsx
new file mode 100644
index 00000000000..e83216593aa
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/routes/_layout.layout-b.tsx
@@ -0,0 +1,10 @@
+import * as Solid from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm B!
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/routes/_layout.tsx b/examples/solid/kitchen-sink-file-based/src/routes/_layout.tsx
new file mode 100644
index 00000000000..a7f5441d539
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/routes/_layout.tsx
@@ -0,0 +1,16 @@
+import * as Solid from 'solid-js'
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+
+ )
+}
diff --git a/examples/solid/kitchen-sink-file-based/src/routes/dashboard.index.tsx b/examples/solid/kitchen-sink-file-based/src/routes/dashboard.index.tsx
new file mode 100644
index 00000000000..f967ed4f4b3
--- /dev/null
+++ b/examples/solid/kitchen-sink-file-based/src/routes/dashboard.index.tsx
@@ -0,0 +1,21 @@
+import * as Solid from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+import { fetchInvoices } from '../utils/mockTodos'
+
+export const Route = createFileRoute('/dashboard/')({
+ loader: () => fetchInvoices(),
+ component: DashboardIndexComponent,
+})
+
+function DashboardIndexComponent() {
+ const invoices = Route.useLoaderData()
+
+ return (
+
+
+ Welcome to the dashboard! You have{' '}
+ {invoices.length} total invoices .
+
+