React Router Data Mode Starter

\n \n

\n \n );\n}\n\nfunction Home() {\n const data = useLoaderData();\n return (\n

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

\n );\n}\n\nfunction Table() {\n return (\n

\n Item 1\n

\n Item 2\n

\n );\n}\n\ninterface ValCardProps {\n val: ValInfo;\n}\n\nexport function ValCard({ val }: ValCardProps) {\n return (\n

\n {val.valName}\n {val.valUrl && (\n \n \n Open external link\n \n \n \n )}\n

by @{val.author}

\n\n

\n {val.subdomain && (\n

\n File Name\n

\n \n {val.fileName}\n \n

\n )}\n\n {val.subdomain && (\n

\n Subdomain\n

\n \n {val.subdomain}\n \n

\n )}\n

\n );\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n loader: mockLoader,\n },\n {\n Component: Table,\n path: \"/table\",\n },\n ],\n },\n];\n\nexport default routes;",[152],"8f9b4c1e-60fe-11f0-9ec1-0224a6c84d84","loader.ts","8f9b4cf0-60fe-11f0-9ec1-0224a6c84d84",317,["D",1752530689569],"import type { ValInfo } from \"./types.ts\";\n\nexport function mockLoader(): ValInfo[] {\n const vals: ValInfo[] = [\n {\n id: \"d17279f7-3efe-43f0-ac02-0b0d3c303c47\",\n type: \"http\",\n author: \"nbbaier\",\n fileName: \"http.tsx\",\n subdomain: \"https://mycustomsubdomain.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/custom-domains-val-api/code/\",\n valName: \"custom-domains-val-api\",\n },\n {\n id: \"7d1f43c4-60f4-11f0-afac-0224a6c84d84\",\n type: \"http\",\n author: \"nbbaier\",\n fileName: \"http2.tsx\",\n subdomain: \"https://custom-endpoint-2.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/custom-domains-val-api/code/\",\n valName: \"custom-domains-val-api\",\n },\n {\n id: \"df8b97dd-8aaf-46ed-a8ee-fce6f9206397\",\n type: \"email\",\n author: \"nbbaier\",\n fileName: \"email.tsx\",\n subdomain: \"mycustomemail@valtown.email\",\n valUrl: \"https://www.val.town/x/nbbaier/custom-domains-val-api/code/\",\n valName: \"custom-domains-val-api\",\n },\n {\n id: \"cb0e7ec0-60bc-11f0-9083-0224a6c84d84\",\n type: \"http\",\n author: \"nbbaier\",\n fileName: \"index.ts\",\n subdomain: \"https://subdomains.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/subdomain-dashboard/code/\",\n valName: \"subdomain-dashboard\",\n },\n {\n id: \"2361420d-4270-4b6b-b704-8025aa0d6f06\",\n type: \"http\",\n author: \"nbbaier\",\n fileName: \"main.ts\",\n subdomain: \"https://nbbaier-mcp.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/mcp-starter/code/\",\n valName: \"mcp-starter\",\n },\n {\n id: \"e79f4c77-b91e-4a2a-be0d-0d0c8c618fd2\",\n type: \"http\",\n author: \"nbbaier\",\n fileName: \"index.ts\",\n subdomain: \"https://val-to-text.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/val-to-text/code/\",\n valName: \"val-to-text\",\n },\n ];\n\n return vals;\n}\n",[159],"e9b8c778-60f2-11f0-8dcc-0224a6c84d84","http.tsx","40a73bd0-f42b-4d38-b43c-89eca99a33d4",107,["D",1752525686792],3,"http","/** @jsxImportSource https://esm.sh/react@19 */\n// import * as React from \"https://esm.sh/react@19\";\nimport ReactDOMServer from \"https://esm.sh/react-dom@19/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router\";\nimport routes from \"./routes.tsx\";\n\nconst CLIENT_MODULE = import.meta.resolve(\"./client.tsx\");\n\nexport default async function (req: Request): Promise {\n const { query, dataRoutes } = createStaticHandler(routes);\n const context = await query(req);\n const router = createStaticRouter(dataRoutes, context);\n\n let html = await ReactDOMServer.renderToReadableStream(\n ,\n {\n bootstrapModules: [CLIENT_MODULE],\n },\n );\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",[166],"b10f525a-60fe-11f0-876b-0224a6c84d84","deno.json","1c5d87f4-60f8-11f0-a330-0224a6c84d84",324,["D",1752530745643],1,"{\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}\n",[175],"b108a43c-60fe-11f0-bffe-0224a6c84d84","client.tsx","3a1d61ea-97f0-4a01-ad6e-c5d0b3ac1eea",323,["D",1752530745642],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport ReactDOM 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 \"./routes.tsx\";\n\nconsole.log(\"client\");\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(document, );\n",[183],"1c576144-60f8-11f0-be47-0224a6c84d84","biome.json","1c576220-60f8-11f0-be47-0224a6c84d84",201,["D",1752527919202],"{\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}",[190],"8fb0a5f0-60fe-11f0-9ec1-0224a6c84d84","api.tsx",320,["D",1752530689697],43,"import ValTown from \"npm:@valtown/sdk\";\nimport type { ValInfo } from \"./types.ts\";\n\nexport default async function (_req: Request): Promise {\n const vt = new ValTown();\n const vals: ValInfo[] = [];\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 vals.push({\n id: file.id,\n type: file.type,\n author: val.author?.username || \"unknown\",\n fileName: file.name,\n subdomain:\n file.type === \"http\"\n ? file.links.endpoint\n : new URL(file.links.endpoint).hostname.replace(\n \".val.run\",\n \"@valtown.email\",\n ),\n valUrl: val.links.html,\n valName: val.name,\n });\n }\n }\n\n return Response.json(vals);\n}\n",[197],"e6769180-60ed-11f0-b918-0224a6c84d84","README.md","937e28fb-0708-4a29-985f-3e4b4d02f3ae",["D",1752523533770],"# React Router Data Mode Starter\n\nMinimal React Router starter example in [\"data mode\"][modes] with server-side rendering for Val Town\n\n[View demo][demo]\n\n## How it works\n\nThe `http.tsx` file is the main server that responds with an HTML stream, using React Router.\nThe HTML includes a `

Search