{data.message}

;\n}",[],[140,168],{"_102":176,"_95":177,"_141":178,"_143":142,"_144":132,"_145":131,"_147":116,"_104":179,"_99":161,"_150":162,"_152":180,"_153":26,"_154":181,"_98":182},"5ed72f4c-eb1c-11ef-9103-e6cdfca9ef9f","home.tsx","d28706d0-da8f-11ef-a60a-e6cdfca9ef9f",["D",1739569255443],"/** @jsxImportSource npm:react */\n\nexport default function Home() {\n return

Home

;\n}",[],[140,177],{"_102":184,"_95":185,"_141":186,"_143":142,"_144":132,"_145":131,"_147":116,"_104":187,"_99":161,"_150":162,"_152":188,"_153":26,"_154":189,"_98":190},"5ed730a0-eb1c-11ef-9103-e6cdfca9ef9f","index.ts","e59eadb8-da8f-11ef-9c0f-e6cdfca9ef9f",["D",1739569255443],"import { ActionFunctionArgs, LoaderFunctionArgs } from \"npm:react-router\";\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];",[],[140,185],{"_102":192,"_95":193,"_141":194,"_143":142,"_144":132,"_145":131,"_147":116,"_104":195,"_99":161,"_150":162,"_152":196,"_153":26,"_154":197,"_98":198},"5ed7324e-eb1c-11ef-9103-e6cdfca9ef9f","layout.client.ts","ed6ba262-da8f-11ef-9c0f-e6cdfca9ef9f",["D",1739569255443],"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}",[],[140,193],{"_102":200,"_95":201,"_141":202,"_143":142,"_144":132,"_145":131,"_147":116,"_104":203,"_99":161,"_150":162,"_152":204,"_153":26,"_154":205,"_98":206},"5ed734ce-eb1c-11ef-9103-e6cdfca9ef9f","layout.server.ts","f35b30de-da8f-11ef-a1ea-e6cdfca9ef9f",["D",1739569255443],"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}",[],[140,201],{"_102":208,"_95":209,"_141":210,"_143":142,"_144":132,"_145":131,"_147":116,"_104":211,"_99":212,"_150":162,"_152":213,"_153":26,"_154":214,"_98":215},"5ed73668-eb1c-11ef-9103-e6cdfca9ef9f","layout.tsx","fa5066c0-da8f-11ef-9c0f-e6cdfca9ef9f",["D",1739569255443],4,"/** @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}",[],[140,209],[140],{"_102":218,"_95":219,"_141":220,"_143":-5,"_144":132,"_145":221,"_147":116,"_104":222,"_99":161,"_150":223,"_152":224,"_153":26,"_154":225,"_98":226},"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).",[],[219],{"_102":228,"_95":229,"_141":230,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":231,"_99":232,"_150":162,"_152":233,"_153":26,"_154":234,"_98":235},"5ed728c6-eb1c-11ef-9103-e6cdfca9ef9f","entry.client.tsx","ba7c7930-da8f-11ef-97e6-e6cdfca9ef9f",["D",1739569255443],5,"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 }));",[],[229],{"_102":237,"_95":238,"_141":239,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":240,"_99":161,"_150":162,"_152":241,"_153":26,"_154":242,"_98":243},"5ed72c5e-eb1c-11ef-9103-e6cdfca9ef9f","entry.server.tsx","6021faae-da90-11ef-a630-e6cdfca9ef9f",["D",1739569255443],"/** @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}",[],[238],{"_102":245,"_95":246,"_141":114,"_143":-5,"_144":132,"_145":247,"_147":116,"_104":248,"_99":249,"_150":250,"_152":251,"_153":26,"_154":252,"_98":253},"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}",[],[246],"counts",{"_256":31,"_257":90,"_258":149,"_259":31},"pulls","branches","forks","envVars","contents",[262,265,268,271,274],{"_102":139,"_95":140,"_141":142,"_143":-5,"_144":132,"_145":146,"_147":116,"_104":263,"_99":149,"_150":151,"_152":-5,"_153":26,"_98":264},["D",1737749646405],[140],{"_102":218,"_95":219,"_141":220,"_143":-5,"_144":132,"_145":221,"_147":116,"_104":266,"_99":161,"_150":223,"_152":224,"_153":26,"_98":267},["D",1737750811723],[219],{"_102":228,"_95":229,"_141":230,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":269,"_99":232,"_150":162,"_152":233,"_153":26,"_98":270},["D",1739569255443],[229],{"_102":237,"_95":238,"_141":239,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":272,"_99":161,"_150":162,"_152":241,"_153":26,"_98":273},["D",1739569255443],[238],{"_102":245,"_95":246,"_141":114,"_143":-5,"_144":132,"_145":247,"_147":116,"_104":275,"_99":249,"_150":250,"_152":251,"_153":26,"_98":276},["D",1737751784170],[246],"upstream","routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":280,"_260":284,"_295":296,"_299":300,"_277":-5,"_302":-5},{"_102":103,"_95":96,"_104":281,"_106":-5,"_107":108,"_109":110,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":26,"_20":282,"_129":283},["D",1737749593947],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5},[285,287,289,291,293],{"_102":139,"_95":140,"_141":142,"_143":-5,"_144":132,"_145":146,"_147":116,"_104":263,"_99":149,"_150":151,"_152":-5,"_153":26,"_98":286},[140],{"_102":218,"_95":219,"_141":220,"_143":-5,"_144":132,"_145":221,"_147":116,"_104":266,"_99":161,"_150":223,"_152":224,"_153":26,"_98":288},[219],{"_102":228,"_95":229,"_141":230,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":269,"_99":232,"_150":162,"_152":233,"_153":26,"_98":290},[229],{"_102":237,"_95":238,"_141":239,"_143":-5,"_144":132,"_145":131,"_147":116,"_104":272,"_99":161,"_150":162,"_152":241,"_153":26,"_98":292},[238],{"_102":245,"_95":246,"_141":114,"_143":-5,"_144":132,"_145":247,"_147":116,"_104":275,"_99":249,"_150":250,"_152":251,"_153":26,"_98":294},[246],"readme",{"_102":218,"_95":219,"_141":220,"_143":-5,"_144":132,"_145":221,"_147":116,"_104":297,"_99":161,"_150":223,"_152":224,"_153":26,"_98":298},["D",1737750811723],[219],"pinned",{"_102":245,"_144":132,"_141":114,"_95":246,"_152":251,"_150":250,"_99":249,"_143":-5,"_104":301,"_145":247},["D",1737751784170],"pull","routes/_app","actionData","errors"]