{data.message}

;\n}",[],[157,184],{"_104":191,"_95":192,"_158":193,"_160":159,"_161":141,"_162":163,"_164":119,"_106":194,"_101":32,"_166":178,"_168":195,"_169":22,"_170":-5,"_171":196,"_99":197},"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}",[],[157,192],{"_104":199,"_95":200,"_158":201,"_160":159,"_161":141,"_162":163,"_164":119,"_106":202,"_101":32,"_166":178,"_168":203,"_169":22,"_170":-5,"_171":204,"_99":205},"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];",[],[157,200],{"_104":207,"_95":208,"_158":209,"_160":159,"_161":141,"_162":163,"_164":119,"_106":210,"_101":32,"_166":178,"_168":211,"_169":22,"_170":-5,"_171":212,"_99":213},"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}",[],[157,208],{"_104":215,"_95":216,"_158":217,"_160":159,"_161":141,"_162":163,"_164":119,"_106":218,"_101":32,"_166":178,"_168":219,"_169":22,"_170":-5,"_171":220,"_99":221},"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}",[],[157,216],{"_104":223,"_95":224,"_158":225,"_160":159,"_161":141,"_162":226,"_164":119,"_106":227,"_101":163,"_166":178,"_168":228,"_169":22,"_170":-5,"_171":229,"_99":230},"a39e6b70-da9d-11ef-9d66-e6cdfca9ef9f","layout.tsx","c3c3ff01-7566-47fb-99f3-d4723e86b237",5,["D",1737755606151],"/** @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}",[],[157,224],[157],{"_104":233,"_95":234,"_158":235,"_160":-5,"_161":141,"_162":163,"_164":119,"_106":236,"_101":32,"_166":237,"_168":238,"_169":22,"_170":-5,"_171":239,"_99":240},"16ed43f0-da9c-11ef-a56e-e6cdfca9ef9f","README.md","ce9133eb-e0bf-4ade-914a-ff3363254691",["D",1737754940605],"file","# 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).",[],[234],{"_104":242,"_95":243,"_158":244,"_160":-5,"_161":141,"_162":163,"_164":119,"_106":245,"_101":32,"_166":178,"_168":246,"_169":22,"_170":-5,"_171":247,"_99":248},"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, );",[],[243],{"_104":250,"_95":251,"_158":252,"_160":-5,"_161":141,"_162":163,"_164":119,"_106":253,"_101":32,"_166":178,"_168":254,"_169":22,"_170":-5,"_171":255,"_99":256},"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}",[],[251],{"_104":258,"_95":100,"_158":259,"_160":-5,"_161":141,"_162":140,"_164":119,"_106":260,"_101":261,"_166":262,"_168":263,"_169":22,"_170":-5,"_171":264,"_99":265},"f48d357a-da9d-11ef-85f2-e6cdfca9ef9f","ebeacd41-c892-4a67-ba7c-16b1bbf74b16",["D",1737755741932],6,"http","import * as esbuild from \"https://deno.land/x/esbuild@v0.24.0/wasm.js\";\nimport { 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 console.log(moduleUrl);\n const res = await fetch(moduleUrl);\n const ts = await res.text();\n const build = await esbuild.transform(ts, { loader: \"tsx\" });\n console.log(\"build\", build);\n return new Response(build, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=60\",\n },\n });\n }\n return handler(request);\n}",[],[100],"files",[155,173,182,190,198,206,214,222,232,241,249,257],"counts",{"_270":32,"_271":272,"_273":163,"_274":32},"pulls","branches",2,"forks","envVars","contents",[],{"_104":258,"_95":100,"_158":259,"_160":-5,"_161":141,"_162":140,"_164":119,"_106":278,"_101":261,"_166":262,"_168":263,"_169":22,"_170":-5,"_99":279},["D",1737755741932],[100],"upstreamProject","upstreamBranch",{"_104":144,"_106":283,"_284":285,"_95":43,"_142":105,"_101":286,"_143":-5,"_145":-5,"_287":288,"_108":-5,"_152":22,"_110":111,"_151":94,"_16":122,"_150":96},["D",1737749593947],"updatedAt",["D",1739569255443],47,"lockfileKey","1756137415798-esm.town_v_justbe_reactRouter7@47-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_102":295,"_237":300,"_303":304,"_334":335,"_344":-7,"_345":32,"_346":22},{"_104":105,"_95":96,"_106":296,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":297,"_135":298,"_138":299,"_152":22},["D",1737749593947],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_101":140,"_95":98,"_104":141,"_142":105,"_143":144,"_145":146,"_147":111,"_148":105,"_149":122,"_150":96,"_151":94},{"_104":258,"_95":100,"_158":259,"_160":-5,"_161":141,"_162":140,"_164":119,"_106":301,"_101":261,"_166":262,"_168":263,"_169":22,"_170":-5,"_99":302},["D",1737755741932],[100],"history",[305,307,312,317,322,326,330],{"_104":258,"_161":141,"_158":259,"_95":100,"_168":263,"_166":262,"_101":261,"_160":-5,"_106":306,"_162":140,"_170":-5},["D",1737755741932],{"_104":308,"_161":141,"_158":259,"_95":100,"_168":309,"_166":262,"_101":226,"_160":-5,"_106":310,"_162":311,"_170":-5},"c7c30948-da9d-11ef-be1a-e6cdfca9ef9f","import * as esbuild from \"https://deno.land/x/esbuild@v0.24.0/wasm.js\";\nimport { handler } from \"./entry.server.tsx\";\n\nexport default async function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname.endsWith(\"/js/entry.client.js\")) {\n const moduleUrl = new URL(\"./entry.client.tsx\", import.meta.url);\n console.log(moduleUrl);\n const res = await fetch(moduleUrl);\n const ts = await res.text();\n const build = await esbuild.transform(ts, { loader: \"tsx\" });\n return new Response(build, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=604800\",\n },\n });\n }\n return handler(request);\n}",["D",1737755666786],7,{"_104":313,"_161":141,"_158":259,"_95":100,"_168":314,"_166":262,"_101":315,"_160":-5,"_106":316,"_162":261,"_170":-5},"bfd92d16-da9d-11ef-a574-e6cdfca9ef9f","import * as esbuild from \"https://deno.land/x/esbuild@v0.24.0/wasm.js\";\nimport { handler } from \"./entry.server.tsx\";\n\nexport default async function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname.endsWith(\"/js/entry.client.js\")) {\n const moduleUrl = new URL(\"./entry.client.tsx\", import.meta.url);\n console.log(moduleUrl);\n const res = await fetch(moduleUrl);\n const ts = await res.text();\n const build = await esbuild.transform(ts, { loader: \"tsx\" });\n return new Response(build, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=60\",\n },\n });\n }\n return handler(request);\n}",4,["D",1737755653510],{"_104":318,"_161":141,"_158":259,"_95":100,"_168":319,"_166":262,"_101":320,"_160":-5,"_106":321,"_162":315,"_170":-5},"1fb481dc-da9d-11ef-b0a8-e6cdfca9ef9f","import * as esbuild from \"https://deno.land/x/esbuild@v0.24.0/wasm.js\";\nimport { 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 console.log(moduleUrl);\n const res = await fetch(moduleUrl);\n const ts = await res.text();\n const build = await esbuild.transform(ts, { loader: \"tsx\" });\n return new Response(build, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n \"Cache-Control\": \"max-age=60\",\n },\n });\n }\n return handler(request);\n}",3,["D",1737755384808],{"_104":323,"_161":141,"_158":259,"_95":100,"_168":324,"_166":262,"_101":272,"_160":-5,"_106":325,"_162":320,"_170":-5},"b6f57002-da9c-11ef-b17d-e6cdfca9ef9f","import * as esbuild from \"https://deno.land/x/esbuild@v0.24.0/wasm.js\";\nimport { 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 const res = await fetch(moduleUrl);\n const ts = await res.text();\n const build = await esbuild.transform(ts, { loader: \"tsx\" });\n return new Response(build, {\n headers: {\n \"Content-Type\": \"application/javascript\",\n },\n });\n }\n return handler(request);\n}",["D",1737755209100],{"_104":327,"_161":141,"_158":259,"_95":100,"_168":328,"_166":262,"_101":163,"_160":-5,"_106":329,"_162":272,"_170":-5},"27038bbe-da9c-11ef-9cbb-e6cdfca9ef9f","import { build } from \"npm:esbuild-wasm\";\nimport { 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}",["D",1737754967602],{"_104":331,"_161":141,"_158":259,"_95":100,"_168":332,"_166":262,"_101":32,"_160":-5,"_106":333,"_162":163,"_170":-5},"16ed49cc-da9c-11ef-a56e-e6cdfca9ef9f","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}",["D",1737754940605],"versions",[336,338,339,340,341,342,343],{"_237":305,"_337":307},"previous",{"_237":307,"_337":312},{"_237":312,"_337":317},{"_237":317,"_337":322},{"_237":322,"_337":326},{"_237":326,"_337":330},{"_237":330,"_337":-5},"versionNumber","page","hasNext","actionData","errors"]

History for server.tsx