[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_309":310,"_311":312},"routes/_app.x.$handle.$name",{"_99":98,"_32":44,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a09cac-8e2f-7716-b801-b39afe182f45","name","fileType","content","# 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`\n \n );\n}\n\nexport function BookingPage({ s, b }: { s: Settings; b: Booking }) {\n const msg =\n `مرحبا نجلاء 🌸\\nأرسلت طلب حجز عبر الموقع:\\nرقم الحجز: ${b.code}\\nالخدمة: ${b.service_name}\\nالموعد: ${\n fmtDate(b.date)\n } - ${fmtTime(b.time)}\\nالاسم: ${b.name}`;\n const heading = {\n pending: \"استلمنا طلب حجزك 🤍\",\n confirmed: \"تم تأكيد موعدك 🤍\",\n done: \"شكراً لزيارتك 🤍\",\n cancelled: \"تم إلغاء هذا الحجز\",\n }[b.status];\n return (\n \n

\n {STATUS_LABELS[b.status]}\n

{heading}

\n رقم الحجز: {b.code}\n

الخدمة: \n {b.service_name}\n {b.people > 1 ? ` · ${peopleLabel(b.people)}` : \"\"}\n
الموعد: \n {fmtDate(b.date)} · {fmtTime(b.time)}\n
المكان: \n {LOCATIONS[b.location_type] ?? \"\"}\n {b.city ? ` · ${b.city}` : \"\"}\n
الاسم: {b.name}

\n {b.status === \"pending\"\n ?

الموعد محجوز لك مبدئياً. أرسلي التفاصيل على واتساب لتسريع التأكيد:

\n : null}\n \n إرسال تفاصيل الحجز عبر واتساب\n \n

احتفظي برابط هذه الصفحة لمتابعة حالة حجزك.

{heading}

لوحة الإدارة

\n {b.name} {STATUS_LABELS[b.status]}\n

الحجوزات

\n {fmtDate(date)}\n {date === today ? \" — اليوم\" : \"\"}\n

الخدمات والأسعار

معرض الأعمال

الإعدادات

مواعيد العمل

محتوى الموقع

التواصل والظهور

أيام مغلقة

Diff · v14