React Router Custom Framework

\n\n \n\n

\n Home | About\n

\n\n

\n\n \n

\n\n \n \n \n );\n}",[115,105],"7d0950e0745d1fa89f1e0b254e20ee9a9a22c0346683595af1de8e2d9f653ade","routes","40313702-da98-11ef-8503-e6cdfca9ef9f","fa5066c0-da8f-11ef-9c0f-e6cdfca9ef9f","bfcbaee2-da8f-11ef-aab7-e6cdfca9ef9f",["D",1737753291854],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n Link,\n Outlet,\n useLoaderData,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\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}",[115,105],"4390463a7675c8af555e9b009b06bf2e239594b1e70c93ee9ec66839dce6638a",["D",1737749593947],"legacyEnvVars","httpPrivacy","description","React router v7 running in a val.town project","imageUrl","userId","7c0d1cad-83fd-4c0e-b722-56e2dba6627c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_161":157},"org",{"_11":12,"_155":-5,"_156":157,"_130":131,"_158":159,"_160":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2F2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3UvMzA4NzIyNT92PTQiLCJzIjoiODRqbjJSZG5jOWkyNUgrUXJIU0dRUWZnQmRrQ01LY2NxUTBUMm5nTEVQOCJ9","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_31":39,"_13":14,"_33":297,"_46":-5,"_125":48,"_49":50,"_126":50,"_127":128,"_129":-5,"_130":131,"_132":94,"_133":25,"_134":-5,"_135":-5,"_136":20,"_52":53,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":142,"_143":142,"_144":145,"_146":145,"_147":145,"_148":142,"_149":142,"_150":298,"_152":299,"_154":300,"_47":48},"tree",[227,235,236,237,238],"files",[227,228,229,230,231,232,233,234,235,236,237,238],"counts",{"_216":20,"_217":218,"_219":110,"_220":221,"_222":223},"contents",[187,188,189,190,191],"file","upstreamProject","upstreamBranch",{"_31":32,"_33":185,"_35":186,"_13":37,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":12,"_52":53,"_54":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1737749593947],["D",1739569255443],{"_31":212,"_13":115,"_76":107,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":213,"_40":20,"_84":214,"_86":-5,"_63":48,"_88":-5,"_69":215},{"_31":206,"_13":207,"_76":208,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":209,"_40":20,"_84":173,"_86":210,"_63":48,"_88":-5,"_69":211},{"_31":200,"_13":201,"_76":202,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":203,"_40":20,"_84":111,"_86":204,"_63":48,"_88":-5,"_69":205},{"_31":194,"_13":195,"_76":196,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":197,"_40":20,"_84":111,"_86":198,"_63":48,"_88":-5,"_69":199},{"_31":75,"_13":70,"_76":77,"_78":-5,"_79":56,"_80":55,"_81":25,"_33":192,"_40":83,"_84":85,"_86":87,"_63":48,"_88":-5,"_69":193},["D",1737755741932],[70],"16ed46e8-da9c-11ef-a56e-e6cdfca9ef9f","entry.server.tsx","a839b904-8124-4377-abf1-5380e9ff10f1",["D",1737754940605],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\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}",[195],"16ed4576-da9c-11ef-a56e-e6cdfca9ef9f","entry.client.tsx","14b4e737-1805-4b53-8482-97965d1ab3df",["D",1737754940605],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { RouterProvider } from \"https://esm.sh/react-router@7.1.3/dom?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createBrowserRouter } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport { StrictMode } from \"https://esm.sh/react@18.2.0\";\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, );",[201],"16ed43f0-da9c-11ef-a56e-e6cdfca9ef9f","README.md","ce9133eb-e0bf-4ade-914a-ff3363254691",["D",1737754940605],"# React Router v7\n\nThis project demonstrates how to use react-router v7's [custom framework setup](https://reactrouter.com/start/framework/custom) to run react-router in a val.town project.\n\nThis is a direct port of [their example repo](https://github.com/remix-run/custom-react-router-framework-example).",[207],"16ed42ec-da9c-11ef-a56e-e6cdfca9ef9f",["D",1737754940605],"directory",[115],"pulls","branches",2,"forks","envVars",{"_224":20,"_226":20},"connections",{"_224":20,"_225":20},"count","unfilledCount","emptyCount",{"_31":212,"_13":115,"_76":107,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":294,"_40":20,"_84":214,"_86":-5,"_63":48,"_88":-5,"_89":295,"_69":296},{"_31":287,"_13":288,"_76":289,"_78":107,"_79":56,"_80":110,"_81":25,"_33":290,"_40":20,"_84":111,"_86":291,"_63":48,"_88":-5,"_89":292,"_69":293},{"_31":280,"_13":281,"_76":282,"_78":107,"_79":56,"_80":110,"_81":25,"_33":283,"_40":20,"_84":111,"_86":284,"_63":48,"_88":-5,"_89":285,"_69":286},{"_31":273,"_13":274,"_76":275,"_78":107,"_79":56,"_80":110,"_81":25,"_33":276,"_40":20,"_84":111,"_86":277,"_63":48,"_88":-5,"_89":278,"_69":279},{"_31":266,"_13":267,"_76":268,"_78":107,"_79":56,"_80":110,"_81":25,"_33":269,"_40":20,"_84":111,"_86":270,"_63":48,"_88":-5,"_89":271,"_69":272},{"_31":259,"_13":260,"_76":261,"_78":107,"_79":56,"_80":110,"_81":25,"_33":262,"_40":20,"_84":111,"_86":263,"_63":48,"_88":-5,"_89":264,"_69":265},{"_31":252,"_13":253,"_76":254,"_78":107,"_79":56,"_80":110,"_81":25,"_33":255,"_40":20,"_84":111,"_86":256,"_63":48,"_88":-5,"_89":257,"_69":258},{"_31":104,"_13":105,"_76":106,"_78":107,"_79":56,"_80":108,"_81":25,"_33":109,"_40":110,"_84":111,"_86":112,"_63":48,"_88":-5,"_89":250,"_69":251},{"_31":206,"_13":207,"_76":208,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":247,"_40":20,"_84":173,"_86":210,"_63":48,"_88":-5,"_89":248,"_69":249},{"_31":200,"_13":201,"_76":202,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":244,"_40":20,"_84":111,"_86":204,"_63":48,"_88":-5,"_89":245,"_69":246},{"_31":194,"_13":195,"_76":196,"_78":-5,"_79":56,"_80":110,"_81":25,"_33":241,"_40":20,"_84":111,"_86":198,"_63":48,"_88":-5,"_89":242,"_69":243},{"_31":75,"_13":70,"_76":77,"_78":-5,"_79":56,"_80":55,"_81":25,"_33":82,"_40":83,"_84":85,"_86":87,"_63":48,"_88":-5,"_89":239,"_69":240},[],[70],["D",1737754940605],[],[195],["D",1737754940605],[],[201],["D",1737754940605],[],[207],[],[115,105],"16ed3ebe-da9c-11ef-a56e-e6cdfca9ef9f","layout.server.ts","eb324b54-ac3f-4fee-a1de-93f7e9e597c8",["D",1737754940605],"import {\n ActionFunctionArgs,\n type LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\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}",[],[115,253],"16ed3d2e-da9c-11ef-a56e-e6cdfca9ef9f","layout.client.ts","0b164fca-30fc-4db4-bfb5-c5daab2fbda0",["D",1737754940605],"import { type LoaderFunctionArgs } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\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}",[],[115,260],"16ed3bbc-da9c-11ef-a56e-e6cdfca9ef9f","index.ts","1d11eda9-5f78-4699-b540-dff7ef9c87c3",["D",1737754940605],"import {\n ActionFunctionArgs,\n LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport aboutLoader from \"./about.loader.ts\";\nimport About from \"./about.tsx\";\nimport Home from \"./home.tsx\";\nimport Layout from \"./layout.tsx\";\n\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 children: [\n {\n id: \"home\",\n index: true,\n Component: Home,\n },\n {\n id: \"about\",\n path: \"about\",\n Component: About,\n // this loader runs in both places\n loader: aboutLoader,\n },\n ],\n },\n];",[],[115,267],"16ed39be-da9c-11ef-a56e-e6cdfca9ef9f","home.tsx","ebc94bc4-aa7d-4a69-832c-a9cac00a9072",["D",1737754940605],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function Home() {\n return

Home

;\n}",[],[115,274],"16ed343c-da9c-11ef-a56e-e6cdfca9ef9f","about.tsx","0ed15a9a-4b94-4a08-9cf9-81da12790bc3",["D",1737754940605],"/** @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}",[],[115,281],"16ed2fbe-da9c-11ef-a56e-e6cdfca9ef9f","about.loader.ts","8a0e3cb3-1915-4f64-84a4-ba431203dee2",["D",1737754940605],"import { data } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\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}",[],[115,288],["D",1737754940605],[228,229,230,231,232,233,234],[115],["D",1737749593947],{"_11":12,"_161":157},{"_11":12,"_155":-5,"_156":157,"_130":131,"_158":159,"_160":48},{"_40":55,"_13":16,"_31":56,"_38":39,"_42":32,"_43":57,"_58":50,"_59":39,"_60":53,"_54":14,"_51":12},"ctx",{"_150":-5,"_182":334,"_335":336,"_337":338,"_339":48,"_340":48,"_341":48,"_342":25,"_343":-5,"_344":-7,"_345":-7,"_346":20,"_347":48,"_348":48,"_349":-5,"_350":48,"_351":48,"_352":48,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":37,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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

Mergebuildintomain

routes/layout.tsx+1-1

Hserver.tsx+12-1