[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_444":445,"_446":447},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_110":92,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",102,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","routes/Topic.action.ts","latestPath","fileId","f8ffc948-1593-11f0-9dd6-569c3dd06744","name","Topic.action.ts","fileType","script","content","import { ActionFunctionArgs, redirect } 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 const ret = redirect(`/topics/${message.id}`);\n console.log(message);\n console.log(ret);\n return ret;\n}","import { ActionFunctionArgs, redirect } 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}","createdAt",["D",1744288111557],"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",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"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",{"_44":45,"_32":46,"_39":439,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":440,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":441,"_86":442,"_88":443,"_90":25},"tree",[190,195,207,218,221,222],"files",[190,191,192,193,194,195,196,197,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],"counts",{"_180":153,"_181":172,"_182":65,"_183":184,"_185":186},"contents",[132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":175,"_32":176,"_30":177,"_141":-5,"_42":43,"_41":65,"_143":60,"_39":178,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_27":179},{"_44":169,"_32":170,"_30":171,"_141":-5,"_42":43,"_41":172,"_143":60,"_39":173,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_27":174},{"_44":164,"_32":165,"_30":166,"_141":-5,"_42":43,"_41":151,"_143":60,"_39":167,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_27":168},{"_44":156,"_32":157,"_30":158,"_141":-5,"_42":43,"_41":159,"_143":60,"_39":160,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_27":163},{"_44":148,"_32":149,"_30":150,"_141":-5,"_42":43,"_41":151,"_143":25,"_39":152,"_13":153,"_34":20,"_36":154,"_24":25,"_146":-5,"_27":155},{"_44":138,"_32":139,"_30":140,"_141":-5,"_42":43,"_41":142,"_143":25,"_39":144,"_13":65,"_34":20,"_36":145,"_24":25,"_146":-5,"_27":147},"2f45ec18-1606-11f0-afe3-569c3dd06744","TODO.md","471f7894-1594-11f0-bc2d-569c3dd06744","parentId",94,"latest",["D",1744287626709],"- [ ] When you submit a new message board thing, it doesn't redirect to that newly created thing after it's done. It just shows a lame empty page.\n * I try to do the redirect in the action here: https://www.val.town/x/stevekrouse/reactRouter7Example/branch/main/code/routes/Topic.action.ts#L14\n- [ ] 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- [ ] Sometimes when you hit the back button, you get the JSON representation of the page, ie its loader. That's weird! I wonder if I can get a solid repro of that.\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",[139],"f8ffd9ba-1593-11f0-9dd6-569c3dd06744","README.md","513e59ca-14cd-11f0-8f60-569c3dd06744",81,["D",1744238573020],1,"# 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- `/topics/new` - 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## Getting Started\n\n1. Clone the repository\n2. Run the application with `deno run -A backend/index.ts`\n3. Visit `http://localhost:3000` in your browser\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.",[149],"5343c3fe-14cd-11f0-b10b-569c3dd06744","shared","add21c84-9f00-4405-af88-6ec5134089df",2,["D",1744153254621],0,"directory",[157],"f8ffd76c-1593-11f0-9dd6-569c3dd06744","routes","c4795b2d-41e5-4e2d-bb49-1239d72d4d2d",["D",1744238573020],[165],"65bd0400-14cd-11f0-9e26-569c3dd06744","frontend","25ba79aa-990f-468a-a9a9-3feab00a24d6",5,["D",1744153285607],[170],"5ae47a2c-14cd-11f0-bbde-569c3dd06744","backend","50aca1db-e744-46f9-883e-ba00e55ffc58",["D",1744153267418],[176],"pulls","branches","forks","envVars",{"_187":161,"_189":161},"connections",{"_187":161,"_188":161},"count","unfilledCount","emptyCount",{"_44":175,"_32":176,"_30":177,"_141":-5,"_42":43,"_41":65,"_143":60,"_39":436,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":437,"_27":438},{"_44":432,"_32":424,"_30":418,"_141":177,"_42":43,"_41":65,"_143":60,"_39":433,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":434,"_27":435},{"_44":425,"_32":426,"_30":427,"_141":418,"_42":43,"_41":65,"_143":25,"_39":428,"_13":161,"_34":35,"_36":429,"_24":25,"_146":-5,"_224":430,"_27":431},{"_44":415,"_32":416,"_30":417,"_141":418,"_42":43,"_41":419,"_143":25,"_39":420,"_13":159,"_34":35,"_36":421,"_24":25,"_146":-5,"_224":422,"_27":423},{"_44":405,"_32":406,"_30":58,"_141":177,"_42":43,"_41":407,"_143":25,"_39":408,"_13":409,"_34":410,"_36":411,"_24":25,"_146":412,"_224":413,"_27":414},{"_44":169,"_32":170,"_30":171,"_141":-5,"_42":43,"_41":172,"_143":60,"_39":402,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":403,"_27":404},{"_44":397,"_32":345,"_30":339,"_141":171,"_42":43,"_41":398,"_143":60,"_39":399,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":400,"_27":401},{"_44":389,"_32":310,"_30":390,"_141":339,"_42":43,"_41":391,"_143":60,"_39":392,"_13":393,"_34":35,"_36":394,"_24":25,"_146":-5,"_224":395,"_27":396},{"_44":382,"_32":383,"_30":384,"_141":339,"_42":43,"_41":349,"_143":60,"_39":385,"_13":153,"_34":35,"_36":386,"_24":25,"_146":-5,"_224":387,"_27":388},{"_44":375,"_32":376,"_30":377,"_141":339,"_42":43,"_41":349,"_143":25,"_39":378,"_13":159,"_34":35,"_36":379,"_24":25,"_146":-5,"_224":380,"_27":381},{"_44":368,"_32":369,"_30":370,"_141":339,"_42":43,"_41":349,"_143":25,"_39":371,"_13":159,"_34":35,"_36":372,"_24":25,"_146":-5,"_224":373,"_27":374},{"_44":361,"_32":362,"_30":363,"_141":339,"_42":43,"_41":349,"_143":60,"_39":364,"_13":159,"_34":35,"_36":365,"_24":25,"_146":-5,"_224":366,"_27":367},{"_44":354,"_32":355,"_30":356,"_141":339,"_42":43,"_41":349,"_143":25,"_39":357,"_13":159,"_34":35,"_36":358,"_24":25,"_146":-5,"_224":359,"_27":360},{"_44":346,"_32":347,"_30":348,"_141":339,"_42":43,"_41":349,"_143":25,"_39":350,"_13":159,"_34":35,"_36":351,"_24":25,"_146":-5,"_224":352,"_27":353},{"_44":336,"_32":337,"_30":338,"_141":339,"_42":43,"_41":340,"_143":25,"_39":341,"_13":172,"_34":35,"_36":342,"_24":25,"_146":-5,"_224":343,"_27":344},{"_44":328,"_32":329,"_30":330,"_141":171,"_42":43,"_41":331,"_143":60,"_39":332,"_13":159,"_34":20,"_36":333,"_24":25,"_146":-5,"_224":334,"_27":335},{"_44":320,"_32":321,"_30":322,"_141":171,"_42":43,"_41":323,"_143":25,"_39":324,"_13":65,"_34":35,"_36":325,"_24":25,"_146":-5,"_224":326,"_27":327},{"_44":164,"_32":165,"_30":166,"_141":-5,"_42":43,"_41":151,"_143":60,"_39":317,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":318,"_27":319},{"_44":309,"_32":310,"_30":311,"_141":166,"_42":43,"_41":312,"_143":25,"_39":313,"_13":65,"_34":35,"_36":314,"_24":25,"_146":-5,"_224":315,"_27":316},{"_44":302,"_32":303,"_30":304,"_141":166,"_42":43,"_41":151,"_143":60,"_39":305,"_13":161,"_34":35,"_36":306,"_24":25,"_146":-5,"_224":307,"_27":308},{"_44":295,"_32":296,"_30":297,"_141":166,"_42":43,"_41":151,"_143":25,"_39":298,"_13":161,"_34":35,"_36":299,"_24":25,"_146":-5,"_224":300,"_27":301},{"_44":288,"_32":289,"_30":290,"_141":166,"_42":43,"_41":151,"_143":60,"_39":291,"_13":161,"_34":35,"_36":292,"_24":25,"_146":-5,"_224":293,"_27":294},{"_44":281,"_32":282,"_30":283,"_141":166,"_42":43,"_41":151,"_143":25,"_39":284,"_13":161,"_34":35,"_36":285,"_24":25,"_146":-5,"_224":286,"_27":287},{"_44":277,"_32":33,"_30":31,"_141":166,"_42":43,"_41":14,"_143":25,"_39":278,"_13":172,"_34":35,"_36":38,"_24":25,"_146":-5,"_224":279,"_27":280},{"_44":270,"_32":271,"_30":272,"_141":166,"_42":43,"_41":151,"_143":60,"_39":273,"_13":161,"_34":35,"_36":274,"_24":25,"_146":-5,"_224":275,"_27":276},{"_44":263,"_32":264,"_30":265,"_141":166,"_42":43,"_41":151,"_143":25,"_39":266,"_13":161,"_34":35,"_36":267,"_24":25,"_146":-5,"_224":268,"_27":269},{"_44":256,"_32":257,"_30":258,"_141":166,"_42":43,"_41":151,"_143":60,"_39":259,"_13":161,"_34":35,"_36":260,"_24":25,"_146":-5,"_224":261,"_27":262},{"_44":249,"_32":250,"_30":251,"_141":166,"_42":43,"_41":151,"_143":25,"_39":252,"_13":161,"_34":35,"_36":253,"_24":25,"_146":-5,"_224":254,"_27":255},{"_44":156,"_32":157,"_30":158,"_141":-5,"_42":43,"_41":159,"_143":60,"_39":246,"_13":161,"_34":162,"_36":-5,"_24":25,"_146":-5,"_224":247,"_27":248},{"_44":237,"_32":238,"_30":239,"_141":158,"_42":43,"_41":240,"_143":25,"_39":241,"_13":242,"_34":35,"_36":243,"_24":25,"_146":-5,"_224":244,"_27":245},{"_44":230,"_32":231,"_30":232,"_141":158,"_42":43,"_41":159,"_143":60,"_39":233,"_13":161,"_34":35,"_36":234,"_24":25,"_146":-5,"_224":235,"_27":236},{"_44":148,"_32":149,"_30":150,"_141":-5,"_42":43,"_41":151,"_143":25,"_39":227,"_13":153,"_34":20,"_36":154,"_24":25,"_146":-5,"_224":228,"_27":229},{"_44":138,"_32":139,"_30":140,"_141":-5,"_42":43,"_41":142,"_143":25,"_39":223,"_13":65,"_34":20,"_36":145,"_24":25,"_146":-5,"_224":225,"_27":226},["D",1744287626709],"children",[],[139],["D",1744238573020],[],[149],"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}",[],[157,231],"9e7455c0-1606-11f0-9341-569c3dd06744","routes.ts","7639f8f6-14d2-11f0-97d5-569c3dd06744",97,["D",1744287813240],15,"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\";\nlet isClient = !isServer;\n\n// Generic loader that forwards on requests for that page's JSON data\nfunction clientLoader({ request }: LoaderFunctionArgs) {\n return fetch(request, {\n headers: {\n \"Accept\": \"application/json\",\n },\n }).then(res => 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 console.log(await response.clone().text());\n return response;\n}\n\nfunction createFullstackLoader(loaderSourceImportURL: string) {\n if (isClient) {\n return clientLoader;\n } else {\n return async (args: LoaderFunctionArgs) => {\n let module = await import(loaderSourceImportURL);\n let loader = module.loader || module.default;\n return loader(args);\n };\n }\n}\n\nfunction createFullstackAction(actionSourceImportURL: string) {\n if (isClient) {\n return clientAction;\n } else {\n return async (args: ActionFunctionArgs) => {\n let module = await import(actionSourceImportURL);\n let action = module.action || module.default;\n return action(args);\n };\n }\n}\n\nexport const routes = [\n {\n path: \"/\",\n Component: App,\n children: [\n {\n index: true,\n Component: Home,\n loader: createFullstackLoader(\"../routes/Home.loader.ts\"),\n },\n {\n path: \"topics/new\",\n action: createFullstackAction(\"../routes/Topics.action.ts\"),\n },\n {\n path: \"topics/:topicId\",\n Component: Topic,\n loader: createFullstackLoader(\"../routes/Topic.loader.ts\"),\n action: createFullstackAction(\"../routes/Topic.action.ts\"),\n },\n {\n path: \"topics/:topicId/messages/:messageId\",\n Component: Topic,\n loader: createFullstackLoader(\"../routes/TopicMessage.loader.ts\"),\n },\n {\n path: \"search\",\n Component: Search,\n loader: createFullstackLoader(\"../routes/Search.loader.ts\"),\n },\n ],\n },\n];",[],[157,238],["D",1744153254621],[219,220],[157],"f8ffd51e-1593-11f0-9dd6-569c3dd06744","Topics.action.ts","f8ffd5be-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"import { ActionFunctionArgs } 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 { topic };\n}",[],[165,250],"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}",[],[165,257],"f8ffcd4e-1593-11f0-9dd6-569c3dd06744","Topic.tsx","f8ffcdf8-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"/** @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).toLocaleString()}\n

\n \n

Messages

\n \n \n \n \n

\n );\n}",[],[165,264],"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}",[],[165,271],"5043d302-1607-11f0-ba60-569c3dd06744",["D",1744288111557],[],[165,33],"f8ffc470-1593-11f0-9dd6-569c3dd06744","Search.tsx","f8ffc506-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"/** @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).toLocaleString()}\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).toLocaleString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[165,282],"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}",[],[165,289],"f8ffb642-1593-11f0-9dd6-569c3dd06744","Home.tsx","f8ffb6d8-1593-11f0-9dd6-569c3dd06744",["D",1744238573020],"/** @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 { Topic } from \"../shared/types.ts\";\nimport { LoadingSpinner } from \"../frontend/components/LoadingSpinner.tsx\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\ninterface TopicListProps {\n topics: Topic[];\n}\n\nexport function Home() {\n const navigation = useNavigation();\n const { topics } = useLoaderData();\n const isCreatingTopic = navigation.formAction === \"/topics/new\" && navigation.state === \"submitting\";\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}",[],[165,296],"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}",[],[165,303],"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}",[],[165,310],["D",1744238573020],[208,209,210,211,212,213,214,215,216,217],[165],"eba52200-14d2-11f0-9b97-569c3dd06744","index.tsx","95142d28-14cd-11f0-b4b7-569c3dd06744",58,["D",1744155657751],"/** @jsxImportSource 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 React from \"https://esm.sh/react@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(\n routes,\n {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: window.__staticRouterHydrationData,\n },\n);\n\n// Hydrate the app\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);",[],[170,321],"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",[],[170,329],"25bc0854-14d4-11f0-b597-569c3dd06744","TopicList.tsx","7e7471ea-14cd-11f0-9e26-569c3dd06744","dea96277-3d90-41f7-8b34-da954ceef6fc",72,["D",1744156184707],"/** @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 { Topic } from \"../../shared/types.ts\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\ninterface TopicListProps {\n topics: Topic[];\n}\n\nexport function TopicList() {\n const navigation = useNavigation();\n const { topics } = useLoaderData();\n const isCreatingTopic = navigation.formAction === \"/topics/new\" && navigation.state === \"submitting\";\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}",[],[170,345,337],"components","eefdaa02-14d3-11f0-b7c3-569c3dd06744","TopicDetail.tsx","84a11ef6-14cd-11f0-90bb-569c3dd06744",68,["D",1744156092862],"/** @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 \"./MessageForm.tsx\";\nimport { MessageList } from \"./MessageList.tsx\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\ninterface TopicDetailData {\n topic: Topic;\n messages: Message[];\n}\n\nexport function TopicDetail() {\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).toLocaleString()}\n

\n \n

Messages

\n \n \n \n \n

\n );\n}",[],[170,345,347],"eefdad5e-14d3-11f0-b7c3-569c3dd06744","SearchResults.tsx","90a036c4-14cd-11f0-8b75-569c3dd06744",["D",1744156092862],"/** @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).toLocaleString()}\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).toLocaleString()}\n \n

\n ))}\n

\n )}\n

\n );\n}",[],[170,345,355],"eefdb18c-14d3-11f0-b7c3-569c3dd06744","SearchForm.tsx","7700eaba-14cd-11f0-82fd-569c3dd06744",["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}",[],[170,345,362],"eefdb394-14d3-11f0-b7c3-569c3dd06744","MessageList.tsx","722f6066-14cd-11f0-83b3-569c3dd06744",["D",1744156092862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"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 { 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).toLocaleString();\n const messageUrl = `/topics/${topicId}/messages/${message.id}`;\n \n return (\n

{message.content}

\n \n {formattedDate}\n \n

\n );\n })}\n

\n );\n}",[],[170,345,369],"eefdb556-14d3-11f0-b7c3-569c3dd06744","MessageForm.tsx","6d98d532-14cd-11f0-9771-569c3dd06744",["D",1744156092862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Form, useNavigation } 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\ninterface MessageFormProps {\n topicId: number;\n}\n\nexport function MessageForm({ topicId }: MessageFormProps) {\n const navigation = useNavigation();\n const isSubmitting = navigation.state === \"submitting\";\n \n return (\n

Post a Message

\n \n

\n );\n}",[],[170,345,376],"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}",[],[170,345,383],"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}",[],[170,345,310],"68b50b94-14cd-11f0-98df-569c3dd06744",6,["D",1744153290594],[197,198,199,200,201,202,203,204],[170,345],["D",1744153285607],[196,205,206],[170],"f8490582-1606-11f0-88e7-569c3dd06744","index.ts",99,["D",1744287963949],34,"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// LoaderData returns a map of loaderDatas for all matched loaders by an internal\n// id representation that looks like \"0-0\" and \"0-1\"\n// Some context: https://github.com/remix-run/react-router/blob/a3e4b8ed875611637357647fcf862c2bc61f4e11/packages/react-router/lib/hooks.tsx#L1093\n// This function combines all loader datas into a single object, which isn't technically correct, but might get us\n// pretty far.\n// Ultimately what we want is to only make one loader call for a new page navigation and then set the `state`\n// all at once with this exact object, and then have react router take care of sending the apprioriate state\n// to all the useLoaderDatas\nfunction parseData(data: any) {\n const entries = Object.values(data)\n .filter(Boolean)\n .flatMap((value: any) => Object.entries(value));\n return Object.fromEntries(entries);\n}\n\n// Handle all other routes with React Router\napp.all(\"*\", async (c) => {\n // Create a static handler for server-side rendering\n const { query, dataRoutes } = createStaticHandler(routes);\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, return it directly (e.g., redirects)\n if (context instanceof Response) {\n return context;\n }\n console.log(context);\n\n if (\n c.req.header(\"Accept\") === \"application/json\"\n ) {\n // in theory we should use `queryRoute` for this, like here:\n // https://github.com/remix-run/custom-react-router-framework-example/blob/f5a141d67800e8da076cd1bb3130f29a8c0d4ce3/entry.server.tsx#L79\n // but i wasn't able to get that to work in my rewrite-server branch\n // maybe it depends on X-Route-Id?\n return Response.json(parseData(context.loaderData));\n } else if (c.req.header(\"Content-Type\")?.includes(\"application/x-www-form-urlencoded\"))\n {\n return Response.json(parseData(context.actionData));\n }\n // Create a static router for server-side rendering\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",[],[176,406],"badc7172-14ce-11f0-8c0e-569c3dd06744","queries.ts","6229805c-14cd-11f0-800b-569c3dd06744","4af61b55-4e6e-48ee-bb08-a35baadaf267",28,["D",1744153857922],"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}",[],[176,424,416],"database","5ae46a96-14cd-11f0-bbde-569c3dd06744","migrations.ts","5ae46b72-14cd-11f0-bbde-569c3dd06744",["D",1744153267418],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\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}",[],[176,424,426],"5ae47cc0-14cd-11f0-bbde-569c3dd06744",["D",1744153267418],[192,193],[176,424],["D",1744153267418],[191,194],[176],["D",1744152661331],["D",1789558275908],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"ctx",{"_84":-5,"_129":477,"_478":479,"_480":481,"_482":25,"_483":25,"_484":25,"_485":60,"_486":-5,"_487":-7,"_488":-7,"_489":161,"_490":25,"_491":25,"_492":-5,"_493":25,"_494":25,"_495":25,"_496":-5},"ENV",{"_448":449,"_450":451,"_452":92,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476},"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 · v102