()
| 36 | }) |
| 37 | |
| 38 | function App() { |
| 39 | const loaderData = Route.useLoaderData() |
| 40 | const [results, setResults] = useState<Array<string>>([]) |
| 41 | |
| 42 | const addResult = (text: string) => { |
| 43 | setResults((prev) => |
| 44 | [`[${new Date().toLocaleTimeString()}] ${text}`, ...prev].slice(0, 20), |
| 45 | ) |
| 46 | } |
| 47 | |
| 48 | return ( |
| 49 | <div style={{ maxWidth: '800px', margin: '0 auto', padding: '40px 20px' }}> |
| 50 | <h1 style={{ fontSize: '28px', marginBottom: '8px' }}> |
| 51 | Cloudflare Workers Devtools Test |
| 52 | </h1> |
| 53 | <p style={{ color: '#666', marginBottom: '32px' }}> |
| 54 | Each button calls a server function running in Cloudflare Workers' |
| 55 | isolated environment. Open the TanStack Devtools panel (bottom-right) |
| 56 | and switch to the "Server Events" tab to see events arriving from the |
| 57 | server. |
| 58 | </p> |
| 59 | |
| 60 | <div |
| 61 | style={{ |
| 62 | display: 'flex', |
| 63 | gap: '12px', |
| 64 | marginBottom: '24px', |
| 65 | flexWrap: 'wrap', |
| 66 | }} |
| 67 | > |
| 68 | <button |
| 69 | onClick={async () => { |
| 70 | const msg = await greet() |
| 71 | addResult(msg) |
| 72 | }} |
| 73 | style={{ |
| 74 | padding: '12px 24px', |
| 75 | fontSize: '14px', |
| 76 | borderRadius: '8px', |
| 77 | border: 'none', |
| 78 | background: '#f97316', |
| 79 | color: 'white', |
| 80 | cursor: 'pointer', |
| 81 | fontWeight: 600, |
| 82 | }} |
| 83 | > |
| 84 | Call greet() |
| 85 | </button> |
| 86 | <button |
| 87 | onClick={async () => { |
| 88 | const num = await generateNumber() |
| 89 | addResult(`Random number: ${num}`) |
| 90 | }} |
| 91 | style={{ |
| 92 | padding: '12px 24px', |
| 93 | fontSize: '14px', |
| 94 | borderRadius: '8px', |
| 95 | border: 'none', |
nothing calls this directly
no test coverage detected