port to solid

Author: birkskyum

examples/solid/start-basic-auth/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tanstack-start-example-basic-auth",
+  "name": "tanstack-solid-start-example-basic-auth",
   "private": true,
   "sideEffects": false,
   "type": "module",
@@ -11,20 +11,17 @@
   },
   "dependencies": {
     "@prisma/client": "5.22.0",
-    "@tanstack/react-router": "^1.133.20",
-    "@tanstack/react-router-devtools": "^1.133.20",
-    "@tanstack/react-start": "^1.133.20",
+    "@tanstack/solid-router": "^1.133.20",
+    "@tanstack/solid-router-devtools": "^1.133.20",
+    "@tanstack/solid-start": "^1.133.20",
     "prisma": "^5.22.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "solid-js": "^1.9.5",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
+    "vite-plugin-solid": "^2.11.9",
     "@types/node": "^22.5.4",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
     "postcss": "^8.5.1",
     "autoprefixer": "^10.4.20",
     "tailwindcss": "^3.4.17",

examples/solid/start-basic-auth/src/components/Auth.tsx

@@ -1,50 +1,52 @@
+import type { JSX } from 'solid-js'
+
 export function Auth({
   actionText,
   onSubmit,
   status,
   afterSubmit,
 }: {
   actionText: string
-  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+  onSubmit: (e: HTMLFormElement) => void
   status: 'pending' | 'idle' | 'success' | 'error'
-  afterSubmit?: React.ReactNode
+  afterSubmit?: JSX.Element
 }) {
   return (
-    <div className="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
-      <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
-        <h1 className="text-2xl font-bold mb-4">{actionText}</h1>
+    <div class="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
+      <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
+        <h1 class="text-2xl font-bold mb-4">{actionText}</h1>
         <form
-          onSubmit={(e) => {
+          onSubmit={(e: any) => {
             e.preventDefault()
             onSubmit(e)
           }}
-          className="space-y-4"
+          class="space-y-4"
         >
           <div>
-            <label htmlFor="email" className="block text-xs">
+            <label for="email" class="block text-xs">
               Email
             </label>
             <input
               type="email"
               name="email"
               id="email"
-              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+              class="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
             />
           </div>
           <div>
-            <label htmlFor="password" className="block text-xs">
+            <label for="password" class="block text-xs">
               Password
             </label>
             <input
               type="password"
               name="password"
               id="password"
-              className="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
+              class="px-2 py-1 w-full rounded border border-gray-500/20 bg-white dark:bg-gray-800"
             />
           </div>
           <button
             type="submit"
-            className="w-full bg-cyan-600 text-white rounded py-2 font-black uppercase"
+            class="w-full bg-cyan-600 text-white rounded py-2 font-black uppercase"
             disabled={status === 'pending'}
           >
             {status === 'pending' ? '...' : actionText}

examples/solid/start-basic-auth/src/components/DefaultCatchBoundary.tsx

@@ -4,8 +4,8 @@ import {
   rootRouteId,
   useMatch,
   useRouter,
-} from '@tanstack/react-router'
-import type { ErrorComponentProps } from '@tanstack/react-router'
+} from '@tanstack/solid-router'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
@@ -17,28 +17,28 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   console.error(error)
 
   return (
-    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+    <div class="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
       <ErrorComponent error={error} />
-      <div className="flex gap-2 items-center flex-wrap">
+      <div class="flex gap-2 items-center flex-wrap">
         <button
           onClick={() => {
             router.invalidate()
           }}
-          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
         >
           Try Again
         </button>
-        {isRoot ? (
+        {isRoot() ? (
           <Link
             to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            class={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
           >
             Home
           </Link>
         ) : (
           <Link
             to="/"
-            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            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()

examples/solid/start-basic-auth/src/components/Login.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from '@tanstack/react-router'
-import { useServerFn } from '@tanstack/react-start'
+import { useRouter } from '@tanstack/solid-router'
+import { useServerFn } from '@tanstack/solid-start'
 import { useMutation } from '../hooks/useMutation'
 import { loginFn } from '../routes/_authed'
 import { Auth } from './Auth'
@@ -26,9 +26,9 @@ export function Login() {
   return (
     <Auth
       actionText="Login"
-      status={loginMutation.status}
+      status={loginMutation.status()}
       onSubmit={(e) => {
-        const formData = new FormData(e.target as HTMLFormElement)
+        const formData = new FormData(e.target as any as HTMLFormElement)
 
         loginMutation.mutate({
           data: {
@@ -38,13 +38,13 @@ export function Login() {
         })
       }}
       afterSubmit={
-        loginMutation.data ? (
+        loginMutation.data() ? (
           <>
-            <div className="text-red-400">{loginMutation.data.message}</div>
-            {loginMutation.data.userNotFound ? (
+            <div class="text-red-400">{loginMutation.data()?.message}</div>
+            {loginMutation.data()?.userNotFound ? (
               <div>
                 <button
-                  className="text-blue-500"
+                  class="text-blue-500"
                   onClick={(e) => {
                     const formData = new FormData(
                       (e.target as HTMLButtonElement).form!,

examples/solid/start-basic-auth/src/components/NotFound.tsx

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

examples/solid/start-basic-auth/src/hooks/useMutation.ts

@@ -1,37 +1,34 @@
-import * as React from 'react'
+import * as Solid from 'solid-js'
 
 export function useMutation<TVariables, TData, TError = Error>(opts: {
   fn: (variables: TVariables) => Promise<TData>
   onSuccess?: (ctx: { data: TData }) => void | Promise<void>
 }) {
-  const [submittedAt, setSubmittedAt] = React.useState<number | undefined>()
-  const [variables, setVariables] = React.useState<TVariables | undefined>()
-  const [error, setError] = React.useState<TError | undefined>()
-  const [data, setData] = React.useState<TData | undefined>()
-  const [status, setStatus] = React.useState<
+  const [submittedAt, setSubmittedAt] = Solid.createSignal<number | undefined>()
+  const [variables, setVariables] = Solid.createSignal<TVariables | undefined>()
+  const [error, setError] = Solid.createSignal<TError | undefined>()
+  const [data, setData] = Solid.createSignal<TData | undefined>()
+  const [status, setStatus] = Solid.createSignal<
     'idle' | 'pending' | 'success' | 'error'
   >('idle')
 
-  const mutate = React.useCallback(
-    async (variables: TVariables): Promise<TData | undefined> => {
-      setStatus('pending')
-      setSubmittedAt(Date.now())
-      setVariables(variables)
-      //
-      try {
-        const data = await opts.fn(variables)
-        await opts.onSuccess?.({ data })
-        setStatus('success')
-        setError(undefined)
-        setData(data)
-        return data
-      } catch (err: any) {
-        setStatus('error')
-        setError(err)
-      }
-    },
-    [opts.fn],
-  )
+  const mutate = async (variables: TVariables): Promise<TData | undefined> => {
+    setStatus('pending')
+    setSubmittedAt(Date.now())
+    setVariables(variables as any)
+    //
+    try {
+      const data = await opts.fn(variables)
+      await opts.onSuccess?.({ data })
+      setStatus('success')
+      setError(undefined)
+      setData(data as any)
+      return data
+    } catch (err: any) {
+      setStatus('error')
+      setError(err)
+    }
+  }
 
   return {
     status,

examples/solid/start-basic-auth/src/routeTree.gen.ts

@@ -118,7 +118,7 @@ export interface RootRouteChildren {
   SignupRoute: typeof SignupRoute
 }
 
-declare module '@tanstack/react-router' {
+declare module '@tanstack/solid-router' {
   interface FileRoutesByPath {
     '/signup': {
       id: '/signup'
@@ -215,8 +215,8 @@ export const routeTree = rootRouteImport
   ._addFileTypes<FileRouteTypes>()
 
 import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
+import type { createStart } from '@tanstack/solid-start'
+declare module '@tanstack/solid-start' {
   interface Register {
     ssr: true
     router: Awaited<ReturnType<typeof getRouter>>

examples/solid/start-basic-auth/src/router.tsx

@@ -1,4 +1,4 @@
-import { createRouter } from '@tanstack/react-router'
+import { createRouter } from '@tanstack/solid-router'
 import { routeTree } from './routeTree.gen'
 import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
@@ -15,7 +15,7 @@ export function getRouter() {
   return router
 }
 
-declare module '@tanstack/react-router' {
+declare module '@tanstack/solid-router' {
   interface Register {
     router: ReturnType<typeof getRouter>
   }

examples/solid/start-basic-auth/src/routes/__root.tsx

@@ -5,10 +5,11 @@ import {
   Outlet,
   Scripts,
   createRootRoute,
-} from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
-import { createServerFn } from '@tanstack/react-start'
-import * as React from 'react'
+} from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+import { createServerFn } from '@tanstack/solid-start'
+import { HydrationScript } from 'solid-js/web'
+import type * as Solid from 'solid-js'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary.js'
 import { NotFound } from '~/components/NotFound.js'
 import appCss from '~/styles/app.css?url'
@@ -39,7 +40,7 @@ export const Route = createRootRoute({
   head: () => ({
     meta: [
       {
-        charSet: 'utf-8',
+        charset: 'utf-8',
       },
       {
         name: 'viewport',
@@ -93,20 +94,21 @@ function RootComponent() {
   )
 }
 
-function RootDocument({ children }: { children: React.ReactNode }) {
-  const { user } = Route.useRouteContext()
+function RootDocument({ children }: { children: Solid.JSX.Element }) {
+  const routeContext = Route.useRouteContext()
 
   return (
     <html>
       <head>
-        <HeadContent />
+        <HydrationScript />
       </head>
       <body>
-        <div className="p-2 flex gap-2 text-lg">
+        <HeadContent />
+        <div class="p-2 flex gap-2 text-lg">
           <Link
             to="/"
             activeProps={{
-              className: 'font-bold',
+              class: 'font-bold',
             }}
             activeOptions={{ exact: true }}
           >
@@ -115,15 +117,15 @@ function RootDocument({ children }: { children: React.ReactNode }) {
           <Link
             to="/posts"
             activeProps={{
-              className: 'font-bold',
+              class: 'font-bold',
             }}
           >
             Posts
           </Link>
-          <div className="ml-auto">
-            {user ? (
+          <div class="ml-auto">
+            {routeContext().user ? (
               <>
-                <span className="mr-2">{user.email}</span>
+                <span class="mr-2">{routeContext().user?.email}</span>
                 <Link to="/logout">Logout</Link>
               </>
             ) : (

examples/solid/start-basic-auth/src/routes/_authed.tsx

@@ -1,5 +1,5 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-start'
+import { createFileRoute } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
 import { hashPassword, prismaClient } from '~/utils/prisma'
 import { Login } from '~/components/Login'
 import { useAppSession } from '~/utils/session'