',\n `

${appHtml}

`, // fix: inject rendered HTML, not literal\n );\n\n // Return the HTML with the appropriate headers\n return c.html(html);\n});\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n throw err;\n});\n\n// Export the app for HTTP vals\nexport default app.fetch;",[],[156,200],[156],{"_103":210,"_95":211,"_157":212,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":213,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":214,"_98":289},"7abe54b4-6110-11f0-bc3e-0224a6c84d84","frontend","97f0d03a-b3ae-4fe9-964b-8be64eed1b63",["D",1752538385443],[215,269,279],{"_103":216,"_95":217,"_157":218,"_159":212,"_160":138,"_161":162,"_163":164,"_105":219,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":220,"_98":268},"7abe4fbe-6110-11f0-bc3e-0224a6c84d84","components","21809fca-06c0-4828-960b-b71de401042a",["D",1752538385443],[221,230,239,248,258],{"_103":222,"_95":223,"_157":224,"_159":218,"_160":138,"_161":225,"_163":164,"_105":226,"_100":32,"_166":185,"_168":227,"_169":22,"_170":-5,"_171":228,"_98":229},"f6e513ac-6129-11f0-be8b-0224a6c84d84","CopyEmailButton.tsx","f6e514c4-6129-11f0-be8b-0224a6c84d84",213,["D",1752549330573],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function CopyEmailButton({ email }: { email: string }) {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async () => {\n await navigator.clipboard.writeText(email);\n setCopied(true);\n setTimeout(() => setCopied(false), 1200);\n };\n\n return (\n \n {copied ? \"Copied!\" : email}\n \n );\n}\n",[],[211,217,223],{"_103":231,"_95":232,"_157":233,"_159":218,"_160":138,"_161":234,"_163":164,"_105":235,"_100":162,"_166":185,"_168":236,"_169":22,"_170":-5,"_171":237,"_98":238},"e19cf954-612b-11f0-9ed1-0224a6c84d84","EndpointInfo.tsx","f69a0a2e-6129-11f0-8bd8-0224a6c84d84",241,["D",1752550154489],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { GroupedValInfo } from \"../../shared/types.ts\";\nimport { CopyEmailButton } from \"./CopyEmailButton.tsx\";\nimport { GlobeIcon, MailIcon } from \"./Icons.tsx\";\n\nexport function EndpointInfo({ val }: { val: GroupedValInfo }) {\n return val.files.map((file) => (\n

\n {file.type === \"http\" ? : }\n

\n {file.type === \"email\" ? (\n \n ) : (\n \n {file.subdomain}\n \n )}\n

\n \n {file.fileName}\n \n

\n ));\n}\n",[],[211,217,232],{"_103":240,"_95":241,"_157":242,"_159":218,"_160":138,"_161":243,"_163":164,"_105":244,"_100":162,"_166":185,"_168":245,"_169":22,"_170":-5,"_171":246,"_98":247},"0476a4a4-612a-11f0-bd9c-0224a6c84d84","Icons.tsx","f681e66a-6129-11f0-88d4-0224a6c84d84",214,["D",1752549353976],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport const MailIcon = () => (\n \n Email Icon\n \n \n \n);\n\nexport const GlobeIcon = () => (\n \n HTTP Icon\n \n \n \n \n);\n\nexport const LinkIcon = () => (\n \n Open external link\n \n \n);\n",[],[211,217,241],{"_103":249,"_95":250,"_157":251,"_159":218,"_160":138,"_161":252,"_163":164,"_105":253,"_100":254,"_166":185,"_168":255,"_169":22,"_170":-5,"_171":256,"_98":257},"f1a8cdf2-6142-11f0-88e6-0224a6c84d84","Nav.tsx","97ef79fc-6113-11f0-8b04-0224a6c84d84",326,["D",1752560059851],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { Link } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function Nav() {\n return (\n

Custom Endpoints & Emails

\n \n \n \n \n Refresh\n \n

\n );\n}\n",[],[211,217,250],{"_103":259,"_95":260,"_157":261,"_159":218,"_160":138,"_161":262,"_163":164,"_105":263,"_100":264,"_166":185,"_168":265,"_169":22,"_170":-5,"_171":266,"_98":267},"f6b3a25e-6129-11f0-9603-0224a6c84d84","ValCard.tsx","da1d4bf2-6117-11f0-ae8f-0224a6c84d84",212,["D",1752549330570],123,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { GroupedValInfo } from \"../../shared/types.ts\";\nimport { EndpointInfo } from \"./EndpointInfo.tsx\";\nimport { LinkIcon } from \"./Icons.tsx\";\n\ninterface ValCardProps {\n val: GroupedValInfo;\n}\n\nexport function ValCard({ val }: ValCardProps) {\n return (\n

\n {val.valName}\n {val.valUrl && (\n \n \n \n )}\n

\n \n

\n );\n}\n",[],[211,217,260],[211,217],{"_103":270,"_95":271,"_157":272,"_159":212,"_160":138,"_161":273,"_163":164,"_105":274,"_100":203,"_166":275,"_168":276,"_169":22,"_170":-5,"_171":277,"_98":278},"62f6dc22-6140-11f0-9c7a-0224a6c84d84","index.html","9007cf7d-69b1-4af4-b744-bfaaca639a31",315,["D",1752558961453],"file","\n\n\n\n \n \n Custom Endpoints & Emails\n \n \n \n\n\n\n \n

\n \n \n\n\n",[],[211,271],{"_103":280,"_95":281,"_157":282,"_159":212,"_160":138,"_161":283,"_163":164,"_105":284,"_100":285,"_166":185,"_168":286,"_169":22,"_170":-5,"_171":287,"_98":288},"4444e6d4-6140-11f0-bc19-0224a6c84d84","index.tsx","9a3c34a5-c571-48de-9397-ab55d5c56cc0",313,["D",1752558909954],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { routes } from \"../shared/routes.ts\";\n\n// Create a browser router with the same routes as the server\n// but using the hydration data from the server render\nconst router = createBrowserRouter(routes, {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: globalThis.__staticRouterHydrationData,\n});\n\n// Hydrate the app\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\nhydrateRoot(\n root,\n \n \n ,\n);\n\n// Fade out and remove the global loading overlay after hydration\nconst overlay = document.getElementById(\"global-loading-overlay\");\nif (overlay) {\n overlay.style.transition = \"opacity 0.3s\";\n overlay.style.opacity = \"0\";\n setTimeout(() => overlay.remove(), 300);\n}\n",[],[211,281],[211],{"_103":291,"_95":292,"_157":293,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":294,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":295,"_98":326},"7abe6c7e-6110-11f0-bc3e-0224a6c84d84","routes","47002018-24a7-4bf5-bed4-42c3c9782ccf",["D",1752538385443],[296,306,316],{"_103":297,"_95":298,"_157":299,"_159":293,"_160":138,"_161":300,"_163":164,"_105":301,"_100":302,"_166":185,"_168":303,"_169":22,"_170":-5,"_171":304,"_98":305},"a2306e8c-6143-11f0-b78d-0224a6c84d84","App.tsx","ba53ae9d-182b-40aa-9281-2f233256a649",336,["D",1752560356019],41,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport {\n Outlet,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Nav } from \"../frontend/components/Nav.tsx\";\n\nexport function App() {\n console.log(\"App rendered\");\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n \n \n );\n}\n",[],[292,298],{"_103":307,"_95":308,"_157":309,"_159":293,"_160":138,"_161":310,"_163":164,"_105":311,"_100":312,"_166":185,"_168":313,"_169":22,"_170":-5,"_171":314,"_98":315},"8a01aac6-613c-11f0-abd8-0224a6c84d84","Home.loader.ts","fd8d89e2-c54d-47a3-a02f-4399ef428574",304,["D",1752557308934],5,"import { ValTown } from \"npm:@valtown/sdk@1.6.0\";\nimport type { GroupedValInfo } from \"../shared/types.ts\";\n\nexport async function fetchValsFromAPI(): Promise {\n const vt = new ValTown();\n const grouped: Record = {};\n\n const valList = [];\n for await (const val of vt.me.vals.list({ limit: 1, offset: 0 })) {\n valList.push(val);\n }\n\n const filePromises = valList.map((val) =>\n vt.vals.files\n .retrieve(val.id, { path: \"\", recursive: true })\n .then((files) => ({ val, files })),\n );\n\n const results = await Promise.all(filePromises);\n\n for (const { val, files } of results) {\n const emailFiles = files.data.filter(\n (file) => file.type === \"email\" && file.links.endpoint,\n );\n\n const httpFiles = files.data.filter(\n (file) =>\n file.type === \"http\" &&\n !file.links.endpoint.includes(\"web.val.run\"),\n );\n\n for (const file of [...httpFiles, ...emailFiles]) {\n if (!grouped[val.name]) {\n grouped[val.name] = {\n valId: file.id,\n valName: val.name,\n valUrl: val.links.html,\n valAuthor: val.author?.username || \"unknown\",\n files: [],\n };\n }\n grouped[val.name].files.push({\n fileName: file.path,\n subdomain:\n file.type === \"http\"\n ? new URL(file.links.endpoint).hostname\n : new URL(file.links.endpoint).hostname.replace(\n \".val.run\",\n \"@val.email\",\n ),\n type: file.type ?? \"\",\n fileUrl: file.links.html,\n });\n }\n }\n\n return Object.values(grouped);\n}\n\nexport async function loader() {\n // Artificial delay to simulate slow loading\n const vals = await fetchValsFromAPI();\n\n return { vals };\n}\n",[],[292,308],{"_103":317,"_95":318,"_157":319,"_159":293,"_160":138,"_161":320,"_163":164,"_105":321,"_100":322,"_166":185,"_168":323,"_169":22,"_170":-5,"_171":324,"_98":325},"7fc527f8-6142-11f0-b13f-0224a6c84d84","Home.tsx","371252d1-7373-4ca6-b65a-08acc3b6b9b2",320,["D",1752559868760],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport {\n useLoaderData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { ValCard } from \"../frontend/components/ValCard.tsx\";\nimport type { GroupedValInfo } from \"../shared/types.ts\";\n\ninterface TopicListProps {\n vals: GroupedValInfo[];\n}\n\nexport function HomePage() {\n console.log(\"HomePage rendered\");\n const navigation = useNavigation();\n const { vals } = useLoaderData();\n const $form = React.useRef(null);\n\n React.useEffect(() => {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

\n {vals.length === 0 ? (\n

\n No vals yet. Create the first one!\n

\n ) : (\n

\n {vals.map((val) => (\n \n ))}\n

\n )}\n

\n );\n}\n",[],[292,318],[292],{"_103":328,"_95":329,"_157":330,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":331,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":332,"_98":361},"7abe71d8-6110-11f0-bc3e-0224a6c84d84","shared","c2b29928-d316-461f-9b4b-45547d7bdf6f",["D",1752538385443],[333,342,351],{"_103":334,"_95":335,"_157":336,"_159":330,"_160":138,"_161":337,"_163":164,"_105":338,"_100":32,"_166":185,"_168":339,"_169":22,"_170":-5,"_171":340,"_98":341},"e5f3e9e6-612a-11f0-a691-0224a6c84d84","routeUtils.ts","e5f3eaa4-612a-11f0-a691-0224a6c84d84",217,["D",1752549732257],"import type {\n ActionFunctionArgs,\n LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nconst isServer = typeof document === \"undefined\";\nconst isClient = !isServer;\n\n// Generic loader that forwards on requests for that page's JSON data\nasync function clientLoader({ request }: LoaderFunctionArgs) {\n const res = await fetch(request, {\n headers: {\n Accept: \"application/json\",\n },\n });\n return res.json();\n}\n\n// Generic action that forwards on requests for that page\nasync function clientAction({ request }: ActionFunctionArgs) {\n const response = await fetch(request);\n if (response.status === 302) {\n // somehow do a redirect\n }\n // if the response is json content type, parse the json and return it\n if (response.headers.get(\"Content-Type\")?.includes(\"application/json\")) {\n return response.json();\n }\n return response;\n}\n\nexport function createFullstackLoader(loaderSourceImportURL: string) {\n if (isClient) {\n return clientLoader;\n } else {\n return async (args: LoaderFunctionArgs) => {\n const module = await import(loaderSourceImportURL);\n const loader = module.loader || module.default;\n return loader(args);\n };\n }\n}\n\nexport function createFullstackAction(actionSourceImportURL: string) {\n if (isClient) {\n return clientAction;\n } else {\n return async (args: ActionFunctionArgs) => {\n const module = await import(actionSourceImportURL);\n const action = module.action || module.default;\n return action(args);\n };\n }\n}\n",[],[329,335],{"_103":343,"_95":344,"_157":345,"_159":330,"_160":138,"_161":346,"_163":164,"_105":347,"_100":203,"_166":185,"_168":348,"_169":22,"_170":-5,"_171":349,"_98":350},"b6dba26e-613b-11f0-accf-0224a6c84d84","routes.ts","52d7ca34-4f06-4ce3-87b2-16939d767d02",299,["D",1752556954719],"import { App } from \"../routes/App.tsx\";\nimport { HomePage } from \"../routes/Home.tsx\";\n\nimport { createFullstackLoader } from \"./routeUtils.ts\";\n\nexport const routes = [\n {\n path: \"/\",\n Component: App,\n loader: () => ({}), // resolves immediately so layout renders right away\n children: [\n {\n index: true,\n Component: HomePage,\n loader: createFullstackLoader(\"../routes/Home.loader.ts\"),\n },\n ],\n },\n];\n",[],[329,344],{"_103":352,"_95":353,"_157":354,"_159":330,"_160":138,"_161":355,"_163":164,"_105":356,"_100":357,"_166":185,"_168":358,"_169":22,"_170":-5,"_171":359,"_98":360},"d8e3706c-6127-11f0-9fea-0224a6c84d84","types.ts","92778595-3325-46ed-b659-cebe7db2390c",199,["D",1752548421820],4,"/**\n * Topic model representing a discussion thread\n */\nexport interface Topic {\n id: number;\n title: string;\n createdAt: string;\n}\n\n/**\n * Message model representing a post within a topic\n */\nexport interface Message {\n id: number;\n topicId: number;\n content: string;\n createdAt: string;\n}\n\n/**\n * Search results containing matching topics and messages\n */\nexport interface SearchResults {\n topics: Topic[];\n messages: Message[];\n query: string;\n}\n\nexport interface ValInfo {\n id: string;\n fileName: string;\n author: string;\n subdomain: string;\n valName: string;\n valUrl: string;\n type?: string;\n}\n\nexport interface GroupedValInfo {\n valId: string;\n valName: string;\n valUrl: string;\n valAuthor: string;\n files: {\n fileName: string;\n subdomain: string;\n type: string;\n fileUrl: string;\n }[];\n}\n",[],[329,353],[329],{"_103":363,"_95":364,"_157":365,"_159":-5,"_160":138,"_161":118,"_163":164,"_105":366,"_100":32,"_166":275,"_168":367,"_169":22,"_170":-5,"_171":368,"_98":369},"9624814c-6110-11f0-85c6-0224a6c84d84",".vtignore","9624821e-6110-11f0-85c6-0224a6c84d84",["D",1752538431477],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[364],{"_103":371,"_95":372,"_157":373,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":374,"_100":32,"_166":275,"_168":375,"_169":22,"_170":-5,"_171":376,"_98":377},"7abe7304-6110-11f0-bc3e-0224a6c84d84","README.md","cb9ed42d-891a-4111-943f-3090effb6096",["D",1752538385443],"# Community Message Board\n\nA simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.\n\n## Features\n\n- **Server-Side Rendering**: All pages are server-rendered when accessed directly\n- **Client-Side Navigation**: After initial load, navigation happens client-side\n- **Topic Management**: Create and view discussion topics\n- **Messaging System**: Post messages in topics\n- **Direct Message Links**: Link directly to specific messages via timestamps\n- **Search Functionality**: Search topics and messages with URL parameters\n- **Loading Indicators**: Visual feedback during async operations\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ └── index.ts # Server entry point\n├── frontend/\n│ ├── components/\n│ │ ├── LoadingSpinner.tsx\n│ │ ├── MessageForm.tsx\n│ │ ├── MessageList.tsx\n│ │ └── SearchForm.tsx\n│ ├── index.html # HTML template\n│ └── index.tsx # Client entry point\n├── routes/\n│ ├── App.tsx # Main application component\n│ ├── Home.tsx # Home page component\n│ ├── Home.loader.ts # Home page data loader\n│ ├── Topic.tsx # Topic detail component\n│ ├── Topic.loader.ts # Topic data loader\n│ ├── Topic.action.ts # Topic message creation action\n│ ├── TopicMessage.loader.ts # Direct message link loader\n│ ├── Topics.action.ts # Topic creation action\n│ ├── Search.tsx # Search results component\n│ └── Search.loader.ts # Search data loader\n└── shared/\n ├── routes.ts # Route definitions\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n### Server-Side Rendering\n\nThe application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:\n\n1. The server receives the request\n2. It runs the appropriate loaders/actions for the matched route\n3. The page is rendered with the data and sent to the client\n4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`\n\n### Client-Side Navigation\n\nAfter the initial page load, navigation happens entirely on the client:\n\n1. React Router handles link clicks and form submissions\n2. Data is fetched asynchronously using loaders and actions\n3. A loading spinner is displayed during data fetching\n4. The UI updates without a full page reload\n\n### Data Flow\n\n1. **Topics**: Stored in SQLite with title and creation timestamp\n2. **Messages**: Linked to topics with content and creation timestamp\n3. **Search**: Queries both topics and messages, with results in the URL\n\n### URL Structure\n\n- `/` - Home page with list of topics\n- `/` - Create new topic\n- `/topics/:topicId` - View a topic and its messages\n- `/topics/:topicId/messages/:messageId` - Direct link to a message\n- `/search?q=query` - Search results\n\n\n## Implementation Details\n\nThis application demonstrates a \"Val Town fullstack framework\" approach, combining:\n\n- **Hono**: For server-side routing and handling\n- **React Router 7**: For both server and client-side routing\n- **SQLite**: For data persistence\n- **TypeScript**: For type safety across the stack\n\nThe code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.",[],[372],{"_103":379,"_95":380,"_157":381,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":382,"_100":32,"_166":275,"_168":383,"_169":22,"_170":-5,"_171":384,"_98":385},"7abe76d8-6110-11f0-bc3e-0224a6c84d84","TODO.md","728b7966-12e3-4ce8-a289-3d0cc7a989d0",["D",1752538385443],"- [ ] Get OpenTownie or Gemini or Claude or OpenAI to synthesize the core of these patterns into a prompt we can use to make more ReactRouter apps, such as...\n- [ ] Convert this or into the basic react router guest book (and preserve this forum app in another project?)\n- [ ] To what extent can these patterns be packaged up into a Val Town Router project? Would be neat to get the version pinning thing all centralized, can this as-a-library be that centralized place?",[],[380],{"_103":387,"_95":99,"_157":388,"_159":-5,"_160":138,"_161":389,"_163":164,"_105":390,"_100":32,"_166":275,"_168":391,"_169":22,"_170":-5,"_171":392,"_98":393},"962a469a-6110-11f0-b3ef-0224a6c84d84","962a473a-6110-11f0-b3ef-0224a6c84d84",3,["D",1752538431479],"{\n \"$schema\": \"https://biomejs.dev/schemas/2.0.0/schema.json\",\n \"vcs\": {\n \"enabled\": false,\n \"clientKind\": \"git\",\n \"useIgnoreFile\": false\n },\n \"files\": {\n \"ignoreUnknown\": false\n },\n \"formatter\": {\n \"enabled\": true,\n \"indentStyle\": \"space\",\n \"indentWidth\": 3\n },\n \"linter\": {\n \"enabled\": true,\n \"rules\": {\n \"recommended\": true\n }\n },\n \"javascript\": {\n \"formatter\": {\n \"quoteStyle\": \"double\"\n }\n },\n \"assist\": {\n \"enabled\": true,\n \"actions\": {\n \"source\": {\n \"organizeImports\": \"on\"\n }\n }\n }\n}",[],[99],{"_103":395,"_95":396,"_157":397,"_159":-5,"_160":138,"_161":357,"_163":164,"_105":398,"_100":32,"_166":275,"_168":399,"_169":22,"_170":-5,"_171":400,"_98":401},"9630c4d4-6110-11f0-9527-0224a6c84d84","deno.json","9630c6be-6110-11f0-9527-0224a6c84d84",["D",1752538431479],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"imports\": {\n \"@biomejs/biome\": \"npm:@biomejs/biome@^2.0.0\"\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}",[],[396],{"_103":403,"_95":404,"_157":405,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":406,"_100":32,"_166":275,"_168":407,"_169":22,"_170":-5,"_171":408,"_98":409},"7abe78a4-6110-11f0-bc3e-0224a6c84d84","react-router-questions.md","5e3bbb64-a95b-4c99-9f77-cb1da30b8035",["D",1752538385443],"# React Router Questions\n\nI have some questions about how to set up React Router 7 as a \"custom framework\". It seems like the documentation on this is mostly these two pages:\n\n1. Docs on React Router 7: [\"Custom Framework\"](https://reactrouter.com/start/data/custom)\n2. Example app on Github: [@remix-run/custom-react-router-framework-example](https://github.com/remix-run/custom-react-router-framework-example)\n\n## How I've set it up\n\nI'm using react-router 7.5.0, via esm.sh, and react 18.2.0.\n\n### Client loaders & actions\n\n[On the client, I turn loaders and actions into `fetch` calls to the backend.](https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts) This is heavily inspired by [here in the Github example](https://github.com/remix-run/custom-react-router-framework-example/blob/main/app/routes.tsx#L14-L29).\n\n### Handling client loader & action API calls on the server\n\n[On the client, I check if the Accept header is JSON and then return the loader or action data.](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L66-77) This is heavily inspired by [here in the Github example](https://github.com/remix-run/custom-react-router-framework-example/blob/main/entry.server.tsx#L12-L22).\n\n### Questions\n\n### 1. Setting loader state for multiple loaders\n\nRight now I've converted every loader into its own fetch call. This is the opposite of what frameworks refer to as \"single fetch\". However on the backend, I actually get access the full loaderData for all nested routes. I even wrote [this silly function to combine all the loaderData objects into one big object](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L36-50).\n\nIdeally we should make a single loader call per navigation event, and set the internal router state. In other words, I would like to somehow reach into React Router and set this `state` here:\n\n![Screenshot 2025-04-10 at 15.03.32@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/23997cd0-6e12-46b5-53d8-89e2fe5a9c00/public)\n\nAnd then let `useLoaderData` funnel the correct loader data's to the correct routes via their IDs.\n\nI wonder how single fetch gets called: https://github.com/remix-run/react-router/blob/862709d44db19130daa7b5f9dcc0aec8561f3703/packages/react-router/lib/server-runtime/single-fetch.ts\n\n### 2. Action redirects\n\nWhen my backend returns a 302 from an action, how should I handle this on the frontend? For example, after you create a new topic on the home page, [I redirect you to that topic's ID](https://www.val.town/x/stevekrouse/reactRouter7Example/code/routes/Topics.action.ts#L13)\n\nHowever, I'm not sure how [to handle this on the client here](https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts#L26).\n\nIdeally, I would do a proper React Router \"navigation\", and pass the relevant loader data along so it can be 100% client-side and require no other API calls.\n\nLooks like this is how remix the framework handles it: https://github.com/remix-run/react-router/blob/862709d44db19130daa7b5f9dcc0aec8561f3703/packages/react-router/lib/server-runtime/single-fetch.ts#L70-L80\n\n### 3. Should I use `queryRoute` instead of `query` in my server?\n\nThe [example app uses `queryRoute`](https://github.com/remix-run/custom-react-router-framework-example/blob/f5a141d67800e8da076cd1bb3130f29a8c0d4ce3/entry.server.tsx#L77-L79) instead of `query` for loaders and actions. I tried using that too but it didn't work. I think it returned undefined. I am now [using `query` for everything](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L58).\n\nIs it better to use that or is my use of `query` fine? I get the feeling that `query` is doing a bunch of work I don't need, ie SRR, but maybe that's not very expensive so it's fine? I noticed [the example app uses `X-Route-ID`](https://github.com/remix-run/custom-react-router-framework-example/blob/main/app/layout.client.tsx#L8), so maybe I'd need to use that?",[],[404],"files",[154,173,179,189,198,209,215,221,230,239,248,258,269,279,290,296,306,316,327,333,342,351,362,370,378,386,394,402],"counts",{"_414":32,"_415":162,"_416":118,"_417":32},"pulls","branches","forks","envVars","contents",[],{"_103":387,"_95":99,"_157":388,"_159":-5,"_160":138,"_161":389,"_163":164,"_105":421,"_100":32,"_166":275,"_168":391,"_169":22,"_170":-5,"_98":422},["D",1752538431479],[99],"upstreamProject",{"_103":146,"_95":425,"_111":426,"_112":-5,"_109":110,"_23":427},"reactRouter7Example","Full-stack example ReactRouter7 project",{"_93":428,"_130":429},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":141,"_105":432,"_433":434,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_435":436,"_107":-5,"_151":22,"_109":110,"_150":428,"_16":148,"_149":425},["D",1744152661331],"updatedAt",["D",1751462022442],"lockfileKey","1756179606686-esm.town_v_stevekrouse_reactRouter7Example@166-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":441,"_152":446,"_410":531,"_275":532,"_418":534,"_535":536,"_539":22,"_540":-5,"_541":542,"_543":32,"_544":545},{"_103":104,"_95":96,"_105":442,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":118,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":443,"_132":444,"_135":445,"_151":22},["D",1752538385443],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":141,"_142":143,"_144":110,"_145":146,"_147":148,"_149":96,"_150":94},[447,462,489,501,513,516,519,522,525,528],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":165,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":448,"_98":461},[449,458],{"_103":174,"_95":175,"_157":176,"_159":158,"_160":138,"_161":162,"_163":164,"_105":177,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":450,"_98":457},[451,454],{"_103":180,"_95":181,"_157":182,"_159":176,"_160":138,"_161":183,"_163":164,"_105":184,"_100":162,"_166":185,"_168":186,"_169":22,"_170":-5,"_171":452,"_98":453},[],[156,175,181],{"_103":190,"_95":191,"_157":192,"_159":176,"_160":138,"_161":162,"_163":164,"_105":193,"_100":32,"_166":185,"_168":194,"_169":22,"_170":-5,"_171":455,"_98":456},[],[156,175,191],[156,175],{"_103":199,"_95":200,"_157":201,"_159":158,"_160":138,"_161":137,"_163":164,"_105":202,"_100":203,"_166":204,"_168":205,"_169":22,"_170":96,"_171":459,"_98":460},[],[156,200],[156],{"_103":210,"_95":211,"_157":212,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":213,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":463,"_98":488},[464,482,485],{"_103":216,"_95":217,"_157":218,"_159":212,"_160":138,"_161":162,"_163":164,"_105":219,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":465,"_98":481},[466,469,472,475,478],{"_103":222,"_95":223,"_157":224,"_159":218,"_160":138,"_161":225,"_163":164,"_105":226,"_100":32,"_166":185,"_168":227,"_169":22,"_170":-5,"_171":467,"_98":468},[],[211,217,223],{"_103":231,"_95":232,"_157":233,"_159":218,"_160":138,"_161":234,"_163":164,"_105":235,"_100":162,"_166":185,"_168":236,"_169":22,"_170":-5,"_171":470,"_98":471},[],[211,217,232],{"_103":240,"_95":241,"_157":242,"_159":218,"_160":138,"_161":243,"_163":164,"_105":244,"_100":162,"_166":185,"_168":245,"_169":22,"_170":-5,"_171":473,"_98":474},[],[211,217,241],{"_103":249,"_95":250,"_157":251,"_159":218,"_160":138,"_161":252,"_163":164,"_105":253,"_100":254,"_166":185,"_168":255,"_169":22,"_170":-5,"_171":476,"_98":477},[],[211,217,250],{"_103":259,"_95":260,"_157":261,"_159":218,"_160":138,"_161":262,"_163":164,"_105":263,"_100":264,"_166":185,"_168":265,"_169":22,"_170":-5,"_171":479,"_98":480},[],[211,217,260],[211,217],{"_103":270,"_95":271,"_157":272,"_159":212,"_160":138,"_161":273,"_163":164,"_105":274,"_100":203,"_166":275,"_168":276,"_169":22,"_170":-5,"_171":483,"_98":484},[],[211,271],{"_103":280,"_95":281,"_157":282,"_159":212,"_160":138,"_161":283,"_163":164,"_105":284,"_100":285,"_166":185,"_168":286,"_169":22,"_170":-5,"_171":486,"_98":487},[],[211,281],[211],{"_103":291,"_95":292,"_157":293,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":294,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":490,"_98":500},[491,494,497],{"_103":297,"_95":298,"_157":299,"_159":293,"_160":138,"_161":300,"_163":164,"_105":301,"_100":302,"_166":185,"_168":303,"_169":22,"_170":-5,"_171":492,"_98":493},[],[292,298],{"_103":307,"_95":308,"_157":309,"_159":293,"_160":138,"_161":310,"_163":164,"_105":311,"_100":312,"_166":185,"_168":313,"_169":22,"_170":-5,"_171":495,"_98":496},[],[292,308],{"_103":317,"_95":318,"_157":319,"_159":293,"_160":138,"_161":320,"_163":164,"_105":321,"_100":322,"_166":185,"_168":323,"_169":22,"_170":-5,"_171":498,"_98":499},[],[292,318],[292],{"_103":328,"_95":329,"_157":330,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":331,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":502,"_98":512},[503,506,509],{"_103":334,"_95":335,"_157":336,"_159":330,"_160":138,"_161":337,"_163":164,"_105":338,"_100":32,"_166":185,"_168":339,"_169":22,"_170":-5,"_171":504,"_98":505},[],[329,335],{"_103":343,"_95":344,"_157":345,"_159":330,"_160":138,"_161":346,"_163":164,"_105":347,"_100":203,"_166":185,"_168":348,"_169":22,"_170":-5,"_171":507,"_98":508},[],[329,344],{"_103":352,"_95":353,"_157":354,"_159":330,"_160":138,"_161":355,"_163":164,"_105":356,"_100":357,"_166":185,"_168":358,"_169":22,"_170":-5,"_171":510,"_98":511},[],[329,353],[329],{"_103":363,"_95":364,"_157":365,"_159":-5,"_160":138,"_161":118,"_163":164,"_105":366,"_100":32,"_166":275,"_168":367,"_169":22,"_170":-5,"_171":514,"_98":515},[],[364],{"_103":371,"_95":372,"_157":373,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":374,"_100":32,"_166":275,"_168":375,"_169":22,"_170":-5,"_171":517,"_98":518},[],[372],{"_103":379,"_95":380,"_157":381,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":382,"_100":32,"_166":275,"_168":383,"_169":22,"_170":-5,"_171":520,"_98":521},[],[380],{"_103":387,"_95":99,"_157":388,"_159":-5,"_160":138,"_161":389,"_163":164,"_105":390,"_100":32,"_166":275,"_168":391,"_169":22,"_170":-5,"_171":523,"_98":524},[],[99],{"_103":395,"_95":396,"_157":397,"_159":-5,"_160":138,"_161":357,"_163":164,"_105":398,"_100":32,"_166":275,"_168":399,"_169":22,"_170":-5,"_171":526,"_98":527},[],[396],{"_103":403,"_95":404,"_157":405,"_159":-5,"_160":138,"_161":162,"_163":164,"_105":406,"_100":32,"_166":275,"_168":407,"_169":22,"_170":-5,"_171":529,"_98":530},[],[404],[447,449,451,454,458,462,464,466,469,472,475,478,482,485,489,491,494,497,501,503,506,509,513,516,519,522,525,528],{"_103":387,"_95":99,"_157":388,"_159":-5,"_160":138,"_161":389,"_163":164,"_105":421,"_100":32,"_166":275,"_168":391,"_169":22,"_170":-5,"_98":533},[99],[],"upstream",{"_103":141,"_105":537,"_433":538,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_435":436,"_107":-5,"_151":22,"_109":110,"_150":428,"_16":148,"_149":425},["D",1744152661331],["D",1751462022442],"showCompareCallout","pull","ahead",337,"behind","templates",[],"actionData","errors"]