Offline-first notes (idb demo)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_242":243,"_244":245},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_183":-5,"_20":184,"_22":185,"_186":187,"_188":189,"_26":190,"_24":191,"_192":-5,"_193":-5,"_194":54,"_195":196,"_197":45,"_198":-5,"_199":-5,"_200":201},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","nbbaier","name","idb-demo","branchName","main","version","path","frontend/db.ts","project",{"_33":126,"_13":14,"_46":127,"_128":-5,"_129":54,"_130":131,"_132":131,"_133":134,"_135":-5,"_136":137,"_138":74,"_139":45,"_140":-5,"_141":-5,"_142":67,"_143":144,"_145":146,"_147":148,"_149":150,"_151":-5,"_152":153,"_154":153,"_155":156,"_157":156,"_158":156,"_159":153,"_160":153,"_161":162,"_163":164,"_165":166,"_167":54},"tree",[58,59,60,61],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","26cd5460-22f5-4e7c-aef5-a1096ee81f57","db.ts","fileId","1811265e-a9ba-11f1-9ea6-1607ee4eb77e","parentId","01a07558-b18a-757a-bfc1-98c496b6a60d","branchId","dcfef49f-d845-444e-a67f-f09d3ad79626","branchVersion",22,"latest",true,"createdAt",["D",1788679265204],5,"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 {\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 (\n const cursor of index.iterate(IDBKeyRange.lowerBound(since ?? 0, true))\n ) {\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 = (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 rows carry server-clock timestamps, so trust them on ties\n // too (>=): anything we just pushed in this same sync comes back with\n // its authoritative server timestamp, reconciling our local copy and\n // immune to device clock skew.\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}","deleted",false,"label",[57,35],"frontend",{"_33":90,"_13":57,"_36":39,"_38":-5,"_40":41,"_42":91,"_44":45,"_46":92,"_17":67,"_49":93,"_51":-5,"_53":54,"_55":-5,"_69":94,"_18":95},{"_33":82,"_13":83,"_36":84,"_38":-5,"_40":41,"_42":85,"_44":45,"_46":86,"_17":67,"_49":24,"_51":87,"_53":54,"_55":-5,"_69":88,"_18":89},{"_33":72,"_13":73,"_36":74,"_38":-5,"_40":41,"_42":75,"_44":45,"_46":76,"_17":77,"_49":78,"_51":79,"_53":54,"_55":14,"_69":80,"_18":81},{"_33":62,"_13":63,"_36":64,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":66,"_17":67,"_49":50,"_51":68,"_53":54,"_55":-5,"_69":70,"_18":71},"b02fcba9-45cc-4b9d-a06d-ccf8b17442c6","main.ts","f6a5deac-a9b8-11f1-b7cf-1607ee4eb77e",1,["D",1788674730216],0,"","children",[],[63],"3e8e31ee-eafa-4a73-b8cd-911dc0654786","index.ts","01a07558-b189-763e-acb8-dac8c5ab98a7",21,["D",1788679251846],7,"http","import {\n parseVal,\n serveImmutableFile,\n} 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\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Schema is idempotent — runs on cold start.\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS notes (\n id TEXT PRIMARY KEY,\n text TEXT NOT NULL,\n updated_at INTEGER NOT NULL,\n deleted INTEGER NOT NULL DEFAULT 0\n)`);\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// Row shape shared with the client's Note type\nfunction toNote(r: Record) {\n return {\n id: r.id as string,\n text: r.text as string,\n updatedAt: r.updated_at as number,\n deleted: !!r.deleted,\n };\n}\n\n// PULL: server rows changed since the client's last sync\napp.get(\"/api/notes\", async (c) => {\n const since = Number(c.req.query(\"since\") ?? 0);\n // Snapshot the clock BEFORE querying: any row written after this point is\n // guaranteed a timestamp strictly greater than the cursor we hand back, so\n // the next pull (updated_at > cursor) can never miss it.\n const cursor = Math.max(lastServerTs, Date.now());\n const res = await sqlite.execute({\n sql: \"SELECT * FROM notes WHERE updated_at > ? ORDER BY updated_at\",\n args: [since],\n });\n const notes = res.rows.map(toNote);\n return c.json({ notes, now: cursor });\n});\n\n// Server-authoritative clock. Client clocks can be skewed, so every stored\n// row gets its updated_at from here. Monotonic within this isolate: never\n// repeats or goes backwards, even for rapid successive writes.\nlet lastServerTs = 0;\nfunction nextServerTs(): number {\n let t = Date.now();\n if (t <= lastServerTs) t = lastServerTs + 1;\n lastServerTs = t;\n return t;\n}\n\n// PUSH: batched upserts of local changes, atomic. The client's updatedAt is\n// accepted for validation but the row is stamped with the server clock —\n// ordering of synced changes is decided by the server, not device clocks.\napp.post(\"/api/sync\", async (c) => {\n const body = await c.req.json<{\n notes: { id: string; text: string; updatedAt: number; deleted: boolean }[];\n }>();\n const incoming = body?.notes ?? [];\n for (const n of incoming) {\n if (\n !n ||\n typeof n.id !== \"string\" ||\n typeof n.text !== \"string\" ||\n typeof n.updatedAt !== \"number\"\n ) {\n return c.json({ error: \"invalid note\" }, 400);\n }\n }\n const statements = incoming.map((n) => ({\n sql: `INSERT INTO notes (id, text, updated_at, deleted) VALUES (?, ?, ?, ?)\n ON CONFLICT(id) DO UPDATE SET text = excluded.text,\n updated_at = excluded.updated_at, deleted = excluded.deleted\n WHERE excluded.updated_at > notes.updated_at`,\n args: [n.id, n.text, nextServerTs(), n.deleted ? 1 : 0],\n }));\n let applied = 0;\n if (statements.length > 0) {\n const results = await sqlite.batch(statements);\n applied = results.reduce((sum, r) => sum + r.rowsAffected, 0);\n }\n return c.json({ ok: true, applied, now: lastServerTs });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;",[],[73],"33079ccd-67d3-4542-9ad8-676e04ca6903","README.md","fc9c4b0a-a9bf-11f1-a072-1607ee4eb77e",11,["D",1788677746700],"# 📝 Offline-First Notes (idb demo)\n\nA client-side demo of **IndexedDB with usability** — the [`idb`](https://github.com/jakearchibald/idb)\nlibrary (by Jake Archibald). Notes are written straight to IndexedDB in the\nbrowser, so the app works **offline**, then a manual **Sync** pushes local\nchanges to a server and pulls anything new back.\n\n**Try it:** [https://idb-demo.val.run/](https://idb-demo.val.run/)\n\n## What it demonstrates\n\n| idb feature | Where |\n| --- | --- |\n| `openDB` schema + `upgrade` migration | `frontend/db.ts` |\n| Typed `DBSchema` autocompletion | `frontend/db.ts` |\n| Shortcut methods (`db.put`, `db.get`, `db.getAll`) | `frontend/db.ts` |\n| Indexes (`getAllFromIndex`) | `frontend/db.ts` |\n| Async iterators over a cursor `index.iterate` | `frontend/db.ts` |\n| Transaction lifetime + `tx.done` | `frontend/db.ts` (sync) |\n\nThe sync protocol is deliberately simple (teaching-grade, not production):\neach note carries `updatedAt` and a `deleted` tombstone, and merges use\n**last-write-wins**.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"idb CRUD (offline)\"| IDB[\"IndexedDB
store: notes + meta\"]\n Browser -->|\"POST /api/sync (push)\"| API[\"index.ts
Hono + SQLite\"]\n Browser -->|\"GET /api/notes?since=… (pull)\"| API\n API -->|upsert| DB[(\"SQLite
notes table\")]\n```\n\nThe same note record lives in IndexedDB (client, offline) *and* SQLite\n(server, shared) — nice symmetry for a demo.\n\n## Layout\n\n```\nindex.ts ← Hono backend: serves frontend + sync API (SQLite)\nfrontend/\n root.tsx ← HTML shell (immutable asset URLs, Twind, std/catch)\n index.ts ← client entry — vanilla DOM UI\n db.ts ← idb wrapper: schema, CRUD, sync\n favicon.svg\n```\n\n## How to demo it\n\n1. Open the app, add a few notes, then hit **✕** on one — all offline, nothing sent yet.\n2. Watch the status: **\"online / N unsynced changes\"**.\n3. Click **Sync** → the badge drops to zero and a server round-trip happens.\n4. To see the offline story for real, open DevTools → Network → **Offline**, add\n more notes (badge shows **offline**, everything still works), go back online, Sync.\n5. Open the same app in a second tab/device and Sync — changes merge over since `lastSyncAt`.\n\n## API\n\n- `GET /api/notes?since=` — pull server notes newer than `since`.\n- `POST /api/sync` — atomically upsert a batch of local notes.\n\n## Env vars\n\nNone — the SQLite database is the val's built-in project-scoped database\n(`std/sqlite/main.ts`).\n",[],[83],"9cea4bd4-7948-4fd9-b028-5d3add266753",2,["D",1788675142029],"directory",[96,97,98,99],[57],{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":123,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_69":124,"_18":125},{"_33":116,"_13":117,"_36":118,"_38":39,"_40":41,"_42":91,"_44":45,"_46":119,"_17":67,"_49":24,"_51":120,"_53":54,"_55":-5,"_69":121,"_18":122},{"_33":109,"_13":73,"_36":110,"_38":39,"_40":41,"_42":111,"_44":45,"_46":112,"_17":91,"_49":50,"_51":113,"_53":54,"_55":-5,"_69":114,"_18":115},{"_33":100,"_13":101,"_36":102,"_38":39,"_40":41,"_42":103,"_44":45,"_46":104,"_17":105,"_49":50,"_51":106,"_53":54,"_55":-5,"_69":107,"_18":108},"600eb8e0-119f-4cfb-9525-0512d31a4349","root.tsx","01a07558-b18a-757a-bfc1-9e116a2223b9",15,["D",1788678410889],3,"/** @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 Offline-first notes (idb demo)\n