React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":91,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/db.ts","latestPath","fileId","1811265e-a9ba-11f1-9ea6-1607ee4eb77e","name","db.ts","fileType","script","content","// idb wrapper: schema, CRUD shortcuts, and offline-first sync logic.\n// All of this runs in the browser — IndexedDB is the local, offline source of truth.\n\nimport { openDB, type DBSchema, type IDBPDatabase } from \"https://cdn.jsdelivr.net/npm/idb@8/+esm\";\n\nexport interface Note {\n id: string; // uuid, same on client & server\n text: string;\n updatedAt: number; // epoch ms, last-write-wins\n deleted: boolean; // tombstone so deletes propagate on sync\n}\n\ninterface NotesDB extends DBSchema {\n notes: {\n key: string;\n value: Note;\n indexes: { \"by-updated\": number };\n };\n meta: {\n key: string;\n value: number | string;\n };\n}\n\nconst DB_NAME = \"notes-app\";\nconst DB_VERSION = 1;\nexport const LAST_SYNC_KEY = \"lastSyncAt\";\n\nlet dbPromise: Promise> | null = null;\n\nexport function getDB() {\n if (!dbPromise) {\n dbPromise = openDB(DB_NAME, DB_VERSION, {\n upgrade(db) {\n const notes = db.createObjectStore(\"notes\", { keyPath: \"id\" });\n notes.createIndex(\"by-updated\", \"updatedAt\");\n db.createObjectStore(\"meta\");\n },\n blocked() {\n console.warn(\"openDB blocked: close other tabs with an older version open\");\n },\n });\n }\n return dbPromise;\n}\n\n// --- CRUD (idb's shortcut methods — no manual transactions needed) ---\n\nexport async function addNote(text: string): Promise {\n const note: Note = {\n id: crypto.randomUUID(),\n text,\n updatedAt: Date.now(),\n deleted: false,\n };\n const db = await getDB();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function updateNote(id: string, text: string): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note || note.deleted) return undefined;\n note.text = text;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function deleteNote(id: string): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note) return;\n // Tombstone instead of hard delete so the delete can sync.\n note.deleted = true;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n}\n\nexport async function getAllNotes(): Promise {\n const db = await getDB();\n const all = await db.getAll(\"notes\");\n return all.filter((n) => !n.deleted).sort((a, b) => b.updatedAt - a.updatedAt);\n}\n\nexport async function getPendingCount(): Promise {\n const db = await getDB();\n const since = (await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined;\n const tx = db.transaction(\"notes\");\n const index = tx.store.index(\"by-updated\");\n let count = 0;\n for await (const cursor of index.iterate(since ?? 0)) {\n if (!cursor.value.deleted || cursor.value.updatedAt > (since ?? 0)) count++;\n }\n return count;\n}\n\n// --- Sync ---\n\nexport async function sync(): Promise<{ pushed: number; pulled: number }> {\n const db = await getDB();\n const lastSync = ((await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined) ?? 0;\n\n // PUSH: everything changed since last sync. Collect first, then one\n // readwrite transaction — never await a fetch while a transaction is open\n // (it would auto-close mid-flight; see the idb README's transaction lifetime note).\n const toPush = (await db.getAllFromIndex(\"notes\", \"by-updated\", IDBKeyRange.lowerBound(lastSync, true)))\n .filter((n) => !n.deleted || n.updatedAt > lastSync);\n\n let pushed = 0;\n if (toPush.length > 0) {\n const res = await fetch(\"/api/sync\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: toPush, since: lastSync }),\n });\n if (!res.ok) throw new Error(`push failed: ${res.status}`);\n pushed = toPush.length;\n }\n\n // PULL: server rows changed since our last sync; merge last-write-wins.\n const pullRes = await fetch(`/api/notes?since=${lastSync}`);\n if (!pullRes.ok) throw new Error(`pull failed: ${pullRes.status}`);\n const { notes: serverNotes, now } = (await pullRes.json()) as { notes: Note[]; now: number };\n\n let pulled = 0;\n if (serverNotes.length > 0) {\n const tx = db.transaction(\"notes\", \"readwrite\");\n await Promise.all(\n serverNotes.map(async (server) => {\n const local = await tx.store.get(server.id);\n // server wins only if strictly newer, or local is absent\n if (!local || server.updatedAt > local.updatedAt) {\n await tx.store.put(server);\n pulled++;\n }\n }),\n );\n await tx.done;\n }\n\n // Record the sync point in the meta store.\n await db.put(\"meta\", now, LAST_SYNC_KEY);\n return { pushed, pulled };\n}\n","// idb wrapper: schema, CRUD shortcuts, and offline-first sync logic.\n// All of this runs in the browser — IndexedDB is the local, offline source of truth.\n\nimport {\n type DBSchema,\n type IDBPDatabase,\n openDB,\n} from \"https://cdn.jsdelivr.net/npm/idb@8/+esm\";\n\nexport interface Note {\n id: string; // uuid, same on client & server\n text: string;\n updatedAt: number; // epoch ms, last-write-wins\n deleted: boolean; // tombstone so deletes propagate on sync\n}\n\ninterface NotesDB extends DBSchema {\n notes: {\n key: string;\n value: Note;\n indexes: { \"by-updated\": number };\n };\n meta: {\n key: string;\n value: number | string;\n };\n}\n\nconst DB_NAME = \"notes-app\";\nconst DB_VERSION = 1;\nexport const LAST_SYNC_KEY = \"lastSyncAt\";\n\nlet dbPromise: Promise> | null = null;\n\nexport function getDB() {\n if (!dbPromise) {\n dbPromise = openDB(DB_NAME, DB_VERSION, {\n upgrade(db) {\n const notes = db.createObjectStore(\"notes\", { keyPath: \"id\" });\n notes.createIndex(\"by-updated\", \"updatedAt\");\n db.createObjectStore(\"meta\");\n },\n blocked() {\n console.warn(\n \"openDB blocked: close other tabs with an older version open\",\n );\n },\n });\n }\n return dbPromise;\n}\n\n// --- CRUD (idb's shortcut methods — no manual transactions needed) ---\n\nexport async function addNote(text: string): Promise {\n const note: Note = {\n id: crypto.randomUUID(),\n text,\n updatedAt: Date.now(),\n deleted: false,\n };\n const db = await getDB();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function updateNote(\n id: string,\n text: string,\n): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note || note.deleted) return undefined;\n note.text = text;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function deleteNote(id: string): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note) return;\n // Tombstone instead of hard delete so the delete can sync.\n note.deleted = true;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n}\n\nexport async function getAllNotes(): Promise {\n const db = await getDB();\n const all = await db.getAll(\"notes\");\n return all.filter((n) => !n.deleted).sort((a, b) =>\n b.updatedAt - a.updatedAt\n );\n}\n\nexport async function getPendingCount(): Promise {\n const db = await getDB();\n const since = (await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined;\n const tx = db.transaction(\"notes\");\n const index = tx.store.index(\"by-updated\");\n let count = 0;\n for await (const cursor of index.iterate(since ?? 0)) {\n if (!cursor.value.deleted || cursor.value.updatedAt > (since ?? 0)) count++;\n }\n return count;\n}\n\n// --- Sync ---\n\nexport async function sync(): Promise<{ pushed: number; pulled: number }> {\n const db = await getDB();\n const lastSync =\n ((await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined) ?? 0;\n\n // PUSH: everything changed since last sync. Collect first, then one\n // readwrite transaction — never await a fetch while a transaction is open\n // (it would auto-close mid-flight; see the idb README's transaction lifetime note).\n const toPush =\n (await db.getAllFromIndex(\n \"notes\",\n \"by-updated\",\n IDBKeyRange.lowerBound(lastSync, true),\n ))\n .filter((n) => !n.deleted || n.updatedAt > lastSync);\n\n let pushed = 0;\n if (toPush.length > 0) {\n const res = await fetch(\"/api/sync\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: toPush, since: lastSync }),\n });\n if (!res.ok) throw new Error(`push failed: ${res.status}`);\n pushed = toPush.length;\n }\n\n // PULL: server rows changed since our last sync; merge last-write-wins.\n const pullRes = await fetch(`/api/notes?since=${lastSync}`);\n if (!pullRes.ok) throw new Error(`pull failed: ${pullRes.status}`);\n const { notes: serverNotes, now } = (await pullRes.json()) as {\n notes: Note[];\n now: number;\n };\n\n let pulled = 0;\n if (serverNotes.length > 0) {\n const tx = db.transaction(\"notes\", \"readwrite\");\n await Promise.all(\n serverNotes.map(async (server) => {\n const local = await tx.store.get(server.id);\n // server wins only if strictly newer, or local is absent\n if (!local || server.updatedAt > local.updatedAt) {\n await tx.store.put(server);\n pulled++;\n }\n }),\n );\n await tx.done;\n }\n\n // Record the sync point in the meta store.\n await db.put(\"meta\", now, LAST_SYNC_KEY);\n return { pushed, pulled };\n}","createdAt",["D",1788675263613],"branchVersion","branchId","dcfef49f-d845-444e-a67f-f09d3ad79626","id","562ec6ce-e2cf-4f4d-b6c3-1d4dec8138d7","idb-demo",["D",1788674730176],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Offline-first notes demo — IndexedDB via idb, synced to SQLite","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","01a07558-b189-763e-acb8-dac8c5ab98a7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","562ec6cee2cf4f4db6c31d4dec8138d7","tursoHostname","562ec6cee2cf4f4db6c31d4dec8138d7-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789456888508],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",22,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":200,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":201,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":202,"_85":203,"_87":204,"_89":25},"tree",[166,170,171],"files",[166,167,168,169,170,171],"counts",{"_156":64,"_157":138,"_158":64,"_159":160,"_161":162},"contents",[131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":150,"_32":151,"_30":152,"_137":-5,"_42":43,"_41":145,"_139":60,"_39":153,"_13":64,"_34":154,"_36":-5,"_24":25,"_141":-5,"_27":155},{"_44":143,"_32":144,"_30":58,"_137":-5,"_42":43,"_41":145,"_139":25,"_39":146,"_13":64,"_34":147,"_36":148,"_24":25,"_141":46,"_27":149},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":140,"_13":64,"_34":35,"_36":110,"_24":25,"_141":-5,"_27":142},"b02fcba9-45cc-4b9d-a06d-ccf8b17442c6","main.ts","f6a5deac-a9b8-11f1-b7cf-1607ee4eb77e","parentId",1,"latest",["D",1788674730216],"label",[135],"91cf3aad-0bf9-4688-9b3b-11954ed89c13","index.ts",2,["D",1788675142029],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n",[144],"9cea4bd4-7948-4fd9-b028-5d3add266753","frontend","01a07558-b18a-757a-bfc1-98c496b6a60d",["D",1788675142029],"directory",[151],"pulls","branches","forks","envVars",{"_163":64,"_165":64},"connections",{"_163":64,"_164":64},"count","unfilledCount","emptyCount",{"_44":150,"_32":151,"_30":152,"_137":-5,"_42":43,"_41":145,"_139":60,"_39":197,"_13":64,"_34":154,"_36":-5,"_24":25,"_141":-5,"_173":198,"_27":199},{"_44":193,"_32":33,"_30":31,"_137":152,"_42":43,"_41":14,"_139":25,"_39":194,"_13":145,"_34":35,"_36":38,"_24":25,"_141":-5,"_173":195,"_27":196},{"_44":186,"_32":187,"_30":188,"_137":152,"_42":43,"_41":145,"_139":60,"_39":189,"_13":64,"_34":20,"_36":190,"_24":25,"_141":-5,"_173":191,"_27":192},{"_44":179,"_32":180,"_30":181,"_137":152,"_42":43,"_41":145,"_139":25,"_39":182,"_13":64,"_34":35,"_36":183,"_24":25,"_141":-5,"_173":184,"_27":185},{"_44":143,"_32":144,"_30":58,"_137":-5,"_42":43,"_41":145,"_139":25,"_39":176,"_13":64,"_34":147,"_36":148,"_24":25,"_141":46,"_173":177,"_27":178},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":172,"_13":64,"_34":35,"_36":110,"_24":25,"_141":-5,"_173":174,"_27":175},["D",1788674730216],"children",[],[135],["D",1788675142029],[],[144],"da221eae-3771-4e68-95e3-1a79757d7371","root.tsx","01a07558-b18a-757a-bfc1-9e116a2223b9",["D",1788675142029],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n React Hono Val Town Starter\n

Diff · v5