[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_185":186,"_187":188},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_138":-5,"_20":139,"_22":140,"_141":142,"_143":144,"_25":145,"_24":-5,"_146":147,"_148":149,"_150":49,"_151":152,"_153":69,"_154":-5,"_155":-5,"_156":157},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":31,"_33":-5},"handle","dk3","name","capn-web-demo","branchName","main","version","path","","project",{"_34":93,"_13":14,"_36":94,"_47":-5,"_95":49,"_50":51,"_96":51,"_97":98,"_99":19,"_100":101,"_102":62,"_103":69,"_104":69,"_105":-5,"_106":31,"_54":107,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":113,"_115":116,"_117":116,"_118":116,"_119":113,"_120":113,"_121":122,"_123":124,"_125":126,"_48":49},"tree",[84,85],"file","contents",[57,58],"upstream",{"_34":35,"_36":37,"_38":39,"_13":16,"_40":41,"_17":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":14},"pull","ahead",0,"behind","envVars","id","5b47d39c-bd6a-11f0-b7cf-42dde27851f2","createdAt",["D",1762692494403],"updatedAt",["D",1762696659485],"projectId","5b47726c-bd6a-11f0-b7cf-42dde27851f2",96,"forkedBranchId","forkedBranchVersion","lockfileKey","1767109789094-esm.town_v_stevekrouse_capn-web-demo@96-main","deletedAt","isOwned",false,"privacy","public","userHandle","stevekrouse","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName",{"_34":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":81,"_17":31,"_71":24,"_73":82,"_75":49,"_76":-5,"_18":83},{"_34":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":70,"_17":31,"_71":72,"_73":74,"_75":49,"_76":-5,"_18":77},"fe149a9c-d1c4-11f0-aad0-42dde27851f2","main.tsx","fileId","019aee0d-60b5-7506-8077-e95f2a23e6d7","parentId","branchId","fe117cb8-d1c4-11f0-aad0-42dde27851f2","branchVersion",1,"latest",true,["D",1764930445429],"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Hono } from \"https://esm.sh/hono@4.10.4\";\nimport {\n newHttpBatchRpcSession,\n newWorkersRpcResponse,\n RpcTarget,\n} from \"https://esm.sh/capnweb@0.2.0\";\n\n// SHARED\nclass RPC extends RpcTarget {\n echo(input: string) {\n console.log(\"Call echo\", input);\n return `Echo: ${input}`;\n }\n}\n\n// FRONTEND\nexport function App() {\n const [results, setResults] = useState([]);\n\n async function onChange(e: React.ChangeEvent) {\n const api = newHttpBatchRpcSession(`/api`);\n const response = await api.echo(api.echo(api.echo(e.target.value)));\n setResults((results) => [response, ...results]);\n }\n\n return (\n

Cap'n Web Demo

\n \n

Results

{result}

\n );\n}\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// BACKEND\nconst app = new Hono();\napp.get(\"/\", (c) => c.html(bootstrapClientReactApp()));\napp.post(\"/api\", (c) => newWorkersRpcResponse(c.req.raw, new RPC()));\napp.onError((e) => Promise.reject(e));\nexport default app.fetch;\n\n// REACT HELPER\nfunction bootstrapClientReactApp() {\n return `\n \n \n \n Cap'n Web\n \n \n

\n \n \n \n`;\n}\n\n// Debug helper\n// app.post(\"/api\", async (c) => {\n// const r = c.req.raw.clone();\n// console.log(await r.text());\n// return newWorkersRpcResponse(c.req.raw, new RPC());\n// });","deleted","label",[60],"fe149132-d1c4-11f0-aad0-42dde27851f2","README.md","019aee0d-60b5-7506-8077-e6f686db7727",["D",1764930445429],"# Cap'n Web Demo\n\nRPC for TypeScript\n\nLearn more: https://capnweb.org/\n\nDemo video with explainer:\nhttps://x.com/stevekrouse/status/1987519775363285252?s=20",[79],{"_34":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":90,"_17":31,"_71":24,"_73":82,"_75":49,"_76":-5,"_87":91,"_18":92},{"_34":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":86,"_17":31,"_71":72,"_73":74,"_75":49,"_76":-5,"_87":88,"_18":89},["D",1764930445429],"children",[],[60],["D",1764930445429],[],[79],"fe0deecc-d1c4-11f0-aad0-42dde27851f2",["D",1764930445429],"legacyEnvVars","httpPrivacy","description","Demo of Cap'n Web RPC","imageUrl","userId","019aee04-b263-75ee-92f4-372f56307701","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019aee04-b264-711e-852b-f28a1799c8d7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_137":133},"org",{"_11":12,"_130":131,"_132":133,"_100":101,"_134":135,"_136":49},"branch",{"_17":67,"_13":16,"_34":65,"_40":93,"_43":35,"_44":42,"_127":51,"_128":41,"_129":55,"_56":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","dk","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNlFETVNueWN1THEwdGZOOUxVYkpKZGFRVzAifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":93,"_13":14,"_36":181,"_47":-5,"_95":49,"_50":51,"_96":51,"_97":98,"_99":19,"_100":101,"_102":62,"_103":69,"_104":69,"_105":-5,"_106":31,"_54":107,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":113,"_115":116,"_117":116,"_118":116,"_119":113,"_120":113,"_121":182,"_123":183,"_125":184,"_48":49},[175,176],"files",[175,176],"counts",{"_166":31,"_167":67,"_168":31,"_33":169,"_170":171},[162,163],"upstreamProject",{"_34":41,"_13":14,"_97":98,"_99":19,"_50":51,"_121":160},"upstreamBranch",{"_34":35,"_36":158,"_38":159,"_13":16,"_40":41,"_17":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1762692494403],["D",1762696659485],{"_11":53,"_137":161},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_34":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":81,"_17":31,"_71":24,"_73":82,"_75":49,"_76":-5,"_18":165},{"_34":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":70,"_17":31,"_71":72,"_73":74,"_75":49,"_76":-5,"_18":164},[60],[79],"pulls","branches","forks",{"_172":31,"_174":31},"connections",{"_172":31,"_173":31},"count","unfilledCount","emptyCount",{"_34":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":90,"_17":31,"_71":24,"_73":82,"_75":49,"_76":-5,"_87":179,"_18":180},{"_34":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":67,"_68":69,"_36":86,"_17":31,"_71":72,"_73":74,"_75":49,"_76":-5,"_87":177,"_18":178},[],[60],[],[79],["D",1764930445429],{"_11":12,"_137":133},{"_11":12,"_130":131,"_132":133,"_100":101,"_134":135,"_136":49},{"_17":67,"_13":16,"_34":65,"_40":93,"_43":35,"_44":42,"_127":51,"_128":41,"_129":55,"_56":14,"_52":12},"ctx",{"_121":-5,"_155":218,"_219":220,"_221":222,"_223":49,"_224":49,"_225":49,"_226":69,"_227":-5,"_228":-7,"_229":-7,"_230":31,"_231":49,"_232":49,"_233":-5,"_234":49,"_235":49,"_236":49,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":16,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"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"]

Code