Offline-first notes (idb demo)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_235":236,"_237":238},"routes/_app.x.$handle.$name",{"_105":104,"_38":51,"_113":95,"_33":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":31,"_128":129,"_130":64,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":31},"version",20,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","301e97d2-fe36-4997-89fd-7fd0bf1342fe","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","01a07558-b189-763e-acb8-dac8c5ab98a7","name","fileType","http","content","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 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: Date.now() });\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;","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: Date.now() });\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;","createdAt",["D",1788679232529],"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","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",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_19":61,"_109":110,"_111":31},"branch",{"_13":94,"_38":95,"_49":48,"_96":50,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":51,"_103":104},"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",{"_49":50,"_38":51,"_44":230,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":231,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":232,"_89":233,"_91":234,"_93":31},"tree",[177,182,183,184],"files",[177,178,179,180,181,182,183,184],"counts",{"_167":68,"_168":143,"_169":68,"_170":171,"_172":173},"contents",[135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":160,"_38":161,"_36":162,"_142":-5,"_47":48,"_46":163,"_144":64,"_44":164,"_13":68,"_39":165,"_41":-5,"_30":31,"_147":-5,"_33":166},{"_49":153,"_38":154,"_36":155,"_142":-5,"_47":48,"_46":156,"_144":64,"_44":157,"_13":68,"_39":26,"_41":158,"_30":31,"_147":-5,"_33":159},{"_49":149,"_38":34,"_36":37,"_142":-5,"_47":48,"_46":14,"_144":31,"_44":150,"_13":151,"_39":40,"_41":43,"_30":31,"_147":51,"_33":152},{"_49":139,"_38":140,"_36":141,"_142":-5,"_47":48,"_46":143,"_144":64,"_44":145,"_13":68,"_39":146,"_41":114,"_30":31,"_147":-5,"_33":148},"b02fcba9-45cc-4b9d-a06d-ccf8b17442c6","main.ts","f6a5deac-a9b8-11f1-b7cf-1607ee4eb77e","parentId",1,"latest",["D",1788674730216],"script","label",[140],"4ddfc48e-4c7e-4b3e-838b-f809f23663f7",["D",1788679232529],6,[34],"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",[154],"9cea4bd4-7948-4fd9-b028-5d3add266753","frontend","01a07558-b18a-757a-bfc1-98c496b6a60d",2,["D",1788675142029],"directory",[161],"pulls","branches","forks","envVars",{"_174":68,"_176":68},"connections",{"_174":68,"_175":68},"count","unfilledCount","emptyCount",{"_49":160,"_38":161,"_36":162,"_142":-5,"_47":48,"_46":163,"_144":64,"_44":227,"_13":68,"_39":165,"_41":-5,"_30":31,"_147":-5,"_186":228,"_33":229},{"_49":218,"_38":219,"_36":220,"_142":162,"_47":48,"_46":221,"_144":31,"_44":222,"_13":223,"_39":146,"_41":224,"_30":31,"_147":-5,"_186":225,"_33":226},{"_49":211,"_38":212,"_36":213,"_142":162,"_47":48,"_46":163,"_144":64,"_44":214,"_13":68,"_39":26,"_41":215,"_30":31,"_147":-5,"_186":216,"_33":217},{"_49":204,"_38":34,"_36":205,"_142":162,"_47":48,"_46":206,"_144":64,"_44":207,"_13":163,"_39":146,"_41":208,"_30":31,"_147":-5,"_186":209,"_33":210},{"_49":195,"_38":196,"_36":197,"_142":162,"_47":48,"_46":198,"_144":64,"_44":199,"_13":200,"_39":146,"_41":201,"_30":31,"_147":-5,"_186":202,"_33":203},{"_49":153,"_38":154,"_36":155,"_142":-5,"_47":48,"_46":156,"_144":64,"_44":192,"_13":68,"_39":26,"_41":158,"_30":31,"_147":-5,"_186":193,"_33":194},{"_49":149,"_38":34,"_36":37,"_142":-5,"_47":48,"_46":14,"_144":31,"_44":189,"_13":151,"_39":40,"_41":43,"_30":31,"_147":51,"_186":190,"_33":191},{"_49":139,"_38":140,"_36":141,"_142":-5,"_47":48,"_46":143,"_144":64,"_44":185,"_13":68,"_39":146,"_41":114,"_30":31,"_147":-5,"_186":187,"_33":188},["D",1788674730216],"children",[],[140],["D",1788679232529],[],[34],["D",1788677746700],[],[154],"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

Diff · v20