+ {pathname()} +
+{props.error.stack}
, + notFoundComponent: () =>
+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Users
+ {' '}
+
+ Layout
+ {' '}
+
+ Scripts
+ {' '}
+
+ Deferred
+ {' '}
+
+ redirect
+ {' '}
+
+ This Route Does Not Exist
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/_layout/_layout-2.tsx b/e2e/solid-start/basic/app/routes/_layout/_layout-2.tsx
new file mode 100644
index 0000000000..7a5a3623a0
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/_layout/_layout-2.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+ I'm a layout
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/_layout/_layout-2/layout-a.tsx b/e2e/solid-start/basic/app/routes/_layout/_layout-2/layout-a.tsx
new file mode 100644
index 0000000000..b69951b246
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/_layout/_layout-2/layout-a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-a')({
+ component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+ return I'm a nested layout
+
+
+ Layout A
+
+
+ Layout B
+
+
+
+
+ I'm layout A!
+}
diff --git a/e2e/solid-start/basic/app/routes/_layout/_layout-2/layout-b.tsx b/e2e/solid-start/basic/app/routes/_layout/_layout-2/layout-b.tsx
new file mode 100644
index 0000000000..30dbcce90f
--- /dev/null
+++ b/e2e/solid-start/basic/app/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-start/basic/app/routes/api.users.ts b/e2e/solid-start/basic/app/routes/api.users.ts
new file mode 100644
index 0000000000..45ac83b2f0
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/api.users.ts
@@ -0,0 +1,18 @@
+import { json } from '@tanstack/solid-start'
+import { createAPIFileRoute } from '@tanstack/solid-start/api'
+import axios from 'redaxios'
+
+import type { User } from '~/utils/users'
+
+export const APIRoute = createAPIFileRoute('/api/users')({
+ GET: async ({ request }) => {
+ console.info('Fetching users... @', request.url)
+ const res = await axios.get
+ Loading person...
}>
+
+ {loaderData().person.name} - {loaderData().person.randomNumber}
+
+
+ {data.name} - {data.randomNumber}
+
+ )}
+ />
+
+ {data}
} + /> +Count: {count()}
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/index.tsx b/e2e/solid-start/basic/app/routes/index.tsx
new file mode 100644
index 0000000000..6b23caf87b
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/index.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { CustomMessage } from '~/components/CustomMessage'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/links.tsx b/e2e/solid-start/basic/app/routes/links.tsx
new file mode 100644
index 0000000000..d6ce6a449b
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/links.tsx
@@ -0,0 +1,47 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/links')({
+ component: () => {
+ const navigate = Route.useNavigate()
+ return (
+ Welcome Home!!!
+
+
+ )
+ },
+})
diff --git a/e2e/solid-start/basic/app/routes/not-found/index.tsx b/e2e/solid-start/basic/app/routes/not-found/index.tsx
new file mode 100644
index 0000000000..34c8ef6146
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/not-found/index.tsx
@@ -0,0 +1,31 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/not-found/')({
+ component: () => {
+ const preload = Route.useSearch({ select: (s) => s.preload })
+ return (
+ + link test +
+
+
+ Link to /posts
+
+
+
+
+ Link to /posts (reloadDocument=true)
+
+
+
+
+
+
+
+
+
+
+ )
+ },
+})
diff --git a/e2e/solid-start/basic/app/routes/not-found/route.tsx b/e2e/solid-start/basic/app/routes/not-found/route.tsx
new file mode 100644
index 0000000000..84f5ef81a5
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/not-found/route.tsx
@@ -0,0 +1,8 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import z from 'zod'
+
+export const Route = createFileRoute('/not-found')({
+ validateSearch: z.object({
+ preload: z.literal(false).optional(),
+ }),
+})
diff --git a/e2e/solid-start/basic/app/routes/not-found/via-beforeLoad.tsx b/e2e/solid-start/basic/app/routes/not-found/via-beforeLoad.tsx
new file mode 100644
index 0000000000..5badde63bd
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/not-found/via-beforeLoad.tsx
@@ -0,0 +1,23 @@
+import { createFileRoute, notFound } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/not-found/via-beforeLoad')({
+ beforeLoad: () => {
+ throw notFound()
+ },
+ component: RouteComponent,
+ notFoundComponent: () => {
+ return (
+
+
+ via-beforeLoad
+
+
+
+
+ via-loader
+
+
+
+ Not Found "/not-found/via-beforeLoad"!
+
+ )
+ },
+})
+
+function RouteComponent() {
+ return (
+
+ Hello "/not-found/via-beforeLoad"!
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/not-found/via-loader.tsx b/e2e/solid-start/basic/app/routes/not-found/via-loader.tsx
new file mode 100644
index 0000000000..20956cc43d
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/not-found/via-loader.tsx
@@ -0,0 +1,23 @@
+import { createFileRoute, notFound } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/not-found/via-loader')({
+ loader: () => {
+ throw notFound()
+ },
+ component: RouteComponent,
+ notFoundComponent: () => {
+ return (
+
+ Not Found "/not-found/via-loader"!
+
+ )
+ },
+})
+
+function RouteComponent() {
+ return (
+
+ Hello "/not-found/via-loader"!
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/posts.$postId.tsx b/e2e/solid-start/basic/app/routes/posts.$postId.tsx
new file mode 100644
index 0000000000..c6b2fcf5f9
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/posts.$postId.tsx
@@ -0,0 +1,36 @@
+import { ErrorComponent, Link, createFileRoute } from '@tanstack/solid-router'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+import { fetchPost } from '~/utils/posts'
+import { NotFound } from '~/components/NotFound'
+import { PostErrorComponent } from '~/components/PostErrorComponent'
+
+export const Route = createFileRoute('/posts/$postId')({
+ loader: async ({ params: { postId } }) => fetchPost({ data: postId }),
+ errorComponent: PostErrorComponent,
+ component: PostComponent,
+ notFoundComponent: () => {
+ return
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/posts.index.tsx b/e2e/solid-start/basic/app/routes/posts.index.tsx
new file mode 100644
index 0000000000..c7d8cfe19c
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/posts.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/')({
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return {post().title}
+{post().body}
+
+ Deep View
+
+ Select a post.
+}
diff --git a/e2e/solid-start/basic/app/routes/posts.tsx b/e2e/solid-start/basic/app/routes/posts.tsx
new file mode 100644
index 0000000000..0e94cd4d2c
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/posts.tsx
@@ -0,0 +1,47 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { For } from 'solid-js'
+
+import { fetchPosts } from '~/utils/posts'
+
+export const Route = createFileRoute('/posts')({
+ head: () => ({
+ meta: [
+ {
+ title: 'Posts page',
+ },
+ ],
+ }),
+ loader: async () => fetchPosts(),
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const posts = Route.useLoaderData()
+
+ return (
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/posts_.$postId.deep.tsx b/e2e/solid-start/basic/app/routes/posts_.$postId.deep.tsx
new file mode 100644
index 0000000000..f8d4627914
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/posts_.$postId.deep.tsx
@@ -0,0 +1,24 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+import { PostErrorComponent } from '~/components/PostErrorComponent'
+
+import { fetchPost } from '~/utils/posts'
+
+export const Route = createFileRoute('/posts_/$postId/deep')({
+ loader: async ({ params: { postId } }) => fetchPost({ data: postId }),
+ errorComponent: PostErrorComponent,
+ component: PostDeepComponent,
+})
+
+function PostDeepComponent() {
+ const post = Route.useLoaderData()
+
+ return (
+ -
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ }}
+
+
+
+ ← All Posts
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target.tsx b/e2e/solid-start/basic/app/routes/redirect/$target.tsx
new file mode 100644
index 0000000000..525dd9da25
--- /dev/null
+++ b/e2e/solid-start/basic/app/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-start/basic/app/routes/redirect/$target/index.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/index.tsx
new file mode 100644
index 0000000000..916afd450b
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/$target/index.tsx
@@ -0,0 +1,76 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/$target/')({
+ component: () => {
+ const preload = Route.useSearch({ select: (s) => s.preload })
+ return (
+ {post().title}
+{post().body}
+
+
+ )
+ },
+})
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/index.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/index.tsx
new file mode 100644
index 0000000000..d404672372
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/index.tsx
@@ -0,0 +1,87 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/$target/serverFn/')({
+ component: () => (
+
+
+ via-beforeLoad
+
+
+
+
+ via-beforeLoad (reloadDocument=true)
+
+
+
+
+ via-loader
+
+
+
+
+ via-loader (reloadDocument=true)
+
+
+
+
+ serverFn
+
+
+
+
+ ),
+})
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-beforeLoad.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-beforeLoad.tsx
new file mode 100644
index 0000000000..81f9dd2d36
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-beforeLoad.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { throwRedirect } from '~/components/throwRedirect'
+
+export const Route = createFileRoute(
+ '/redirect/$target/serverFn/via-beforeLoad',
+)({
+ beforeLoad: ({
+ params: { target },
+ search: { reloadDocument, externalHost },
+ }) => throwRedirect({ data: { target, reloadDocument, externalHost } }),
+ component: () => + redirect test with server functions (target {Route.useParams()().target} + ) +
+
+
+ via-beforeLoad
+
+
+
+
+ via-beforeLoad (reloadDocument=true)
+
+
+
+
+ via-loader
+
+
+
+
+ via-loader (reloadDocument=true)
+
+
+
+
+ via-useServerFn
+
+
+
+
+ via-useServerFn (reloadDocument=true)
+
+
+ {Route.fullPath}
,
+})
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-loader.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-loader.tsx
new file mode 100644
index 0000000000..0b6ac91c15
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-loader.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { throwRedirect } from '~/components/throwRedirect'
+
+export const Route = createFileRoute('/redirect/$target/serverFn/via-loader')({
+ loaderDeps: ({ search: { reloadDocument, externalHost } }) => ({
+ reloadDocument,
+ externalHost,
+ }),
+ loader: ({ params: { target }, deps: { reloadDocument, externalHost } }) =>
+ throwRedirect({ data: { target, reloadDocument, externalHost } }),
+ component: () => {Route.fullPath}
,
+})
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-useServerFn.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-useServerFn.tsx
new file mode 100644
index 0000000000..5b0c246474
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/$target/serverFn/via-useServerFn.tsx
@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { RedirectOnClick } from '~/components/RedirectOnClick'
+
+export const Route = createFileRoute(
+ '/redirect/$target/serverFn/via-useServerFn',
+)({
+ component: () => {
+ const params = Route.useParams()
+ const search = Route.useSearch()
+ return (
+ {Route.fullPath}
,
+})
diff --git a/e2e/solid-start/basic/app/routes/redirect/$target/via-loader.tsx b/e2e/solid-start/basic/app/routes/redirect/$target/via-loader.tsx
new file mode 100644
index 0000000000..5c059717c5
--- /dev/null
+++ b/e2e/solid-start/basic/app/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-start/basic/app/routes/redirect/index.tsx b/e2e/solid-start/basic/app/routes/redirect/index.tsx
new file mode 100644
index 0000000000..043f305e57
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/redirect/index.tsx
@@ -0,0 +1,28 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect/')({
+ component: () => (
+
+
+ internal
+ {' '}
+
+ external
+
+
+ ),
+})
diff --git a/e2e/solid-start/basic/app/routes/scripts.tsx b/e2e/solid-start/basic/app/routes/scripts.tsx
new file mode 100644
index 0000000000..530d346762
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/scripts.tsx
@@ -0,0 +1,31 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+const isProd = import.meta.env.PROD
+
+export const Route = createFileRoute('/scripts')({
+ head: () => ({
+ scripts: [
+ {
+ src: 'script.js',
+ },
+ isProd
+ ? undefined
+ : {
+ src: 'script2.js',
+ },
+ ],
+ }),
+ component: ScriptsComponent,
+})
+
+function ScriptsComponent() {
+ return (
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/search-params.tsx b/e2e/solid-start/basic/app/routes/search-params.tsx
new file mode 100644
index 0000000000..ec941d9a4c
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/search-params.tsx
@@ -0,0 +1,27 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+import { z } from 'zod'
+
+export const Route = createFileRoute('/search-params')({
+ component: () => {
+ const search = Route.useSearch()
+ return (
+ Scripts Test
++ Both `script.js` and `script2.js` are included in development, but only + `script.js` is included in production. +
+
+
+ )
+ },
+ validateSearch: z.object({
+ step: z.enum(['a', 'b', 'c']).optional(),
+ }),
+ loaderDeps: ({ search: { step } }) => ({ step }),
+ loader: ({ deps: { step } }) => {
+ if (step === undefined) {
+ throw redirect({
+ to: '/search-params',
+ from: '/search-params',
+ search: { step: 'a' },
+ })
+ }
+ },
+})
diff --git a/e2e/solid-start/basic/app/routes/stream.tsx b/e2e/solid-start/basic/app/routes/stream.tsx
new file mode 100644
index 0000000000..d1d21e344a
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/stream.tsx
@@ -0,0 +1,64 @@
+import { Await, createFileRoute } from '@tanstack/solid-router'
+import { createEffect, createSignal } from 'solid-js'
+
+export const Route = createFileRoute('/stream')({
+ component: Home,
+ loader() {
+ return {
+ promise: new PromiseSearchParams
+{search().step}
+
+ {promiseData}
+
+ )}
+ />
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/users.$userId.tsx b/e2e/solid-start/basic/app/routes/users.$userId.tsx
new file mode 100644
index 0000000000..6f95652e53
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/users.$userId.tsx
@@ -0,0 +1,35 @@
+import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import axios from 'redaxios'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+import type { User } from '~/utils/users'
+import { DEPLOY_URL } from '~/utils/users'
+import { NotFound } from '~/components/NotFound'
+import { UserErrorComponent } from '~/components/UserErrorComponent'
+
+export const Route = createFileRoute('/users/$userId')({
+ loader: async ({ params: { userId } }) => {
+ return await axios
+ .get
+ {streamData().map((d) => (
+
+ {d}
+ ))}
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/routes/users.index.tsx b/e2e/solid-start/basic/app/routes/users.index.tsx
new file mode 100644
index 0000000000..bbc96801a9
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/users.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/users/')({
+ component: UsersIndexComponent,
+})
+
+function UsersIndexComponent() {
+ return {user().name}
+{user().email}
+ Select a user.
+}
diff --git a/e2e/solid-start/basic/app/routes/users.tsx b/e2e/solid-start/basic/app/routes/users.tsx
new file mode 100644
index 0000000000..3c26badbb4
--- /dev/null
+++ b/e2e/solid-start/basic/app/routes/users.tsx
@@ -0,0 +1,49 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import axios from 'redaxios'
+
+import type { User } from '~/utils/users'
+import { DEPLOY_URL } from '~/utils/users'
+
+export const Route = createFileRoute('/users')({
+ loader: async () => {
+ return await axios
+ .get
+
+
+ )
+}
diff --git a/e2e/solid-start/basic/app/ssr.tsx b/e2e/solid-start/basic/app/ssr.tsx
new file mode 100644
index 0000000000..6d10bea05f
--- /dev/null
+++ b/e2e/solid-start/basic/app/ssr.tsx
@@ -0,0 +1,12 @@
+import {
+ createStartHandler,
+ defaultStreamHandler,
+} from '@tanstack/solid-start/server'
+import { getRouterManifest } from '@tanstack/solid-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+ createRouter,
+ getRouterManifest,
+})(defaultStreamHandler)
diff --git a/e2e/solid-start/basic/app/styles/app.css b/e2e/solid-start/basic/app/styles/app.css
new file mode 100644
index 0000000000..c53c870665
--- /dev/null
+++ b/e2e/solid-start/basic/app/styles/app.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ color-scheme: light dark;
+ }
+
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+
+ html,
+ body {
+ @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+ }
+
+ .using-mouse * {
+ outline: none !important;
+ }
+}
diff --git a/e2e/solid-start/basic/app/utils/posts.tsx b/e2e/solid-start/basic/app/utils/posts.tsx
new file mode 100644
index 0000000000..6c12105ab8
--- /dev/null
+++ b/e2e/solid-start/basic/app/utils/posts.tsx
@@ -0,0 +1,36 @@
+import { notFound } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+import axios from 'redaxios'
+
+export type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+export const fetchPost = createServerFn({ method: 'GET' })
+ .validator((postId: string) => postId)
+ .handler(async ({ data: postId }) => {
+ console.info(`Fetching post with id ${postId}...`)
+ const post = await axios
+ .get-
+ {[
+ ...users(),
+ { id: 'i-do-not-exist', name: 'Non-existent User', email: '' },
+ ].map((user) => {
+ return (
+
-
+
+ {user.name}+ +
+ )
+ })}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/components/NotFound.tsx b/e2e/solid-start/scroll-restoration/app/components/NotFound.tsx
new file mode 100644
index 0000000000..ca4c1960fa
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/components/NotFound.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/solid-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+
+
+ {isRoot() ? (
+
+ Home
+
+ ) : (
+ {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+
+ )}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/routeTree.gen.ts b/e2e/solid-start/scroll-restoration/app/routeTree.gen.ts
new file mode 100644
index 0000000000..d5cbca5b25
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/routeTree.gen.ts
@@ -0,0 +1,162 @@
+/* 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 IndexImport } from './routes/index'
+import { Route as testsWithSearchImport } from './routes/(tests)/with-search'
+import { Route as testsWithLoaderImport } from './routes/(tests)/with-loader'
+import { Route as testsNormalPageImport } from './routes/(tests)/normal-page'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsWithSearchRoute = testsWithSearchImport.update({
+ id: '/(tests)/with-search',
+ path: '/with-search',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsWithLoaderRoute = testsWithLoaderImport.update({
+ id: '/(tests)/with-loader',
+ path: '/with-loader',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const testsNormalPageRoute = testsNormalPageImport.update({
+ id: '/(tests)/normal-page',
+ path: '/normal-page',
+ getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/normal-page': {
+ id: '/(tests)/normal-page'
+ path: '/normal-page'
+ fullPath: '/normal-page'
+ preLoaderRoute: typeof testsNormalPageImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/with-loader': {
+ id: '/(tests)/with-loader'
+ path: '/with-loader'
+ fullPath: '/with-loader'
+ preLoaderRoute: typeof testsWithLoaderImport
+ parentRoute: typeof rootRoute
+ }
+ '/(tests)/with-search': {
+ id: '/(tests)/with-search'
+ path: '/with-search'
+ fullPath: '/with-search'
+ preLoaderRoute: typeof testsWithSearchImport
+ parentRoute: typeof rootRoute
+ }
+ }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/normal-page': typeof testsNormalPageRoute
+ '/with-loader': typeof testsWithLoaderRoute
+ '/with-search': typeof testsWithSearchRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/normal-page': typeof testsNormalPageRoute
+ '/with-loader': typeof testsWithLoaderRoute
+ '/with-search': typeof testsWithSearchRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/(tests)/normal-page': typeof testsNormalPageRoute
+ '/(tests)/with-loader': typeof testsWithLoaderRoute
+ '/(tests)/with-search': typeof testsWithSearchRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/' | '/normal-page' | '/with-loader' | '/with-search'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/' | '/normal-page' | '/with-loader' | '/with-search'
+ id:
+ | '__root__'
+ | '/'
+ | '/(tests)/normal-page'
+ | '/(tests)/with-loader'
+ | '/(tests)/with-search'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ testsNormalPageRoute: typeof testsNormalPageRoute
+ testsWithLoaderRoute: typeof testsWithLoaderRoute
+ testsWithSearchRoute: typeof testsWithSearchRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ testsNormalPageRoute: testsNormalPageRoute,
+ testsWithLoaderRoute: testsWithLoaderRoute,
+ testsWithSearchRoute: testsWithSearchRoute,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes
+ {children ||
+ The page you are looking for does not exist.
} ++ + + Start Over + +
+
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-loader.tsx b/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-loader.tsx
new file mode 100644
index 0000000000..aae7611b51
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-loader.tsx
@@ -0,0 +1,21 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { ScrollBlock } from '../-components/scroll-block'
+import { sleep } from '~/utils/posts'
+
+export const Route = createFileRoute('/(tests)/with-loader')({
+ loader: async () => {
+ await sleep(1000)
+ return { foo: 'bar' }
+ },
+ component: Component,
+})
+
+function Component() {
+ return (
+ normal-page
++
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-search.tsx b/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-search.tsx
new file mode 100644
index 0000000000..5d43b7f9bb
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/routes/(tests)/with-search.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { z } from 'zod'
+import { zodValidator } from '@tanstack/zod-adapter'
+import { ScrollBlock } from '../-components/scroll-block'
+
+export const Route = createFileRoute('/(tests)/with-search')({
+ validateSearch: zodValidator(z.object({ where: z.string() })),
+ component: Component,
+})
+
+function Component() {
+ return (
+ lazy-with-loader-page
++
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/routes/-components/scroll-block.tsx b/e2e/solid-start/scroll-restoration/app/routes/-components/scroll-block.tsx
new file mode 100644
index 0000000000..0539293f92
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/routes/-components/scroll-block.tsx
@@ -0,0 +1,16 @@
+export const atTheTopId = 'at-the-top'
+export const atTheBottomId = 'at-the-bottom'
+
+export function ScrollBlock({ number = 100 }: { number?: number }) {
+ return (
+ <>
+
+ {Array.from({ length: number }).map((_, i) => (
+ page-with-search
++
{i}
+ ))}
+
+ At the bottom
+
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/routes/__root.tsx b/e2e/solid-start/scroll-restoration/app/routes/__root.tsx
new file mode 100644
index 0000000000..5f34c665b2
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/routes/__root.tsx
@@ -0,0 +1,106 @@
+import * as Solid from 'solid-js'
+import {
+ Link,
+ Outlet,
+ createRootRoute,
+ linkOptions,
+ HeadContent,
+ Scripts,
+} from '@tanstack/solid-router'
+import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
+import { NotFound } from '~/components/NotFound'
+import appCss from '~/styles/app.css?url'
+import { seo } from '~/utils/seo'
+import { Dynamic } from 'solid-js/web'
+
+export const Route = createRootRoute({
+ head: () => ({
+ meta: [
+ {
+ charset: 'utf-8',
+ },
+ {
+ name: 'viewport',
+ content: 'width=device-width, initial-scale=1',
+ },
+ ...seo({
+ title:
+ 'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
+ description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
+ }),
+ ],
+ links: [
+ { rel: 'stylesheet', href: appCss },
+ {
+ rel: 'apple-touch-icon',
+ sizes: '180x180',
+ href: '/apple-touch-icon.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '32x32',
+ href: '/favicon-32x32.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '16x16',
+ href: '/favicon-16x16.png',
+ },
+ { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+ { rel: 'icon', href: '/favicon.ico' },
+ ],
+ }),
+ errorComponent: (props) => {
+ return {props.error.stack}
+ }, + notFoundComponent: () =>+
+ + + ) +} + +function Nav({ type }: { type: 'header' | 'footer' }) { + const Elem = type === 'header' ? 'header' : 'footer' + const prefix = type === 'header' ? 'Head' : 'Foot' + return ( +
+
+ )
+}
diff --git a/e2e/solid-start/scroll-restoration/app/ssr.tsx b/e2e/solid-start/scroll-restoration/app/ssr.tsx
new file mode 100644
index 0000000000..6d10bea05f
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/ssr.tsx
@@ -0,0 +1,12 @@
+import {
+ createStartHandler,
+ defaultStreamHandler,
+} from '@tanstack/solid-start/server'
+import { getRouterManifest } from '@tanstack/solid-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+ createRouter,
+ getRouterManifest,
+})(defaultStreamHandler)
diff --git a/e2e/solid-start/scroll-restoration/app/styles/app.css b/e2e/solid-start/scroll-restoration/app/styles/app.css
new file mode 100644
index 0000000000..c53c870665
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/styles/app.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ color-scheme: light dark;
+ }
+
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+
+ html,
+ body {
+ @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+ }
+
+ .using-mouse * {
+ outline: none !important;
+ }
+}
diff --git a/e2e/solid-start/scroll-restoration/app/utils/posts.tsx b/e2e/solid-start/scroll-restoration/app/utils/posts.tsx
new file mode 100644
index 0000000000..56007aa0f6
--- /dev/null
+++ b/e2e/solid-start/scroll-restoration/app/utils/posts.tsx
@@ -0,0 +1,37 @@
+import axios from 'redaxios'
+
+export function sleep(ms: number) {
+ return new Promise((r) => setTimeout(r, ms))
+}
+
+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
+ .getWelcome 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: '/with-loader' }), + linkOptions({ to: '/with-search', search: { where: 'footer' } }), + ] as const + ).map((options, i) => ( +
+
+ ))}
+ {options.to} tests
++ + {options.to}#at-the-bottom + +
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/components/NotFound.tsx b/e2e/solid-start/server-functions/app/components/NotFound.tsx
new file mode 100644
index 0000000000..eb0a968d39
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/components/NotFound.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/solid-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+
+
+ {isRoot() ? (
+
+ Home
+
+ ) : (
+ {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+
+ )}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routeTree.gen.ts b/e2e/solid-start/server-functions/app/routeTree.gen.ts
new file mode 100644
index 0000000000..4a34fccd1c
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routeTree.gen.ts
@@ -0,0 +1,456 @@
+/* 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 SubmitPostFormdataImport } from './routes/submit-post-formdata'
+import { Route as StatusImport } from './routes/status'
+import { Route as SerializeFormDataImport } from './routes/serialize-form-data'
+import { Route as ReturnNullImport } from './routes/return-null'
+import { Route as RawResponseImport } from './routes/raw-response'
+import { Route as MultipartImport } from './routes/multipart'
+import { Route as IsomorphicFnsImport } from './routes/isomorphic-fns'
+import { Route as HeadersImport } from './routes/headers'
+import { Route as EnvOnlyImport } from './routes/env-only'
+import { Route as DeadCodePreserveImport } from './routes/dead-code-preserve'
+import { Route as ConsistentImport } from './routes/consistent'
+import { Route as AbortSignalImport } from './routes/abort-signal'
+import { Route as IndexImport } from './routes/index'
+import { Route as CookiesIndexImport } from './routes/cookies/index'
+import { Route as CookiesSetImport } from './routes/cookies/set'
+
+// Create/Update Routes
+
+const SubmitPostFormdataRoute = SubmitPostFormdataImport.update({
+ id: '/submit-post-formdata',
+ path: '/submit-post-formdata',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const StatusRoute = StatusImport.update({
+ id: '/status',
+ path: '/status',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const SerializeFormDataRoute = SerializeFormDataImport.update({
+ id: '/serialize-form-data',
+ path: '/serialize-form-data',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ReturnNullRoute = ReturnNullImport.update({
+ id: '/return-null',
+ path: '/return-null',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const RawResponseRoute = RawResponseImport.update({
+ id: '/raw-response',
+ path: '/raw-response',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const MultipartRoute = MultipartImport.update({
+ id: '/multipart',
+ path: '/multipart',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const IsomorphicFnsRoute = IsomorphicFnsImport.update({
+ id: '/isomorphic-fns',
+ path: '/isomorphic-fns',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const HeadersRoute = HeadersImport.update({
+ id: '/headers',
+ path: '/headers',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const EnvOnlyRoute = EnvOnlyImport.update({
+ id: '/env-only',
+ path: '/env-only',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const DeadCodePreserveRoute = DeadCodePreserveImport.update({
+ id: '/dead-code-preserve',
+ path: '/dead-code-preserve',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ConsistentRoute = ConsistentImport.update({
+ id: '/consistent',
+ path: '/consistent',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const AbortSignalRoute = AbortSignalImport.update({
+ id: '/abort-signal',
+ path: '/abort-signal',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const CookiesIndexRoute = CookiesIndexImport.update({
+ id: '/cookies/',
+ path: '/cookies/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const CookiesSetRoute = CookiesSetImport.update({
+ id: '/cookies/set',
+ path: '/cookies/set',
+ getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/abort-signal': {
+ id: '/abort-signal'
+ path: '/abort-signal'
+ fullPath: '/abort-signal'
+ preLoaderRoute: typeof AbortSignalImport
+ parentRoute: typeof rootRoute
+ }
+ '/consistent': {
+ id: '/consistent'
+ path: '/consistent'
+ fullPath: '/consistent'
+ preLoaderRoute: typeof ConsistentImport
+ parentRoute: typeof rootRoute
+ }
+ '/dead-code-preserve': {
+ id: '/dead-code-preserve'
+ path: '/dead-code-preserve'
+ fullPath: '/dead-code-preserve'
+ preLoaderRoute: typeof DeadCodePreserveImport
+ parentRoute: typeof rootRoute
+ }
+ '/env-only': {
+ id: '/env-only'
+ path: '/env-only'
+ fullPath: '/env-only'
+ preLoaderRoute: typeof EnvOnlyImport
+ parentRoute: typeof rootRoute
+ }
+ '/headers': {
+ id: '/headers'
+ path: '/headers'
+ fullPath: '/headers'
+ preLoaderRoute: typeof HeadersImport
+ parentRoute: typeof rootRoute
+ }
+ '/isomorphic-fns': {
+ id: '/isomorphic-fns'
+ path: '/isomorphic-fns'
+ fullPath: '/isomorphic-fns'
+ preLoaderRoute: typeof IsomorphicFnsImport
+ parentRoute: typeof rootRoute
+ }
+ '/multipart': {
+ id: '/multipart'
+ path: '/multipart'
+ fullPath: '/multipart'
+ preLoaderRoute: typeof MultipartImport
+ parentRoute: typeof rootRoute
+ }
+ '/raw-response': {
+ id: '/raw-response'
+ path: '/raw-response'
+ fullPath: '/raw-response'
+ preLoaderRoute: typeof RawResponseImport
+ parentRoute: typeof rootRoute
+ }
+ '/return-null': {
+ id: '/return-null'
+ path: '/return-null'
+ fullPath: '/return-null'
+ preLoaderRoute: typeof ReturnNullImport
+ parentRoute: typeof rootRoute
+ }
+ '/serialize-form-data': {
+ id: '/serialize-form-data'
+ path: '/serialize-form-data'
+ fullPath: '/serialize-form-data'
+ preLoaderRoute: typeof SerializeFormDataImport
+ parentRoute: typeof rootRoute
+ }
+ '/status': {
+ id: '/status'
+ path: '/status'
+ fullPath: '/status'
+ preLoaderRoute: typeof StatusImport
+ parentRoute: typeof rootRoute
+ }
+ '/submit-post-formdata': {
+ id: '/submit-post-formdata'
+ path: '/submit-post-formdata'
+ fullPath: '/submit-post-formdata'
+ preLoaderRoute: typeof SubmitPostFormdataImport
+ parentRoute: typeof rootRoute
+ }
+ '/cookies/set': {
+ id: '/cookies/set'
+ path: '/cookies/set'
+ fullPath: '/cookies/set'
+ preLoaderRoute: typeof CookiesSetImport
+ parentRoute: typeof rootRoute
+ }
+ '/cookies/': {
+ id: '/cookies/'
+ path: '/cookies'
+ fullPath: '/cookies'
+ preLoaderRoute: typeof CookiesIndexImport
+ parentRoute: typeof rootRoute
+ }
+ }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/abort-signal': typeof AbortSignalRoute
+ '/consistent': typeof ConsistentRoute
+ '/dead-code-preserve': typeof DeadCodePreserveRoute
+ '/env-only': typeof EnvOnlyRoute
+ '/headers': typeof HeadersRoute
+ '/isomorphic-fns': typeof IsomorphicFnsRoute
+ '/multipart': typeof MultipartRoute
+ '/raw-response': typeof RawResponseRoute
+ '/return-null': typeof ReturnNullRoute
+ '/serialize-form-data': typeof SerializeFormDataRoute
+ '/status': typeof StatusRoute
+ '/submit-post-formdata': typeof SubmitPostFormdataRoute
+ '/cookies/set': typeof CookiesSetRoute
+ '/cookies': typeof CookiesIndexRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/abort-signal': typeof AbortSignalRoute
+ '/consistent': typeof ConsistentRoute
+ '/dead-code-preserve': typeof DeadCodePreserveRoute
+ '/env-only': typeof EnvOnlyRoute
+ '/headers': typeof HeadersRoute
+ '/isomorphic-fns': typeof IsomorphicFnsRoute
+ '/multipart': typeof MultipartRoute
+ '/raw-response': typeof RawResponseRoute
+ '/return-null': typeof ReturnNullRoute
+ '/serialize-form-data': typeof SerializeFormDataRoute
+ '/status': typeof StatusRoute
+ '/submit-post-formdata': typeof SubmitPostFormdataRoute
+ '/cookies/set': typeof CookiesSetRoute
+ '/cookies': typeof CookiesIndexRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/abort-signal': typeof AbortSignalRoute
+ '/consistent': typeof ConsistentRoute
+ '/dead-code-preserve': typeof DeadCodePreserveRoute
+ '/env-only': typeof EnvOnlyRoute
+ '/headers': typeof HeadersRoute
+ '/isomorphic-fns': typeof IsomorphicFnsRoute
+ '/multipart': typeof MultipartRoute
+ '/raw-response': typeof RawResponseRoute
+ '/return-null': typeof ReturnNullRoute
+ '/serialize-form-data': typeof SerializeFormDataRoute
+ '/status': typeof StatusRoute
+ '/submit-post-formdata': typeof SubmitPostFormdataRoute
+ '/cookies/set': typeof CookiesSetRoute
+ '/cookies/': typeof CookiesIndexRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | '/abort-signal'
+ | '/consistent'
+ | '/dead-code-preserve'
+ | '/env-only'
+ | '/headers'
+ | '/isomorphic-fns'
+ | '/multipart'
+ | '/raw-response'
+ | '/return-null'
+ | '/serialize-form-data'
+ | '/status'
+ | '/submit-post-formdata'
+ | '/cookies/set'
+ | '/cookies'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/'
+ | '/abort-signal'
+ | '/consistent'
+ | '/dead-code-preserve'
+ | '/env-only'
+ | '/headers'
+ | '/isomorphic-fns'
+ | '/multipart'
+ | '/raw-response'
+ | '/return-null'
+ | '/serialize-form-data'
+ | '/status'
+ | '/submit-post-formdata'
+ | '/cookies/set'
+ | '/cookies'
+ id:
+ | '__root__'
+ | '/'
+ | '/abort-signal'
+ | '/consistent'
+ | '/dead-code-preserve'
+ | '/env-only'
+ | '/headers'
+ | '/isomorphic-fns'
+ | '/multipart'
+ | '/raw-response'
+ | '/return-null'
+ | '/serialize-form-data'
+ | '/status'
+ | '/submit-post-formdata'
+ | '/cookies/set'
+ | '/cookies/'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ AbortSignalRoute: typeof AbortSignalRoute
+ ConsistentRoute: typeof ConsistentRoute
+ DeadCodePreserveRoute: typeof DeadCodePreserveRoute
+ EnvOnlyRoute: typeof EnvOnlyRoute
+ HeadersRoute: typeof HeadersRoute
+ IsomorphicFnsRoute: typeof IsomorphicFnsRoute
+ MultipartRoute: typeof MultipartRoute
+ RawResponseRoute: typeof RawResponseRoute
+ ReturnNullRoute: typeof ReturnNullRoute
+ SerializeFormDataRoute: typeof SerializeFormDataRoute
+ StatusRoute: typeof StatusRoute
+ SubmitPostFormdataRoute: typeof SubmitPostFormdataRoute
+ CookiesSetRoute: typeof CookiesSetRoute
+ CookiesIndexRoute: typeof CookiesIndexRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ AbortSignalRoute: AbortSignalRoute,
+ ConsistentRoute: ConsistentRoute,
+ DeadCodePreserveRoute: DeadCodePreserveRoute,
+ EnvOnlyRoute: EnvOnlyRoute,
+ HeadersRoute: HeadersRoute,
+ IsomorphicFnsRoute: IsomorphicFnsRoute,
+ MultipartRoute: MultipartRoute,
+ RawResponseRoute: RawResponseRoute,
+ ReturnNullRoute: ReturnNullRoute,
+ SerializeFormDataRoute: SerializeFormDataRoute,
+ StatusRoute: StatusRoute,
+ SubmitPostFormdataRoute: SubmitPostFormdataRoute,
+ CookiesSetRoute: CookiesSetRoute,
+ CookiesIndexRoute: CookiesIndexRoute,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes
+ {children ||
+ The page you are looking for does not exist.
} ++ + + Start Over + +
+{props.error.stack}
+ }, + notFoundComponent: () =>
+
+
+ +
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/consistent.tsx b/e2e/solid-start/server-functions/app/routes/consistent.tsx
new file mode 100644
index 0000000000..9e4c1b3b08
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/consistent.tsx
@@ -0,0 +1,121 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import * as Solid from 'solid-js'
+import { createServerFn } from '@tanstack/solid-start'
+
+/**
+ * This checks whether the returned payloads from a
+ * server function are the same, regardless of whether the server function is
+ * called directly from the client or from within the server function.
+ * @link https://github.com/TanStack/router/issues/1866
+ * @link https://github.com/TanStack/router/issues/2481
+ */
+
+export const Route = createFileRoute('/consistent')({
+ component: ConsistentServerFnCalls,
+ loader: async () => {
+ const data = await cons_serverGetFn1({ data: { username: 'TEST' } })
+ console.log('cons_serverGetFn1', data)
+ return { data }
+ },
+})
+
+const cons_getFn1 = createServerFn()
+ .validator((d: { username: string }) => d)
+ .handler(({ data }) => {
+ return { payload: data }
+ })
+
+const cons_serverGetFn1 = createServerFn()
+ .validator((d: { username: string }) => d)
+ .handler(async ({ data }) => {
+ return cons_getFn1({ data })
+ })
+
+const cons_postFn1 = createServerFn({ method: 'POST' })
+ .validator((d: { username: string }) => d)
+ .handler(({ data }) => {
+ return { payload: data }
+ })
+
+const cons_serverPostFn1 = createServerFn({ method: 'POST' })
+ .validator((d: { username: string }) => d)
+ .handler(({ data }) => {
+ return cons_postFn1({ data })
+ })
+
+function ConsistentServerFnCalls() {
+ const [getServerResult, setGetServerResult] = Solid.createSignal({})
+ const [getDirectResult, setGetDirectResult] = Solid.createSignal({})
+
+ const [postServerResult, setPostServerResult] = Solid.createSignal({})
+ const [postDirectResult, setPostDirectResult] = Solid.createSignal({})
+
+ return (
+ + +
+ result:
+ {result() ?? '$undefined'}
+
+ message:{' '}
+
+ {errorMessage() ?? '$undefined'}
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/cookies/index.tsx b/e2e/solid-start/server-functions/app/routes/cookies/index.tsx
new file mode 100644
index 0000000000..5cccd18057
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/cookies/index.tsx
@@ -0,0 +1,24 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+import { z } from 'zod'
+
+const cookieSchema = z
+ .object({ value: z.string() })
+ .catch(() => ({ value: `CLIENT-${Date.now()}` }))
+export const Route = createFileRoute('/cookies/')({
+ validateSearch: cookieSchema,
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const search = Route.useSearch()
+ return (
+
+ got to route that sets the cookies with {JSON.stringify(search())}
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/cookies/set.tsx b/e2e/solid-start/server-functions/app/routes/cookies/set.tsx
new file mode 100644
index 0000000000..32e06725cf
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/cookies/set.tsx
@@ -0,0 +1,66 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+import { setCookie } from '@tanstack/solid-start/server'
+import { z } from 'zod'
+import Cookies from 'js-cookie'
+import * as Solid from 'solid-js'
+
+const cookieSchema = z.object({ value: z.string() })
+
+export const Route = createFileRoute('/cookies/set')({
+ validateSearch: cookieSchema,
+ loaderDeps: ({ search }) => search,
+ loader: async ({ deps }) => {
+ await setCookieServerFn1({ data: deps })
+ await setCookieServerFn2({ data: deps })
+ },
+ component: RouteComponent,
+})
+
+export const setCookieServerFn1 = createServerFn()
+ .validator(cookieSchema)
+ .handler(({ data }) => {
+ setCookie(`cookie-1-${data.value}`, data.value)
+ setCookie(`cookie-2-${data.value}`, data.value)
+ })
+
+export const setCookieServerFn2 = createServerFn()
+ .validator(cookieSchema)
+ .handler(({ data }) => {
+ setCookie(`cookie-3-${data.value}`, data.value)
+ setCookie(`cookie-4-${data.value}`, data.value)
+ })
+
+function RouteComponent() {
+ const search = Route.useSearch()
+ const [cookiesFromDocument, setCookiesFromDocument] = Solid.createSignal<
+ RecordConsistent Server Fn GET Calls
++ This component checks whether the returned payloads from server function + are the same, regardless of whether the server function is called + directly from the client or from within the server function. +
+
+ It should return{' '}
+
+
+
+ {JSON.stringify({ payload: { username: 'TEST' } })}
+
+
+
+ {`GET: cons_getFn1 called from server cons_serverGetFn1 returns`}
+
+
+ {JSON.stringify(getServerResult())}
+
+
+ {`GET: cons_getFn1 called directly returns`}
+
+
+ {JSON.stringify(getDirectResult())}
+
+
+ {`POST: cons_postFn1 called from cons_serverPostFn1 returns`}
+
+
+ {JSON.stringify(postServerResult())}
+
+
+ {`POST: cons_postFn1 called directly returns`}
+
+
+ {JSON.stringify(postDirectResult())}
+
+
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/dead-code-preserve.tsx b/e2e/solid-start/server-functions/app/routes/dead-code-preserve.tsx
new file mode 100644
index 0000000000..96d7a3ca13
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/dead-code-preserve.tsx
@@ -0,0 +1,60 @@
+import * as fs from 'node:fs'
+import { createServerFn } from '@tanstack/solid-start'
+import { getRequestHeader } from '@tanstack/solid-start/server'
+import { createSignal } from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/dead-code-preserve')({
+ component: RouteComponent,
+})
+
+// by using this we make sure DCE still works - this errors when imported on the client
+
+const filePath = 'count-effect.txt'
+
+async function readCount() {
+ return parseInt(
+ await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
+ )
+}
+
+async function updateCount() {
+ const count = await readCount()
+ await fs.promises.writeFile(filePath, `${count + 1}`)
+ return true
+}
+
+const writeFileServerFn = createServerFn().handler(async () => {
+ // eslint-disable-next-line unused-imports/no-unused-vars
+ const test = await updateCount()
+ return getRequestHeader('X-Test')
+})
+
+const readFileServerFn = createServerFn().handler(async () => {
+ const data = await readCount()
+ return data
+})
+
+function RouteComponent() {
+ const [serverFnOutput, setServerFnOutput] = createSignalcookies result
+| cookie | +value | +
| {key} | +{value} | +
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/env-only.tsx b/e2e/solid-start/server-functions/app/routes/env-only.tsx
new file mode 100644
index 0000000000..df8f08eed2
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/env-only.tsx
@@ -0,0 +1,73 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { clientOnly, createServerFn, serverOnly } from '@tanstack/solid-start'
+import { createSignal } from 'solid-js'
+
+const serverEcho = serverOnly((input: string) => 'server got: ' + input)
+const clientEcho = clientOnly((input: string) => 'client got: ' + input)
+
+const testOnServer = createServerFn().handler(() => {
+ const serverOnServer = serverEcho('hello')
+ let clientOnServer: string
+ try {
+ clientOnServer = clientEcho('hello')
+ } catch (e) {
+ clientOnServer =
+ 'clientEcho threw an error: ' +
+ (e instanceof Error ? e.message : String(e))
+ }
+ return { serverOnServer, clientOnServer }
+})
+
+export const Route = createFileRoute('/env-only')({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const [results, setResults] = createSignalDead code test
++ This server function writes to a file as a side effect, then reads it. +
+ +Server output
+{serverFnOutput()}
+
+
+ {!!results() && (
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/headers.tsx b/e2e/solid-start/server-functions/app/routes/headers.tsx
new file mode 100644
index 0000000000..94ef5a05c1
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/headers.tsx
@@ -0,0 +1,68 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import * as Solid from 'solid-js'
+import { createServerFn } from '@tanstack/solid-start'
+import { getHeaders, setHeader } from '@tanstack/solid-start/server'
+import type { HTTPHeaderName } from '@tanstack/solid-start/server'
+
+export const Route = createFileRoute('/headers')({
+ loader: async () => {
+ return {
+ testHeaders: await getTestHeaders(),
+ }
+ },
+ component: () => {
+ const loaderData = Route.useLoaderData()
+ return
+
+
+ When we called the function on the server:
+
+
+
+ When we called the function on the server:
+
+ )}
+
+ serverEcho
+
+ When we called the function on the server:
+ {results()?.serverOnServer}
+ When we called the function on the client:
+ {results()?.serverOnClient}
+ +
+ clientEcho
+
+ When we called the function on the server:
+ {results()?.clientOnServer}
+ When we called the function on the client:
+ {results()?.clientOnClient}
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/index.tsx b/e2e/solid-start/server-functions/app/routes/index.tsx
new file mode 100644
index 0000000000..bf28fb8b00
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/index.tsx
@@ -0,0 +1,78 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+ Headers Test
+ +
+
+ Headers:
+
+ {JSON.stringify(testHeadersResult().headers, null, 2)}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/isomorphic-fns.tsx b/e2e/solid-start/server-functions/app/routes/isomorphic-fns.tsx
new file mode 100644
index 0000000000..3327b38af7
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/isomorphic-fns.tsx
@@ -0,0 +1,79 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createIsomorphicFn, createServerFn } from '@tanstack/solid-start'
+import { createSignal } from 'solid-js'
+
+const getEnv = createIsomorphicFn()
+ .server(() => 'server')
+ .client(() => 'client')
+
+const getServerEnv = createServerFn().handler(() => getEnv())
+
+const getEcho = createIsomorphicFn()
+ .server((input: string) => 'server received ' + input)
+ .client((input) => 'client received ' + input)
+
+const getServerEcho = createServerFn()
+ .validator((input: string) => input)
+ .handler(({ data }) => getEcho(data))
+
+export const Route = createFileRoute('/isomorphic-fns')({
+ component: RouteComponent,
+ loader() {
+ return {
+ envOnLoad: getEnv(),
+ }
+ },
+})
+
+function RouteComponent() {
+ const loaderData = Route.useLoaderData()
+ const [results, setResults] = createSignalServer functions E2E tests
+-
+
- + + Consistent server function returns both on client and server for GET + and POST calls + + +
- + + submitting multipart/form-data as server function input + + +
- + + Server function can return null for GET and POST calls + + +
- + + Server function can correctly send and receive FormData + + +
- + + server function can correctly send and receive headers + + +
- + + Direct POST submitting FormData to a Server function returns the + correct message + + +
- + + invoking a server function with custom response status code + + +
- + + isomorphic functions can have different implementations on client + and server + + +
- + + env-only functions can only be called on the server or client + respectively + + +
- + server function sets cookies + +
- + + dead code elimation only affects code after transformation + + +
- + aborting a server function call + +
- + server function returns raw response + +
+
+ {!!results() && (
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/multipart.tsx b/e2e/solid-start/server-functions/app/routes/multipart.tsx
new file mode 100644
index 0000000000..5e959da7ae
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/multipart.tsx
@@ -0,0 +1,107 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import * as Solid from 'solid-js'
+import { createServerFn } from '@tanstack/solid-start'
+
+export const Route = createFileRoute('/multipart')({
+ component: MultipartServerFnCall,
+})
+
+const multipartFormDataServerFn = createServerFn({ method: 'POST' })
+ .validator((x: unknown) => {
+ if (!(x instanceof FormData)) {
+ throw new Error('Invalid form data')
+ }
+
+ const value = x.get('input_field')
+ const file = x.get('input_file')
+
+ if (typeof value !== 'string') {
+ throw new Error('Submitted value is not a string')
+ }
+
+ if (!(file instanceof File)) {
+ throw new Error('File is required')
+ }
+
+ return {
+ submittedValue: value,
+ file,
+ }
+ })
+ .handler(async ({ data }) => {
+ const contents = await data.file.text()
+ return {
+ value: data.submittedValue,
+ file: {
+ name: data.file.name,
+ size: data.file.size,
+ contents: contents,
+ },
+ }
+ })
+
+function MultipartServerFnCall() {
+ let formRef: HTMLFormElement | undefined
+ const [multipartResult, setMultipartResult] = Solid.createSignal({})
+
+ const handleSubmit = (e: any) => {
+ e.preventDefault()
+
+ if (!formRef) {
+ return
+ }
+
+ const formData = new FormData(formRef)
+ multipartFormDataServerFn({ data: formData }).then(setMultipartResult)
+ }
+
+ return (
+
+
+
+ When we called the function on the server it returned:
+
+
+
+ When we called the function on the server it returned:
+
+ )}
+
+ getEnv
+
+ When we called the function on the server it returned:
+
+ {JSON.stringify(results()?.serverEnv)}
+
+ When we called the function on the client it returned:
+
+ {JSON.stringify(results()?.envOnClick)}
+
+ When we called the function during SSR it returned:
+
+ {JSON.stringify(loaderData().envOnLoad)}
+
+ +
+ echo
+
+ When we called the function on the server it returned:
+
+ {JSON.stringify(results()?.serverEcho)}
+
+ When we called the function on the client it returned:
+
+ {JSON.stringify(results()?.echo)}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/raw-response.tsx b/e2e/solid-start/server-functions/app/routes/raw-response.tsx
new file mode 100644
index 0000000000..d0ff217944
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/raw-response.tsx
@@ -0,0 +1,46 @@
+import * as Solid from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+export const Route = createFileRoute('/raw-response')({
+ component: RouteComponent,
+})
+
+const expectedValue = 'Hello from a server function!'
+export const rawResponseFn = createServerFn({ response: 'raw' }).handler(() => {
+ return new Response(expectedValue)
+})
+
+function RouteComponent() {
+ const [formDataResult, setFormDataResult] = Solid.createSignal({})
+
+ return (
+ Multipart Server Fn POST Call
+
+ It should return{' '}
+
+
+
+
+ {JSON.stringify({
+ value: 'test field value',
+ file: { name: 'my_file.txt', size: 9, contents: 'test data' },
+ })}
+
+
+
+
+
+ {JSON.stringify(multipartResult())}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/return-null.tsx b/e2e/solid-start/server-functions/app/routes/return-null.tsx
new file mode 100644
index 0000000000..2e789d2eef
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/return-null.tsx
@@ -0,0 +1,68 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+import * as Solid from 'solid-js'
+
+/**
+ * This checks whether the server function can
+ * return null without throwing an error or returning something else.
+ * @link https://github.com/TanStack/router/issues/2776
+ */
+
+export const Route = createFileRoute('/return-null')({
+ component: AllowServerFnReturnNull,
+})
+
+const $allow_return_null_getFn = createServerFn().handler(async () => {
+ return null
+})
+const $allow_return_null_postFn = createServerFn({ method: 'POST' }).handler(
+ async () => {
+ return null
+ },
+)
+
+function AllowServerFnReturnNull() {
+ const [getServerResult, setGetServerResult] = Solid.createSignalRaw Response
+
+ It should return{' '}
+
+
+
+
+
+ {expectedValue}
+
+
+
+ {JSON.stringify(formDataResult())}
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/serialize-form-data.tsx b/e2e/solid-start/server-functions/app/routes/serialize-form-data.tsx
new file mode 100644
index 0000000000..487d91e86d
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/serialize-form-data.tsx
@@ -0,0 +1,84 @@
+import * as Solid from 'solid-js'
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+const testValues = {
+ name: 'Sean',
+ age: 25,
+ pet1: 'dog',
+ pet2: 'cat',
+ __adder: 1,
+}
+
+export const greetUser = createServerFn()
+ .validator((data: FormData) => {
+ if (!(data instanceof FormData)) {
+ throw new Error('Invalid! FormData is required')
+ }
+ const name = data.get('name')
+ const age = data.get('age')
+ const pets = data.getAll('pet')
+
+ if (!name || !age || pets.length === 0) {
+ throw new Error('Name, age and pets are required')
+ }
+
+ return {
+ name: name.toString(),
+ age: parseInt(age.toString(), 10),
+ pets: pets.map((pet) => pet.toString()),
+ }
+ })
+ .handler(({ data: { name, age, pets } }) => {
+ return `Hello, ${name}! You are ${age + testValues.__adder} years old, and your favorite pets are ${pets.join(',')}.`
+ })
+
+export function SerializeFormDataFnCall() {
+ const [formDataResult, setFormDataResult] = Solid.createSignal({})
+
+ return (
+ Allow ServerFn to return `null`
++ This component checks whether the server function can return null + without throwing an error. +
+
+ It should return{' '}
+
+
+ {JSON.stringify(null)}
+
+
+ {`GET: $allow_return_null_getFn returns`}
+
+
+ {JSON.stringify(getServerResult())}
+
+
+ {`POST: $allow_return_null_postFn returns`}
+
+
+ {JSON.stringify(postServerResult())}
+
+
+
+ )
+}
+
+export const Route = createFileRoute('/serialize-form-data')({
+ component: SerializeFormDataFnCall,
+})
diff --git a/e2e/solid-start/server-functions/app/routes/status.tsx b/e2e/solid-start/server-functions/app/routes/status.tsx
new file mode 100644
index 0000000000..22b45bb28f
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/status.tsx
@@ -0,0 +1,30 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn, useServerFn } from '@tanstack/solid-start'
+import { setResponseStatus } from '@tanstack/solid-start/server'
+
+const helloFn = createServerFn().handler(() => {
+ setResponseStatus(225, `hello`)
+ return {
+ hello: 'world',
+ }
+})
+
+export const Route = createFileRoute('/status')({
+ component: StatusComponent,
+})
+
+function StatusComponent() {
+ const hello = useServerFn(helloFn)
+
+ return (
+ Serialize FormData Fn POST Call
+
+ It should return{' '}
+
+
+
+
+ Hello, {testValues.name}! You are{' '}
+ {testValues.age + testValues.__adder} years old, and your favorite{' '}
+ pets are {testValues.pet1},{testValues.pet2}.
+
+
+
+
+
+ {JSON.stringify(formDataResult())}
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/routes/submit-post-formdata.tsx b/e2e/solid-start/server-functions/app/routes/submit-post-formdata.tsx
new file mode 100644
index 0000000000..3fb6ea356f
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/routes/submit-post-formdata.tsx
@@ -0,0 +1,60 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+export const Route = createFileRoute('/submit-post-formdata')({
+ component: SubmitPostFormDataFn,
+})
+
+const testValues = {
+ name: 'Sean',
+}
+
+export const greetUser = createServerFn({ method: 'POST', response: 'raw' })
+ .validator((data: FormData) => {
+ if (!(data instanceof FormData)) {
+ throw new Error('Invalid! FormData is required')
+ }
+ const name = data.get('name')
+
+ if (!name) {
+ throw new Error('Name is required')
+ }
+
+ return {
+ name: name.toString(),
+ }
+ })
+ .handler(({ data: { name } }) => {
+ return new Response(`Hello, ${name}!`)
+ })
+
+function SubmitPostFormDataFn() {
+ return (
+
+
+ )
+}
diff --git a/e2e/solid-start/server-functions/app/ssr.tsx b/e2e/solid-start/server-functions/app/ssr.tsx
new file mode 100644
index 0000000000..6d10bea05f
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/ssr.tsx
@@ -0,0 +1,12 @@
+import {
+ createStartHandler,
+ defaultStreamHandler,
+} from '@tanstack/solid-start/server'
+import { getRouterManifest } from '@tanstack/solid-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+ createRouter,
+ getRouterManifest,
+})(defaultStreamHandler)
diff --git a/e2e/solid-start/server-functions/app/styles/app.css b/e2e/solid-start/server-functions/app/styles/app.css
new file mode 100644
index 0000000000..c53c870665
--- /dev/null
+++ b/e2e/solid-start/server-functions/app/styles/app.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ color-scheme: light dark;
+ }
+
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+
+ html,
+ body {
+ @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+ }
+
+ .using-mouse * {
+ outline: none !important;
+ }
+}
diff --git a/e2e/solid-start/server-functions/package.json b/e2e/solid-start/server-functions/package.json
new file mode 100644
index 0000000000..d46a4a8f85
--- /dev/null
+++ b/e2e/solid-start/server-functions/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "tanstack-solid-start-e2e-server-functions",
+ "private": true,
+ "sideEffects": false,
+ "type": "module",
+ "scripts": {
+ "dev": "vinxi dev --port 3000",
+ "dev:e2e": "vinxi dev",
+ "build": "vinxi build && tsc --noEmit",
+ "start": "vinxi start",
+ "test:e2e": "playwright test --project=chromium"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/solid-start": "workspace:^",
+ "js-cookie": "^3.0.5",
+ "solid-js": "^1.9.5",
+ "redaxios": "^0.5.1",
+ "tailwind-merge": "^2.6.0",
+ "vinxi": "0.5.3",
+ "zod": "^3.24.1"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.50.1",
+ "@tanstack/router-e2e-utils": "workspace:^",
+ "@types/js-cookie": "^3.0.6",
+ "@types/node": "^22.10.2",
+ "vite-plugin-solid": "^2.11.6",
+ "autoprefixer": "^10.4.20",
+ "combinate": "^1.1.11",
+ "postcss": "^8.5.1",
+ "tailwindcss": "^3.4.17",
+ "typescript": "^5.7.2",
+ "vite-tsconfig-paths": "^5.1.4"
+ }
+}
diff --git a/e2e/solid-start/server-functions/playwright.config.ts b/e2e/solid-start/server-functions/playwright.config.ts
new file mode 100644
index 0000000000..409765549f
--- /dev/null
+++ b/e2e/solid-start/server-functions/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+export 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 start --port ${PORT}`,
+ url: baseURL,
+ reuseExistingServer: !process.env.CI,
+ stdout: 'pipe',
+ },
+
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ ],
+})
diff --git a/e2e/solid-start/server-functions/postcss.config.mjs b/e2e/solid-start/server-functions/postcss.config.mjs
new file mode 100644
index 0000000000..2e7af2b7f1
--- /dev/null
+++ b/e2e/solid-start/server-functions/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/e2e/solid-start/server-functions/public/favicon.ico b/e2e/solid-start/server-functions/public/favicon.ico
new file mode 100644
index 0000000000..1a1751676f
Binary files /dev/null and b/e2e/solid-start/server-functions/public/favicon.ico differ
diff --git a/e2e/solid-start/server-functions/public/favicon.png b/e2e/solid-start/server-functions/public/favicon.png
new file mode 100644
index 0000000000..1e77bc0609
Binary files /dev/null and b/e2e/solid-start/server-functions/public/favicon.png differ
diff --git a/e2e/solid-start/server-functions/tailwind.config.mjs b/e2e/solid-start/server-functions/tailwind.config.mjs
new file mode 100644
index 0000000000..07c3598bac
--- /dev/null
+++ b/e2e/solid-start/server-functions/tailwind.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./app/**/*.{js,jsx,ts,tsx}'],
+}
diff --git a/e2e/solid-start/server-functions/tests/fixture.ts b/e2e/solid-start/server-functions/tests/fixture.ts
new file mode 100644
index 0000000000..abb7b1d564
--- /dev/null
+++ b/e2e/solid-start/server-functions/tests/fixture.ts
@@ -0,0 +1,28 @@
+import { test as base, expect } from '@playwright/test'
+
+export interface TestFixtureOptions {
+ whitelistErrors: ArraySubmit POST FormData Fn Call
+
+ It should return navigate and return{' '}
+
+
+
+
+ Hello, {testValues.name}!
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/components/NotFound.tsx b/e2e/solid-start/website/app/components/NotFound.tsx
new file mode 100644
index 0000000000..ca4c1960fa
--- /dev/null
+++ b/e2e/solid-start/website/app/components/NotFound.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/solid-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+
+
+ {isRoot() ? (
+
+ Home
+
+ ) : (
+ {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+
+ )}
+
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routeTree.gen.ts b/e2e/solid-start/website/app/routeTree.gen.ts
new file mode 100644
index 0000000000..32515b924b
--- /dev/null
+++ b/e2e/solid-start/website/app/routeTree.gen.ts
@@ -0,0 +1,370 @@
+/* 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 LibraryImport } from './routes/_library'
+import { Route as LibraryIndexImport } from './routes/_library.index'
+import { Route as ProjectIndexImport } from './routes/$project.index'
+import { Route as LibraryProjectImport } from './routes/_library.$project'
+import { Route as LibraryProjectVersionIndexImport } from './routes/_library.$project.$version.index'
+import { Route as ProjectVersionDocsIndexImport } from './routes/$project.$version.docs.index'
+import { Route as ProjectVersionDocsFrameworkFrameworkImport } from './routes/$project.$version.docs.framework.$framework'
+import { Route as ProjectVersionDocsFrameworkFrameworkIndexImport } from './routes/$project.$version.docs.framework.$framework.index'
+import { Route as ProjectVersionDocsFrameworkFrameworkSplatImport } from './routes/$project.$version.docs.framework.$framework.$'
+import { Route as ProjectVersionDocsFrameworkFrameworkExamplesSplatImport } from './routes/$project.$version.docs.framework.$framework.examples.$'
+
+// Create/Update Routes
+
+const LibraryRoute = LibraryImport.update({
+ id: '/_library',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LibraryIndexRoute = LibraryIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => LibraryRoute,
+} as any)
+
+const ProjectIndexRoute = ProjectIndexImport.update({
+ id: '/$project/',
+ path: '/$project/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LibraryProjectRoute = LibraryProjectImport.update({
+ id: '/$project',
+ path: '/$project',
+ getParentRoute: () => LibraryRoute,
+} as any)
+
+const LibraryProjectVersionIndexRoute = LibraryProjectVersionIndexImport.update(
+ {
+ id: '/$version/',
+ path: '/$version/',
+ getParentRoute: () => LibraryProjectRoute,
+ } as any,
+)
+
+const ProjectVersionDocsIndexRoute = ProjectVersionDocsIndexImport.update({
+ id: '/$project/$version/docs/',
+ path: '/$project/$version/docs/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ProjectVersionDocsFrameworkFrameworkRoute =
+ ProjectVersionDocsFrameworkFrameworkImport.update({
+ id: '/$project/$version/docs/framework/$framework',
+ path: '/$project/$version/docs/framework/$framework',
+ getParentRoute: () => rootRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkIndexRoute =
+ ProjectVersionDocsFrameworkFrameworkIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkSplatRoute =
+ ProjectVersionDocsFrameworkFrameworkSplatImport.update({
+ id: '/$',
+ path: '/$',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+const ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute =
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatImport.update({
+ id: '/examples/$',
+ path: '/examples/$',
+ getParentRoute: () => ProjectVersionDocsFrameworkFrameworkRoute,
+ } as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/_library': {
+ id: '/_library'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof LibraryImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/$project': {
+ id: '/_library/$project'
+ path: '/$project'
+ fullPath: '/$project'
+ preLoaderRoute: typeof LibraryProjectImport
+ parentRoute: typeof LibraryImport
+ }
+ '/$project/': {
+ id: '/$project/'
+ path: '/$project'
+ fullPath: '/$project'
+ preLoaderRoute: typeof ProjectIndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/': {
+ id: '/_library/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof LibraryIndexImport
+ parentRoute: typeof LibraryImport
+ }
+ '/$project/$version/docs/': {
+ id: '/$project/$version/docs/'
+ path: '/$project/$version/docs'
+ fullPath: '/$project/$version/docs'
+ preLoaderRoute: typeof ProjectVersionDocsIndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/_library/$project/$version/': {
+ id: '/_library/$project/$version/'
+ path: '/$version'
+ fullPath: '/$project/$version'
+ preLoaderRoute: typeof LibraryProjectVersionIndexImport
+ parentRoute: typeof LibraryProjectImport
+ }
+ '/$project/$version/docs/framework/$framework': {
+ id: '/$project/$version/docs/framework/$framework'
+ path: '/$project/$version/docs/framework/$framework'
+ fullPath: '/$project/$version/docs/framework/$framework'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ parentRoute: typeof rootRoute
+ }
+ '/$project/$version/docs/framework/$framework/$': {
+ id: '/$project/$version/docs/framework/$framework/$'
+ path: '/$'
+ fullPath: '/$project/$version/docs/framework/$framework/$'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkSplatImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ '/$project/$version/docs/framework/$framework/': {
+ id: '/$project/$version/docs/framework/$framework/'
+ path: '/'
+ fullPath: '/$project/$version/docs/framework/$framework/'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkIndexImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ '/$project/$version/docs/framework/$framework/examples/$': {
+ id: '/$project/$version/docs/framework/$framework/examples/$'
+ path: '/examples/$'
+ fullPath: '/$project/$version/docs/framework/$framework/examples/$'
+ preLoaderRoute: typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatImport
+ parentRoute: typeof ProjectVersionDocsFrameworkFrameworkImport
+ }
+ }
+}
+
+// Create and export the route tree
+
+interface LibraryProjectRouteChildren {
+ LibraryProjectVersionIndexRoute: typeof LibraryProjectVersionIndexRoute
+}
+
+const LibraryProjectRouteChildren: LibraryProjectRouteChildren = {
+ LibraryProjectVersionIndexRoute: LibraryProjectVersionIndexRoute,
+}
+
+const LibraryProjectRouteWithChildren = LibraryProjectRoute._addFileChildren(
+ LibraryProjectRouteChildren,
+)
+
+interface LibraryRouteChildren {
+ LibraryProjectRoute: typeof LibraryProjectRouteWithChildren
+ LibraryIndexRoute: typeof LibraryIndexRoute
+}
+
+const LibraryRouteChildren: LibraryRouteChildren = {
+ LibraryProjectRoute: LibraryProjectRouteWithChildren,
+ LibraryIndexRoute: LibraryIndexRoute,
+}
+
+const LibraryRouteWithChildren =
+ LibraryRoute._addFileChildren(LibraryRouteChildren)
+
+interface ProjectVersionDocsFrameworkFrameworkRouteChildren {
+ ProjectVersionDocsFrameworkFrameworkSplatRoute: typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ ProjectVersionDocsFrameworkFrameworkIndexRoute: typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute: typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+const ProjectVersionDocsFrameworkFrameworkRouteChildren: ProjectVersionDocsFrameworkFrameworkRouteChildren =
+ {
+ ProjectVersionDocsFrameworkFrameworkSplatRoute:
+ ProjectVersionDocsFrameworkFrameworkSplatRoute,
+ ProjectVersionDocsFrameworkFrameworkIndexRoute:
+ ProjectVersionDocsFrameworkFrameworkIndexRoute,
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute:
+ ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute,
+ }
+
+const ProjectVersionDocsFrameworkFrameworkRouteWithChildren =
+ ProjectVersionDocsFrameworkFrameworkRoute._addFileChildren(
+ ProjectVersionDocsFrameworkFrameworkRouteChildren,
+ )
+
+export interface FileRoutesByFullPath {
+ '': typeof LibraryRouteWithChildren
+ '/$project': typeof ProjectIndexRoute
+ '/': typeof LibraryIndexRoute
+ '/$project/$version/docs': typeof ProjectVersionDocsIndexRoute
+ '/$project/$version': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework/': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRoutesByTo {
+ '/$project': typeof ProjectIndexRoute
+ '/': typeof LibraryIndexRoute
+ '/$project/$version/docs': typeof ProjectVersionDocsIndexRoute
+ '/$project/$version': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/_library': typeof LibraryRouteWithChildren
+ '/_library/$project': typeof LibraryProjectRouteWithChildren
+ '/$project/': typeof ProjectIndexRoute
+ '/_library/': typeof LibraryIndexRoute
+ '/$project/$version/docs/': typeof ProjectVersionDocsIndexRoute
+ '/_library/$project/$version/': typeof LibraryProjectVersionIndexRoute
+ '/$project/$version/docs/framework/$framework': typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+ '/$project/$version/docs/framework/$framework/$': typeof ProjectVersionDocsFrameworkFrameworkSplatRoute
+ '/$project/$version/docs/framework/$framework/': typeof ProjectVersionDocsFrameworkFrameworkIndexRoute
+ '/$project/$version/docs/framework/$framework/examples/$': typeof ProjectVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | ''
+ | '/$project'
+ | '/'
+ | '/$project/$version/docs'
+ | '/$project/$version'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework/'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/$project'
+ | '/'
+ | '/$project/$version/docs'
+ | '/$project/$version'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ id:
+ | '__root__'
+ | '/_library'
+ | '/_library/$project'
+ | '/$project/'
+ | '/_library/'
+ | '/$project/$version/docs/'
+ | '/_library/$project/$version/'
+ | '/$project/$version/docs/framework/$framework'
+ | '/$project/$version/docs/framework/$framework/$'
+ | '/$project/$version/docs/framework/$framework/'
+ | '/$project/$version/docs/framework/$framework/examples/$'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ LibraryRoute: typeof LibraryRouteWithChildren
+ ProjectIndexRoute: typeof ProjectIndexRoute
+ ProjectVersionDocsIndexRoute: typeof ProjectVersionDocsIndexRoute
+ ProjectVersionDocsFrameworkFrameworkRoute: typeof ProjectVersionDocsFrameworkFrameworkRouteWithChildren
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ LibraryRoute: LibraryRouteWithChildren,
+ ProjectIndexRoute: ProjectIndexRoute,
+ ProjectVersionDocsIndexRoute: ProjectVersionDocsIndexRoute,
+ ProjectVersionDocsFrameworkFrameworkRoute:
+ ProjectVersionDocsFrameworkFrameworkRouteWithChildren,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes
+ {children ||
+ The page you are looking for does not exist.
} ++ + + Start Over + +
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx
new file mode 100644
index 0000000000..53e0c46c1b
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.examples.$.tsx
@@ -0,0 +1,32 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { NotFound } from '~/components/NotFound'
+import { capitalize, seo } from '~/utils/seo'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework/examples/$',
+)({
+ head: ({ params }) => ({
+ meta: seo({
+ title: `${capitalize(params._splat || '')} Example | TanStack ${capitalize(params.project)} ${capitalize(params.framework)}`,
+ }),
+ }),
+ component: Page,
+ notFoundComponent: () => {
+ return + {post().title} +
+{post().content}
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx
new file mode 100644
index 0000000000..3f6e4af4ef
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.index.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework/',
+)({
+ loader: () => {
+ throw redirect({
+ from: '/$project/$version/docs/framework/$framework/',
+ to: '/$project/$version/docs/framework/$framework/$',
+ params: {
+ _splat: 'overview',
+ },
+ })
+ },
+})
diff --git a/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.tsx b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.tsx
new file mode 100644
index 0000000000..62d59befae
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/$project.$version.docs.framework.$framework.tsx
@@ -0,0 +1,123 @@
+import {
+ Link,
+ Outlet,
+ createFileRoute,
+ useLocation,
+} from '@tanstack/solid-router'
+import { getDocumentHeads } from '~/server/document'
+import { getProject } from '~/server/projects'
+
+export const Route = createFileRoute(
+ '/$project/$version/docs/framework/$framework',
+)({
+ loader: async ({ params: { project } }) => {
+ const library = await getProject({ data: project })
+ const documents = await getDocumentHeads()
+ return {
+ library,
+ documents,
+ }
+ },
+ component: Page,
+})
+
+function Page() {
+ const project = Route.useLoaderData({ select: (s) => s.library })
+ const documents = Route.useLoaderData({ select: (s) => s.documents })
+ const pathname = useLocation({ select: (s) => s.pathname })
+
+ return (
+ + {params()._splat} example +
+
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routes/$project.$version.docs.index.tsx b/e2e/solid-start/website/app/routes/$project.$version.docs.index.tsx
new file mode 100644
index 0000000000..ff049e373c
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/$project.$version.docs.index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/$project/$version/docs/')({
+ loader: () => {
+ throw redirect({
+ from: '/$project/$version/docs',
+ to: '/$project/$version/docs/framework/$framework/$',
+ params: {
+ framework: 'solid',
+ _splat: 'overview',
+ },
+ })
+ },
+})
diff --git a/e2e/solid-start/website/app/routes/$project.index.tsx b/e2e/solid-start/website/app/routes/$project.index.tsx
new file mode 100644
index 0000000000..6e250ac011
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/$project.index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/$project/')({
+ loader: ({ params }) => {
+ throw redirect({
+ to: '/$project/$version',
+ params: {
+ project: params.project,
+ version: 'latest',
+ },
+ })
+ },
+})
diff --git a/e2e/solid-start/website/app/routes/__root.tsx b/e2e/solid-start/website/app/routes/__root.tsx
new file mode 100644
index 0000000000..8c3ced26f1
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/__root.tsx
@@ -0,0 +1,57 @@
+import { Outlet, createRootRoute } from '@tanstack/solid-router'
+import { NotFound } from '~/components/NotFound'
+import appCss from '~/styles/app.css?url'
+import { seo } from '~/utils/seo'
+
+export const Route = createRootRoute({
+ head: () => ({
+ meta: [
+ {
+ charset: 'utf-8',
+ },
+ {
+ name: 'viewport',
+ content: 'width=device-width, initial-scale=1',
+ },
+ ...seo({
+ title: 'TanStack Website',
+ description: `TanStack projects are type-safe!!!`,
+ }),
+ ],
+ links: [
+ { rel: 'stylesheet', href: appCss },
+ {
+ rel: 'apple-touch-icon',
+ sizes: '180x180',
+ href: '/apple-touch-icon.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '32x32',
+ href: '/favicon-32x32.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '16x16',
+ href: '/favicon-16x16.png',
+ },
+ { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+ { rel: 'icon', href: '/favicon.ico' },
+ ],
+ }),
+ errorComponent: (props) => {
+ return {props.error.stack}
+ }, + notFoundComponent: () =>
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routes/_library.$project.tsx b/e2e/solid-start/website/app/routes/_library.$project.tsx
new file mode 100644
index 0000000000..6fdcb8e530
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/_library.$project.tsx
@@ -0,0 +1,15 @@
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+import { getProject } from '~/server/projects'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/_library/$project')({
+ loader: ({ params: { project } }) => getProject({ data: project }),
+ head: ({ loaderData }) => ({
+ meta: seo({ title: `TanStack ${loaderData?.name || 'Project'}` }),
+ }),
+ component: () => (
+ + {params().project} landing page +
+version: {params().version}
++ + Get started with our documentation. + +
+
+
+ ),
+})
diff --git a/e2e/solid-start/website/app/routes/_library.index.tsx b/e2e/solid-start/website/app/routes/_library.index.tsx
new file mode 100644
index 0000000000..25bf776480
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/_library.index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_library/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/routes/_library.tsx b/e2e/solid-start/website/app/routes/_library.tsx
new file mode 100644
index 0000000000..c25ae5cfe1
--- /dev/null
+++ b/e2e/solid-start/website/app/routes/_library.tsx
@@ -0,0 +1,62 @@
+import {
+ Link,
+ Outlet,
+ createFileRoute,
+ useLocation,
+} from '@tanstack/solid-router'
+import { getProjects } from '~/server/projects'
+
+export const Route = createFileRoute('/_library')({
+ loader: async () => {
+ const projects = await getProjects()
+ return {
+ libraries: projects,
+ }
+ },
+ component: Layout,
+})
+
+function Layout() {
+ const loaderData = Route.useLoaderData()
+ const pathname = useLocation({ select: (s) => s.pathname })
+ return (
+ Website Landing Page
+
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/website/app/server/document.tsx b/e2e/solid-start/website/app/server/document.tsx
new file mode 100644
index 0000000000..0090c3b1b1
--- /dev/null
+++ b/e2e/solid-start/website/app/server/document.tsx
@@ -0,0 +1,55 @@
+import { notFound } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+const documents: Array<{ id: string; title: string; content: string }> = [
+ {
+ id: 'overview',
+ title: 'Overview',
+ content: 'This is the content of the overview document',
+ },
+ {
+ id: 'getting-started',
+ title: 'Getting Started',
+ content: 'To get started, you need to do the following...',
+ },
+ {
+ id: 'installation',
+ title: 'Installation',
+ content: 'To install this package, run the following command...',
+ },
+ {
+ id: 'ref/useQueryFunction',
+ title: 'useQuery Reference',
+ content: 'The useQuery function is used to...',
+ },
+ {
+ id: 'ref/useMutationFunction',
+ title: 'useMutation Reference',
+ content: 'The useMutation function is used to...',
+ },
+]
+
+export const getDocumentHeads = createServerFn({ method: 'GET' }).handler(
+ async () => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ return documents.map(({ id, title }) => ({
+ id,
+ title,
+ }))
+ },
+)
+
+export const getDocument = createServerFn({ method: 'GET' })
+ .validator((id: string) => id)
+ .handler(async ({ data: id }) => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ const document = documents.find((doc) => doc.id === id)
+
+ if (!document) {
+ throw notFound()
+ }
+
+ return document
+ })
diff --git a/e2e/solid-start/website/app/server/projects.tsx b/e2e/solid-start/website/app/server/projects.tsx
new file mode 100644
index 0000000000..a66de2b2ca
--- /dev/null
+++ b/e2e/solid-start/website/app/server/projects.tsx
@@ -0,0 +1,33 @@
+import { createServerFn } from '@tanstack/solid-start'
+import { notFound } from '@tanstack/solid-router'
+import { capitalize } from '~/utils/seo'
+
+const projects = ['router', 'table', 'query', 'form', 'ranger']
+
+export const getProjects = createServerFn({ method: 'GET' }).handler(
+ async () => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ return projects
+ },
+)
+
+export const getProject = createServerFn({ method: 'GET' })
+ .validator((project: string) => project)
+ .handler(async (ctx) => {
+ await new Promise((resolve) => setTimeout(resolve, 200))
+
+ const selectedProject = projects.find((p) => p === ctx.data.toLowerCase())
+
+ if (!selectedProject) {
+ throw notFound()
+ }
+
+ return {
+ id: selectedProject,
+ name: capitalize(selectedProject),
+ versions: ['latest', 'v2', 'v1'],
+ frameworks: ['solid', 'react', 'vue', 'solidjs', 'svelte'],
+ examples: ['basic', 'kitchen-sink'],
+ }
+ })
diff --git a/e2e/solid-start/website/app/ssr.tsx b/e2e/solid-start/website/app/ssr.tsx
new file mode 100644
index 0000000000..ebd14c8120
--- /dev/null
+++ b/e2e/solid-start/website/app/ssr.tsx
@@ -0,0 +1,13 @@
+/// + {pathname()} +
+{err.error.stack}
, + defaultNotFoundComponent: () =>not found
, + scrollRestoration: true, + }) + + return router +} + +declare module '@tanstack/solid-router' { + interface Register { + router: ReturnType
+ {children}
+
+
+
+
+ Index
+ About
+
+
+ About
+Hello world!
+
+
+# TanStack Start
+
+
+
+🤖 Type-safe router w/ built-in caching & URL state management for React!
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/tannerlinsley/react-query), [React Table](https://github.com/tanstack/react-table), [React Charts](https://github.com/tannerlinsley/react-charts), [React Virtual](https://github.com/tannerlinsley/react-virtual)
+
+## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
diff --git a/packages/solid-start-api-routes/eslint.config.js b/packages/solid-start-api-routes/eslint.config.js
new file mode 100644
index 0000000000..931f0ec774
--- /dev/null
+++ b/packages/solid-start-api-routes/eslint.config.js
@@ -0,0 +1,31 @@
+// @ts-check
+
+import pluginReact from '@eslint-react/eslint-plugin'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+ ...rootConfig,
+ {
+ ...pluginReact.configs.recommended,
+ files: ['**/*.{ts,tsx}'],
+ },
+ {
+ plugins: {
+ 'react-hooks': pluginReactHooks,
+ },
+ rules: {
+ '@eslint-react/no-unstable-context-value': 'off',
+ '@eslint-react/no-unstable-default-props': 'off',
+ '@eslint-react/dom/no-missing-button-type': 'off',
+ 'react-hooks/exhaustive-deps': 'error',
+ 'react-hooks/rules-of-hooks': 'error',
+ },
+ },
+ {
+ files: ['**/__tests__/**'],
+ rules: {
+ '@typescript-eslint/no-unnecessary-condition': 'off',
+ },
+ },
+]
diff --git a/packages/solid-start-api-routes/package.json b/packages/solid-start-api-routes/package.json
new file mode 100644
index 0000000000..554e6e59dc
--- /dev/null
+++ b/packages/solid-start-api-routes/package.json
@@ -0,0 +1,72 @@
+{
+ "name": "@tanstack/solid-start-api-routes",
+ "version": "1.111.3",
+ "description": "Modern and scalable routing for React applications",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/router.git",
+ "directory": "packages/start"
+ },
+ "homepage": "https://tanstack.com/start",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "react",
+ "location",
+ "router",
+ "routing",
+ "async",
+ "async router",
+ "typescript"
+ ],
+ "scripts": {
+ "clean": "rimraf ./dist && rimraf ./coverage",
+ "test": "pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
+ "test:unit": "exit 0; vitest",
+ "test:eslint": "eslint ./src",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js",
+ "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+ "test:types:ts57": "tsc",
+ "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+ "build": "vite build"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "engines": {
+ "node": ">=12"
+ },
+ "dependencies": {
+ "@tanstack/router-core": "workspace:^",
+ "@tanstack/solid-start-server": "workspace:^",
+ "vinxi": "0.5.3"
+ },
+ "devDependencies": {
+ "typescript": "^5.7.2"
+ }
+}
diff --git a/packages/solid-start-api-routes/src/index.ts b/packages/solid-start-api-routes/src/index.ts
new file mode 100644
index 0000000000..46b5d3db43
--- /dev/null
+++ b/packages/solid-start-api-routes/src/index.ts
@@ -0,0 +1,369 @@
+import { eventHandler, toWebRequest } from '@tanstack/solid-start-server'
+import vinxiFileRoutes from 'vinxi/routes'
+import type { ResolveParams } from '@tanstack/router-core'
+
+export type StartAPIHandlerCallback = (ctx: {
+ request: Request
+}) => Response | Promise
+
+# TanStack Start
+
+
+
+🤖 Type-safe router w/ built-in caching & URL state management for React!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/tannerlinsley/react-query), [React Table](https://github.com/tanstack/react-table), [React Charts](https://github.com/tannerlinsley/react-charts), [React Virtual](https://github.com/tannerlinsley/react-virtual)
+
+## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
diff --git a/packages/solid-start-client/eslint.config.js b/packages/solid-start-client/eslint.config.js
new file mode 100644
index 0000000000..7e6e3be789
--- /dev/null
+++ b/packages/solid-start-client/eslint.config.js
@@ -0,0 +1,25 @@
+// @ts-check
+
+// import pluginReact from '@eslint-react/eslint-plugin'
+// import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+ ...rootConfig,
+ {
+ // ...pluginReact.configs.recommended,
+ files: ['**/*.{ts,tsx}'],
+ },
+ {
+ plugins: {
+ // 'react-hooks': pluginReactHooks,
+ },
+ rules: {},
+ },
+ {
+ files: ['**/__tests__/**'],
+ rules: {
+ '@typescript-eslint/no-unnecessary-condition': 'off',
+ },
+ },
+]
diff --git a/packages/solid-start-client/package.json b/packages/solid-start-client/package.json
new file mode 100644
index 0000000000..7d65e36186
--- /dev/null
+++ b/packages/solid-start-client/package.json
@@ -0,0 +1,83 @@
+{
+ "name": "@tanstack/solid-start-client",
+ "version": "1.109.2",
+ "description": "Modern and scalable routing for React applications",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/router.git",
+ "directory": "packages/solid-start-client"
+ },
+ "homepage": "https://tanstack.com/start",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "react",
+ "location",
+ "router",
+ "routing",
+ "async",
+ "async router",
+ "typescript"
+ ],
+ "scripts": {
+ "clean": "rimraf ./dist && rimraf ./coverage",
+ "test": "pnpm test:deps && pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
+ "test:unit": "vitest",
+ "test:unit:dev": "vitest --watch",
+ "test:eslint": "eslint ./src",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js",
+ "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+ "test:types:ts57": "tsc",
+ "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+ "build": "vite build"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "engines": {
+ "node": ">=12"
+ },
+ "dependencies": {
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/router-core": "workspace:^",
+ "cookie-es": "^1.2.2",
+ "jsesc": "^3.1.0",
+ "tiny-invariant": "^1.3.3",
+ "tiny-warning": "^1.0.3",
+ "vinxi": "^0.5.3"
+ },
+ "devDependencies": {
+ "@solidjs/testing-library": "^0.8.10",
+ "@testing-library/jest-dom": "^6.6.3",
+ "@types/jsesc": "^3.0.3",
+ "vite-plugin-solid": "^2.11.2"
+ },
+ "peerDependencies": {
+ "solid-js": ">=1.0.0"
+ }
+}
diff --git a/packages/solid-start-client/src/Meta.tsx b/packages/solid-start-client/src/Meta.tsx
new file mode 100644
index 0000000000..5da9f9268b
--- /dev/null
+++ b/packages/solid-start-client/src/Meta.tsx
@@ -0,0 +1,10 @@
+import { HeadContent } from '@tanstack/solid-router'
+
+export const Meta = () => {
+ if (process.env.NODE_ENV === 'development') {
+ console.warn(
+ 'The Meta component is deprecated. Use `HeadContent` from `@tanstack/solid-router` instead.',
+ )
+ }
+ return I'm an RSC
,
+// I'm an RSC
,
+// ] as const,
+// }))
+
+// expectTypeOf(fn()).toEqualTypeOf<
+// Promise<{ rscs: readonly [ReadableStream, ReadableStream] }>
+// >()
+// })
+
+test('createServerFn returns undefined', () => {
+ const fn = createServerFn().handler(() => ({
+ nothing: undefined,
+ }))
+
+ expectTypeOf(fn()).toEqualTypeOf