| 1 | import { createFileRoute } from "@tanstack/solid-router"; |
| 2 | import { createServerFn } from "@tanstack/solid-start"; |
| 3 | import { createSignal } from "solid-js"; |
| 4 | |
| 5 | export const getServerGreeting = createServerFn({ |
| 6 | method: "GET", |
| 7 | }).handler(() => ({ |
| 8 | message: "Hello from TanStack Start Solid on Cloudflare.Website.Vite.", |
| 9 | })); |
| 10 | |
| 11 | export const Route = createFileRoute("/")({ |
| 12 | loader: () => getServerGreeting(), |
| 13 | component: Home, |
| 14 | }); |
| 15 | |
| 16 | function Home() { |
| 17 | const initial = Route.useLoaderData(); |
| 18 | const [message, setMessage] = createSignal(initial().message); |
| 19 | |
| 20 | return ( |
| 21 | <main |
| 22 | style={{ |
| 23 | "max-width": "720px", |
| 24 | margin: "0 auto", |
| 25 | padding: "4rem 1.5rem", |
| 26 | }} |
| 27 | > |
| 28 | <h1 style={{ margin: 0, "font-size": "2.5rem" }}>TanStack Start Solid</h1> |
| 29 | <p style={{ "margin-top": "1rem", "font-size": "1.125rem" }}> |
| 30 | This app is served by <code>Cloudflare.Website.Vite</code>. |
| 31 | </p> |
| 32 | <p data-testid="server-greeting">{message()}</p> |
| 33 | <button |
| 34 | type="button" |
| 35 | onClick={async () => { |
| 36 | const next = await getServerGreeting(); |
| 37 | setMessage(next.message); |
| 38 | }} |
| 39 | > |
| 40 | Refresh from server |
| 41 | </button> |
| 42 | </main> |
| 43 | ); |
| 44 | } |