[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_266":267,"_268":269},"routes/_app.x.$handle.$name",{"_110":109,"_32":50,"_119":96,"_27":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_21":-5,"_131":132,"_133":134,"_135":25,"_136":137,"_138":65,"_139":-5,"_140":-5,"_141":142},"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,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":60,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":25},"version",2,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","backend","latestPath","fileId","bff1764e-1bef-4dca-9a79-127f452c3718","name","fileType","directory","content","createdAt",["D",1783886920336],"branchVersion","branchId","ac24cfe3-aa4a-4a44-ac23-dfa129884367",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"backend/auth.ts","7993ba94-7e2d-11f1-8c23-1607ee4eb77e","auth.ts","script","import bcrypt from \"npm:bcryptjs@2.4.3\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initAuthTables() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS users (\n id TEXT PRIMARY KEY,\n email TEXT UNIQUE NOT NULL,\n password_hash TEXT NOT NULL,\n tier TEXT NOT NULL DEFAULT 'free',\n created_at TEXT NOT NULL\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS sessions (\n token TEXT PRIMARY KEY,\n user_id TEXT NOT NULL,\n created_at TEXT NOT NULL,\n expires_at TEXT NOT NULL\n )`);\n}\n\nexport function newId() {\n return crypto.randomUUID();\n}\n\nexport function newToken() {\n return crypto.randomUUID().replace(/-/g, \"\") + crypto.randomUUID().replace(/-/g, \"\");\n}\n\nexport async function hashPassword(pw: string) {\n return bcrypt.hash(pw, 10);\n}\n\nexport async function verifyPassword(pw: string, hash: string) {\n return bcrypt.compare(pw, hash);\n}\n\nexport interface UserRow {\n id: string;\n email: string;\n password_hash: string;\n tier: string;\n created_at: string;\n}\n\nexport async function findUserByEmail(email: string): Promise {\n const res = await sqlite.execute({\n sql: \"SELECT * FROM users WHERE email = ?\",\n args: [email.trim().toLowerCase()],\n });\n return (res.rows[0] as unknown as UserRow) ?? null;\n}\n\nexport async function findUserById(id: string): Promise {\n const res = await sqlite.execute({ sql: \"SELECT * FROM users WHERE id = ?\", args: [id] });\n return (res.rows[0] as unknown as UserRow) ?? null;\n}\n\nexport async function createUser(email: string, password: string): Promise {\n const id = newId();\n const passwordHash = await hashPassword(password);\n const createdAt = new Date().toISOString();\n await sqlite.execute({\n sql: \"INSERT INTO users (id, email, password_hash, tier, created_at) VALUES (?, ?, ?, 'free', ?)\",\n args: [id, email.trim().toLowerCase(), passwordHash, createdAt],\n });\n return { id, email: email.trim().toLowerCase(), password_hash: passwordHash, tier: \"free\", created_at: createdAt };\n}\n\nexport async function createSession(userId: string): Promise<{ token: string; expiresAt: string }> {\n const token = newToken();\n const createdAt = new Date().toISOString();\n const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, user_id, created_at, expires_at) VALUES (?, ?, ?, ?)\",\n args: [token, userId, createdAt, expiresAt],\n });\n return { token, expiresAt };\n}\n\nexport async function getSessionUser(token: string | undefined): Promise {\n if (!token) return null;\n const res = await sqlite.execute({\n sql: \"SELECT users.* FROM sessions JOIN users ON sessions.user_id = users.id WHERE sessions.token = ? AND sessions.expires_at > ?\",\n args: [token, new Date().toISOString()],\n });\n return (res.rows[0] as unknown as UserRow) ?? null;\n}\n\nexport async function deleteSession(token: string | undefined) {\n if (!token) return;\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE token = ?\", args: [token] });\n}\n",["D",1783886920336],"id","57d5c0ab-460a-4be7-9d20-9cb49eb8f0f0","finsystem-pro",["D",1783886796403],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","ФинСистема — бюджет + портфель облигаций","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789541999&sig=8fad4d8ed521ff338d1e7bb443f46241d1f9e0e657d24a41f82306e6eb92823c","7392ed86-5030-4ce7-948e-d7a47fad19d8","pinnedFileId","019f57f0-56c5-76eb-9c36-7947eada3c8f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f57e3-4ff5-7637-8a30-e83785c0308e","tursoName","57d5c0ab460a4be79d209cb49eb8f0f0","tursoHostname","57d5c0ab460a4be79d209cb49eb8f0f0-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789473046147],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_118":114},"org",{"_110":109,"_111":112,"_113":114,"_18":61,"_115":116,"_117":25},"branch",{"_13":95,"_32":96,"_48":40,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"isOwned",198,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","greenpes92","handle","displayName","Иван Забавников","avatar","https://lh3.googleusercontent.com/a/ACg8ocJcdteRlJJiR797nVlMg2OC01cNcvSxYR_S-gOUIwQ2oMi6Ma0p=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_36":261,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":60,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":262,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":263,"_90":264,"_92":265,"_94":25},"tree",[192,194,201,202],"files",[192,193,194,195,196,197,198,199,200,201,202],"counts",{"_182":69,"_183":161,"_184":69,"_185":186,"_187":188},"contents",[154,155,156,157],"upstreamProject",{"_48":104,"_32":150,"_57":151,"_59":60,"_54":55,"_88":152},"upstreamBranch",{"_48":99,"_36":143,"_144":145,"_32":96,"_97":104,"_13":146,"_98":-5,"_100":-5,"_147":148,"_52":-5,"_94":25,"_54":55,"_108":149,"_70":106,"_107":150},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_110":149,"_118":153},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789541999&sig=156ae2b8ac752fc06f52d45eab428b512e0d31e2aab99a830d8bb32149c64f0f",{"_48":179,"_32":28,"_30":31,"_160":-5,"_39":40,"_38":14,"_162":65,"_36":180,"_13":69,"_33":34,"_35":-5,"_24":25,"_166":-5,"_27":181},{"_48":174,"_32":175,"_30":176,"_160":-5,"_39":40,"_38":161,"_162":65,"_36":177,"_13":69,"_33":34,"_35":-5,"_24":25,"_166":-5,"_27":178},{"_48":168,"_32":169,"_30":170,"_160":-5,"_39":40,"_38":161,"_162":65,"_36":171,"_13":69,"_33":21,"_35":172,"_24":25,"_166":-5,"_27":173},{"_48":158,"_32":159,"_30":63,"_160":-5,"_39":40,"_38":161,"_162":25,"_36":163,"_13":69,"_33":164,"_35":165,"_24":25,"_166":-5,"_27":167},"7b045bd7-d052-4de7-929d-244bfc274556","index.ts","parentId",1,"latest",["D",1783886796403],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(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","label",[159],"774b67ca-8942-43db-8feb-ac9009321ab0","README.md","019f57f0-56c5-76eb-9c36-743e935a64fd",["D",1783886796403],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\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) | 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)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[169],"d6492da4-9220-482a-a637-97a20bfd9dfb","frontend","019f57f0-56c5-76eb-9c36-734bcf67f8b7",["D",1783886796403],[175],"7e51d2b4-be4d-427b-806b-f671fb0c1c28",["D",1783886920336],[28],"pulls","branches","forks","envVars",{"_189":69,"_191":69},"connections",{"_189":69,"_190":69},"count","unfilledCount","emptyCount",{"_48":179,"_32":28,"_30":31,"_160":-5,"_39":40,"_38":14,"_162":65,"_36":258,"_13":69,"_33":34,"_35":-5,"_24":25,"_166":-5,"_204":259,"_27":260},{"_48":254,"_32":44,"_30":43,"_160":31,"_39":40,"_38":14,"_162":25,"_36":255,"_13":69,"_33":45,"_35":46,"_24":25,"_166":-5,"_204":256,"_27":257},{"_48":174,"_32":175,"_30":176,"_160":-5,"_39":40,"_38":161,"_162":65,"_36":251,"_13":69,"_33":34,"_35":-5,"_24":25,"_166":-5,"_204":252,"_27":253},{"_48":247,"_32":239,"_30":234,"_160":176,"_39":40,"_38":161,"_162":65,"_36":248,"_13":69,"_33":34,"_35":-5,"_24":25,"_166":-5,"_204":249,"_27":250},{"_48":240,"_32":241,"_30":242,"_160":234,"_39":40,"_38":161,"_162":25,"_36":243,"_13":69,"_33":45,"_35":244,"_24":25,"_166":-5,"_204":245,"_27":246},{"_48":231,"_32":232,"_30":233,"_160":234,"_39":40,"_38":161,"_162":25,"_36":235,"_13":69,"_33":45,"_35":236,"_24":25,"_166":-5,"_204":237,"_27":238},{"_48":224,"_32":225,"_30":226,"_160":176,"_39":40,"_38":161,"_162":65,"_36":227,"_13":69,"_33":21,"_35":228,"_24":25,"_166":-5,"_204":229,"_27":230},{"_48":217,"_32":218,"_30":219,"_160":176,"_39":40,"_38":161,"_162":25,"_36":220,"_13":69,"_33":21,"_35":221,"_24":25,"_166":-5,"_204":222,"_27":223},{"_48":210,"_32":211,"_30":212,"_160":176,"_39":40,"_38":161,"_162":65,"_36":213,"_13":69,"_33":45,"_35":214,"_24":25,"_166":-5,"_204":215,"_27":216},{"_48":168,"_32":169,"_30":170,"_160":-5,"_39":40,"_38":161,"_162":65,"_36":207,"_13":69,"_33":21,"_35":172,"_24":25,"_166":-5,"_204":208,"_27":209},{"_48":158,"_32":159,"_30":63,"_160":-5,"_39":40,"_38":161,"_162":25,"_36":203,"_13":69,"_33":164,"_35":165,"_24":25,"_166":-5,"_204":205,"_27":206},["D",1783886796403],"children",[],[159],["D",1783886796403],[],[169],"8247074c-a13d-4598-9f38-dcedb692d6d9","index.tsx","019f57f0-56c5-76eb-9c36-6dc2bc748403",["D",1783886796403],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[175,211],"2da1a916-c750-4db7-9575-eb3a93c0017b","index.html","019f57f0-56c5-76eb-9c36-6b11cb2b6576",["D",1783886796403],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[175,218],"83b222ec-7afd-4131-b39e-3cac6efd7914","favicon.svg","019f57f0-56c5-76eb-9c36-66ee239d7454",["D",1783886796403],"\n",[],[175,225],"b051f559-2578-406c-804a-01dd8f5a0359","Counter.tsx","019f57f0-56c5-76eb-9c36-5f82130e329a","019f57f0-56c5-76eb-9c36-61eb7049bf59",["D",1783886796403],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[175,239,232],"components","83cf3671-7047-4d90-a511-056218400741","App.tsx","019f57f0-56c5-76eb-9c36-595e39a139ba",["D",1783886796403],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[],[175,239,241],"0b791deb-7a88-4686-9392-17b60554e75e",["D",1783886796403],[196,197],[175,239],["D",1783886796403],[195,198,199,200],[175],"ff93893a-7a6f-4366-8ade-0e65011946d9",["D",1783886920336],[],[28,44],["D",1783886920336],[193],[28],["D",1783886796403],["D",1789473046147],{"_110":109,"_118":114},{"_110":109,"_111":112,"_113":114,"_18":61,"_115":116,"_117":25},{"_13":95,"_32":96,"_48":40,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"ctx",{"_88":-5,"_140":299,"_300":301,"_302":303,"_304":25,"_305":25,"_306":25,"_307":65,"_308":-5,"_309":-7,"_310":-7,"_311":69,"_312":25,"_313":25,"_314":-5,"_315":25,"_316":25,"_317":25,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":96,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2