React Router Custom Framework

\n\n \n\n

\n Home | About\n

\n\n

\n\n \n

\n\n \n \n \n );\n}",[18,137],"5ed734ce-eb1c-11ef-9103-e6cdfca9ef9f","layout.server.ts","f35b30de-da8f-11ef-a1ea-e6cdfca9ef9f",["D",1739569255443],3,"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}",[18,145],"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}",[18,152],"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];",[18,158],"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}",[18,164],"2634bde0-da90-11ef-a660-e6cdfca9ef9f","about.tsx","cd442a22-da8f-11ef-aac1-e6cdfca9ef9f",28,["D",1737749812282],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useLoaderData } from \"https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0\";\nimport type loader from \"./about.loader.js\";\n\nexport default function About() {\n let data = useLoaderData();\n return

{data.message}

;\n}",[18,170],"5ed72e34-eb1c-11ef-9103-e6cdfca9ef9f","about.loader.ts","c62ad6e6-da8f-11ef-a398-e6cdfca9ef9f",["D",1739569255443],"import { data } from \"npm:react-router\";\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}",[18,178],"pulls","branches","forks","envVars",{"_190":26,"_192":26},"connections",{"_190":26,"_191":26},"count","unfilledCount","emptyCount",{"_38":118,"_13":18,"_32":33,"_119":-5,"_120":81,"_121":122,"_123":24,"_40":259,"_79":125,"_34":35,"_126":-5,"_36":30,"_127":-5,"_212":260,"_17":261},{"_38":177,"_13":178,"_32":179,"_119":33,"_120":81,"_121":80,"_123":24,"_40":256,"_79":148,"_34":141,"_126":181,"_36":30,"_127":-5,"_212":257,"_17":258},{"_38":169,"_13":170,"_32":171,"_119":33,"_120":81,"_121":172,"_123":24,"_40":253,"_79":174,"_34":141,"_126":175,"_36":30,"_127":-5,"_212":254,"_17":255},{"_38":163,"_13":164,"_32":165,"_119":33,"_120":81,"_121":80,"_123":24,"_40":250,"_79":148,"_34":141,"_126":167,"_36":30,"_127":-5,"_212":251,"_17":252},{"_38":157,"_13":158,"_32":159,"_119":33,"_120":81,"_121":80,"_123":24,"_40":247,"_79":148,"_34":141,"_126":161,"_36":30,"_127":-5,"_212":248,"_17":249},{"_38":151,"_13":152,"_32":153,"_119":33,"_120":81,"_121":80,"_123":24,"_40":244,"_79":148,"_34":141,"_126":155,"_36":30,"_127":-5,"_212":245,"_17":246},{"_38":144,"_13":145,"_32":146,"_119":33,"_120":81,"_121":80,"_123":24,"_40":241,"_79":148,"_34":141,"_126":149,"_36":30,"_127":-5,"_212":242,"_17":243},{"_38":136,"_13":137,"_32":138,"_119":33,"_120":81,"_121":80,"_123":24,"_40":238,"_79":140,"_34":141,"_126":142,"_36":30,"_127":-5,"_212":239,"_17":240},{"_38":230,"_13":231,"_32":232,"_119":-5,"_120":81,"_121":233,"_123":24,"_40":234,"_79":148,"_34":21,"_126":235,"_36":30,"_127":-5,"_212":236,"_17":237},{"_38":222,"_13":223,"_32":224,"_119":-5,"_120":81,"_121":80,"_123":24,"_40":225,"_79":226,"_34":141,"_126":227,"_36":30,"_127":-5,"_212":228,"_17":229},{"_38":215,"_13":216,"_32":217,"_119":-5,"_120":81,"_121":80,"_123":24,"_40":218,"_79":148,"_34":141,"_126":219,"_36":30,"_127":-5,"_212":220,"_17":221},{"_38":205,"_13":206,"_32":52,"_119":-5,"_120":81,"_121":207,"_123":24,"_40":208,"_79":209,"_34":210,"_126":211,"_36":30,"_127":-5,"_212":213,"_17":214},"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}","children",[],[206],"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}",[],[216],"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 }));",[],[223],"79eab640-da92-11ef-8f06-e6cdfca9ef9f","README.md","f4f21d16-da91-11ef-8e0f-e6cdfca9ef9f",42,["D",1737750811723],"# 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).",[],[231],["D",1739569255443],[],[18,137],["D",1739569255443],[],[18,145],["D",1739569255443],[],[18,152],["D",1739569255443],[],[18,158],["D",1739569255443],[],[18,164],["D",1737749812282],[],[18,170],["D",1739569255443],[],[18,178],["D",1737749646405],[194,195,196,197,198,199,200],[18],["D",1737749593947],{"_11":12,"_96":92},{"_11":12,"_90":-5,"_91":92,"_31":50,"_93":94,"_95":30},{"_79":80,"_13":16,"_38":81,"_82":39,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":14,"_89":12},"ctx",{"_72":-5,"_115":299,"_300":301,"_302":303,"_304":30,"_305":30,"_306":30,"_307":24,"_308":-5,"_309":-7,"_310":-7,"_311":26,"_312":30,"_313":30,"_314":-5,"_315":30,"_316":30,"_317":30,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · routes