[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_440":441,"_442":443},"routes/_app.x.$handle.$name",{"_108":107,"_38":52,"_116":98,"_33":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":-5,"_129":-5,"_130":31,"_131":132,"_133":66,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":91,"_92":93,"_94":95,"_96":31},"version",171,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","14bc2aa2-c364-4d76-b0e4-01c4ec2d5614","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","backend/database/queries.ts","latestPath","fileId","6229805c-14cd-11f0-800b-569c3dd06744","name","queries.ts","fileType","script","content","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, SearchResults, Topic } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `,\n [title, createdAt],\n );\n\n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `,\n [topicId],\n );\n\n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `,\n [topicId, content, createdAt],\n );\n\n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `,\n [`%${query}%`],\n );\n\n // Search in messages\n const messagesResult = await sqlite.execute(\n `\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `,\n [`%${query}%`],\n );\n\n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query,\n };\n}","import { sqlite } from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\nimport { Message, SearchResults, Topic } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `,\n [title, createdAt],\n );\n\n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `,\n [topicId],\n );\n\n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `,\n [topicId, content, createdAt],\n );\n\n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `,\n [`%${query}%`],\n );\n\n // Search in messages\n const messagesResult = await sqlite.execute(\n `\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `,\n [`%${query}%`],\n );\n\n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query,\n };\n}","createdAt",["D",1771720371532],"branchVersion","branchId","f1a26f20-14cb-11f0-b108-569c3dd06744","id","f1a22d8a-14cb-11f0-b108-569c3dd06744","reactRouter7Example",["D",1744152661331],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Full-stack example ReactRouter7 project","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","e315d710-14cd-11f0-a969-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",151,"likeCount",3,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","f1a22d8a14cb11f0b108569c3dd06744","tursoHostname","f1a22d8a14cb11f0b108569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789558275908],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_108":107,"_115":111},"org",{"_108":107,"_109":-5,"_110":111,"_19":62,"_112":113,"_114":31},"branch",{"_13":97,"_38":98,"_50":49,"_99":51,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":52,"_106":107},"isOwned",178,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":435,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":436,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":437,"_92":438,"_94":439,"_96":31},"tree",[198,203,213,224,227,228],"files",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228],"counts",{"_187":188,"_189":160,"_190":71,"_191":192,"_193":194},"contents",[138,139,140,141,142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":182,"_38":183,"_36":184,"_147":-5,"_48":49,"_47":71,"_149":66,"_45":185,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_33":186},{"_50":177,"_38":178,"_36":179,"_147":-5,"_48":49,"_47":160,"_149":66,"_45":180,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_33":181},{"_50":171,"_38":172,"_36":173,"_147":-5,"_48":49,"_47":174,"_149":66,"_45":175,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_33":176},{"_50":163,"_38":164,"_36":165,"_147":-5,"_48":49,"_47":166,"_149":66,"_45":167,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_33":170},{"_50":155,"_38":156,"_36":157,"_147":-5,"_48":49,"_47":158,"_149":31,"_45":159,"_13":160,"_40":26,"_42":161,"_30":31,"_153":-5,"_33":162},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":150,"_13":151,"_40":26,"_42":152,"_30":31,"_153":-5,"_33":154},"db92e8f0-163c-11f0-8f3c-569c3dd06744","TODO.md","471f7894-1594-11f0-bc2d-569c3dd06744","parentId",143,"latest",["D",1744311108608],11,"- [ ] 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?","label",[145],"dfc4f0f6-0f85-11f1-b50b-42dde27851f2","README.md","513e59ca-14cd-11f0-8f60-569c3dd06744",169,["D",1771720308430],5,"# React Router 7 on Val Town\n\nA full-stack SSR + SPA reference architecture for [Val Town](https://val.town), built with **React Router 7**, **Hono**, and **SQLite**. Ships as a community message board demo, but the patterns here are designed to be extracted into a reusable framework/template.\n\n> **Live demo:** \n\n## Why This Exists\n\nVal Town gives you serverless TypeScript functions, but building a real full-stack app with SSR, client-side navigation, loaders, actions, and hydration requires wiring together several pieces. This project demonstrates one clean way to do it — and is the seed for a potential **Val Town Router** framework.\n\n## Architecture Overview\n\n```mermaid\ngraph TD\n subgraph \"Browser\"\n A[index.html] -->|loads| B[frontend/index.tsx]\n B -->|creates| C[createBrowserRouter]\n C -->|uses| D[dataStrategy]\n D -->|\"fetch with X-Data-Request: true\"| E\n end\n\n subgraph \"Val Town Server — backend/index.ts\"\n E[Hono HTTP Handler]\n E -->|\"static files\"| F[serveFile]\n E -->|\"SSR or data request\"| G[createStaticHandler]\n G -->|runs| H[Loaders / Actions]\n H -->|queries| I[(SQLite)]\n G -->|\"full page\"| J[renderToString → HTML]\n G -->|\"data request\"| K[JSON response]\n end\n\n subgraph \"Shared — shared/\"\n L[routes.ts] -.->|\"imported by both\"| C\n L -.->|\"imported by both\"| G\n M[types.ts] -.->|\"used everywhere\"| H\n end\n\n style A fill:#e0f2fe\n style B fill:#e0f2fe\n style C fill:#e0f2fe\n style D fill:#e0f2fe\n style E fill:#fef3c7\n style F fill:#fef3c7\n style G fill:#fef3c7\n style H fill:#fef3c7\n style I fill:#d1fae5\n style J fill:#fef3c7\n style K fill:#fef3c7\n style L fill:#f3e8ff\n style M fill:#f3e8ff\n```\n\n## Request Lifecycle\n\n```mermaid\nsequenceDiagram\n participant Browser\n participant Hono as Hono Server\n participant RR as React Router Static Handler\n participant DB as SQLite\n\n Note over Browser,DB: First visit (SSR)\n Browser->>Hono: GET /topics/42\n Hono->>RR: query(request)\n RR->>DB: Topic.loader → getTopicById(42)\n DB-->>RR: topic + messages\n RR-->>Hono: StaticHandlerContext\n Hono->>Hono: renderToString(StaticRouterProvider)\n Hono-->>Browser: Full HTML page\n\n Note over Browser,DB: Subsequent navigation (SPA)\n Browser->>Browser: User clicks \n Browser->>Hono: GET /search?q=hello (X-Data-Request: true)\n Hono->>RR: query(request)\n RR->>DB: Search.loader → search(\"hello\")\n DB-->>RR: search results\n RR-->>Hono: StaticHandlerContext\n Hono-->>Browser: JSON { loaderData: {...} }\n Browser->>Browser: React Router updates UI\n\n Note over Browser,DB: Form submission (Action)\n Browser->>Hono: POST /topics/42 (X-Data-Request: true, formData)\n Hono->>RR: query(request)\n RR->>DB: Topic.action → createMessage(42, content)\n DB-->>RR: new message\n RR-->>Hono: Redirect response\n Hono-->>Browser: JSON { redirect: \"/topics/42\" }\n Browser->>Browser: Client-side redirect + re-fetch loaders\n```\n\n## Features\n\n- **Server-Side Rendering** — Every page is fully rendered on first visit (SEO-friendly, fast paint)\n- **Client-Side Navigation** — After hydration, navigation is instant SPA-style\n- **Single-Fetch Data Strategy** — Client navigation makes one request per route transition, not one per loader\n- **Loaders & Actions** — Remix-style data loading and form handling, co-located with route components\n- **Redirect Handling** — Server actions return redirects as JSON for the client `dataStrategy` to follow\n- **SQLite Persistence** — Val Town's built-in SQLite with idempotent migrations and seed data\n- **Loading States** — `useNavigation()` for global loading indicators\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Hono HTTP entry point (SSR + data API + static files)\n│ └── database/\n│ ├── migrations.ts # Schema creation + seed data\n│ └── queries.ts # All database queries\n├── frontend/\n│ ├── index.html # HTML shell template\n│ ├── index.tsx # Client entry — hydration + dataStrategy\n│ └── components/\n│ ├── App.tsx # (unused legacy — see routes/App.tsx)\n│ ├── LoadingSpinner.tsx\n│ ├── MessageForm.tsx\n│ ├── MessageList.tsx\n│ ├── SearchForm.tsx\n│ └── SearchResults.tsx\n├── routes/\n│ ├── App.tsx # Root layout (Outlet + nav + footer)\n│ ├── Home.tsx # Home page — topic list + create form\n│ ├── Home.loader.ts # Loads all topics\n│ ├── Topic.tsx # Topic detail — messages + reply form\n│ ├── Topic.loader.ts # Loads topic + messages\n│ ├── Topic.action.ts # Creates a message in a topic\n│ ├── TopicMessage.loader.ts # Direct link to a specific message\n│ ├── Topics.action.ts # Creates a new topic (root action)\n│ ├── Search.tsx # Search results page\n│ └── Search.loader.ts # Runs search query\n├── shared/\n│ ├── routes.ts # Route tree (shared between server + client)\n│ └── types.ts # TypeScript interfaces (Topic, Message, SearchResults)\n├── README.md\n└── TODO.md\n```\n\n## Key Patterns\n\n### 1. Shared Route Definitions (`shared/routes.ts`)\n\nThe same route tree is used on both server and client. The `serverLoader()` / `serverAction()` helpers make this work:\n\n- **On the server:** dynamically import the real loader/action module and call it\n- **On the client:** return a no-op stub (the `dataStrategy` handles fetching)\n\nThis means loader/action code (and its database dependencies) **never ships to the browser**.\n\n### 2. Single-Fetch `dataStrategy` (`frontend/index.tsx`)\n\nInstead of React Router calling each loader individually on the client, a custom `dataStrategy` makes **one HTTP request** with a `X-Data-Request: true` header. The server runs all matched loaders/actions and returns their data as keyed JSON.\n\n### 3. SSR with Hydration (`backend/index.ts`)\n\nOn full page loads:\n1. `createStaticHandler` runs loaders\n2. `createStaticRouter` + `StaticRouterProvider` renders to HTML string\n3. HTML is injected into the `index.html` template\n4. Client picks up with `hydrateRoot` + `createBrowserRouter`\n\n### 4. Action → Redirect → Reload\n\nForm submissions go through React Router actions. On the server, the action returns a `redirect()`. For data requests, the server converts this to `{ redirect: \"/path\" }` JSON so the client `dataStrategy` can follow it, triggering a client-side navigation + loader re-fetch.\n\n## URL Structure\n\n| URL | Description |\n|-----|-------------|\n| `/` | Home — list of topics + create form |\n| `/topics/:topicId` | Topic detail — messages + reply form |\n| `/topics/:topicId/messages/:messageId` | Deep link to a specific message |\n| `/search?q=query` | Search results across topics and messages |\n\n## Tech Stack\n\n| Layer | Technology | Purpose |\n|-------|-----------|---------|\n| Server | [Hono](https://hono.dev/) | HTTP routing, static files, SSR orchestration |\n| Routing | [React Router 7](https://reactrouter.com/) | SSR + SPA routing, loaders, actions |\n| UI | [React 18](https://react.dev/) | Components + hydration |\n| Styling | [Twind](https://twind.dev/) | Tailwind-in-JS (CDN) |\n| Database | Val Town SQLite | Persistence via `@stevekrouse/sqlite` |\n| Runtime | Val Town (Deno) | Serverless hosting |\n\n## Towards a Framework / Template\n\nThis project is designed to be the starting point for a reusable **Val Town fullstack framework**. Here's what could be extracted:\n\n### What's Already Framework-Ready\n\n- **`serverLoader()` / `serverAction()` pattern** — Generic helpers that work with any route tree\n- **`dataStrategy` implementation** — The single-fetch client strategy is app-agnostic\n- **SSR pipeline in `backend/index.ts`** — The Hono → StaticHandler → render → hydrate flow is generic\n- **`X-Data-Request` protocol** — Simple convention for distinguishing SSR vs data-only requests\n\n### Suggestions for Extraction\n\n```mermaid\ngraph BT\n subgraph \"Your App\"\n A[routes/Home.tsx]\n B[routes/Topic.tsx]\n C[backend/database/queries.ts]\n end\n\n subgraph \"Val Town Router Framework\"\n D[\"createValTownRouter()\"]\n E[\"createRoutes()\"]\n F[\"dataStrategy (single-fetch)\"]\n G[\"SSR pipeline\"]\n H[\"HTML shell generator\"]\n I[\"deps.ts (version pins)\"]\n J[\"File-based route discovery\"]\n end\n\n subgraph \"Val Town Platform\"\n K[Hono]\n L[SQLite]\n M[Deno Runtime]\n N[esm.sh CDN]\n end\n\n A & B -->|\"define routes via\"| E\n C -->|\"queries\"| L\n E -->|\"passed to\"| D\n D -->|\"creates\"| K\n D -->|\"wires up\"| G\n D -->|\"wires up\"| F\n D -->|\"generates\"| H\n I -->|\"pins versions for\"| N\n J -->|\"auto-discovers\"| E\n K & L & M & N -->|\"provided by\"| M\n\n style A fill:#e0f2fe\n style B fill:#e0f2fe\n style C fill:#e0f2fe\n style D fill:#fef3c7\n style E fill:#fef3c7\n style F fill:#fef3c7\n style G fill:#fef3c7\n style H fill:#fef3c7\n style I fill:#fef3c7\n style J fill:#fef3c7\n style K fill:#d1fae5\n style L fill:#d1fae5\n style M fill:#d1fae5\n style N fill:#d1fae5\n```\n\n1. **`createValTownRouter(routes, options)`** — A single function that returns a Hono app with SSR, static file serving, and the data-request protocol baked in. Users just supply routes and get a working full-stack app:\n ```ts\n import { createValTownRouter } from \"https://esm.town/v/std/valtown-router\";\n import { routes } from \"./shared/routes.ts\";\n export default createValTownRouter(routes, { title: \"My App\" });\n ```\n\n2. **Centralized `deps.ts` version pinning** — React, React Router, and React DOM versions are repeated across many files via `esm.sh` URLs (currently 7+ files all reference `react@18.2.0`). A framework could export these from a single manifest:\n ```ts\n // deps.ts — one place to update versions\n export { default as React } from \"https://esm.sh/react@18.2.0\";\n export { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n export { createBrowserRouter, ... } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\n ```\n\n3. **`createRoutes()` helper** — A typed helper that wraps the `serverLoader`/`serverAction` pattern so users don't need to understand the server/client bifurcation:\n ```ts\n createRoutes([\n { path: \"/\", Component: App, children: [\n { index: true, Component: Home, loader: \"./Home.loader.ts\" },\n { path: \"topics/:id\", Component: Topic, loader: \"./Topic.loader.ts\", action: \"./Topic.action.ts\" },\n ]}\n ])\n ```\n\n4. **File-based route discovery** — The `routes/` directory already follows Remix-style naming conventions (`Home.tsx`, `Home.loader.ts`, `Topic.action.ts`). A framework could auto-discover routes from the filesystem, eliminating the manual `shared/routes.ts` file entirely:\n ```\n routes/\n _layout.tsx → root layout (App)\n _index.tsx → / (Home)\n _index.loader.ts → Home loader\n topics.$id.tsx → /topics/:id (Topic)\n topics.$id.loader.ts\n topics.$id.action.ts\n search.tsx → /search\n search.loader.ts\n ```\n\n5. **HTML template generation** — Instead of a manual `index.html`, the framework could generate the shell with the right scripts, twind, and catch handler included. No more forgetting to add ``.\n\n6. **Project-scoped SQLite by default** — This project currently uses `@stevekrouse/sqlite` (user-scoped), which means forks share the original author's database. The framework should default to `std/sqlite@14-main` (project-scoped) so each fork gets an isolated database. This is critical for a template that people will fork.\n\n7. **Middleware hooks** — Auth, logging, error boundaries, CORS, etc. as composable Hono middleware that plugs into the framework:\n ```ts\n export default createValTownRouter(routes, {\n middleware: [authMiddleware(), corsMiddleware()],\n errorBoundary: MyErrorBoundary,\n });\n ```\n\n8. **CLI / `init` template** — A `createValTownApp` script or a Val Town project template that scaffolds the full directory structure with a working starter app in one click.\n\n### Open Questions\n\n- How much of the Hono boilerplate can be hidden vs left explicit for power users?\n- What's the right story for CSS — keep Twind CDN, support CSS modules, or Tailwind build?\n- Should the framework ship as a single Val Town val (importable library) or as an npm package on esm.sh?\n- Could hydration data be embedded in the HTML (like Remix does) instead of requiring a separate client fetch on first load?\n\n## Getting Started\n\n1. **Fork this val** on Val Town\n2. The database auto-initializes with seed data on first request\n3. Visit the HTTP endpoint to see the app\n4. Modify routes in `shared/routes.ts`, add components in `routes/`, and queries in `backend/database/`\n\n## Dependencies\n\nAll dependencies are loaded via `esm.sh` with pinned versions:\n\n- `react@18.2.0`\n- `react-dom@18.2.0`\n- `react-router@7.5.0`\n- `hono@4.1.0`\n- `@valtown/std/utils` (for `readFile` / `serveFile`)\n- `@stevekrouse/sqlite` (Val Town SQLite wrapper)\n",[156],"5343c3fe-14cd-11f0-b10b-569c3dd06744","shared","add21c84-9f00-4405-af88-6ec5134089df",2,["D",1744153254621],0,"directory",[164],"f8ffd76c-1593-11f0-9dd6-569c3dd06744","routes","c4795b2d-41e5-4e2d-bb49-1239d72d4d2d",81,["D",1744238573020],[172],"65bd0400-14cd-11f0-9e26-569c3dd06744","frontend","25ba79aa-990f-468a-a9a9-3feab00a24d6",["D",1744153285607],[178],"5ae47a2c-14cd-11f0-bbde-569c3dd06744","backend","50aca1db-e744-46f9-883e-ba00e55ffc58",["D",1744153267418],[183],"pulls",1,"branches","forks","envVars",{"_195":168,"_197":168},"connections",{"_195":168,"_196":168},"count","unfilledCount","emptyCount",{"_50":182,"_38":183,"_36":184,"_147":-5,"_48":49,"_47":71,"_149":66,"_45":432,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":433,"_33":434},{"_50":428,"_38":419,"_36":415,"_147":184,"_48":49,"_47":71,"_149":66,"_45":429,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":430,"_33":431},{"_50":420,"_38":421,"_36":422,"_147":415,"_48":49,"_47":423,"_149":31,"_45":424,"_13":188,"_40":41,"_42":425,"_30":31,"_153":-5,"_230":426,"_33":427},{"_50":414,"_38":39,"_36":37,"_147":415,"_48":49,"_47":14,"_149":31,"_45":416,"_13":71,"_40":41,"_42":44,"_30":31,"_153":-5,"_230":417,"_33":418},{"_50":405,"_38":406,"_36":64,"_147":184,"_48":49,"_47":246,"_149":66,"_45":407,"_13":408,"_40":409,"_42":410,"_30":31,"_153":411,"_230":412,"_33":413},{"_50":177,"_38":178,"_36":179,"_147":-5,"_48":49,"_47":160,"_149":66,"_45":402,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":403,"_33":404},{"_50":398,"_38":357,"_36":352,"_147":179,"_48":49,"_47":290,"_149":66,"_45":399,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":400,"_33":401},{"_50":390,"_38":324,"_36":391,"_147":352,"_48":49,"_47":392,"_149":66,"_45":393,"_13":394,"_40":41,"_42":395,"_30":31,"_153":-5,"_230":396,"_33":397},{"_50":383,"_38":384,"_36":385,"_147":352,"_48":49,"_47":361,"_149":66,"_45":386,"_13":188,"_40":41,"_42":387,"_30":31,"_153":-5,"_230":388,"_33":389},{"_50":374,"_38":375,"_36":376,"_147":352,"_48":49,"_47":377,"_149":66,"_45":378,"_13":379,"_40":41,"_42":380,"_30":31,"_153":-5,"_230":381,"_33":382},{"_50":366,"_38":367,"_36":368,"_147":352,"_48":49,"_47":369,"_149":66,"_45":370,"_13":71,"_40":41,"_42":371,"_30":31,"_153":-5,"_230":372,"_33":373},{"_50":358,"_38":359,"_36":360,"_147":352,"_48":49,"_47":361,"_149":66,"_45":362,"_13":166,"_40":41,"_42":363,"_30":31,"_153":-5,"_230":364,"_33":365},{"_50":349,"_38":350,"_36":351,"_147":352,"_48":49,"_47":273,"_149":66,"_45":353,"_13":71,"_40":41,"_42":354,"_30":31,"_153":-5,"_230":355,"_33":356},{"_50":341,"_38":342,"_36":343,"_147":179,"_48":49,"_47":344,"_149":66,"_45":345,"_13":166,"_40":26,"_42":346,"_30":31,"_153":-5,"_230":347,"_33":348},{"_50":334,"_38":335,"_36":336,"_147":179,"_48":49,"_47":246,"_149":66,"_45":337,"_13":160,"_40":41,"_42":338,"_30":31,"_153":-5,"_230":339,"_33":340},{"_50":171,"_38":172,"_36":173,"_147":-5,"_48":49,"_47":174,"_149":66,"_45":331,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":332,"_33":333},{"_50":323,"_38":324,"_36":325,"_147":173,"_48":49,"_47":326,"_149":31,"_45":327,"_13":71,"_40":41,"_42":328,"_30":31,"_153":-5,"_230":329,"_33":330},{"_50":316,"_38":317,"_36":318,"_147":173,"_48":49,"_47":174,"_149":66,"_45":319,"_13":168,"_40":41,"_42":320,"_30":31,"_153":-5,"_230":321,"_33":322},{"_50":308,"_38":309,"_36":310,"_147":173,"_48":49,"_47":311,"_149":66,"_45":312,"_13":160,"_40":41,"_42":313,"_30":31,"_153":-5,"_230":314,"_33":315},{"_50":301,"_38":302,"_36":303,"_147":173,"_48":49,"_47":174,"_149":66,"_45":304,"_13":168,"_40":41,"_42":305,"_30":31,"_153":-5,"_230":306,"_33":307},{"_50":294,"_38":295,"_36":296,"_147":173,"_48":49,"_47":273,"_149":66,"_45":297,"_13":188,"_40":41,"_42":298,"_30":31,"_153":-5,"_230":299,"_33":300},{"_50":285,"_38":286,"_36":287,"_147":173,"_48":49,"_47":288,"_149":66,"_45":289,"_13":290,"_40":41,"_42":291,"_30":31,"_153":-5,"_230":292,"_33":293},{"_50":278,"_38":279,"_36":280,"_147":173,"_48":49,"_47":174,"_149":66,"_45":281,"_13":168,"_40":41,"_42":282,"_30":31,"_153":-5,"_230":283,"_33":284},{"_50":270,"_38":271,"_36":272,"_147":173,"_48":49,"_47":273,"_149":66,"_45":274,"_13":188,"_40":41,"_42":275,"_30":31,"_153":-5,"_230":276,"_33":277},{"_50":263,"_38":264,"_36":265,"_147":173,"_48":49,"_47":174,"_149":66,"_45":266,"_13":168,"_40":41,"_42":267,"_30":31,"_153":-5,"_230":268,"_33":269},{"_50":255,"_38":256,"_36":257,"_147":173,"_48":49,"_47":258,"_149":66,"_45":259,"_13":188,"_40":41,"_42":260,"_30":31,"_153":-5,"_230":261,"_33":262},{"_50":163,"_38":164,"_36":165,"_147":-5,"_48":49,"_47":166,"_149":66,"_45":252,"_13":168,"_40":169,"_42":-5,"_30":31,"_153":-5,"_230":253,"_33":254},{"_50":243,"_38":244,"_36":245,"_147":165,"_48":49,"_47":246,"_149":66,"_45":247,"_13":248,"_40":41,"_42":249,"_30":31,"_153":-5,"_230":250,"_33":251},{"_50":236,"_38":237,"_36":238,"_147":165,"_48":49,"_47":166,"_149":66,"_45":239,"_13":168,"_40":41,"_42":240,"_30":31,"_153":-5,"_230":241,"_33":242},{"_50":155,"_38":156,"_36":157,"_147":-5,"_48":49,"_47":158,"_149":31,"_45":233,"_13":160,"_40":26,"_42":161,"_30":31,"_153":-5,"_230":234,"_33":235},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":66,"_45":229,"_13":151,"_40":26,"_42":152,"_30":31,"_153":-5,"_230":231,"_33":232},["D",1744311108608],"children",[],[145],["D",1771720308430],[],[156],"5343bcb0-14cd-11f0-b10b-569c3dd06744","types.ts","5343bd78-14cd-11f0-b10b-569c3dd06744",["D",1744153254621],"/**\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}",[],[164,237],"b51b1732-0f84-11f1-b328-42dde27851f2","routes.ts","7639f8f6-14d2-11f0-97d5-569c3dd06744",167,["D",1771719807352],28,"import {\n type ActionFunctionArgs,\n type LoaderFunctionArgs,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { App } from \"../routes/App.tsx\";\nimport { Home } from \"../routes/Home.tsx\";\nimport { Search } from \"../routes/Search.tsx\";\nimport { Topic } from \"../routes/Topic.tsx\";\n\nlet isServer = typeof document === \"undefined\";\n\n// On the server, dynamically import the real loader/action function.\n// On the client, return a no-op stub. The stub's presence signals to\n// React Router that this route needs data (so it appears in dataStrategy's\n// `matches` with shouldLoad=true), but dataStrategy handles the actual\n// fetching via a single HTTP request to the server.\nfunction serverLoader(importURL: string) {\n if (isServer) {\n return async (args: LoaderFunctionArgs) => {\n let module = await import(importURL);\n let loader = module.loader || module.default;\n return loader(args);\n };\n }\n // Client stub — never actually called when dataStrategy is provided\n return () => null;\n}\n\nfunction serverAction(importURL: string) {\n if (isServer) {\n return async (args: ActionFunctionArgs) => {\n let module = await import(importURL);\n let action = module.action || module.default;\n return action(args);\n };\n }\n // Client stub — never actually called when dataStrategy is provided\n return () => null;\n}\n\nexport const routes = [\n {\n path: \"/\",\n Component: App,\n action: serverAction(\"../routes/Topics.action.ts\"),\n children: [\n {\n index: true,\n Component: Home,\n loader: serverLoader(\"../routes/Home.loader.ts\"),\n },\n {\n path: \"topics/:topicId\",\n Component: Topic,\n loader: serverLoader(\"../routes/Topic.loader.ts\"),\n action: serverAction(\"../routes/Topic.action.ts\"),\n },\n {\n path: \"topics/:topicId/messages/:messageId\",\n Component: Topic,\n loader: serverLoader(\"../routes/TopicMessage.loader.ts\"),\n },\n {\n path: \"search\",\n Component: Search,\n loader: serverLoader(\"../routes/Search.loader.ts\"),\n },\n ],\n },\n];",[],[164,244],["D",1744153254621],[225,226],[164],"5bbd9ef2-1607-11f0-a798-569c3dd06744","Topics.action.ts","f8ffd5be-1593-11f0-9dd6-569c3dd06744",104,["D",1744288130811],"import { ActionFunctionArgs, redirect } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createTopic } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n const formData = await request.formData();\n const title = formData.get(\"title\") as string;\n\n if (!title || title.trim() === \"\") {\n throw new Response(\"Title is required\", { status: 400 });\n }\n\n const topic = await createTopic(title);\n return redirect(`/topics/${topic.id}`);\n}",[],[172,256],"f8ffd104-1593-11f0-9dd6-569c3dd06744","TopicMessage.loader.ts","f8ffd1a4-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getTopicById, getMessageById, getMessagesByTopicId } from \"../backend/database/queries.ts\";\n\nexport async function loader({ params }: LoaderFunctionArgs) {\n const topicId = parseInt(params.topicId!, 10);\n const messageId = parseInt(params.messageId!, 10);\n\n const topic = await getTopicById(topicId);\n if (!topic) {\n throw new Response(\"Topic not found\", { status: 404 });\n }\n\n const message = await getMessageById(messageId);\n if (!message || message.topicId !== topicId) {\n throw new Response(\"Message not found\", { status: 404 });\n }\n\n const messages = await getMessagesByTopicId(topicId);\n return { topic, messages };\n}",[],[172,264],"56d97c60-163b-11f0-bf5f-569c3dd06744","Topic.tsx","f8ffcdf8-1593-11f0-9dd6-569c3dd06744",132,["D",1744310456433],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData, useParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Message, Topic } from \"../shared/types.ts\";\nimport { MessageForm } from \"../frontend/components/MessageForm.tsx\";\nimport { MessageList } from \"../frontend/components/MessageList.tsx\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\ninterface TopicDetailData {\n topic: Topic;\n messages: Message[];\n}\n\nexport function Topic() {\n const { topic, messages } = useLoaderData() as TopicDetailData;\n const { messageId } = useParams();\n const highlightedMessageId = messageId ? parseInt(messageId, 10) : undefined;\n \n // Scroll to highlighted message if messageId is provided\n useEffect(() => {\n if (highlightedMessageId) {\n const messageElement = document.getElementById(`message-${highlightedMessageId}`);\n if (messageElement) {\n messageElement.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n }\n }, [highlightedMessageId]);\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

{topic.title}

\n Created {new Date(topic.createdAt).toDateString()}\n

\n \n

Messages

\n \n \n \n \n

\n );\n}",[],[172,271],"f8ffcace-1593-11f0-9dd6-569c3dd06744","Topic.loader.ts","f8ffcb78-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getTopicById, getMessagesByTopicId } from \"../backend/database/queries.ts\";\n\nexport async function loader({ params }: LoaderFunctionArgs) {\n const topicId = parseInt(params.topicId!, 10);\n const topic = await getTopicById(topicId);\n\n if (!topic) {\n throw new Response(\"Topic not found\", { status: 404 });\n }\n\n const messages = await getMessagesByTopicId(topicId);\n return { topic, messages };\n}",[],[172,279],"5136c04e-1607-11f0-ab9a-569c3dd06744","Topic.action.ts","f8ffc948-1593-11f0-9dd6-569c3dd06744",103,["D",1744288113149],6,"import { ActionFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createMessage } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n console.log(\"HERE!\");\n const formData = await request.formData();\n const topicId = parseInt(formData.get(\"topicId\") as string, 10);\n const content = formData.get(\"content\") as string;\n\n if (!content || content.trim() === \"\") {\n throw new Response(\"Content is required\", { status: 400 });\n }\n\n const message = await createMessage(topicId, content);\n return message;\n}",[],[172,286],"56d99d76-163b-11f0-bf5f-569c3dd06744","Search.tsx","f8ffc506-1593-11f0-9dd6-569c3dd06744",["D",1744310456433],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../shared/types.ts\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\nexport function Search() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

\n Search Results for \"{query}\"\n

\n \n {!hasResults ? (\n

\n No results found for \"{query}\". Try a different search term.\n

\n ) : (\n

\n {topics.length > 0 && (\n

Topics ({topics.length})

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

\n {messages.map((message) => (\n

{message.content}

\n \n View in topic\n \n \n {new Date(message.createdAt).toDateString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[172,295],"f8ffc20e-1593-11f0-9dd6-569c3dd06744","Search.loader.ts","f8ffc2cc-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { search } from \"../backend/database/queries.ts\";\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n const url = new URL(request.url);\n const query = url.searchParams.get(\"q\") || \"\";\n\n if (!query || query.trim() === \"\") {\n return { topics: [], messages: [], query: \"\" };\n }\n\n return await search(query);\n}",[],[172,302],"3d47a160-163f-11f0-809e-569c3dd06744","Home.tsx","f8ffb6d8-1593-11f0-9dd6-569c3dd06744",150,["D",1744312131524],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n Link,\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 React from \"https://esm.sh/react@18.2.0\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\nimport { Topic } from \"../shared/types.ts\";\n\ninterface TopicListProps {\n topics: Topic[];\n}\n\nexport function Home() {\n const navigation = useNavigation();\n const { topics } = useLoaderData();\n const isCreatingTopic = navigation.formAction === \"/\" && navigation.state === \"submitting\";\n let $form = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

Community Message Board

\n \n Home\n \n

\n\n \n\n

Create a New Topic

\n \n

\n\n

Topics

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

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

\n )\n : (\n

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n

\n );\n}",[],[172,309],"f8ffb372-1593-11f0-9dd6-569c3dd06744","Home.loader.ts","f8ffb44e-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getAllTopics } from \"../backend/database/queries.ts\";\n\nexport async function loader() {\n return { topics: await getAllTopics() };\n}",[],[172,317],"5bee313c-1604-11f0-ab71-569c3dd06744","App.tsx","f8ff993c-1593-11f0-9dd6-569c3dd06744",90,["D",1744286842638],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"../frontend/components/LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n \n

\n\n \n

\n );\n}",[],[172,324],["D",1744238573020],[214,215,216,217,218,219,220,221,222,223],[172],"b51b0576-0f84-11f1-b328-42dde27851f2","index.tsx","95142d28-14cd-11f0-b4b7-569c3dd06744",["D",1771719807352],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n redirect,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { routes } from \"../shared/routes.ts\";\n\n// Create a browser router with dataStrategy for single-fetch\nconst router = createBrowserRouter(\n routes,\n {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: window.__staticRouterHydrationData,\n\n async dataStrategy({ request, matches }) {\n // Filter to matches that need their handler called\n const matchesToLoad = matches.filter(m => m.shouldLoad);\n\n // If no matches need loading, return empty results\n if (matchesToLoad.length === 0) {\n return {};\n }\n\n console.log(\"[dataStrategy] fetching:\", request.url, \"method:\", request.method);\n console.log(\"[dataStrategy] matchesToLoad:\", matchesToLoad.map(m => m.route.id));\n\n const fetchInit: RequestInit = {\n method: request.method,\n headers: {\n \"X-Data-Request\": \"true\",\n },\n signal: request.signal,\n };\n\n // For non-GET requests (actions), forward the body\n if (request.method !== \"GET\") {\n fetchInit.body = await request.formData();\n }\n\n const res = await fetch(request.url, fetchInit);\n const json = await res.json();\n\n console.log(\"[dataStrategy] response keys:\", Object.keys(json));\n\n // Handle redirects from actions\n // The server sends { redirect: \"/path\" } instead of a 302\n // Return the redirect Response as a DataStrategyResult for the action route.\n // React Router unwraps Response results — a 302 triggers client-side navigation.\n if (json.redirect) {\n console.log(\"[dataStrategy] redirect to:\", json.redirect);\n const results: Record = {};\n for (const match of matchesToLoad) {\n results[match.route.id] = {\n type: \"data\",\n result: redirect(json.redirect),\n };\n }\n return results;\n }\n\n // Build results keyed by route ID\n // dataStrategy must return Record\n const results: Record = {};\n for (const match of matchesToLoad) {\n const routeId = match.route.id;\n // For actions, prefer actionData; for loaders, use loaderData\n if (json.actionData && json.actionData[routeId] !== undefined && json.actionData[routeId] !== null) {\n results[routeId] = { type: \"data\", result: json.actionData[routeId] };\n } else if (json.loaderData && json.loaderData[routeId] !== undefined) {\n results[routeId] = { type: \"data\", result: json.loaderData[routeId] };\n }\n }\n\n console.log(\"[dataStrategy] returning results for routes:\", Object.keys(results));\n return results;\n },\n },\n);\n\n// Hydrate the app\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);",[],[178,335],"4cc3ba60-14d3-11f0-abe2-569c3dd06744","index.html","65bcfe06-14cd-11f0-9e26-569c3dd06744",62,["D",1744155820694],"\n\n \n \n \n Community Message Board\n \n \n \n \n \n

\n \n \n",[],[178,342],"56d9a406-163b-11f0-bf5f-569c3dd06744","SearchResults.tsx","90a036c4-14cd-11f0-8b75-569c3dd06744","dea96277-3d90-41f7-8b34-da954ceef6fc",["D",1744310456433],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../../shared/types.ts\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\nexport function SearchResults() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

\n Search Results for \"{query}\"\n

\n \n {!hasResults ? (\n

\n No results found for \"{query}\". Try a different search term.\n

\n ) : (\n

\n {topics.length > 0 && (\n

Topics ({topics.length})

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

\n {messages.map((message) => (\n

{message.content}

\n \n View in topic\n \n \n {new Date(message.createdAt).toDateString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[178,357,350],"components","eefdb18c-14d3-11f0-b7c3-569c3dd06744","SearchForm.tsx","7700eaba-14cd-11f0-82fd-569c3dd06744",68,["D",1744156092862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Form, useNavigation, useSearchParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function SearchForm() {\n const navigation = useNavigation();\n const [searchParams] = useSearchParams();\n const query = searchParams.get(\"q\") || \"\";\n const isSearching = navigation.state === \"loading\" && navigation.location.pathname === \"/search\";\n \n return (\n \n );\n}",[],[178,357,359],"3fb3a7c2-163b-11f0-a98e-569c3dd06744","MessageList.tsx","722f6066-14cd-11f0-83b3-569c3dd06744",130,["D",1744310417601],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLocation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: Message[];\n topicId: number;\n highlightedMessageId?: number;\n}\n\nexport function MessageList({ messages, topicId, highlightedMessageId }: MessageListProps) {\n const location = useLocation();\n\n if (messages.length === 0) {\n return (\n

\n No messages yet. Be the first to post!\n

\n );\n }\n\n return (\n

\n {messages.map((message) => {\n const isHighlighted = message.id === highlightedMessageId;\n const formattedDate = new Date(message.createdAt).toDateString();\n const messageUrl = `/topics/${topicId}/messages/${message.id}`;\n\n return (\n \n

{message.content}

\n \n {formattedDate}\n \n

\n );\n })}\n \n );\n}",[],[178,357,367],"8e3adbcc-163b-11f0-a02e-569c3dd06744","MessageForm.tsx","6d98d532-14cd-11f0-9771-569c3dd06744",135,["D",1744310549349],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n useActionData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface MessageFormProps {\n topicId: number;\n}\n\nexport function MessageForm({ topicId }: MessageFormProps) {\n const navigation = useNavigation();\n const isSubmitting = navigation.state === \"submitting\";\n let $form = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

Post a Message

\n \n

\n );\n}",[],[178,357,375],"eefdb72c-14d3-11f0-b7c3-569c3dd06744","LoadingSpinner.tsx","68b504be-14cd-11f0-98df-569c3dd06744",["D",1744156092862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface LoadingSpinnerProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport function LoadingSpinner({ size = \"medium\" }: LoadingSpinnerProps) {\n const sizeClasses = {\n small: \"w-4 h-4 border-2\",\n medium: \"w-8 h-8 border-3\",\n large: \"w-12 h-12 border-4\"\n };\n\n return (\n

\n );\n}",[],[178,357,384],"1368ebb8-14d4-11f0-b4aa-569c3dd06744","892aec86-14cd-11f0-897e-569c3dd06744",71,["D",1744156153964],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n {isLoading && (\n

\n \n

\n )}\n\n \n\n \n

\n );\n}",[],[178,357,324],"68b50b94-14cd-11f0-98df-569c3dd06744",["D",1744153290594],[205,206,207,208,209,210],[178,357],["D",1744153285607],[204,211,212],[178],"b51adf74-0f84-11f1-b328-42dde27851f2","index.ts",["D",1771719807352],45,"http","import { Hono } from \"https://esm.sh/hono@4.1.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.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { routes } from \"../shared/routes.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\n\n// Initialize the database\nawait initializeDatabase();\n\n// Create the Hono app\nconst app = new Hono();\n\n// Serve static files from the frontend directory\napp.get(\"/frontend/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the shared directory\napp.get(\"/shared/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the routes directory\napp.get(\"/routes/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Create a static handler for server-side rendering\nconst { query, dataRoutes } = createStaticHandler(routes);\n\n// Handle all other routes with React Router\napp.all(\"*\", async (c) => {\n const isDataRequest = c.req.header(\"X-Data-Request\") === \"true\";\n\n // Get the routing context by running loaders/actions\n const context = await query(c.req.raw);\n\n // If the context is a Response (e.g., redirects from actions)\n if (context instanceof Response) {\n if (isDataRequest && context.status >= 300 && context.status < 400) {\n // For data requests, convert redirects to JSON so the client can handle them\n const location = context.headers.get(\"Location\");\n console.log(\"[data-request] redirect to:\", location);\n return Response.json({ redirect: location });\n }\n return context;\n }\n\n // Data-only request: return loaderData/actionData as JSON keyed by route ID\n if (isDataRequest) {\n console.log(\"[data-request] loaderData keys:\", Object.keys(context.loaderData || {}));\n console.log(\"[data-request] actionData keys:\", Object.keys(context.actionData || {}));\n return Response.json({\n loaderData: context.loaderData,\n actionData: context.actionData,\n });\n }\n\n // Full SSR render\n const router = createStaticRouter(dataRoutes, context);\n\n // Read the HTML template\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Render the app to a string\n const appHtml = renderToString(\n React.createElement(StaticRouterProvider, {\n router,\n context,\n }),\n );\n\n // Insert the rendered app and hydration data into the HTML template\n html = html.replace(\n \"

\",\n `

${appHtml}

`,\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;","react-router-7-example",[],[183,406],"05611c40-0f86-11f1-876d-42dde27851f2","4af61b55-4e6e-48ee-bb08-a35baadaf267",["D",1771720371532],[],[183,419,39],"database","049b9dee-0f86-11f1-80c6-42dde27851f2","migrations.ts","5ae46b72-14cd-11f0-bbde-569c3dd06744",170,["D",1771720370227],"import { sqlite } from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\n\n// Table names with versioning to allow for schema changes\nexport const TOPICS_TABLE = \"message_board_topics_v1\";\nexport const MESSAGES_TABLE = \"message_board_messages_v1\";\n\n/**\n * Initialize the database schema\n */\nexport async function initializeDatabase() {\n // Create topics table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TOPICS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topicId INTEGER NOT NULL,\n content TEXT NOT NULL,\n createdAt TEXT NOT NULL,\n FOREIGN KEY (topicId) REFERENCES ${TOPICS_TABLE}(id)\n )\n `);\n\n // Create indexes for faster queries\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_messages_topicId \n ON ${MESSAGES_TABLE} (topicId)\n `);\n\n // Seed initial data if the topics table is empty\n const existingTopics = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TOPICS_TABLE}`);\n \n if (existingTopics.rows[0].count === 0) {\n await seedInitialData();\n }\n}\n\n/**\n * Seed the database with initial data for demonstration\n */\nasync function seedInitialData() {\n // Insert sample topics\n await sqlite.execute(`\n INSERT INTO ${TOPICS_TABLE} (title, createdAt) VALUES\n ('Welcome to the Message Board', '${new Date().toISOString()}'),\n ('Tips and Tricks for Val Town', '${new Date().toISOString()}'),\n ('Introduce Yourself', '${new Date().toISOString()}')\n `);\n\n // Get the IDs of the inserted topics\n const topics = await sqlite.execute(`SELECT id FROM ${TOPICS_TABLE} LIMIT 3`);\n \n // Insert sample messages for each topic\n if (topics.rows.length > 0) {\n const welcomeTopicId = topics.rows[0].id;\n const tipsTopicId = topics.rows[1].id;\n const introTopicId = topics.rows[2].id;\n\n await sqlite.execute(`\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt) VALUES\n (${welcomeTopicId}, 'Welcome to our community message board! Feel free to browse around and join the discussions.', '${new Date().toISOString()}'),\n (${welcomeTopicId}, 'If you have any questions, just post them here!', '${new Date(Date.now() - 3600000).toISOString()}'),\n (${tipsTopicId}, 'Val Town makes it easy to build and share serverless functions.', '${new Date().toISOString()}'),\n (${tipsTopicId}, 'You can use TypeScript for better type safety in your projects.', '${new Date(Date.now() - 7200000).toISOString()}'),\n (${introTopicId}, 'Hi everyone! I\\'m the creator of this message board example.', '${new Date().toISOString()}')\n `);\n }\n}",[],[183,419,421],"5ae47cc0-14cd-11f0-bbde-569c3dd06744",["D",1744153267418],[200,201],[183,419],["D",1744153267418],[199,202],[183],["D",1744152661331],["D",1789558275908],{"_108":107,"_115":111},{"_108":107,"_109":-5,"_110":111,"_19":62,"_112":113,"_114":31},{"_13":97,"_38":98,"_50":49,"_99":51,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":52,"_106":107},"ctx",{"_90":-5,"_135":473,"_474":475,"_476":477,"_478":31,"_479":31,"_480":31,"_481":66,"_482":-5,"_483":-7,"_484":-7,"_485":168,"_486":31,"_487":31,"_488":-5,"_489":31,"_490":31,"_491":31,"_492":-5},"ENV",{"_444":445,"_446":447,"_448":98,"_449":450,"_451":452,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v171