[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_216":217,"_218":219},"routes/_app.x.$handle.$name",{"_105":104,"_32":50,"_114":95,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_21":-5,"_126":-5,"_127":-5,"_128":25,"_129":130,"_131":64,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_38":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":62,"_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":25},"version",2,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":-7,"_24":25,"_26":25,"_27":44,"_29":44},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous","deleted",false,"deletedHere","path","lib/db.ts","latestPath","fileId","e994cc74-afbb-11f1-9eba-1607ee4eb77e","name","db.ts","fileType","script","content","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport type Service = {\n id: number;\n name: string;\n description: string;\n category: string;\n duration_min: number;\n price: number | null;\n price_note: string;\n active: number;\n sort: number;\n};\nexport type ServiceInput = Omit;\n\nexport const STATUSES = [\"pending\", \"confirmed\", \"done\", \"cancelled\"] as const;\nexport type Status = (typeof STATUSES)[number];\n\nexport type Booking = {\n id: number;\n code: string;\n service_id: number;\n service_name: string;\n duration_min: number;\n price: number | null;\n date: string;\n time: string;\n start_min: number;\n name: string;\n phone: string;\n location_type: string;\n city: string;\n people: number;\n notes: string;\n status: Status;\n created_at: string;\n};\nexport type NewBooking = Omit;\nexport type BookingView = \"upcoming\" | \"pending\" | \"past\" | \"all\";\n\nexport type GalleryItem = {\n id: number;\n blob_key: string;\n mime: string;\n caption: string;\n sort: number;\n visible: number;\n};\n\nexport type Settings = {\n workDays: number[];\n open: string;\n close: string;\n slotStep: number;\n bufferMin: number;\n minNoticeHours: number;\n maxDaysAhead: number;\n allowStudio: boolean;\n whatsapp: string;\n snapchat: string;\n instagram: string;\n followers: string;\n tagline: string;\n about: string;\n policy: string;\n announcement: string;\n indexable: boolean;\n};\n\nexport const DEFAULT_SETTINGS: Settings = {\n workDays: [0, 1, 2, 3, 4, 5, 6],\n open: \"07:00\",\n close: \"23:00\",\n slotStep: 30,\n bufferMin: 30,\n minNoticeHours: 24,\n maxDaysAhead: 120,\n allowStudio: false,\n whatsapp: \"966506859518\",\n snapchat: \"najlamakeup11\",\n instagram: \"najla_makeupartist\",\n followers: \"+٦٨ ألف\",\n tagline: \"لوك يجمع النعومة والفخامة، مصمَّم لملامحك ويليق بمناسبتك.\",\n about:\n \"نجلاء الغفيلي، ميك اب ارتست في المنطقة الشرقية والبحرين.\\nكل لوك يُشتغل بعناية: بشرة نظيفة تدوم طوال المناسبة، وتفاصيل تبرز ملامحك بدون مبالغة — من مكياج العرايس إلى السهرات وجلسات التصوير.\",\n policy:\n \"• الحجز عبر الموقع مبدئي حتى يتم تأكيده عبر واتساب.\\n• يُرجى أن تكون البشرة نظيفة وجاهزة قبل الموعد.\\n• لتعديل الموعد أو إلغائه تواصلي معنا عبر واتساب في أقرب وقت.\",\n announcement: \"\",\n indexable: false,\n};\n\nconst SEED_SERVICES: [string, string, string, number][] = [\n [\"مكياج عروس\", \"لوك كامل ليوم العمر، مع رموش وتثبيت يدوم طوال الحفل.\", \"عرايس\", 150],\n [\"مكياج سهرة\", \"لوك فخم للحفلات والمناسبات الكبيرة.\", \"مناسبات\", 90],\n [\"مكياج ناعم\", \"لوك طبيعي ناعم للملكة والتخرج والمناسبات الخاصة.\", \"مناسبات\", 75],\n [\"مكياج أهل العروس\", \"لوك راقٍ لأم العروس وأخواتها يوم الحفل.\", \"مناسبات\", 90],\n [\"مكياج تصوير\", \"مكياج مخصص لجلسات التصوير والإعلانات تحت الإضاءة.\", \"تصوير\", 120],\n];\n\ntype Arg = string | number | null;\nconst q = (sql: string, args: Arg[] = []) => sqlite.execute({ sql, args });\nconst all = (r: { rows: unknown[] }) => r.rows as T[];\nconst one = (r: { rows: unknown[] }) => (r.rows[0] as T | undefined) ?? null;\n\nlet ready: Promise | null = null;\nexport function ensureSchema(): Promise {\n ready ??= migrate().catch((e) => {\n ready = null;\n throw e;\n });\n return ready;\n}\n\nasync function migrate() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS services (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL DEFAULT '',\n category TEXT NOT NULL DEFAULT '',\n duration_min INTEGER NOT NULL DEFAULT 60,\n price INTEGER,\n price_note TEXT NOT NULL DEFAULT '',\n active INTEGER NOT NULL DEFAULT 1,\n sort INTEGER NOT NULL DEFAULT 0)`,\n args: [],\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS bookings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n code TEXT NOT NULL UNIQUE,\n service_id INTEGER NOT NULL,\n service_name TEXT NOT NULL,\n duration_min INTEGER NOT NULL,\n price INTEGER,\n date TEXT NOT NULL,\n time TEXT NOT NULL,\n start_min INTEGER NOT NULL,\n name TEXT NOT NULL,\n phone TEXT NOT NULL,\n location_type TEXT NOT NULL,\n city TEXT NOT NULL DEFAULT '',\n people INTEGER NOT NULL DEFAULT 1,\n notes TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'pending',\n created_at TEXT NOT NULL DEFAULT (datetime('now')))`,\n args: [],\n },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_bookings_date ON bookings(date, status)\", args: [] },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_bookings_phone ON bookings(phone)\", args: [] },\n {\n sql: `CREATE TABLE IF NOT EXISTS gallery (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n blob_key TEXT NOT NULL UNIQUE,\n mime TEXT NOT NULL,\n caption TEXT NOT NULL DEFAULT '',\n sort INTEGER NOT NULL DEFAULT 0,\n visible INTEGER NOT NULL DEFAULT 1)`,\n args: [],\n },\n { sql: \"CREATE TABLE IF NOT EXISTS settings (key TEXT PRIMARY KEY, value TEXT NOT NULL)\", args: [] },\n {\n sql: \"CREATE TABLE IF NOT EXISTS blocked_dates (date TEXT PRIMARY KEY, reason TEXT NOT NULL DEFAULT '')\",\n args: [],\n },\n {\n sql: \"CREATE TABLE IF NOT EXISTS login_failures (id INTEGER PRIMARY KEY AUTOINCREMENT, ip TEXT NOT NULL, at INTEGER NOT NULL)\",\n args: [],\n },\n ]);\n\n if (one(await q(\"SELECT value FROM settings WHERE key = 'seeded'\"))) return;\n\n const n = one<{ n: number }>(await q(\"SELECT COUNT(*) AS n FROM services\"));\n if (Number(n?.n ?? 0) === 0) {\n await sqlite.batch(\n SEED_SERVICES.map(([name, description, category, duration], i) => ({\n sql:\n \"INSERT INTO services (name, description, category, duration_min, price, price_note, active, sort) VALUES (?, ?, ?, ?, NULL, 'السعر عند التواصل', 1, ?)\",\n args: [name, description, category, duration, i],\n })),\n );\n }\n if (await seedGallery()) {\n await q(\"INSERT OR REPLACE INTO settings (key, value) VALUES ('seeded', ?)\", [new Date().toISOString()]);\n }\n}\n\nconst b64ToBytes = (b64: string) => Uint8Array.from(atob(b64), (ch) => ch.charCodeAt(0));\n\nasync function seedGallery(): Promise {\n const n = one<{ n: number }>(await q(\"SELECT COUNT(*) AS n FROM gallery\"));\n if (Number(n?.n ?? 0) > 0) return true;\n let data: { logo?: string; items: { name: string; b64: string }[] };\n try {\n data = JSON.parse(await readFile(\"/data/gallery.json\"));\n } catch (e) {\n console.error(\"gallery seed skipped:\", e);\n return false;\n }\n if (data.logo) await blob.set(\"brand/logo\", b64ToBytes(data.logo));\n let sort = 0;\n for (const item of data.items) {\n const key = `gallery/${item.name}`;\n await blob.set(key, b64ToBytes(item.b64));\n await q(\"INSERT OR IGNORE INTO gallery (blob_key, mime, sort) VALUES (?, 'image/jpeg', ?)\", [key, sort++]);\n }\n return true;\n}\n\n// ── Settings ────────────────────────────────────────────────\nexport async function getSettings(): Promise {\n const row = one<{ value: string }>(await q(\"SELECT value FROM settings WHERE key = 'app'\"));\n if (!row) return { ...DEFAULT_SETTINGS };\n try {\n return { ...DEFAULT_SETTINGS, ...JSON.parse(row.value) };\n } catch {\n return { ...DEFAULT_SETTINGS };\n }\n}\n\nexport async function saveSettings(s: Settings) {\n await q(\n \"INSERT INTO settings (key, value) VALUES ('app', ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value\",\n [JSON.stringify(s)],\n );\n}\n\n// ── Services ────────────────────────────────────────────────\nexport async function listServices(activeOnly: boolean) {\n return all(\n await q(`SELECT * FROM services ${activeOnly ? \"WHERE active = 1\" : \"\"} ORDER BY sort, id`),\n );\n}\n\nexport async function getService(id: number) {\n if (!Number.isInteger(id)) return null;\n return one(await q(\"SELECT * FROM services WHERE id = ?\", [id]));\n}\n\nexport async function createService(s: ServiceInput) {\n await q(\n \"INSERT INTO services (name, description, category, duration_min, price, price_note, active, sort) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\",\n [s.name, s.description, s.category, s.duration_min, s.price, s.price_note, s.active, s.sort],\n );\n}\n\nexport async function updateService(id: number, s: ServiceInput) {\n await q(\n \"UPDATE services SET name = ?, description = ?, category = ?, duration_min = ?, price = ?, price_note = ?, active = ?, sort = ? WHERE id = ?\",\n [s.name, s.description, s.category, s.duration_min, s.price, s.price_note, s.active, s.sort, id],\n );\n}\n\nexport async function deleteService(id: number) {\n await q(\"DELETE FROM services WHERE id = ?\", [id]);\n}\n\n// ── Bookings ────────────────────────────────────────────────\nconst CODE_ALPHABET = \"ABCDEFGHJKLMNPQRSTUVWXYZ23456789\";\nfunction makeCode() {\n const bytes = crypto.getRandomValues(new Uint8Array(8));\n return Array.from(bytes, (b) => CODE_ALPHABET[b % CODE_ALPHABET.length]).join(\"\");\n}\n\n/** Atomic insert: fails if the slot overlaps an open booking (incl. buffer) or the day is blocked. */\nexport async function createBooking(\n b: NewBooking,\n bufferMin: number,\n): Promise<{ ok: true; code: string } | { ok: false }> {\n const code = makeCode();\n const r = await q(\n `INSERT INTO bookings (code, service_id, service_name, duration_min, price, date, time, start_min, name, phone, location_type, city, people, notes, status)\n SELECT ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?\n WHERE NOT EXISTS (\n SELECT 1 FROM bookings\n WHERE date = ? AND status IN ('pending', 'confirmed')\n AND start_min < ? AND ? < start_min + duration_min + ?)\n AND NOT EXISTS (SELECT 1 FROM blocked_dates WHERE date = ?)`,\n [\n code, b.service_id, b.service_name, b.duration_min, b.price, b.date, b.time, b.start_min,\n b.name, b.phone, b.location_type, b.city, b.people, b.notes, b.status,\n b.date, b.start_min + b.duration_min + bufferMin, b.start_min, bufferMin, b.date,\n ],\n );\n return r.rowsAffected > 0 ? { ok: true, code } : { ok: false };\n}\n\nexport async function openBookingsOnDate(date: string) {\n return all>(\n await q(\n \"SELECT start_min, duration_min FROM bookings WHERE date = ? AND status IN ('pending', 'confirmed')\",\n [date],\n ),\n );\n}\n\nexport async function getBookingByCode(code: string) {\n if (!/^[A-Z0-9]{8}$/.test(code)) return null;\n return one(await q(\"SELECT * FROM bookings WHERE code = ?\", [code]));\n}\n\nexport async function listBookings(view: BookingView, today: string) {\n const queries: Record = {\n upcoming: [\n \"SELECT * FROM bookings WHERE date >= ? AND status IN ('pending', 'confirmed') ORDER BY date, start_min\",\n [today],\n ],\n pending: [\"SELECT * FROM bookings WHERE date >= ? AND status = 'pending' ORDER BY date, start_min\", [today]],\n past: [\n \"SELECT * FROM bookings WHERE date < ? OR status IN ('done', 'cancelled') ORDER BY date DESC, start_min DESC LIMIT 200\",\n [today],\n ],\n all: [\"SELECT * FROM bookings ORDER BY date DESC, start_min DESC LIMIT 300\", []],\n };\n const [sql, args] = queries[view];\n return all(await q(sql, args));\n}\n\nexport async function bookingStats(today: string, weekEnd: string) {\n const r = one>(\n await q(\n `SELECT\n SUM(CASE WHEN status = 'pending' AND date >= ? THEN 1 ELSE 0 END) AS pending,\n SUM(CASE WHEN status = 'confirmed' AND date >= ? THEN 1 ELSE 0 END) AS confirmed,\n SUM(CASE WHEN status IN ('pending', 'confirmed') AND date = ? THEN 1 ELSE 0 END) AS today,\n SUM(CASE WHEN status IN ('pending', 'confirmed') AND date >= ? AND date <= ? THEN 1 ELSE 0 END) AS week\n FROM bookings`,\n [today, today, today, today, weekEnd],\n ),\n );\n return {\n pending: Number(r?.pending ?? 0),\n confirmed: Number(r?.confirmed ?? 0),\n today: Number(r?.today ?? 0),\n week: Number(r?.week ?? 0),\n };\n}\n\nexport async function setBookingStatus(id: number, status: Status) {\n await q(\"UPDATE bookings SET status = ? WHERE id = ?\", [status, id]);\n}\n\nexport async function countOpenBookingsByPhone(phone: string, today: string) {\n const r = one<{ n: number }>(\n await q(\"SELECT COUNT(*) AS n FROM bookings WHERE phone = ? AND status = 'pending' AND date >= ?\", [phone, today]),\n );\n return Number(r?.n ?? 0);\n}\n\n// ── Blocked dates ───────────────────────────────────────────\nexport async function listBlocked(from: string) {\n return all<{ date: string; reason: string }>(\n await q(\"SELECT * FROM blocked_dates WHERE date >= ? ORDER BY date\", [from]),\n );\n}\n\nexport async function isBlocked(date: string) {\n return !!one(await q(\"SELECT 1 FROM blocked_dates WHERE date = ?\", [date]));\n}\n\nexport async function addBlocked(date: string, reason: string) {\n await q(\"INSERT OR REPLACE INTO blocked_dates (date, reason) VALUES (?, ?)\", [date, reason]);\n}\n\nexport async function removeBlocked(date: string) {\n await q(\"DELETE FROM blocked_dates WHERE date = ?\", [date]);\n}\n\n// ── Gallery ─────────────────────────────────────────────────\nexport async function listGallery(visibleOnly: boolean) {\n return all(\n await q(`SELECT * FROM gallery ${visibleOnly ? \"WHERE visible = 1\" : \"\"} ORDER BY sort, id`),\n );\n}\n\nexport async function getGalleryItem(id: number) {\n if (!Number.isInteger(id)) return null;\n return one(await q(\"SELECT * FROM gallery WHERE id = ?\", [id]));\n}\n\nexport async function addGalleryItem(key: string, mime: string) {\n await q(\n \"INSERT INTO gallery (blob_key, mime, sort) VALUES (?, ?, (SELECT COALESCE(MAX(sort), 0) + 1 FROM gallery))\",\n [key, mime],\n );\n}\n\nexport async function toggleGalleryItem(id: number) {\n await q(\"UPDATE gallery SET visible = 1 - visible WHERE id = ?\", [id]);\n}\n\nexport async function makeGalleryHero(id: number) {\n await q(\n \"UPDATE gallery SET sort = (SELECT COALESCE(MIN(sort), 0) - 1 FROM gallery), visible = 1 WHERE id = ?\",\n [id],\n );\n}\n\nexport async function deleteGalleryItem(id: number) {\n await q(\"DELETE FROM gallery WHERE id = ?\", [id]);\n}\n\n// ── Login throttling ────────────────────────────────────────\nconst WINDOW_MS = 15 * 60 * 1000;\n\nexport async function recentLoginFailures(ip: string) {\n const r = one<{ n: number }>(\n await q(\"SELECT COUNT(*) AS n FROM login_failures WHERE ip = ? AND at > ?\", [ip, Date.now() - WINDOW_MS]),\n );\n return Number(r?.n ?? 0);\n}\n\nexport async function recordLoginFailure(ip: string) {\n await sqlite.batch([\n { sql: \"DELETE FROM login_failures WHERE at < ?\", args: [Date.now() - WINDOW_MS] },\n { sql: \"INSERT INTO login_failures (ip, at) VALUES (?, ?)\", args: [ip, Date.now()] },\n ]);\n}\n","createdAt",["D",1789335703767],"branchVersion","branchId","2fb3b93c-3153-49cc-928f-ccd798836746",{"_30":45,"_32":44,"_34":46,"_36":-5,"_38":47,"_40":14,"_41":42,"_24":25},"lib","200fe74d-8ef8-4343-a5a1-297a2da2eb49","directory",["D",1789335703767],"id","d8f07974-33ec-460f-a8b5-8a56ac73d9bd","najla-makeup",["D",1789334949320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","موقع نجلاء الغفيلي ميك اب ارتست — خدمات ونظام حجوزات","imageUrl","cca8102f-07bb-4295-b44a-38d66d1d3405","pinnedFileId","01a09cac-8e2f-7716-b801-b7ea38740c6d","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f1d6e-b169-7628-a2c5-3fdc2bb2972f","tursoName","d8f0797433ec460fa8b58a56ac73d9bd","tursoHostname","d8f0797433ec460fa8b58a56ac73d9bd-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":60,"_110":111,"_112":25},"branch",{"_13":94,"_32":95,"_48":42,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"isOwned",52,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","asnfq50","handle","displayName","mfcbr4krn8-hash","avatar","https://avatars.githubusercontent.com/u/294484094?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_38":211,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":212,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":213,"_89":214,"_91":215,"_93":25},"tree",[173,175,178,179],"files",[173,174,175,176,177,178,179],"counts",{"_163":68,"_164":143,"_165":68,"_166":167,"_168":169},"contents",[136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":160,"_32":44,"_30":45,"_142":-5,"_41":42,"_40":14,"_144":64,"_38":161,"_13":68,"_34":46,"_36":-5,"_24":25,"_148":-5,"_27":162},{"_48":156,"_32":55,"_30":157,"_142":-5,"_41":42,"_40":143,"_144":64,"_38":158,"_13":68,"_34":46,"_36":-5,"_24":25,"_148":-5,"_27":159},{"_48":150,"_32":151,"_30":152,"_142":-5,"_41":42,"_40":143,"_144":25,"_38":153,"_13":68,"_34":21,"_36":154,"_24":25,"_148":-5,"_27":155},{"_48":140,"_32":141,"_30":62,"_142":-5,"_41":42,"_40":143,"_144":25,"_38":145,"_13":68,"_34":146,"_36":147,"_24":25,"_148":50,"_27":149},"226f6750-65c1-493c-a6db-5287f0367dc2","index.tsx","parentId",1,"latest",["D",1789334949320],"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n// In-memory state. Resets whenever the server restarts.\n// For persistence across restarts, use std/sqlite or std/blob.\nlet count = 0;\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n \n {children}\n \n \n);\n\nconst app = new Hono();\n\napp.get(\"/\", (c) =>\n c.html(\n \n

Hello from Hono JSX

\n A minimal Val Town starter.{\" \"}\n \n Remix this val.\n \n

\n Server count:{\" \"}\n {count}\n

\n \n Increment\n \n

\n Lives in memory on the server. Resets when the val restarts.\n

\n \n ,\n ));\n\napp.get(\"/about\", (c) =>\n c.html(\n \n

About

Server-rendered with Hono JSX on Val Town.

\n ,\n ));\n\n// API routes\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n\n// Serve static files\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// View source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;","label",[141],"3045bc29-8ad5-46f0-9f97-5a77966bb223","README.md","01a09cac-8e2f-7716-b801-b39afe182f45",["D",1789334949320],"# hono-jsx-starter\n\nA minimal [Hono](https://hono.dev) + Hono JSX starter for Val Town.\nServer-rendered HTML, no build step, no React.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| **[`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter)** *(you're here)* | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## What's here\n\n```\nindex.tsx Hono app, Layout, routes\npublic/\n favicon.svg Static asset\n counter.ts Tiny client-side script\n```\n\nThe whole app fits in one file. As you grow it, the natural next moves are:\n\n- Pull `Layout` into its own `.tsx` file once you have 3+ pages.\n- Split routes with `app.route(\"/api\", api)` if `/api/*` grows.\n- Add more files under `public/` — they're served by a single\n `app.get(\"/public/*\", ...)` route.\n\n## Patterns worth knowing\n\n**JSX pragma.** Every `.tsx` file that uses JSX needs this at the top:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\n```\n\n**Server state.** The counter on `/` is `let count = 0` at module scope. It\nlives in memory on the Val Town server and survives across requests — but resets\nwhenever the val restarts (deploys, idle timeouts, etc.). For persistent state,\nswap it for [`std/sqlite`](https://www.val.town/x/std/sqlite) or\n[`std/blob`](https://www.val.town/x/std/blob).\n\n**API routes.** The `Increment` button POSTs to `/api/increment`, which returns\nJSON. Mix server-rendered pages and JSON endpoints in the same Hono app:\n\n```ts\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n```\n\n**Static files.** `serveFile` reads the file by path and serves it with the\nright content-type. `.ts` files are transpiled to JS on request by Val Town — so\nyou can write `public/counter.ts` and reference it as\n`

Diff · v2