{data.message}

;\n}",[],[154,184],{"_103":192,"_95":193,"_155":194,"_157":156,"_158":140,"_159":195,"_161":22,"_105":196,"_99":177,"_164":178,"_166":197,"_167":22,"_168":-5,"_169":198,"_98":199},"22bdb39c-da90-11ef-ba5b-e6cdfca9ef9f","home.tsx","d28706d0-da8f-11ef-a60a-e6cdfca9ef9f",27,["D",1737749806472],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function Home() {\n return

Home

;\n}",[],[154,193],{"_103":201,"_95":202,"_155":203,"_157":156,"_158":140,"_159":204,"_161":22,"_105":205,"_99":177,"_164":178,"_166":206,"_167":22,"_168":-5,"_169":207,"_98":208},"1f1c1030-da90-11ef-912e-e6cdfca9ef9f","index.ts","e59eadb8-da8f-11ef-9c0f-e6cdfca9ef9f",26,["D",1737749800378],"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];",[],[154,202],{"_103":210,"_95":211,"_155":212,"_157":156,"_158":140,"_159":213,"_161":22,"_105":214,"_99":177,"_164":178,"_166":215,"_167":22,"_168":-5,"_169":216,"_98":217},"1a1c9d2a-da90-11ef-8076-e6cdfca9ef9f","layout.client.ts","ed6ba262-da8f-11ef-9c0f-e6cdfca9ef9f",25,["D",1737749791991],"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}",[],[154,211],{"_103":219,"_95":220,"_155":221,"_157":156,"_158":140,"_159":222,"_161":22,"_105":223,"_99":177,"_164":178,"_166":224,"_167":22,"_168":-5,"_169":225,"_98":226},"15be7d66-da90-11ef-8d96-e6cdfca9ef9f","layout.server.ts","f35b30de-da8f-11ef-a1ea-e6cdfca9ef9f",24,["D",1737749784668],"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}",[],[154,220],{"_103":228,"_95":229,"_155":230,"_157":156,"_158":140,"_159":231,"_161":22,"_105":232,"_99":233,"_164":178,"_166":234,"_167":22,"_168":-5,"_169":235,"_98":236},"40313702-da98-11ef-8503-e6cdfca9ef9f","layout.tsx","fa5066c0-da8f-11ef-9c0f-e6cdfca9ef9f",45,["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}",[],[154,229],[154],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":242,"_161":118,"_105":243,"_99":233,"_164":244,"_166":245,"_167":22,"_168":-5,"_169":246,"_98":247},"79eab640-da92-11ef-8f06-e6cdfca9ef9f","README.md","f4f21d16-da91-11ef-8e0f-e6cdfca9ef9f",42,["D",1737750811723],"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).",[],[240],{"_103":249,"_95":250,"_155":251,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":252,"_99":253,"_164":178,"_166":254,"_167":22,"_168":-5,"_169":255,"_98":256},"c438c898-da9e-11ef-9e65-e6cdfca9ef9f","entry.client.tsx","ba7c7930-da8f-11ef-97e6-e6cdfca9ef9f",["D",1737756090346],4,"import { 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, React.createElement(RouterProvider, { router: router }));",[],[250],{"_103":258,"_95":259,"_155":260,"_157":-5,"_158":140,"_159":261,"_161":22,"_105":262,"_99":177,"_164":178,"_166":263,"_167":22,"_168":-5,"_169":264,"_98":265},"6a242fcc-da90-11ef-ad59-e6cdfca9ef9f","entry.server.tsx","6021faae-da90-11ef-a630-e6cdfca9ef9f",33,["D",1737749926257],"/** @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}",[],[259],{"_103":267,"_95":268,"_155":116,"_157":-5,"_158":140,"_159":269,"_161":118,"_105":270,"_99":271,"_164":272,"_166":273,"_167":22,"_168":-5,"_169":274,"_98":275},"bd8aa138-da94-11ef-995f-e6cdfca9ef9f","server.tsx",44,["D",1737751784170],9,"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}",[],[268],"files",[152,171,182,191,200,209,218,227,238,248,257,266],"counts",{"_280":32,"_281":177,"_282":163,"_283":32},"pulls","branches","forks","envVars","contents",[286,289,292,295,298],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":118,"_105":287,"_99":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":288},["D",1737749646405],[154],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":242,"_161":118,"_105":290,"_99":233,"_164":244,"_166":245,"_167":22,"_168":-5,"_98":291},["D",1737750811723],[240],{"_103":249,"_95":250,"_155":251,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":293,"_99":253,"_164":178,"_166":254,"_167":22,"_168":-5,"_98":294},["D",1737756090346],[250],{"_103":258,"_95":259,"_155":260,"_157":-5,"_158":140,"_159":261,"_161":22,"_105":296,"_99":177,"_164":178,"_166":263,"_167":22,"_168":-5,"_98":297},["D",1737749926257],[259],{"_103":267,"_95":268,"_155":116,"_157":-5,"_158":140,"_159":269,"_161":118,"_105":299,"_99":271,"_164":272,"_166":273,"_167":22,"_168":-5,"_98":300},["D",1737751784170],[268],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_99":100,"_98":72,"_101":309,"_150":314,"_276":351,"_244":-7,"_284":352,"_363":-5,"_364":22,"_365":-5,"_366":-5,"_367":-5,"_368":369},{"_103":104,"_95":96,"_105":310,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":311,"_134":312,"_137":313,"_149":22},["D",1737749593947],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_99":139,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[315,339,342,345,348],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":118,"_105":162,"_99":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":316,"_98":338},[317,320,323,326,329,332,335],{"_103":172,"_95":173,"_155":174,"_157":156,"_158":140,"_159":175,"_161":22,"_105":176,"_99":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_169":318,"_98":319},[],[154,173],{"_103":183,"_95":184,"_155":185,"_157":156,"_158":140,"_159":186,"_161":118,"_105":187,"_99":177,"_164":178,"_166":188,"_167":22,"_168":-5,"_169":321,"_98":322},[],[154,184],{"_103":192,"_95":193,"_155":194,"_157":156,"_158":140,"_159":195,"_161":22,"_105":196,"_99":177,"_164":178,"_166":197,"_167":22,"_168":-5,"_169":324,"_98":325},[],[154,193],{"_103":201,"_95":202,"_155":203,"_157":156,"_158":140,"_159":204,"_161":22,"_105":205,"_99":177,"_164":178,"_166":206,"_167":22,"_168":-5,"_169":327,"_98":328},[],[154,202],{"_103":210,"_95":211,"_155":212,"_157":156,"_158":140,"_159":213,"_161":22,"_105":214,"_99":177,"_164":178,"_166":215,"_167":22,"_168":-5,"_169":330,"_98":331},[],[154,211],{"_103":219,"_95":220,"_155":221,"_157":156,"_158":140,"_159":222,"_161":22,"_105":223,"_99":177,"_164":178,"_166":224,"_167":22,"_168":-5,"_169":333,"_98":334},[],[154,220],{"_103":228,"_95":229,"_155":230,"_157":156,"_158":140,"_159":231,"_161":22,"_105":232,"_99":233,"_164":178,"_166":234,"_167":22,"_168":-5,"_169":336,"_98":337},[],[154,229],[154],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":242,"_161":118,"_105":243,"_99":233,"_164":244,"_166":245,"_167":22,"_168":-5,"_169":340,"_98":341},[],[240],{"_103":249,"_95":250,"_155":251,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":252,"_99":253,"_164":178,"_166":254,"_167":22,"_168":-5,"_169":343,"_98":344},[],[250],{"_103":258,"_95":259,"_155":260,"_157":-5,"_158":140,"_159":261,"_161":22,"_105":262,"_99":177,"_164":178,"_166":263,"_167":22,"_168":-5,"_169":346,"_98":347},[],[259],{"_103":267,"_95":268,"_155":116,"_157":-5,"_158":140,"_159":269,"_161":118,"_105":270,"_99":271,"_164":272,"_166":273,"_167":22,"_168":-5,"_169":349,"_98":350},[],[268],[315,317,320,323,326,329,332,335,339,342,345,348],[353,355,357,359,361],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":118,"_105":287,"_99":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":354},[154],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":242,"_161":118,"_105":290,"_99":233,"_164":244,"_166":245,"_167":22,"_168":-5,"_98":356},[240],{"_103":249,"_95":250,"_155":251,"_157":-5,"_158":140,"_159":100,"_161":22,"_105":293,"_99":253,"_164":178,"_166":254,"_167":22,"_168":-5,"_98":358},[250],{"_103":258,"_95":259,"_155":260,"_157":-5,"_158":140,"_159":261,"_161":22,"_105":296,"_99":177,"_164":178,"_166":263,"_167":22,"_168":-5,"_98":360},[259],{"_103":267,"_95":268,"_155":116,"_157":-5,"_158":140,"_159":269,"_161":118,"_105":299,"_99":271,"_164":272,"_166":273,"_167":22,"_168":-5,"_98":362},[268],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]