\n setText((e.target as HTMLInputElement).value)}\n placeholder=\"What needs to be done?\"\n class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\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)}\n class=\"w-5 h-5 cursor-pointer\"\n />\n \n {todo.text}\n \n deleteTodo(todo.id)}\n class=\"text-gray-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity\"\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",[221,125,100],"6adab8d6-4584-11f1-b2cc-42b51c65c3df",["D",1777657045566],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { TodoList } from \"./TodoList.tsx\";\n\nexport function App() {\n return (\n

📝 Todos!!!!

\n \n

\n View source\n

\n );\n}",[221,125,89],"pulls","branches","forks","envVars",{"_85":26,"_241":26},"connections",{"_85":26,"_240":26},"unfilledCount","emptyCount",{"_37":314,"_13":221,"_76":216,"_47":-5,"_39":40,"_218":44,"_225":24,"_41":315,"_43":26,"_79":126,"_215":-5,"_81":30,"_219":-5,"_258":316,"_17":317},{"_37":214,"_13":125,"_76":124,"_47":216,"_39":40,"_218":44,"_225":24,"_41":311,"_43":26,"_79":126,"_215":-5,"_81":30,"_219":-5,"_258":312,"_17":313},{"_37":229,"_13":89,"_76":88,"_47":124,"_39":40,"_218":118,"_225":24,"_41":308,"_43":86,"_79":80,"_215":231,"_81":30,"_219":-5,"_258":309,"_17":310},{"_37":224,"_13":100,"_76":99,"_47":124,"_39":40,"_218":92,"_225":24,"_41":305,"_43":26,"_79":80,"_215":227,"_81":30,"_219":-5,"_258":306,"_17":307},{"_37":298,"_13":299,"_76":300,"_47":216,"_39":40,"_218":44,"_225":24,"_41":301,"_43":26,"_79":21,"_215":302,"_81":30,"_219":-5,"_258":303,"_17":304},{"_37":290,"_13":291,"_76":292,"_47":216,"_39":40,"_218":293,"_225":24,"_41":294,"_43":44,"_79":21,"_215":295,"_81":30,"_219":-5,"_258":296,"_17":297},{"_37":283,"_13":284,"_76":285,"_47":216,"_39":40,"_218":44,"_225":24,"_41":286,"_43":26,"_79":80,"_215":287,"_81":30,"_219":-5,"_258":288,"_17":289},{"_37":279,"_13":278,"_76":272,"_47":-5,"_39":40,"_218":273,"_225":24,"_41":280,"_43":26,"_79":126,"_215":-5,"_81":30,"_219":-5,"_258":281,"_17":282},{"_37":269,"_13":270,"_76":271,"_47":272,"_39":40,"_218":273,"_225":24,"_41":274,"_43":26,"_79":80,"_215":275,"_81":30,"_219":-5,"_258":276,"_17":277},{"_37":261,"_13":262,"_76":263,"_47":-5,"_39":40,"_218":264,"_225":24,"_41":265,"_43":44,"_79":21,"_215":266,"_81":30,"_219":-5,"_258":267,"_17":268},{"_37":253,"_13":254,"_76":138,"_47":-5,"_39":40,"_218":86,"_225":24,"_41":255,"_43":44,"_79":256,"_215":257,"_81":30,"_219":-5,"_258":259,"_17":260},"7c0d4fa8-4564-11f1-94d6-42b51c65c3df","index.ts",["D",1777643330507],"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\nconst app = new Hono();\n\n// --- Database setup ---\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\ntype TodoRow = { id: number; text: string; done: number; created_at: number };\nconst serializeTodo = (t: TodoRow) => ({\n id: t.id,\n text: t.text,\n done: !!t.done,\n createdAt: t.created_at,\n});\n\n// --- Frontend ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API ---\napp.get(\"/api/todos\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM todos ORDER BY created_at DESC\");\n return c.json((result.rows as TodoRow[]).map(serializeTodo));\n});\n\napp.post(\"/api/todos\", async (c) => {\n const { text } = await c.req.json<{ text: string }>();\n if (!text?.trim()) return c.json({ error: \"text is required\" }, 400);\n const result = await sqlite.execute({\n sql: \"INSERT INTO todos (text) VALUES (?) RETURNING *\",\n args: [text.trim()],\n });\n return c.json(serializeTodo(result.rows[0] as TodoRow), 201);\n});\n\napp.patch(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json<{ done?: boolean; text?: string }>();\n const updates: string[] = [];\n const args: (string | number)[] = [];\n if (typeof body.done === \"boolean\") {\n updates.push(\"done = ?\");\n args.push(body.done ? 1 : 0);\n }\n if (typeof body.text === \"string\" && body.text.trim()) {\n updates.push(\"text = ?\");\n args.push(body.text.trim());\n }\n if (updates.length === 0) return c.json({ error: \"nothing to update\" }, 400);\n args.push(id);\n const result = await sqlite.execute({\n sql: `UPDATE todos SET ${updates.join(\", \")} WHERE id = ? RETURNING *`,\n args,\n });\n if (result.rows.length === 0) return c.json({ error: \"not found\" }, 404);\n return c.json(serializeTodo(result.rows[0] as TodoRow));\n});\n\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",[],[254],"99aed9c8-4564-11f1-8981-42b51c65c3df","README.md","019de3cc-3d7d-7038-84fe-604a198e6edc",8,["D",1777643380242],"# Todos\n\nA simple todo list app with a SQLite backend, Hono API, and React frontend.\n\n## Features\n\n- ✅ Add, toggle, and delete todos\n- 💾 Persisted in SQLite (per-val database)\n- ⚡ Optimistic UI updates\n- 🎨 Styled with Twind (Tailwind utility classes)\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| TodoList[\"TodoList.tsx\"]\n TodoList <-->|\"fetch /api/todos\"| Hono\n Hono <-->|SQL| DB[(\"SQLite
todos table\")]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (frontend + API + SQLite)\nshared/types.ts ← Shared Todo type\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root layout\n TodoList.tsx ← Todo list UI + API calls\n```\n\n## API\n\n| Method | Path | Body | Description |\n| ------ | ----------------- | ----------------------------- | --------------------- |\n| GET | `/api/todos` | | List all todos |\n| POST | `/api/todos` | `{ text }` | Create a todo |\n| PATCH | `/api/todos/:id` | `{ done?, text? }` | Update a todo |\n| DELETE | `/api/todos/:id` | | Delete a todo |\n",[],[262],"81781284-4564-11f1-94d6-42b51c65c3df","types.ts","81781338-4564-11f1-94d6-42b51c65c3df","359d9061-b7ff-476e-9a59-9f122be48e8a",3,["D",1777643339620],"export type Todo = {\n id: number;\n text: string;\n done: boolean;\n createdAt: number;\n};\n",[],[278,270],"shared","81781c02-4564-11f1-94d6-42b51c65c3df",["D",1777643339620],[250],[278],"6da8ae62-4564-11f1-bfed-42b51c65c3df","index.tsx","019de3cc-3d7d-7038-84fe-5814472acae3",["D",1777643306241],"/** @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();",[],[221,284],"8ba62796-4564-11f1-8981-42b51c65c3df","index.html","019de3cc-3d7d-7038-84fe-553ead85ad18",6,["D",1777643356695],"\n\n \n \n \n Todos\n \n \n \n \n

\n \n \n \n\n",[],[221,291],"6da89ea4-4564-11f1-bfed-42b51c65c3df","favicon.svg","019de3cc-3d7d-7038-84fe-500a0ecf9bc7",["D",1777643306241],"\n",[],[221,299],["D",1777643350513],[],[221,125,100],["D",1777657045566],[],[221,125,89],["D",1777643306241],[244,245],[221,125],"6da8b2cc-4564-11f1-bfed-42b51c65c3df",["D",1777643306241],[243,246,247,248],[221],["D",1777643306241],["D",1789498239291],{"_11":12,"_180":84},{"_11":12,"_176":-5,"_83":84,"_31":82,"_177":178,"_179":30},{"_43":118,"_13":16,"_37":40,"_165":128,"_166":73,"_167":168,"_169":132,"_170":171,"_172":173,"_174":14,"_175":12},"ctx",{"_56":-5,"_201":356,"_357":358,"_359":360,"_361":30,"_362":30,"_363":30,"_364":24,"_365":-5,"_366":-7,"_367":-7,"_368":26,"_369":30,"_370":30,"_371":-5,"_372":30,"_373":30,"_374":30,"_375":-5},"ENV",{"_327":328,"_329":330,"_331":16,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

History · components