SolidJS driver for TanStack Start (#3522)

This PR introduce support for Solid to be used with TanStack Start.

There are several ongoing refactors that can influence the timing of
when it's most feasible to merge this.

### Status (build and run e2e/solid-start/basic)
- [X] SSR
- [x] API Routes
- [x] Server Functions
- [x] HMR
- [x] Streaming (/stream route)
- [X] Timely hydration

### Ongoing refactors

Refactor to make router packages (aka. client-only features) more
agnostic:
- #3552
- #3540
- #3538
- #3171

Refactor to make start packages (aka. server features) more agnostic:
- #3546 
- #3563 
- #3565 

### Upstream changes to solid-router
- #3592
- #3591
- #3589
- #3616 

### Passing E2E test suites
- [x]  basic
- [x]  website
- [x] scroll-restoration
- [x] server-functions

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Brenley Dueck <[email protected]>
Co-authored-by: Iha Shin <[email protected]>
Co-authored-by: Brenley Dueck <[email protected]>

Author: 4 people

.github/workflows/pr.yml

@@ -48,4 +48,4 @@ jobs:
       - name: Build Packages
         run: pnpm run build:all
       - name: Publish Previews
-        run: pnpx pkg-pr-new publish --pnpm --compact './packages/*' --template './examples/*/*'
+        run: pnpx pkg-pr-new publish --pnpm './packages/*' --template './examples/*/*'

e2e/solid-start/basic/.gitignore

@@ -0,0 +1,22 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/solid-start/basic/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

e2e/solid-start/basic/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/solid-start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      tsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+    ],
+  },
+})

e2e/solid-start/basic/app/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/solid-start/api'
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler)

e2e/solid-start/basic/app/client.tsx

@@ -0,0 +1,8 @@
+/// <reference types="vinxi/types/client" />
+import { hydrate } from 'solid-js/web'
+import { StartClient } from '@tanstack/solid-start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrate(() => <StartClient router={router} />, document.body)

e2e/solid-start/basic/app/components/CustomMessage.tsx

@@ -0,0 +1,8 @@
+export function CustomMessage({ message }: { message: string }) {
+  return (
+    <div class="py-2">
+      <div class="italic">This is a custom message:</div>
+      <p>{message}</p>
+    </div>
+  )
+}

e2e/solid-start/basic/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from '@tanstack/solid-router'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  })
+
+  console.error(error)
+
+  return (
+    <div class="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+      <ErrorComponent error={error} />
+      <div class="flex gap-2 items-center flex-wrap">
+        <button
+          onClick={() => {
+            router.invalidate()
+          }}
+          class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+        >
+          Try Again
+        </button>
+        {isRoot() ? (
+          <Link
+            to="/"
+            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            onClick={(e) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

e2e/solid-start/basic/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/solid-router'
+
+export function NotFound({ children }: { children?: any }) {
+  return (
+    <div class="space-y-2 p-2" data-testid="default-not-found-component">
+      <div class="text-gray-600 dark:text-gray-400">
+        {children || <p>The page you are looking for does not exist.</p>}
+      </div>
+      <p class="flex items-center gap-2 flex-wrap">
+        <button
+          onClick={() => window.history.back()}
+          class="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Go back
+        </button>
+        <Link
+          to="/"
+          class="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Start Over
+        </Link>
+      </p>
+    </div>
+  )
+}

e2e/solid-start/basic/app/components/PostErrorComponent.tsx

@@ -0,0 +1,5 @@
+import { ErrorComponent, ErrorComponentProps } from '@tanstack/solid-router'
+
+export function PostErrorComponent({ error }: ErrorComponentProps) {
+  return <ErrorComponent error={error} />
+}

e2e/solid-start/basic/app/components/RedirectOnClick.tsx

@@ -0,0 +1,26 @@
+import { useServerFn } from '@tanstack/solid-start'
+import { throwRedirect } from './throwRedirect'
+
+interface RedirectOnClickProps {
+  target: 'internal' | 'external'
+  reloadDocument?: boolean
+  externalHost?: string
+}
+
+export function RedirectOnClick({
+  target,
+  reloadDocument,
+  externalHost,
+}: RedirectOnClickProps) {
+  const execute = useServerFn(throwRedirect)
+  return (
+    <button
+      data-testid="redirect-on-click"
+      onClick={() =>
+        execute({ data: { target, reloadDocument, externalHost } })
+      }
+    >
+      click me
+    </button>
+  )
+}

e2e/solid-start/basic/app/components/UserErrorComponent.tsx

@@ -0,0 +1,5 @@
+import { ErrorComponent, ErrorComponentProps } from '@tanstack/solid-router'
+
+export function UserErrorComponent({ error }: ErrorComponentProps) {
+  return <ErrorComponent error={error} />
+}

e2e/solid-start/basic/app/components/throwRedirect.ts

@@ -0,0 +1,20 @@
+import { redirect } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+
+export const throwRedirect = createServerFn()
+  .validator(
+    (opts: {
+      target: 'internal' | 'external'
+      reloadDocument?: boolean
+      externalHost?: string
+    }) => opts,
+  )
+  .handler((ctx) => {
+    if (ctx.data.target === 'internal') {
+      throw redirect({ to: '/posts', reloadDocument: ctx.data.reloadDocument })
+    }
+    const href = ctx.data.externalHost ?? 'http://example.com'
+    throw redirect({
+      href,
+    })
+  })