`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @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(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_279":280,"_281":282},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":91,"_27":103,"_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":60,"_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",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/Forms.tsx","latestPath","fileId","a0494c8e-b1ff-11f1-a156-1607ee4eb77e","name","Forms.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {useEffect,useState} from 'https://esm.sh/react@18.2.0';\nimport {standings} from '../logic.ts';\nconst button='rounded-lg px-4 py-2 font-medium border border-stone-300 bg-white hover:bg-stone-100';\nconst primary='rounded-lg px-4 py-2 font-medium bg-emerald-800 text-white hover:bg-emerald-900';\nconst input='border border-stone-300 rounded-lg px-3 py-2 bg-white w-full';\nconst fmt=(n:any)=>n===null?'—':Number(n).toLocaleString('nl-NL',{minimumFractionDigits:3,maximumFractionDigits:3});\nconst today=()=>new Date().toLocaleDateString('sv-SE');\nexport function Field({label,children}:any){return {label}{children}}\nexport function Standings({state}:any){return

{['#','Deelnemer','Punten','Gespeeld','Nog','Startmoy.','Actueel moy.'].map(t=>)}{standings(state).map((p:any,i:number)=>)}

{t}
{i+1}	{p.shortName??p.name}	{p.points}	{p.played}	{p.remaining}	{fmt(p.start)}	{fmt(p.average)}

}\nexport function MatchForm({state,match,save,cancel,busy}:any){const [draft,setDraft]=useState(match??{a:'',b:'',ca:'',cb:'',date:today()});const edit=(k:string,v:any)=>setDraft({...draft,[k]:v});return }\nexport function PlayerRow({p,save,busy}:any){const [name,N]=useState(p.name),[start,S]=useState(p.start??'');return }\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { standings } from \"../logic.ts\";\nconst button =\n \"rounded-lg px-4 py-2 font-medium border border-stone-300 bg-white hover:bg-stone-100\";\nconst primary =\n \"rounded-lg px-4 py-2 font-medium bg-emerald-800 text-white hover:bg-emerald-900\";\nconst input = \"border border-stone-300 rounded-lg px-3 py-2 bg-white w-full\";\nconst fmt = (n: any) =>\n n === null ? \"—\" : Number(n).toLocaleString(\"nl-NL\", {\n minimumFractionDigits: 3,\n maximumFractionDigits: 3,\n });\nconst today = () => new Date().toLocaleDateString(\"sv-SE\");\nexport function Field({ label, children }: any) {\n return (\n \n {label}\n {children}\n \n );\n}\nexport function Standings({ state }: any) {\n return (\n

\n \n \n \n {[\n \"#\",\n \"Deelnemer\",\n \"Punten\",\n \"Gespeeld\",\n \"Nog\",\n \"Startmoy.\",\n \"Actueel moy.\",\n ].map((t) => (\n \n ))}\n \n \n \n {standings(state).map((p: any, i: number) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

{t}
{i + 1}	{p.shortName ?? p.name}	\n {p.points}\n	{p.played}	{p.remaining}	{fmt(p.start)}	{fmt(p.average)}

\n );\n}\nexport function MatchForm({ state, match, save, cancel, busy }: any) {\n const [draft, setDraft] = useState(\n match ?? { a: \"\", b: \"\", ca: \"\", cb: \"\", date: today() },\n );\n const edit = (k: string, v: any) => setDraft({ ...draft, [k]: v });\n return (\n {\n e.preventDefault();\n save({\n type: \"match\",\n match: {\n ...draft,\n a: Number(draft.a),\n b: Number(draft.b),\n ca: draft.ca === \"\" ? null : Number(draft.ca),\n cb: draft.cb === \"\" ? null : Number(draft.cb),\n },\n });\n }}\n className=\"p-5 rounded-xl bg-emerald-50 border border-emerald-200 mb-6\"\n >\n

\n {match ? \"Uitslag corrigeren\" : \"Nieuwe uitslag\"}\n

\n \n edit(\"date\", e.target.value)}\n />\n \n {[[\"a\", \"Speler A\"], [\"ca\", \"Caramboles A\"], [\"b\", \"Speler B\"], [\n \"cb\",\n \"Caramboles B\",\n ]].map(([k, l]) => (\n \n {k.length === 1\n ? (\n edit(k, e.target.value)}\n >\n \n {state.players.map((p: any) => (\n \n ))}\n \n )\n : (\n edit(k, e.target.value)}\n />\n )}\n \n ))}\n

\n \n \n

\n Beide spelers krijgen 20 beurten. Een score van 0 telt mee; een leeg\n veld niet.\n

\n \n );\n}\nexport function PlayerRow({ p, save, busy }: any) {\n const [name, N] = useState(p.name), [start, S] = useState(p.start ?? \"\");\n return (\n {\n e.preventDefault();\n save({\n type: \"player\",\n player: {\n id: p.id,\n name,\n start: start === \"\" ? null : Number(start),\n },\n });\n }}\n >\n N(e.target.value)}\n />\n S(e.target.value)}\n />\n \n \n );\n}\n","createdAt",["D",1789584973559],"branchVersion","branchId","5ab58193-b7b9-4e57-9c70-3e9498f42f3b","id","72e10bea-a051-405e-a7f1-e9f9c480e56a","biljartcompetitie",["D",1789582693703],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Clubcompetitie: uitslagen, standen en weekformulieren","imageUrl","5db7fd95-a144-4e32-9db1-f1dd5f6c8c16","pinnedFileId","01a0ab70-d5fe-737e-9de0-cce5a2b9f03c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0ab6b-a1e4-73fe-b072-d871155b5e9e","tursoName","72e10beaa051405ea7f1e9f9c480e56a","tursoHostname","72e10beaa051405ea7f1e9f9c480e56a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789583507842],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":103},"org",{"_101":100,"_102":103,"_104":103,"_18":56,"_105":106,"_107":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",86,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","raymondv","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":274,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":275,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":276,"_85":277,"_87":278,"_89":25},"tree",[175,186,187,188],"files",[175,176,177,178,179,180,181,182,183,184,185,186,187,188],"counts",{"_165":64,"_166":150,"_167":64,"_168":169,"_170":171},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":159,"_32":160,"_30":161,"_136":-5,"_42":43,"_41":150,"_138":60,"_39":162,"_13":64,"_34":163,"_36":-5,"_24":25,"_143":-5,"_27":164},{"_44":153,"_32":154,"_30":155,"_136":-5,"_42":43,"_41":150,"_138":60,"_39":156,"_13":64,"_34":20,"_36":157,"_24":25,"_143":-5,"_27":158},{"_44":146,"_32":147,"_30":148,"_136":-5,"_42":43,"_41":140,"_138":25,"_39":149,"_13":150,"_34":20,"_36":151,"_24":25,"_143":-5,"_27":152},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":25,"_39":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":144,"_27":145},"852aa83b-02ea-4203-9645-a834acec619f","index.ts","parentId",12,"latest",["D",1789584339140],2,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4\";\nimport { oauthMiddleware,getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { applyAction,displayState } from \"./frontend/logic.ts\";\nconst app=new Hono();\nasync function identity(req:Request){\n const session=await getOAuthUserData(req);\n if(!session?.user)return {editor:false,owner:false,username:null};\n const r=await sqlite.execute({sql:'SELECT role FROM admins WHERE user_id=? OR (user_id IS NULL AND lower(username)=lower(?))',args:[session.user.id,session.user.username??'']});\n return {editor:r.rows.length>0,owner:r.rows.some(r=>r.role==='owner'),username:session.user.username};\n}\nasync function current(){const r=await sqlite.execute('SELECT version,data FROM competition WHERE id=1');if(!r.rows.length)throw new Error('Competitie nog niet ingericht');return {version:Number(r.rows[0].version),state:JSON.parse(String(r.rows[0].data))};}\napp.use('/api/*',async(c,next)=>{c.header('Cache-Control','no-store');c.header('X-Content-Type-Options','nosniff');if(!['GET','HEAD'].includes(c.req.method)){\n if(c.req.header('Origin')!==new URL(c.req.url).origin||!c.req.header('Content-Type')?.startsWith('application/json'))return c.json({error:'Ongeldige aanvraag.'},403);\n }await next();});\napp.get('/api/state',async c=>{const data=await current(),user=await identity(c.req.raw);return c.json({...data,state:displayState(data.state,user.editor),user});});\napp.get('/api/history',async c=>{if(!(await identity(c.req.raw)).editor)return c.json({error:'Log in als beheerder.'},401);const r=await sqlite.execute('SELECT id,version,actor,action,created_at FROM history ORDER BY id DESC LIMIT 150');return c.json(r.rows);});\napp.get('/api/export',async c=>{if(!(await identity(c.req.raw)).editor)return c.json({error:'Log in als beheerder.'},401);const results=await sqlite.batch([{sql:'SELECT version,data FROM competition WHERE id=1'},{sql:'SELECT * FROM history ORDER BY id'}],'read');return new Response(JSON.stringify({format:'biljartcompetitie-v1',exportedAt:new Date().toISOString(),version:Number(results[0].rows[0].version),state:JSON.parse(String(results[0].rows[0].data)),history:results[1].rows},null,2),{headers:{'Content-Type':'application/json','Content-Disposition':'attachment; filename=\"biljartcompetitie-backup.json\"','Cache-Control':'no-store'}});});\napp.get('/api/results.csv',async c=>{const {state:raw}=await current();const state=displayState(raw);const q=(s:any)=>'\"'+String(s).replace(/^([=+@-])/,'\\'$1').replaceAll('\"','\"\"')+'\"';const name=(id:number)=>state.players.find((p:any)=>p.id===id).name;const lines=[['Demonstratie','Datum','Speler A','Caramboles A','Speler B','Caramboles B'],...state.matches.map((m:any)=>[state.demo?'JA':'NEE',m.date,name(m.a),m.ca,name(m.b),m.cb])];return new Response('\\uFEFF'+lines.map(r=>r.map(q).join(';')).join('\\r\\n'),{headers:{'Content-Type':'text/csv; charset=utf-8','Content-Disposition':'attachment; filename=\"uitslagen.csv\"'}});});\napp.post('/api/action',async c=>{\n const u=await identity(c.req.raw);if(!u.editor)return c.json({error:'Log in als beheerder.'},401);\n if(Number(c.req.header('Content-Length')??0)>10000)return c.json({error:'Aanvraag te groot.'},413);\n const body=await c.req.json();const old=await current();if(!Number.isSafeInteger(body.version)||body.version!==old.version)return c.json({error:'Iemand heeft intussen gegevens gewijzigd. Vernieuw de pagina en voer je wijziging opnieuw in.'},409);\n let state;try{state=applyAction(old.state,body.action,u.owner);}catch(e){return c.json({error:e.message},400);}\n const r=await sqlite.execute({sql:'UPDATE competition SET data=?,version=version+1,actor=?,action=? WHERE id=1 AND version=? RETURNING version',args:[JSON.stringify(state),u.username??'beheerder',JSON.stringify(body.action),body.version]});\n if(!r.rows.length)return c.json({error:'Gelijktijdige wijziging. Vernieuw de pagina voordat je opnieuw opslaat.'},409);\n return c.json({state:displayState(state,true),version:Number(r.rows[0].version),user:u});\n});\napp.get('/api/admins',async c=>{if(!(await identity(c.req.raw)).owner)return c.json({error:'Alleen de eigenaar.'},403);return c.json((await sqlite.execute('SELECT username,role FROM admins ORDER BY role,username')).rows);});\napp.post('/api/admins',async c=>{\n const u=await identity(c.req.raw);if(!u.owner)return c.json({error:'Alleen de eigenaar.'},403);\n const b=await c.req.json();if(typeof b.username!=='string'||!/^[a-zA-Z0-9_-]{1,40}$/.test(b.username))return c.json({error:'Vul een geldige Val Town-gebruikersnaam in.'},400);\n if(b.remove)await sqlite.execute({sql:\"DELETE FROM admins WHERE lower(username)=lower(?) AND role='editor'\",args:[b.username]});\n else await sqlite.execute({sql:\"INSERT OR IGNORE INTO admins(username,role) VALUES(lower(?),'editor')\",args:[b.username]});\n return c.json({ok:true});\n});\napp.get('/',c=>{c.header('Cache-Control','no-store');return c.html(Root());});\napp.get('/__immutable/*',c=>serveImmutableFile(c.req.path));\napp.get('/source',c=>c.redirect(parseVal().links.self.val));\napp.onError(err=>{console.error(err);return Response.json({error:'Opslaan of laden is niet gelukt. Probeer opnieuw; je invoer blijft staan.'},{status:500});});\nexport default oauthMiddleware(app.fetch);\n","label","bos",[135],"9e7666ae-1697-4f8d-bdb8-bea2445208a9","README.md","01a0ab70-d5fe-737e-9de0-cbc1b6eaafd1",["D",1789582968863],1,"# Biljartcompetitie\n\nEerste versie in aanbouw. Demonstratiegegevens uit het aangeleverde Excelbestand. Code wordt onderhouden via Codex en de Val Town-koppeling.\n",[147],"acbbe75b-ff67-4cfd-b38a-7945edc6d22a","CHANGELOG.md","01a0ab70-d5fe-737e-9de0-c50f1a113208",["D",1789582693703],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @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(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

{match?'Uitslag corrigeren':'Nieuwe uitslag'}

\n {match ? \"Uitslag corrigeren\" : \"Nieuwe uitslag\"}\n

Diff · v19