[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_281":282,"_283":284},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_208":-5,"_20":209,"_22":210,"_211":212,"_213":214,"_26":215,"_24":216,"_217":218,"_219":220,"_221":51,"_222":223,"_224":73,"_225":-5,"_226":-5,"_227":228},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","stevekrouse","name","todo-test-app","branchName","main","version","path","frontend/components","project",{"_36":159,"_13":14,"_38":160,"_49":-5,"_161":51,"_52":53,"_162":53,"_163":164,"_165":166,"_167":168,"_169":103,"_170":73,"_171":-5,"_172":-5,"_173":75,"_56":174,"_175":176,"_177":178,"_179":180,"_181":-5,"_182":183,"_184":183,"_185":186,"_187":186,"_188":186,"_189":183,"_190":183,"_191":192,"_193":194,"_195":196,"_50":51},"tree",[98,99,100],"file",{"_36":93,"_68":69,"_64":67,"_13":84,"_78":-5,"_76":94,"_17":75,"_66":95,"_38":96,"_70":90,"_81":-5,"_18":97},"contents",[60,61],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"pull","ahead",6,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":85,"_13":86,"_64":87,"_66":67,"_68":69,"_70":88,"_72":73,"_38":89,"_17":90,"_76":77,"_78":91,"_80":51,"_81":-5,"_18":92},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":74,"_17":75,"_76":77,"_78":79,"_80":51,"_81":-5,"_18":82},"73e7730a-8295-4e69-9f43-474fa37a75f0","TodoApp.tsx","fileId","a83552b2-748d-11f1-bcc6-1607ee4eb77e","parentId","019f18de-eb89-739a-ae0b-489c72bc838e","branchId","f97dd5b4-2ff6-4352-8d75-55cb425692e3","branchVersion",3,"latest",true,["D",1782828718639],0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ntype Todo = {\n id: number;\n text: string;\n done: boolean;\n};\n\nexport function TodoApp() {\n const [todos, setTodos] = useState([]);\n const [input, setInput] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n const fetchTodos = useCallback(async () => {\n const res = await fetch(\"/api/todos\");\n const data = await res.json();\n setTodos(data.todos ?? []);\n setLoading(false);\n }, []);\n\n useEffect(() => {\n fetchTodos();\n }, [fetchTodos]);\n\n const addTodo = async (e: React.FormEvent) => {\n e.preventDefault();\n const text = input.trim();\n if (!text) return;\n const res = await fetch(\"/api/todos\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n const todo = await res.json();\n setTodos((prev) => [todo, ...prev]);\n setInput(\"\");\n };\n\n const toggleTodo = async (id: number, done: boolean) => {\n await fetch(`/api/todos/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ done: !done }),\n });\n setTodos((prev) =>\n prev.map((t) => t.id === id ? { ...t, done: !done } : t)\n );\n };\n\n const deleteTodo = async (id: number) => {\n await fetch(`/api/todos/${id}`, { method: \"DELETE\" });\n setTodos((prev) => prev.filter((t) => t.id !== id));\n };\n\n const remaining = todos.filter((t) => !t.done).length;\n\n return (\n

\n setInput(e.target.value)}\n placeholder=\"What needs to be done?\"\n class=\"flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n \n Add\n \n \n\n {loading\n ?

Loading…

\n : todos.length === 0\n ?

No todos yet — add one above! 👆

\n : (\n

\n toggleTodo(todo.id, todo.done)}\n class=\"w-5 h-5 cursor-pointer accent-blue-500\"\n />\n \n {todo.text}\n \n deleteTodo(todo.id)}\n class=\"text-gray-400 hover:text-red-500 transition-colors cursor-pointer text-lg\"\n aria-label=\"Delete\"\n >\n ✕\n \n \n ))}\n

\n )}\n\n {todos.length > 0 && (\n

\n {remaining} of {todos.length} remaining\n

\n )}\n

\n );\n}\n","deleted","label",[83,84,63],"frontend","components","88b47de5-9474-42d3-985e-63d0aa1d54db","App.tsx","019f18de-eb89-739a-ae0b-40f83b82ced0",4,["D",1782828722706],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { TodoApp } from \"./TodoApp.tsx\";\n\nexport function App() {\n return (\n

📝 Todo List

\n \n

\n View source\n

\n );\n}\n",[83,84,86],"0e32d054-d94f-477c-8342-53df70c418c5","directory","019f18de-eb89-739a-ae0b-5a2bc585ab43",["D",1782828690190],[83,84],{"_36":118,"_13":83,"_64":95,"_66":-5,"_68":69,"_70":90,"_72":73,"_38":119,"_17":75,"_76":94,"_78":-5,"_80":51,"_81":-5,"_107":120,"_18":121},{"_36":110,"_13":111,"_64":112,"_66":-5,"_68":69,"_70":113,"_72":73,"_38":114,"_17":90,"_76":24,"_78":115,"_80":51,"_81":-5,"_107":116,"_18":117},{"_36":101,"_13":102,"_64":103,"_66":-5,"_68":69,"_70":34,"_72":73,"_38":104,"_17":90,"_76":105,"_78":106,"_80":51,"_81":-5,"_107":108,"_18":109},"fef24cba-9257-489a-8a89-6716bdd778d4","index.ts","019f18de-eb89-739a-ae0b-60c8ef9f30ef",["D",1782828704887],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\n// Ensure the todos table exists\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n done INTEGER NOT NULL DEFAULT 0,\n created_at INTEGER NOT NULL DEFAULT (unixepoch())\n )\n`);\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- Todo API ---\n\n// List all todos\napp.get(\"/api/todos\", async (c) => {\n const result = await sqlite.execute(\n \"SELECT id, text, done, created_at FROM todos ORDER BY id DESC\",\n );\n const todos = result.rows.map((r) => ({\n id: r.id,\n text: r.text,\n done: Boolean(r.done),\n created_at: r.created_at,\n }));\n return c.json({ todos });\n});\n\n// Create a todo\napp.post(\"/api/todos\", async (c) => {\n const body = await c.req.json();\n const text = body?.text?.trim();\n if (!text) return c.json({ error: \"text is required\" }, 400);\n const result = await sqlite.execute({\n sql: \"INSERT INTO todos (text) VALUES (?)\",\n args: [text],\n });\n return c.json({\n id: Number(result.lastInsertRowid),\n text,\n done: false,\n }, 201);\n});\n\n// Toggle done / update text\napp.patch(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const updates: string[] = [];\n const args: (string | number)[] = [];\n if (body.text !== undefined) {\n updates.push(\"text = ?\");\n args.push(body.text.trim());\n }\n if (body.done !== undefined) {\n updates.push(\"done = ?\");\n args.push(body.done ? 1 : 0);\n }\n if (updates.length === 0) return c.json({ error: \"no fields to update\" }, 400);\n args.push(id);\n await sqlite.execute({\n sql: `UPDATE todos SET ${updates.join(\", \")} WHERE id = ?`,\n args,\n });\n return c.json({ ok: true });\n});\n\n// Delete a todo\napp.delete(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM todos WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[102],"ddc21768-cdc0-44a7-bc39-f383ac96a2db","README.md","019f18de-eb89-739a-ae0b-5f367574d2d1",7,["D",1782828788679],"# 📝 Todo List App\n\nA simple todo list app built with client-side React and a Hono API backend on\nVal Town. Todos persist in SQLite — they survive page reloads and server\nrestarts.\n\n## Features\n\n- ✅ Add todos\n- ☑️ Toggle done / not done\n- 🗑️ Delete todos\n- 📊 Remaining count\n- 💾 SQLite persistence (val-scoped database)\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| TodoApp[\"TodoApp.tsx\"]\n TodoApp -->|\"GET /api/todos\"| Hono\n TodoApp -->|\"POST /api/todos\"| Hono\n TodoApp -->|\"PATCH /api/todos/:id\"| Hono\n TodoApp -->|\"DELETE /api/todos/:id\"| Hono\n Hono -->|reads/writes| DB[\"SQLite
(todos table)\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + todo API)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n TodoApp.tsx ← Todo UI (add, toggle, delete)\n```\n\n## API\n\n| Method | Route | Body | Description |\n| --- | --- | --- | --- |\n| `GET` | `/api/todos` | — | List all todos |\n| `POST` | `/api/todos` | `{ \"text\": \"...\" }` | Create a todo |\n| `PATCH` | `/api/todos/:id` | `{ \"done\": true }` and/or `{ \"text\": \"...\" }` | Update a todo |\n| `DELETE` | `/api/todos/:id` | — | Delete a todo |\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and the REST API. On startup it creates the `todos` table if it\n doesn't already exist.\n2. **`frontend/index.html`** loads Twind (Tailwind at runtime) and the React\n entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — renders ``.\n5. **`frontend/components/TodoApp.tsx`** is the main UI — fetches, creates,\n toggles, and deletes todos via the API.\n",[],[111],"4d791334-e793-400d-b8fa-a6d977354732",["D",1782828690190],[122,123,124,125],[83],{"_36":93,"_13":84,"_64":67,"_66":95,"_68":69,"_70":90,"_72":73,"_38":148,"_17":75,"_76":94,"_78":-5,"_80":51,"_81":-5,"_107":149,"_18":150},{"_36":141,"_13":142,"_64":143,"_66":95,"_68":69,"_70":90,"_72":73,"_38":144,"_17":75,"_76":24,"_78":145,"_80":51,"_81":-5,"_107":146,"_18":147},{"_36":133,"_13":134,"_64":135,"_66":95,"_68":69,"_70":136,"_72":73,"_38":137,"_17":90,"_76":24,"_78":138,"_80":51,"_81":-5,"_107":139,"_18":140},{"_36":126,"_13":127,"_64":128,"_66":95,"_68":69,"_70":90,"_72":73,"_38":129,"_17":75,"_76":77,"_78":130,"_80":51,"_81":-5,"_107":131,"_18":132},"c7ace193-4f1c-4553-aaeb-1c82dd9d1c41","index.tsx","019f18de-eb89-739a-ae0b-55d647cb6ceb",["D",1782828690190],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[83,127],"43f35254-6605-49c0-b62d-987f61431462","index.html","019f18de-eb89-739a-ae0b-53eb8b6dbaae",5,["D",1782828723085],"\n\n \n \n \n Todo List\n \n \n \n \n

\n \n \n \n",[],[83,134],"3fe6d758-b011-4acb-bf6a-d673682e39f0","favicon.svg","019f18de-eb89-739a-ae0b-4ce6efd4ecb9",["D",1782828690190],"\n",[],[83,142],["D",1782828690190],[151,152],[83,84],{"_36":85,"_13":86,"_64":87,"_66":67,"_68":69,"_70":88,"_72":73,"_38":156,"_17":90,"_76":77,"_78":91,"_80":51,"_81":-5,"_107":157,"_18":158},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":153,"_17":75,"_76":77,"_78":79,"_80":51,"_81":-5,"_107":154,"_18":155},["D",1782828718639],[],[83,84,63],["D",1782828722706],[],[83,84,86],"8ea9927f-9a0c-4951-a7b8-8c3d18a738df",["D",1782828690190],"legacyEnvVars","httpPrivacy","description","Simple todo list app with React UI and SQLite persistence","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789713666&sig=3c50074cfdbad9528142e73a70f21a45fa90c69cc7bbbcd287632b366b8db8a7","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","8ea9927f9a0c4951a7b88c3d18a738df","tursoHostname","8ea9927f9a0c4951a7b88c3d18a738df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789696237964],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_207":203},"org",{"_11":12,"_201":-5,"_202":203,"_167":168,"_204":205,"_206":51},"branch",{"_17":113,"_13":16,"_36":69,"_42":159,"_45":37,"_46":197,"_198":53,"_199":43,"_200":57,"_58":14,"_54":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":159,"_13":14,"_38":276,"_49":-5,"_161":51,"_52":53,"_162":53,"_163":164,"_165":166,"_167":168,"_169":103,"_170":73,"_171":-5,"_172":-5,"_173":75,"_56":174,"_175":176,"_177":178,"_179":277,"_181":-5,"_182":183,"_184":183,"_185":186,"_187":186,"_188":186,"_189":183,"_190":183,"_191":278,"_193":279,"_195":280,"_50":51},[249,256,257],"files",[249,250,251,252,253,254,255,256,257],"counts",{"_240":75,"_241":90,"_242":75,"_35":243,"_244":245},[236,237],{"_36":93,"_68":69,"_64":67,"_13":84,"_78":-5,"_76":94,"_17":75,"_66":95,"_38":234,"_70":90,"_81":-5,"_18":235},"upstreamProject",{"_36":43,"_13":59,"_163":231,"_165":166,"_52":53,"_191":232},"upstreamBranch",{"_36":37,"_38":229,"_40":230,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":55,"_207":233},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789713666&sig=b8eaddb1c9165fba3c47abcbd004a4165f80bb3d341ae44b2486aecf1593d660",["D",1782828690190],[83,84],{"_36":85,"_13":86,"_64":87,"_66":67,"_68":69,"_70":88,"_72":73,"_38":89,"_17":90,"_76":77,"_78":91,"_80":51,"_81":-5,"_18":239},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":74,"_17":75,"_76":77,"_78":79,"_80":51,"_81":-5,"_18":238},[83,84,63],[83,84,86],"pulls","branches","forks",{"_246":75,"_248":75},"connections",{"_246":75,"_247":75},"count","unfilledCount","emptyCount",{"_36":118,"_13":83,"_64":95,"_66":-5,"_68":69,"_70":90,"_72":73,"_38":119,"_17":75,"_76":94,"_78":-5,"_80":51,"_81":-5,"_107":274,"_18":275},{"_36":93,"_13":84,"_64":67,"_66":95,"_68":69,"_70":90,"_72":73,"_38":148,"_17":75,"_76":94,"_78":-5,"_80":51,"_81":-5,"_107":272,"_18":273},{"_36":85,"_13":86,"_64":87,"_66":67,"_68":69,"_70":88,"_72":73,"_38":156,"_17":90,"_76":77,"_78":91,"_80":51,"_81":-5,"_107":270,"_18":271},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":153,"_17":75,"_76":77,"_78":79,"_80":51,"_81":-5,"_107":268,"_18":269},{"_36":141,"_13":142,"_64":143,"_66":95,"_68":69,"_70":90,"_72":73,"_38":144,"_17":75,"_76":24,"_78":145,"_80":51,"_81":-5,"_107":266,"_18":267},{"_36":133,"_13":134,"_64":135,"_66":95,"_68":69,"_70":136,"_72":73,"_38":137,"_17":90,"_76":24,"_78":138,"_80":51,"_81":-5,"_107":264,"_18":265},{"_36":126,"_13":127,"_64":128,"_66":95,"_68":69,"_70":90,"_72":73,"_38":129,"_17":75,"_76":77,"_78":130,"_80":51,"_81":-5,"_107":262,"_18":263},{"_36":110,"_13":111,"_64":112,"_66":-5,"_68":69,"_70":113,"_72":73,"_38":114,"_17":90,"_76":24,"_78":115,"_80":51,"_81":-5,"_107":260,"_18":261},{"_36":101,"_13":102,"_64":103,"_66":-5,"_68":69,"_70":34,"_72":73,"_38":104,"_17":90,"_76":105,"_78":106,"_80":51,"_81":-5,"_107":258,"_18":259},[],[102],[],[111],[],[83,127],[],[83,134],[],[83,142],[],[83,84,63],[],[83,84,86],[251,252],[83,84],[250,253,254,255],[83],["D",1782828690190],["D",1789696237964],{"_11":12,"_207":203},{"_11":12,"_201":-5,"_202":203,"_167":168,"_204":205,"_206":51},{"_17":113,"_13":16,"_36":69,"_42":159,"_45":37,"_46":197,"_198":53,"_199":43,"_200":57,"_58":14,"_54":12},"ctx",{"_191":-5,"_226":314,"_315":316,"_317":318,"_319":51,"_320":51,"_321":51,"_322":73,"_323":-5,"_324":-7,"_325":-7,"_326":75,"_327":51,"_328":51,"_329":-5,"_330":51,"_331":51,"_332":51,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]