`, 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",{"_276":277,"_278":279},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_107":89,"_26":101,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":24,"_121":122,"_123":58,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_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":24},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","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","createdAt",["D",1789584688894],"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",{"_99":98,"_106":101},"org",{"_99":98,"_100":101,"_102":101,"_18":54,"_103":104,"_105":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",86,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","raymondv","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_31":44,"_37":271,"_46":-5,"_47":24,"_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":272,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":273,"_83":274,"_85":275,"_87":24},"tree",[173,184,185,186],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186],"counts",{"_163":62,"_164":148,"_165":62,"_166":167,"_168":169},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":157,"_31":158,"_29":159,"_134":-5,"_40":41,"_39":148,"_136":58,"_37":160,"_13":62,"_33":161,"_35":-5,"_23":24,"_141":-5,"_26":162},{"_42":151,"_31":152,"_29":153,"_134":-5,"_40":41,"_39":148,"_136":58,"_37":154,"_13":62,"_33":20,"_35":155,"_23":24,"_141":-5,"_26":156},{"_42":144,"_31":145,"_29":146,"_134":-5,"_40":41,"_39":138,"_136":24,"_37":147,"_13":148,"_33":20,"_35":149,"_23":24,"_141":-5,"_26":150},{"_42":132,"_31":133,"_29":56,"_134":-5,"_40":41,"_39":135,"_136":24,"_37":137,"_13":138,"_33":139,"_35":140,"_23":24,"_141":142,"_26":143},"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",[133],"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",[145],"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'}

Diff · v13