[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_280":281,"_282":283},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_77":154,"_46":-7,"_155":-5,"_17":156,"_157":158,"_159":160,"_161":162,"_163":164,"_165":-5,"_166":167,"_168":169,"_170":54,"_171":172,"_173":26,"_174":-5,"_175":-5,"_176":177},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32},"handle","lightweight","name","reactHonoStarter","branchName","main","project",{"_33":65,"_13":14,"_40":114,"_52":-5,"_115":54,"_55":56,"_116":56,"_35":-5,"_117":-5,"_118":119,"_120":121,"_122":26,"_123":-5,"_124":125,"_126":127,"_59":128,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":134,"_135":134,"_136":137,"_138":137,"_139":137,"_140":134,"_141":134,"_142":143,"_144":145,"_146":28,"_53":54},"ahead",37,"behind",24,"diff",{"_70":71,"_72":73,"_74":75},"hasChanges",true,"sourceBranch",{"_46":63,"_13":16,"_33":64,"_44":65,"_48":39,"_49":66,"_67":56,"_68":45,"_69":60,"_61":14,"_57":12},"targetBranch",{"_33":39,"_40":41,"_42":43,"_13":16,"_44":45,"_46":47,"_48":-5,"_49":-5,"_50":51,"_52":-5,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62},"pull",{"_33":34,"_35":36,"_37":38},"id","9e62a6d0-3bd7-11f0-b853-9e149126039e","description","To further explain how this pattern works, per this github discussion:\nhttps://github.com/val-town/val-town-product/discussions/221#discussioncomment-13295491\n\n","state","pending","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",39,"2fc4651e-3908-11f0-9089-9e149126039e","2fc2b76e-3908-11f0-9089-9e149126039e",67,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[76],{"_77":78,"_79":80,"_81":82},"path","frontend/components/App.tsx","targetFile",{"_33":105,"_13":84,"_85":106,"_87":107,"_89":39,"_90":108,"_91":54,"_40":109,"_46":110,"_94":95,"_96":111,"_72":54,"_98":-5,"_99":-7,"_77":112,"_101":113},"sourceFile",{"_33":83,"_13":84,"_85":86,"_87":88,"_89":64,"_90":63,"_91":26,"_40":92,"_46":93,"_94":95,"_96":97,"_72":54,"_98":-5,"_99":-7,"_77":100,"_101":102},"076074a6-3bd7-11f0-b038-9e149126039e","App.tsx","fileId","ab531314-2a38-4b40-9f50-589122e97b1d","parentId","c1495903-0e57-4ed0-8170-2487a90eaf80","branchId","branchVersion","latest",["D",1748445517618],32,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst lineage = {\n // host: location.host,\n \"route\": location.pathname,\n filename: location.pathname.split(\"/\").filter(Boolean).pop() || \"index.html\",\n externalScripts: Array.from(document.scripts)\n .filter(script => script.src && script.src.includes(\"index.tsx\"))\n .map(script => new URL(script.src).pathname),\n \"meta.import.url\": new URL(import.meta.url).pathname,\n};\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n\n

\n  {JSON.stringify(\n      {\n        lineage: lineage,\n      }, null, 2)}\n

\n );\n}","label","children",[103,104,84],"contentHash","5a8ba85a86634f61082d444a113d2d6dc32c38e1b81ca2fe143cfbfe8c249513","frontend","components","5cb7a1f2-f53e-11ef-937e-569c3dd06744","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",27,["D",1740683366401],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[103,104,84],"572f45a0f0ec99935ff566c31d3bbf761edf962e408c2e2fb6df62cbb636a5c4",["D",1748136777221],"legacyEnvVars","httpPrivacy","imageUrl","userId","449588c0-326d-11f0-a80c-0741f032ef73","pinnedFileId","e54f9b59-5436-4fc1-8515-1b3a8f365608","pinPreview","pinMigrated","screenshotVersion",17,"likeCount",1,"65f1d616-c14b-419c-88a0-e2308cab925b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_153":149},"org",{"_11":12,"_147":-5,"_148":149,"_118":119,"_150":151,"_152":54},"branch","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/aa289d5e-22db-464f-ba88-7288e2183b00/square512?exp=1789538399&sig=ef4427459541ddccf7eddd1172dc635be61093aed67b21934ed7e7a4a5673e68","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_33":65,"_13":14,"_40":276,"_52":-5,"_115":54,"_55":56,"_116":56,"_35":-5,"_117":-5,"_118":119,"_120":121,"_122":26,"_123":-5,"_124":125,"_126":127,"_59":128,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":134,"_135":134,"_136":137,"_138":137,"_139":137,"_140":134,"_141":134,"_142":277,"_144":278,"_146":279,"_53":54},"tree",[215,217,224],"files",[215,216,217,218,219,220,221,222,223,224],"counts",{"_205":197,"_206":190,"_207":190,"_208":209,"_210":211},"contents",[184,185,186],"file","upstreamProject",{"_33":45,"_13":62,"_35":180,"_117":181,"_55":56,"_142":182},"upstreamBranch",{"_33":39,"_40":178,"_42":179,"_13":16,"_44":45,"_46":47,"_48":-5,"_49":-5,"_50":51,"_52":-5,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789538399&sig=d91a7ef87f90c894c3b8d0b9fb95840fd02478ac34a646812058e001671e6ecb",{"_11":58,"_153":183},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789538399&sig=ed57122c136965e1015088c1b79a18d1d4e6250d1eb81abacde1e740f48894e7",{"_33":200,"_13":201,"_85":202,"_87":-5,"_89":64,"_90":127,"_91":26,"_40":203,"_46":197,"_94":198,"_96":-5,"_72":54,"_98":-5,"_77":204},{"_33":194,"_13":103,"_85":195,"_87":-5,"_89":64,"_90":127,"_91":26,"_40":196,"_46":197,"_94":198,"_96":-5,"_72":54,"_98":-5,"_77":199},{"_33":187,"_13":188,"_85":189,"_87":-5,"_89":64,"_90":190,"_91":26,"_40":191,"_46":127,"_94":165,"_96":192,"_72":54,"_98":-5,"_77":193},"2845b266-3bd3-11f0-9755-9e149126039e","README.md","7e1c4bbf-5129-4a3f-9c21-ed14355fdc2f",2,["D",1748443854820],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the top-right.\n\n## How it works\n\n- The **entrypoint** is [`/backend/index.ts`](/backend/index.ts). That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest reading the files in this order: \n\n[`/backend/index.ts`](/backend/index.ts) -> [`/frontend/index.html`](/frontend/index.html) -> [`/frontend/index.tsx`](/frontend/index.tsx) -> [`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.",[188],"2fc70ea4-3908-11f0-9089-9e149126039e","c584a263-8c6b-4574-b1c4-fb60e1dc4d23",["D",1748136777221],0,"directory",[103],"2fc6aad6-3908-11f0-9089-9e149126039e","backend","077cb278-e752-458d-a2de-613cb33156ea",["D",1748136777221],[201],"pulls","branches","forks","envVars",{"_212":197,"_214":197},"connections",{"_212":197,"_213":197},"count","unfilledCount","emptyCount",{"_33":200,"_13":201,"_85":202,"_87":-5,"_89":64,"_90":127,"_91":26,"_40":273,"_46":197,"_94":198,"_96":-5,"_72":54,"_98":-5,"_99":274,"_77":275},{"_33":265,"_13":266,"_85":121,"_87":202,"_89":64,"_90":125,"_91":26,"_40":267,"_46":268,"_94":269,"_96":270,"_72":54,"_98":-5,"_99":271,"_77":272},{"_33":194,"_13":103,"_85":195,"_87":-5,"_89":64,"_90":127,"_91":26,"_40":262,"_46":197,"_94":198,"_96":-5,"_72":54,"_98":-5,"_99":263,"_77":264},{"_33":258,"_13":104,"_85":88,"_87":195,"_89":64,"_90":127,"_91":26,"_40":259,"_46":197,"_94":198,"_96":-5,"_72":54,"_98":-5,"_99":260,"_77":261},{"_33":83,"_13":84,"_85":86,"_87":88,"_89":64,"_90":63,"_91":26,"_40":92,"_46":93,"_94":95,"_96":97,"_72":54,"_98":-5,"_99":256,"_77":257},{"_33":249,"_13":250,"_85":251,"_87":195,"_89":64,"_90":127,"_91":26,"_40":252,"_46":197,"_94":165,"_96":253,"_72":54,"_98":-5,"_99":254,"_77":255},{"_33":242,"_13":243,"_85":244,"_87":195,"_89":64,"_90":127,"_91":26,"_40":245,"_46":197,"_94":165,"_96":246,"_72":54,"_98":-5,"_99":247,"_77":248},{"_33":235,"_13":236,"_85":237,"_87":195,"_89":64,"_90":127,"_91":26,"_40":238,"_46":197,"_94":95,"_96":239,"_72":54,"_98":-5,"_99":240,"_77":241},{"_33":228,"_13":229,"_85":230,"_87":195,"_89":64,"_90":127,"_91":26,"_40":231,"_46":197,"_94":165,"_96":232,"_72":54,"_98":-5,"_99":233,"_77":234},{"_33":187,"_13":188,"_85":189,"_87":-5,"_89":64,"_90":190,"_91":26,"_40":225,"_46":127,"_94":165,"_96":192,"_72":54,"_98":-5,"_99":226,"_77":227},["D",1748443854820],[],[188],"2fc6f810-3908-11f0-9089-9e149126039e","style.css","a3ee8a76-fd71-425b-944d-de68a0c70ae9",["D",1748136777221],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[103,229],"2fc6f4c8-3908-11f0-9089-9e149126039e","index.tsx","cf7033b2-cfcf-4998-8ba6-1836f53da712",["D",1748136777221],"/** @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();",[],[103,236],"2fc6f216-3908-11f0-9089-9e149126039e","index.html","a65b23bd-efcc-477b-9881-cb5090fd2b66",["D",1748136777221],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[103,243],"2fc6ef78-3908-11f0-9089-9e149126039e","favicon.svg","10ff339a-8aae-41cd-aa85-a41b462f805c",["D",1748136777221],"\n",[],[103,250],[],[103,104,84],"2fc6d15a-3908-11f0-9089-9e149126039e",["D",1748136777221],[219],[103,104],["D",1748136777221],[218,220,221,222,223],[103],"1f61926c-3bd5-11f0-9840-9e149126039e","index.ts",["D",1748444698899],5,"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\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, c) => {\n throw err;\n});\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;",[],[201,266],["D",1748136777221],[216],[201],["D",1748136777221],{"_11":12,"_153":149},{"_11":12,"_147":-5,"_148":149,"_118":119,"_150":151,"_152":54},{"_46":63,"_13":16,"_33":64,"_44":65,"_48":39,"_49":66,"_67":56,"_68":45,"_69":60,"_61":14,"_57":12},"ctx",{"_142":-5,"_175":313,"_314":315,"_316":317,"_318":54,"_319":54,"_320":54,"_321":26,"_322":-5,"_323":-7,"_324":-7,"_325":197,"_326":54,"_327":54,"_328":-5,"_329":54,"_330":54,"_331":54,"_332":-5},"ENV",{"_284":285,"_286":287,"_288":16,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312},"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"]

Compare

Mergelightweight/mainintotemplates/main

frontend/components/App.tsx+17-0