{data.message}

;\n}",[],[149,178],{"_106":186,"_99":187,"_150":188,"_152":151,"_153":139,"_154":138,"_156":121,"_108":189,"_103":171,"_159":172,"_161":190,"_162":27,"_163":-5,"_164":191,"_102":192},"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}",[],[149,187],{"_106":194,"_99":195,"_150":196,"_152":151,"_153":139,"_154":138,"_156":121,"_108":197,"_103":171,"_159":172,"_161":198,"_162":27,"_163":-5,"_164":199,"_102":200},"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];",[],[149,195],{"_106":202,"_99":203,"_150":204,"_152":151,"_153":139,"_154":138,"_156":121,"_108":205,"_103":171,"_159":172,"_161":206,"_162":27,"_163":-5,"_164":207,"_102":208},"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}",[],[149,203],{"_106":210,"_99":211,"_150":212,"_152":151,"_153":139,"_154":138,"_156":121,"_108":213,"_103":171,"_159":172,"_161":214,"_162":27,"_163":-5,"_164":215,"_102":216},"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}",[],[149,211],{"_106":218,"_99":219,"_150":220,"_152":151,"_153":139,"_154":138,"_156":121,"_108":221,"_103":222,"_159":172,"_161":223,"_162":27,"_163":-5,"_164":224,"_102":225},"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}",[],[149,219],[149],{"_106":228,"_99":229,"_150":230,"_152":-5,"_153":139,"_154":231,"_156":121,"_108":232,"_103":171,"_159":233,"_161":234,"_162":27,"_163":-5,"_164":235,"_102":236},"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).",[],[229],{"_106":238,"_99":239,"_150":240,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":241,"_103":242,"_159":172,"_161":243,"_162":27,"_163":-5,"_164":244,"_102":245},"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 }));",[],[239],{"_106":247,"_99":248,"_150":249,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":250,"_103":171,"_159":172,"_161":251,"_162":27,"_163":-5,"_164":252,"_102":253},"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}",[],[248],{"_106":255,"_99":256,"_150":119,"_152":-5,"_153":139,"_154":257,"_156":121,"_108":258,"_103":259,"_159":260,"_161":261,"_162":27,"_163":-5,"_164":262,"_102":263},"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}",[],[256],"files",[147,166,176,185,193,201,209,217,227,237,246,254],"counts",{"_268":33,"_269":94,"_270":158,"_271":33},"pulls","branches","forks","envVars","contents",[274,277,280,283,286],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":121,"_108":275,"_103":158,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":276},["D",1737749646405],[149],{"_106":228,"_99":229,"_150":230,"_152":-5,"_153":139,"_154":231,"_156":121,"_108":278,"_103":171,"_159":233,"_161":234,"_162":27,"_163":-5,"_102":279},["D",1737750811723],[229],{"_106":238,"_99":239,"_150":240,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":281,"_103":242,"_159":172,"_161":243,"_162":27,"_163":-5,"_102":282},["D",1739569255443],[239],{"_106":247,"_99":248,"_150":249,"_152":-5,"_153":139,"_154":138,"_156":121,"_108":284,"_103":171,"_159":172,"_161":251,"_162":27,"_163":-5,"_102":285},["D",1739569255443],[248],{"_106":255,"_99":256,"_150":119,"_152":-5,"_153":139,"_154":257,"_156":121,"_108":287,"_103":259,"_159":260,"_161":261,"_162":27,"_163":-5,"_102":288},["D",1737751784170],[256],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":294,"_298":299,"_510":33,"_511":121},{"_106":107,"_99":100,"_108":295,"_110":-5,"_111":27,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":296,"_136":297},["D",1737749593947],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[300,326,334,342,347,356,361,369,377,385,394,402,410,418,426,434,441,449,457,465,470,478,486,494,502],{"_150":249,"_103":138,"_108":301,"_153":139,"_264":302},["D",1739569255443],[303,305,308,311,314,317,320,323],{"_106":247,"_153":139,"_150":249,"_99":248,"_161":251,"_159":172,"_103":171,"_152":-5,"_108":301,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":304},[248],{"_106":210,"_153":139,"_150":212,"_99":211,"_161":214,"_159":172,"_103":171,"_152":151,"_108":306,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":307},["D",1739569255443],[149,211],{"_106":202,"_153":139,"_150":204,"_99":203,"_161":206,"_159":172,"_103":171,"_152":151,"_108":309,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":310},["D",1739569255443],[149,203],{"_106":194,"_153":139,"_150":196,"_99":195,"_161":198,"_159":172,"_103":171,"_152":151,"_108":312,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":313},["D",1739569255443],[149,195],{"_106":238,"_153":139,"_150":240,"_99":239,"_161":243,"_159":172,"_103":242,"_152":-5,"_108":315,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":316},["D",1739569255443],[239],{"_106":186,"_153":139,"_150":188,"_99":187,"_161":190,"_159":172,"_103":171,"_152":151,"_108":318,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":319},["D",1739569255443],[149,187],{"_106":167,"_153":139,"_150":169,"_99":168,"_161":173,"_159":172,"_103":171,"_152":151,"_108":321,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":322},["D",1739569255443],[149,168],{"_106":218,"_153":139,"_150":220,"_99":219,"_161":223,"_159":172,"_103":222,"_152":151,"_108":324,"_154":138,"_163":-5,"_156":121,"_162":27,"_102":325},["D",1739569255443],[149,219],{"_150":240,"_103":327,"_108":328,"_153":139,"_264":329},46,["D",1737756090346],[330],{"_106":331,"_153":139,"_150":240,"_99":239,"_161":332,"_159":172,"_103":222,"_152":-5,"_108":328,"_154":327,"_163":-5,"_156":27,"_162":27,"_102":333},"c438c898-da9e-11ef-9e65-e6cdfca9ef9f","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 }));",[239],{"_150":220,"_103":335,"_108":336,"_153":139,"_264":337},45,["D",1737753291854],[338],{"_106":339,"_153":139,"_150":220,"_99":219,"_161":340,"_159":172,"_103":171,"_152":151,"_108":336,"_154":335,"_163":-5,"_156":27,"_162":27,"_102":341},"40313702-da98-11ef-8503-e6cdfca9ef9f","/** @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}",[149,219],{"_150":119,"_103":257,"_108":343,"_153":139,"_264":344},["D",1737751784170],[345],{"_106":255,"_153":139,"_150":119,"_99":256,"_161":261,"_159":260,"_103":259,"_152":-5,"_108":343,"_154":257,"_163":-5,"_156":121,"_162":27,"_102":346},[256],{"_150":119,"_103":348,"_108":349,"_153":139,"_264":350},43,["D",1737751014296],[351],{"_106":352,"_153":139,"_150":119,"_99":256,"_161":353,"_159":260,"_103":354,"_152":-5,"_108":349,"_154":348,"_163":-5,"_156":27,"_162":27,"_102":355},"f2a953d4-da92-11ef-9c4f-e6cdfca9ef9f","import { handler } from \"./entry.server.tsx\";\n\nexport default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n return fetch(\"https://esm.town/v/just_be/reactRouter@42-main/entry.client.tsx\");\n }\n return handler(request);\n}",8,[256],{"_150":230,"_103":231,"_108":357,"_153":139,"_264":358},["D",1737750811723],[359],{"_106":228,"_153":139,"_150":230,"_99":229,"_161":234,"_159":233,"_103":171,"_152":-5,"_108":357,"_154":231,"_163":-5,"_156":121,"_162":27,"_102":360},[229],{"_150":230,"_103":362,"_108":363,"_153":139,"_264":364},41,["D",1737750805449],[365],{"_106":366,"_153":139,"_150":230,"_99":229,"_161":367,"_159":233,"_103":94,"_152":-5,"_108":363,"_154":362,"_163":-5,"_156":27,"_162":27,"_102":368},"762de93c-da92-11ef-8b19-e6cdfca9ef9f","# 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)",[229],{"_150":230,"_103":370,"_108":371,"_153":139,"_264":372},40,["D",1737750701295],[373],{"_106":374,"_153":139,"_150":230,"_99":229,"_161":375,"_159":233,"_103":158,"_152":-5,"_108":371,"_154":370,"_163":-5,"_156":27,"_162":27,"_102":376},"38190f28-da92-11ef-98e2-e6cdfca9ef9f","# 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.",[229],{"_150":230,"_103":378,"_108":379,"_153":139,"_264":380},39,["D",1737750588632],[381],{"_106":382,"_153":139,"_150":230,"_99":229,"_161":383,"_159":233,"_103":33,"_152":-5,"_108":379,"_154":378,"_163":-5,"_156":27,"_162":27,"_102":384},"f4f21c6c-da91-11ef-8e0f-e6cdfca9ef9f","# reactRouterCustomFramework",[229],{"_150":119,"_103":386,"_108":387,"_153":139,"_264":388},38,["D",1737750514192],[389],{"_106":390,"_153":139,"_150":119,"_99":256,"_161":391,"_159":260,"_103":392,"_152":-5,"_108":387,"_154":386,"_163":-5,"_156":27,"_162":27,"_102":393},"c8933fe8-da91-11ef-8d2a-e6cdfca9ef9f","import { handler } from \"./entry.server.tsx\";\n\nexport default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n return fetch(\"https://esm.town/v/just_be/reactRouterCustomFramework/entry.client.tsx\");\n }\n return handler(request);\n}",7,[256],{"_150":119,"_103":395,"_108":396,"_153":139,"_264":397},37,["D",1737750506278],[398],{"_106":399,"_153":139,"_150":119,"_99":256,"_161":400,"_159":260,"_103":155,"_152":-5,"_108":396,"_154":395,"_163":-5,"_156":27,"_162":27,"_102":401},"c3db9806-da91-11ef-8d2a-e6cdfca9ef9f","import { handler } from \"./entry.server.tsx\";\n\nexport default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n return fetch(\"https://esm.town/v/just_be/reactRouterCustomFramework/entry.client.tsx\");\n }\n}",[256],{"_150":119,"_103":403,"_108":404,"_153":139,"_264":405},36,["D",1737750470659],[406],{"_106":407,"_153":139,"_150":119,"_99":256,"_161":408,"_159":260,"_103":242,"_152":-5,"_108":404,"_154":403,"_163":-5,"_156":27,"_162":27,"_102":409},"aea09fe0-da91-11ef-ad22-e6cdfca9ef9f","export default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname == \"/js/entry.client.js\") {\n return fetch(\"https://esm.town/v/just_be/reactRouterCustomFramework/entry.client.tsx\");\n }\n}",[256],{"_150":119,"_103":411,"_108":412,"_153":139,"_264":413},35,["D",1737750446533],[414],{"_106":415,"_153":139,"_150":119,"_99":256,"_161":416,"_159":260,"_103":222,"_152":-5,"_108":412,"_154":411,"_163":-5,"_156":27,"_162":27,"_102":417},"a03fe51e-da91-11ef-a336-e6cdfca9ef9f","export default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname === \"/js/entry.client.js\") {\n return fetch()\n }\n}",[256],{"_150":119,"_103":419,"_108":420,"_153":139,"_264":421},34,["D",1737750029491],[422],{"_106":423,"_153":139,"_150":119,"_99":256,"_161":424,"_159":260,"_103":171,"_152":-5,"_108":420,"_154":419,"_163":-5,"_156":27,"_162":27,"_102":425},"a7ac2c1e-da90-11ef-b96f-e6cdfca9ef9f","export default function(request: Request) {\n const url = new URL(request.url);\n if (url.pathname.)\n}",[256],{"_150":249,"_103":427,"_108":428,"_153":139,"_264":429},33,["D",1737749926257],[430],{"_106":431,"_153":139,"_150":249,"_99":248,"_161":432,"_159":172,"_103":94,"_152":-5,"_108":428,"_154":427,"_163":-5,"_156":27,"_162":27,"_102":433},"6a242fcc-da90-11ef-ad59-e6cdfca9ef9f","/** @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}",[248],{"_150":249,"_103":435,"_108":436,"_153":139,"_264":437},32,["D",1737749918412],[438],{"_106":439,"_153":139,"_150":249,"_99":248,"_161":70,"_159":172,"_103":158,"_152":-5,"_108":436,"_154":435,"_163":-5,"_156":27,"_162":27,"_102":440},"657716f6-da90-11ef-a418-e6cdfca9ef9f",[248],{"_150":249,"_103":442,"_108":443,"_153":139,"_264":444},31,["D",1737749909468],[445],{"_106":446,"_153":139,"_150":249,"_99":447,"_161":70,"_159":172,"_103":33,"_152":-5,"_108":443,"_154":442,"_163":-5,"_156":27,"_162":27,"_102":448},"6021fa22-da90-11ef-a630-e6cdfca9ef9f","selflessWhiteShark",[447],{"_150":240,"_103":450,"_108":451,"_153":139,"_264":452},30,["D",1737749895813],[453],{"_106":454,"_153":139,"_150":240,"_99":239,"_161":455,"_159":172,"_103":171,"_152":-5,"_108":451,"_154":450,"_163":-5,"_156":27,"_162":27,"_102":456},"57fe106a-da90-11ef-a60a-e6cdfca9ef9f","/** @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, );",[239],{"_150":169,"_103":458,"_108":459,"_153":139,"_264":460},29,["D",1737749818499],[461],{"_106":462,"_153":139,"_150":169,"_99":168,"_161":463,"_159":172,"_103":94,"_152":151,"_108":459,"_154":458,"_163":-5,"_156":27,"_162":27,"_102":464},"29e8bdec-da90-11ef-ba5b-e6cdfca9ef9f","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}",[149,168],{"_150":179,"_103":180,"_108":466,"_153":139,"_264":467},["D",1737749812282],[468],{"_106":177,"_153":139,"_150":179,"_99":178,"_161":182,"_159":172,"_103":94,"_152":151,"_108":466,"_154":180,"_163":-5,"_156":121,"_162":27,"_102":469},[149,178],{"_150":188,"_103":471,"_108":472,"_153":139,"_264":473},27,["D",1737749806472],[474],{"_106":475,"_153":139,"_150":188,"_99":187,"_161":476,"_159":172,"_103":94,"_152":151,"_108":472,"_154":471,"_163":-5,"_156":27,"_162":27,"_102":477},"22bdb39c-da90-11ef-ba5b-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function Home() {\n return

Home

;\n}",[149,187],{"_150":196,"_103":479,"_108":480,"_153":139,"_264":481},26,["D",1737749800378],[482],{"_106":483,"_153":139,"_150":196,"_99":195,"_161":484,"_159":172,"_103":94,"_152":151,"_108":480,"_154":479,"_163":-5,"_156":27,"_162":27,"_102":485},"1f1c1030-da90-11ef-912e-e6cdfca9ef9f","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];",[149,195],{"_150":204,"_103":487,"_108":488,"_153":139,"_264":489},25,["D",1737749791991],[490],{"_106":491,"_153":139,"_150":204,"_99":203,"_161":492,"_159":172,"_103":94,"_152":151,"_108":488,"_154":487,"_163":-5,"_156":27,"_162":27,"_102":493},"1a1c9d2a-da90-11ef-8076-e6cdfca9ef9f","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}",[149,203],{"_150":212,"_103":495,"_108":496,"_153":139,"_264":497},24,["D",1737749784668],[498],{"_106":499,"_153":139,"_150":212,"_99":211,"_161":500,"_159":172,"_103":94,"_152":151,"_108":496,"_154":495,"_163":-5,"_156":27,"_162":27,"_102":501},"15be7d66-da90-11ef-8d96-e6cdfca9ef9f","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}",[149,211],{"_150":220,"_103":503,"_108":504,"_153":139,"_264":505},23,["D",1737749774911],[506],{"_106":507,"_153":139,"_150":220,"_99":219,"_161":508,"_159":172,"_103":94,"_152":151,"_108":504,"_154":503,"_163":-5,"_156":27,"_162":27,"_102":509},"0fee5c1c-da90-11ef-bd08-e6cdfca9ef9f","/** @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}",[149,219],"page","hasNext","routes/_app","actionData","errors"]

History