[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_257":258,"_259":260},"routes/_app.x.$handle.$name",{"_99":98,"_33":47,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":60,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",28,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","routes/index.tsx","latestPath","routes/index.ts","fileId","7f420d0a-13ef-11f0-ac6f-569c3dd06744","name","index.tsx","fileType","script","content","import { ActionFunctionArgs, LoaderFunctionArgs } from \"npm:react-router\";\nimport { Layout } from \"./layout.tsx\";\nlet isServer = typeof document === \"undefined\";\nexport default [\n {\n id: \"layout\",\n path: \"/\",\n Component: Layout,\n // up to you where your loaders run (client or server), this one dynamically\n // imports the correct one to avoid putting the server code in client\n // bundles\n async loader(args: LoaderFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.loader(args);\n },\n // same with the action, you'll probably want to abstract this kind of stuff\n // in a createRoute() kind of thing\n async action(args: ActionFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.action(args);\n },\n },\n];","import { ActionFunctionArgs, LoaderFunctionArgs } from \"npm:react-router\";\nimport { Layout } from \"./layout.tsx\";\nlet isServer = typeof document === \"undefined\";\n\nexport default [\n {\n id: \"layout\",\n path: \"/\",\n Component: Layout,\n // up to you where your loaders run (client or server), this one dynamically\n // imports the correct one to avoid putting the server code in client\n // bundles\n async loader(args: LoaderFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.loader(args);\n },\n // same with the action, you'll probably want to abstract this kind of stuff\n // in a createRoute() kind of thing\n async action(args: ActionFunctionArgs) {\n let mod = await (isServer\n ? import(\"./layout.server.ts\")\n : import(\"./layout.client.ts\"));\n return mod.action(args);\n },\n },\n];","createdAt",["D",1744058274625],"branchVersion","branchId","38474c6c-13ef-11f0-bfb0-569c3dd06744","id","3846fd0c-13ef-11f0-bfb0-569c3dd06744","url-project",["D",1744057861075],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","48e28ffa-13ef-11f0-8bb9-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",66,"likeCount",3,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":88,"_33":89,"_45":44,"_90":46,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":47,"_97":98},"isOwned",73,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":253,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":254,"_83":255,"_85":256,"_87":25},"tree",[177,185,186,187],"files",[177,178,179,180,181,182,183,184,185,186,187],"counts",{"_166":163,"_167":139,"_168":169,"_170":171,"_172":173},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":158,"_33":159,"_31":160,"_135":-5,"_43":44,"_42":161,"_137":60,"_40":162,"_13":163,"_35":164,"_37":-5,"_24":25,"_142":-5,"_27":165},{"_45":151,"_33":152,"_31":153,"_135":-5,"_43":44,"_42":154,"_137":60,"_40":155,"_13":136,"_35":36,"_37":156,"_24":25,"_142":-5,"_27":157},{"_45":144,"_33":145,"_31":146,"_135":-5,"_43":44,"_42":147,"_137":60,"_40":148,"_13":139,"_35":36,"_37":149,"_24":25,"_142":-5,"_27":150},{"_45":133,"_33":134,"_31":58,"_135":-5,"_43":44,"_42":136,"_137":25,"_40":138,"_13":139,"_35":140,"_37":141,"_24":25,"_142":-5,"_27":143},"4aafca5a-13ef-11f0-820a-569c3dd06744","server.tsx","parentId",2,"latest",["D",1744057891955],1,"http","import { handler } from \"./entry.server.tsx\";\n\nexport default async function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n const moduleUrl = new URL(\"./entry.client.tsx\", import.meta.url);\n return fetch(moduleUrl);\n }\n return handler(request);\n}","label",[134],"18f9c5c8-13f0-11f0-ab6b-569c3dd06744","entry.server.tsx","5c2615dc-13ef-11f0-b44b-569c3dd06744",27,["D",1744058238050],"/** @jsxImportSource npm:react */\nimport { renderToString } from \"npm:react-dom/server\";\nimport { createStaticHandler, createStaticRouter, StaticRouterProvider } from \"npm:react-router\";\n\nimport routes from \"./routes/index.ts\";\n\nlet { query, dataRoutes } = createStaticHandler(routes);\n\nexport async function handler(request: Request) {\n // 1. run actions/loaders to get the routing context with `query`\n let context = await query(request);\n\n // If `query` returns a Response, send it raw (a route probably a redirected)\n if (context instanceof Response) {\n return context;\n }\n\n // 2. Create a static router for SSR\n let router = createStaticRouter(dataRoutes, context);\n\n // 3. Render everything with StaticRouterProvider\n let html = renderToString(\n ,\n );\n\n // Setup headers from action and loaders from deepest match\n let leaf = context.matches[context.matches.length - 1];\n let actionHeaders = context.actionHeaders[leaf.route.id];\n let loaderHeaders = context.loaderHeaders[leaf.route.id];\n let headers = new Headers(actionHeaders);\n if (loaderHeaders) {\n for (let [key, value] of loaderHeaders.entries()) {\n headers.append(key, value);\n }\n }\n\n headers.set(\"Content-Type\", \"text/html; charset=utf-8\");\n\n // 4. send a response\n return new Response(`${html}`, {\n status: context.statusCode,\n headers,\n });\n}",[145],"142db0ea-13f0-11f0-9e72-569c3dd06744","entry.client.tsx","52fd858a-13ef-11f0-aa91-569c3dd06744",26,["D",1744058230001],"import { createElement, StrictMode } from \"npm:react\";\nimport { hydrateRoot } from \"npm:react-dom/client\";\nimport { createBrowserRouter } from \"npm:react-router\";\nimport { RouterProvider } from \"npm:react-router/dom\";\nimport routes from \"./routes/index.ts\";\n\nlet router = createBrowserRouter(routes, {\n // @ts-expect-error It's fine\n hydrationData: window.__staticRouterHydrationData,\n});\n\nhydrateRoot(document, createElement(RouterProvider, { router: router }));",[152],"7cb25536-13ef-11f0-8ae5-569c3dd06744","routes","7cb2561c-13ef-11f0-8ae5-569c3dd06744",6,["D",1744057975860],0,"directory",[159],"pulls","branches","forks",4,"envVars",{"_174":163,"_176":163},"connections",{"_174":163,"_175":163},"count","unfilledCount","emptyCount",{"_45":158,"_33":159,"_31":160,"_135":-5,"_43":44,"_42":161,"_137":60,"_40":250,"_13":163,"_35":164,"_37":-5,"_24":25,"_142":-5,"_189":251,"_27":252},{"_45":242,"_33":243,"_31":244,"_135":160,"_43":44,"_42":245,"_137":60,"_40":246,"_13":139,"_35":36,"_37":247,"_24":25,"_142":-5,"_189":248,"_27":249},{"_45":234,"_33":235,"_31":236,"_135":160,"_43":44,"_42":237,"_137":25,"_40":238,"_13":139,"_35":36,"_37":239,"_24":25,"_142":-5,"_189":240,"_27":241},{"_45":226,"_33":227,"_31":228,"_135":160,"_43":44,"_42":229,"_137":25,"_40":230,"_13":139,"_35":36,"_37":231,"_24":25,"_142":-5,"_189":232,"_27":233},{"_45":222,"_33":34,"_31":32,"_135":160,"_43":44,"_42":14,"_137":25,"_40":223,"_13":65,"_35":36,"_37":39,"_24":25,"_142":-5,"_189":224,"_27":225},{"_45":214,"_33":215,"_31":216,"_135":160,"_43":44,"_42":217,"_137":60,"_40":218,"_13":169,"_35":36,"_37":219,"_24":25,"_142":-5,"_189":220,"_27":221},{"_45":206,"_33":207,"_31":208,"_135":160,"_43":44,"_42":209,"_137":60,"_40":210,"_13":136,"_35":36,"_37":211,"_24":25,"_142":-5,"_189":212,"_27":213},{"_45":198,"_33":199,"_31":200,"_135":160,"_43":44,"_42":201,"_137":25,"_40":202,"_13":139,"_35":36,"_37":203,"_24":25,"_142":-5,"_189":204,"_27":205},{"_45":151,"_33":152,"_31":153,"_135":-5,"_43":44,"_42":154,"_137":60,"_40":195,"_13":136,"_35":36,"_37":156,"_24":25,"_142":-5,"_189":196,"_27":197},{"_45":144,"_33":145,"_31":146,"_135":-5,"_43":44,"_42":147,"_137":60,"_40":192,"_13":139,"_35":36,"_37":149,"_24":25,"_142":-5,"_189":193,"_27":194},{"_45":133,"_33":134,"_31":58,"_135":-5,"_43":44,"_42":136,"_137":25,"_40":188,"_13":139,"_35":140,"_37":141,"_24":25,"_142":-5,"_189":190,"_27":191},["D",1744057891955],"children",[],[134],["D",1744058238050],[],[145],["D",1744058230001],[],[152],"af6c4dd8-13ef-11f0-befd-569c3dd06744","layout.tsx","ad875850-13ef-11f0-aaff-569c3dd06744",10,["D",1744058060961],"/** @jsxImportSource npm:react */\nimport { Form, Link, Outlet, useLoaderData } from \"npm:react-router\";\nimport { type loader } from \"./layout.server.ts\";\n\nexport default function Layout() {\n let data = useLoaderData();\n return (\n \n \n React Router Custom Framework\n \n \n

React Router Custom Framework

\n\n \n\n

\n Home | About\n

\n\n

\n\n \n

\n\n \n \n \n );\n}",[],[159,199],"e9780792-13ef-11f0-a18c-569c3dd06744","layout.server.ts","bac1e01c-13ef-11f0-8aea-569c3dd06744",19,["D",1744058158345],"import { ActionFunctionArgs, type LoaderFunctionArgs } from \"npm:react-router\";\n\nlet db = { message: \"Hello world!\" };\n\nexport async function loader(args: LoaderFunctionArgs) {\n await new Promise(resolve => setTimeout(resolve, 200));\n return { message: db.message };\n}\n\nexport async function action({ request }: ActionFunctionArgs) {\n let formData = await request.formData();\n db.message = String(formData.get(\"message\"));\n return { ok: true };\n}",[],[159,207],"e7538cfc-13ef-11f0-bfb0-569c3dd06744","layout.client.ts","beba5f00-13ef-11f0-a220-569c3dd06744",18,["D",1744058154751],"import { type LoaderFunctionArgs } from \"npm:react-router\";\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n let url = new URL(request.url);\n let res = await fetch(url, {\n headers: {\n Accept: \"application/json\",\n \"X-Route-Id\": \"layout\",\n },\n });\n return res.json();\n}\n\nexport async function action({ request }: LoaderFunctionArgs) {\n let url = new URL(request.url);\n // call the server action\n let res = await fetch(url, {\n method: \"POST\",\n body: new URLSearchParams(await request.formData()),\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n Accept: \"application/json\",\n \"X-Route-Id\": \"layout\",\n },\n });\n return res.json();\n}",[],[159,215],"2ec6d3aa-13f0-11f0-9761-569c3dd06744",["D",1744058274625],[],[159,34],"f7d4e2ce-13ef-11f0-aaff-569c3dd06744","home.tsx","f674faf4-13ef-11f0-9a50-569c3dd06744",21,["D",1744058182443],"/** @jsxImportSource npm:react */\n\nexport default function Home() {\n return

Home

;\n}",[],[159,227],"00ba7822-13f0-11f0-9d7c-569c3dd06744","about.tsx","ff60d7e6-13ef-11f0-b525-569c3dd06744",23,["D",1744058197363],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useLoaderData } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type loader from \"./about.loader.js\";\n\nexport default function About() {\n let data = useLoaderData();\n return

{data.message}

;\n}",[],[159,235],"0bdbe420-13f0-11f0-b91e-569c3dd06744","about.loader.ts","09aa151e-13f0-11f0-a218-569c3dd06744",25,["D",1744058216043],"import { data } from \"npm:react-router\";\n\nexport default async function load() {\n await new Promise(resolve => setTimeout(resolve, 200));\n\n let isServer = typeof document === \"undefined\";\n let env = isServer ? \"server\" : \"client\";\n\n return data(\n { message: `About loader from ${env} loader` },\n {\n headers: { \"X-Custom\": \"Hello\" },\n },\n );\n}",[],[159,243],["D",1744057975860],[178,179,180,181,182,183,184],[159],["D",1744057861075],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},{"_13":88,"_33":89,"_45":44,"_90":46,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":47,"_97":98},"ctx",{"_81":-5,"_126":290,"_291":292,"_293":294,"_295":25,"_296":25,"_297":25,"_298":60,"_299":-5,"_300":-7,"_301":-7,"_302":163,"_303":25,"_304":25,"_305":-5,"_306":25,"_307":25,"_308":25,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":89,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Diff · v28