[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_203":204,"_205":206},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","routes.tsx","latestPath","fileId","0199ca54-35cc-775c-abe9-0e9c0970b337","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet } from \"https://esm.sh/react-router@7\";\n\n// provide the full URL so that both the client and server can fetch\nconst API_URL = \"https://react-router-hono.val.run/api\";\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n React Router Hono Starter\n \n \n {children}\n \n \n )\n}\n\nfunction Layout () {\n return (\n \n

React Router Hono Starter

\n \n

\n \n \n

\n \n );\n}\n\nfunction Home () {\n const [count, setCount] = React.useState(0);\n return (\n

Hello, Home page

{count}

\n \n

\n );\n}\n\nfunction About () {\n const data = useLoaderData();\n \n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n )\n}\n\nasync function catsLoader () {\n const data = await fetch(API_URL)\n .then(res => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ]\n },\n]\n\nexport default routes;","/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { Link, Outlet, useLoaderData } from \"https://esm.sh/react-router@7\";\n\n// provide the full URL so that both the client and server can fetch\nconst API_URL = \"https://react-router-hono.val.run/api\";\n\nfunction HTML({ children }: {\n children: React.ReactNode;\n}) {\n return (\n \n \n Stytch Val Town Demo\n \n \n {children}\n \n \n );\n}\n\nfunction Layout() {\n return (\n \n

Stytch Val Town Demo

\n \n

\n \n \n

\n \n );\n}\n\nfunction Login() {\n const [count, setCount] = React.useState(0);\n return (\n

Hello, Home page

{count}

\n \n

\n );\n}\n\nfunction About() {\n const data = useLoaderData();\n\n return (\n

Hello, About page

{JSON.stringify(data, null, 2)}

\n );\n}\n\nasync function catsLoader() {\n const data = await fetch(API_URL)\n .then((res) => res.json());\n return data;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Login,\n path: \"login\",\n },\n {\n Component: About,\n path: \"about\",\n loader: catsLoader,\n },\n ],\n },\n];\n\nexport default routes;","createdAt",["D",1760036265951],"branchVersion","branchId","8cf53d12-a541-11f0-b498-0224a6c84d84","id","8cf0c8d6-a541-11f0-b498-0224a6c84d84","react-router-hono-starter",["D",1760036140415],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199ca50-acda-76ae-a541-ac2356c28a2b","pinnedFileId","0199ca54-35cc-775c-abe9-1396a72766a4","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199ca50-acda-76ae-a541-b3f0c3583a39","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"isOwned",6,"main","projectId","forkedBranchId","3f6d7dac-3197-11f0-bd56-569c3dd06744","forkedBranchVersion",33,"forkedProjectPrivacy","forkedProjectId","3f6981c0-3197-11f0-bd56-569c3dd06744","forkedProjectOrgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","projectName","userHandle","max_stytch","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zM3FEcURoM0FCU3JLZVlKS2FQUlBxMFJ6cXIifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":199,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":200,"_80":201,"_82":202,"_84":25},"tree",[182,183,184,185],"files",[182,183,184,185],"counts",{"_172":62,"_173":150,"_174":62,"_175":176,"_177":178},"contents",[143,144,145,146],"upstreamProject",{"_43":94,"_32":45,"_52":139,"_53":140,"_49":50,"_78":141},"upstreamBranch",{"_43":89,"_38":132,"_133":134,"_32":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_47":-5,"_84":25,"_49":50,"_98":138,"_63":96,"_97":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],"updatedAt",["D",1779898921971],34,"lockfileKey","1786296728251-esm.town_v_jxnblk_react-router-hono-starter@34-main","jxnblk","Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789577999&sig=da81d225cf97767786ef9c6be87a74b26cc75707cd05d57ca8125b1d8755da5a",{"_100":138,"_107":142},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789577999&sig=a6f728a896768a275182bb6ab78cd82a2d59f7addcd5ade2ed07a396ac5244bb",{"_43":166,"_32":167,"_30":168,"_149":-5,"_41":42,"_40":150,"_151":58,"_38":169,"_13":62,"_33":20,"_35":170,"_24":25,"_155":-5,"_27":171},{"_43":160,"_32":161,"_30":162,"_149":-5,"_41":42,"_40":150,"_151":58,"_38":163,"_13":62,"_33":34,"_35":164,"_24":25,"_155":-5,"_27":165},{"_43":157,"_32":28,"_30":31,"_149":-5,"_41":42,"_40":14,"_151":25,"_38":158,"_13":150,"_33":34,"_35":37,"_24":25,"_155":-5,"_27":159},{"_43":147,"_32":148,"_30":56,"_149":-5,"_41":42,"_40":150,"_151":58,"_38":152,"_13":62,"_33":153,"_35":154,"_24":25,"_155":-5,"_27":156},"8cf8d3c8-a541-11f0-b498-0224a6c84d84","server.tsx","parentId",1,"latest",["D",1760036140415],"http","/** @jsxImportSource https://esm.sh/react@19 */\nimport { Hono } from \"npm:hono@4\";\nimport * as React from \"https://esm.sh/react@19\";\nimport ReactDOMServer from \"https://esm.sh/react-dom@19/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconst CLIENT_MODULE = import.meta.resolve(\"./client.tsx\");\n\nconst app = new Hono();\n\n// api server\napp.get(\"/api\", async (c) => {\n return c.json([\n { name: \"Leia\", breed: \"DSH\", coat: \"Calico\" },\n { name: \"Chewie\", breed: \"DSH\", coat: \"Tuxedo\" },\n ]);\n});\n\n// react app\napp.get(\"*\", async (c) => {\n const { query, dataRoutes } = createStaticHandler(routes);\n const context = await query(c.req.raw);\n const router = createStaticRouter(dataRoutes, context);\n \n let html = await ReactDOMServer.renderToReadableStream(\n \n , {\n bootstrapModules: [ CLIENT_MODULE ],\n });\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n});\n\nexport default app.fetch;","label",[148],"d7bfd000-a541-11f0-8ef4-0224a6c84d84",["D",1760036265951],[28],"8cf8cf86-a541-11f0-b498-0224a6c84d84","client.tsx","0199ca54-35cc-775c-abe9-082a319a14bf",["D",1760036140415],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconsole.log(\"client\");\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[161],"8cf8c612-a541-11f0-b498-0224a6c84d84","README.md","0199ca54-35cc-775c-abe9-05b6788df6cb",["D",1760036140415],"# React Router Hono Starter\n\nMinimal React Router + Hono starter example in [\"data mode\"][modes] with server-side rendering for Val Town\n\n[View demo][demo]\n\n## How it works\n\nThe `server.tsx` file is the main server that responds with an HTML stream, using React Router, or an API response.\nThe HTML includes a `

Diff · v2