{data.message}

;\n}",[],[99,184],{"_104":192,"_95":193,"_155":194,"_157":156,"_158":141,"_159":195,"_161":22,"_106":196,"_100":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}",[],[99,193],{"_104":201,"_95":202,"_155":203,"_157":156,"_158":141,"_159":204,"_161":22,"_106":205,"_100":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];",[],[99,202],{"_104":210,"_95":211,"_155":212,"_157":156,"_158":141,"_159":213,"_161":22,"_106":214,"_100":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}",[],[99,211],{"_104":219,"_95":220,"_155":221,"_157":156,"_158":141,"_159":222,"_161":22,"_106":223,"_100":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}",[],[99,220],{"_104":228,"_95":229,"_155":230,"_157":156,"_158":141,"_159":231,"_161":22,"_106":232,"_100":177,"_164":178,"_166":233,"_167":22,"_168":-5,"_169":234,"_98":235},"0fee5c1c-da90-11ef-bd08-e6cdfca9ef9f","layout.tsx","fa5066c0-da8f-11ef-9c0f-e6cdfca9ef9f",23,["D",1737749774911],"/** @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}",[],[99,229],[99],{"_104":238,"_95":239,"_155":240,"_157":-5,"_158":141,"_159":241,"_161":22,"_106":242,"_100":243,"_164":178,"_166":244,"_167":22,"_168":-5,"_169":245,"_98":246},"57fe106a-da90-11ef-a60a-e6cdfca9ef9f","entry.client.tsx","ba7c7930-da8f-11ef-97e6-e6cdfca9ef9f",30,["D",1737749895813],3,"/** @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],{"_104":248,"_95":249,"_155":250,"_157":-5,"_158":141,"_159":251,"_161":22,"_106":252,"_100":177,"_164":178,"_166":253,"_167":22,"_168":-5,"_169":254,"_98":255},"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}",[],[249],{"_104":257,"_95":258,"_155":117,"_157":-5,"_158":141,"_159":101,"_161":22,"_106":259,"_100":260,"_164":261,"_166":262,"_167":22,"_168":-5,"_169":263,"_98":264},"aea09fe0-da91-11ef-ad22-e6cdfca9ef9f","server.tsx",["D",1737750470659],5,"http","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}",[],[258],"files",[153,171,182,191,200,209,218,227,237,247,256],"counts",{"_269":32,"_270":177,"_271":163,"_272":32},"pulls","branches","forks","envVars","contents",[275,278,281,284,287,290,293],{"_104":172,"_95":173,"_155":174,"_157":156,"_158":141,"_159":175,"_161":22,"_106":276,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_98":277},["D",1737749818499],[99,173],{"_104":183,"_95":184,"_155":185,"_157":156,"_158":141,"_159":186,"_161":119,"_106":279,"_100":177,"_164":178,"_166":188,"_167":22,"_168":-5,"_98":280},["D",1737749812282],[99,184],{"_104":192,"_95":193,"_155":194,"_157":156,"_158":141,"_159":195,"_161":22,"_106":282,"_100":177,"_164":178,"_166":197,"_167":22,"_168":-5,"_98":283},["D",1737749806472],[99,193],{"_104":201,"_95":202,"_155":203,"_157":156,"_158":141,"_159":204,"_161":22,"_106":285,"_100":177,"_164":178,"_166":206,"_167":22,"_168":-5,"_98":286},["D",1737749800378],[99,202],{"_104":210,"_95":211,"_155":212,"_157":156,"_158":141,"_159":213,"_161":22,"_106":288,"_100":177,"_164":178,"_166":215,"_167":22,"_168":-5,"_98":289},["D",1737749791991],[99,211],{"_104":219,"_95":220,"_155":221,"_157":156,"_158":141,"_159":222,"_161":22,"_106":291,"_100":177,"_164":178,"_166":224,"_167":22,"_168":-5,"_98":292},["D",1737749784668],[99,220],{"_104":228,"_95":229,"_155":230,"_157":156,"_158":141,"_159":231,"_161":22,"_106":294,"_100":177,"_164":178,"_166":233,"_167":22,"_168":-5,"_98":295},["D",1737749774911],[99,229],"file",{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":119,"_106":298,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":299},["D",1737749646405],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":308,"_151":313,"_265":347,"_296":348,"_273":350,"_365":-5,"_366":22,"_367":-5,"_368":-5,"_369":-5,"_370":371},{"_104":105,"_95":96,"_106":309,"_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":310,"_135":311,"_138":312,"_150":22},["D",1737749593947],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[314,338,341,344],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":119,"_106":162,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":315,"_98":337},[316,319,322,325,328,331,334],{"_104":172,"_95":173,"_155":174,"_157":156,"_158":141,"_159":175,"_161":22,"_106":176,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_169":317,"_98":318},[],[99,173],{"_104":183,"_95":184,"_155":185,"_157":156,"_158":141,"_159":186,"_161":119,"_106":187,"_100":177,"_164":178,"_166":188,"_167":22,"_168":-5,"_169":320,"_98":321},[],[99,184],{"_104":192,"_95":193,"_155":194,"_157":156,"_158":141,"_159":195,"_161":22,"_106":196,"_100":177,"_164":178,"_166":197,"_167":22,"_168":-5,"_169":323,"_98":324},[],[99,193],{"_104":201,"_95":202,"_155":203,"_157":156,"_158":141,"_159":204,"_161":22,"_106":205,"_100":177,"_164":178,"_166":206,"_167":22,"_168":-5,"_169":326,"_98":327},[],[99,202],{"_104":210,"_95":211,"_155":212,"_157":156,"_158":141,"_159":213,"_161":22,"_106":214,"_100":177,"_164":178,"_166":215,"_167":22,"_168":-5,"_169":329,"_98":330},[],[99,211],{"_104":219,"_95":220,"_155":221,"_157":156,"_158":141,"_159":222,"_161":22,"_106":223,"_100":177,"_164":178,"_166":224,"_167":22,"_168":-5,"_169":332,"_98":333},[],[99,220],{"_104":228,"_95":229,"_155":230,"_157":156,"_158":141,"_159":231,"_161":22,"_106":232,"_100":177,"_164":178,"_166":233,"_167":22,"_168":-5,"_169":335,"_98":336},[],[99,229],[99],{"_104":238,"_95":239,"_155":240,"_157":-5,"_158":141,"_159":241,"_161":22,"_106":242,"_100":243,"_164":178,"_166":244,"_167":22,"_168":-5,"_169":339,"_98":340},[],[239],{"_104":248,"_95":249,"_155":250,"_157":-5,"_158":141,"_159":251,"_161":22,"_106":252,"_100":177,"_164":178,"_166":253,"_167":22,"_168":-5,"_169":342,"_98":343},[],[249],{"_104":257,"_95":258,"_155":117,"_157":-5,"_158":141,"_159":101,"_161":22,"_106":259,"_100":260,"_164":261,"_166":262,"_167":22,"_168":-5,"_169":345,"_98":346},[],[258],[314,316,319,322,325,328,331,334,338,341,344],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":141,"_159":160,"_161":119,"_106":298,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":349},[99],[351,353,355,357,359,361,363],{"_104":172,"_95":173,"_155":174,"_157":156,"_158":141,"_159":175,"_161":22,"_106":276,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_98":352},[99,173],{"_104":183,"_95":184,"_155":185,"_157":156,"_158":141,"_159":186,"_161":119,"_106":279,"_100":177,"_164":178,"_166":188,"_167":22,"_168":-5,"_98":354},[99,184],{"_104":192,"_95":193,"_155":194,"_157":156,"_158":141,"_159":195,"_161":22,"_106":282,"_100":177,"_164":178,"_166":197,"_167":22,"_168":-5,"_98":356},[99,193],{"_104":201,"_95":202,"_155":203,"_157":156,"_158":141,"_159":204,"_161":22,"_106":285,"_100":177,"_164":178,"_166":206,"_167":22,"_168":-5,"_98":358},[99,202],{"_104":210,"_95":211,"_155":212,"_157":156,"_158":141,"_159":213,"_161":22,"_106":288,"_100":177,"_164":178,"_166":215,"_167":22,"_168":-5,"_98":360},[99,211],{"_104":219,"_95":220,"_155":221,"_157":156,"_158":141,"_159":222,"_161":22,"_106":291,"_100":177,"_164":178,"_166":224,"_167":22,"_168":-5,"_98":362},[99,220],{"_104":228,"_95":229,"_155":230,"_157":156,"_158":141,"_159":231,"_161":22,"_106":294,"_100":177,"_164":178,"_166":233,"_167":22,"_168":-5,"_98":364},[99,229],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

justbe

reactRouter7