\",\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;",[],[202,232],[202],{"_102":242,"_95":243,"_156":244,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":245,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":246,"_98":335},"2a619166-b688-11f0-b092-0224a6c84d84","frontend","019a3b8c-4245-77b9-b54e-1f2be4839f23",["D",1761935639017],[247,318,326],{"_102":248,"_95":249,"_156":250,"_158":244,"_159":137,"_160":177,"_161":162,"_104":251,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":252,"_98":317},"2a6187a2-b688-11f0-b092-0224a6c84d84","components","019a3b8c-4245-77b9-b54e-1277a08490b9",["D",1761935639017],[253,261,269,277,285,293,301,309],{"_102":254,"_95":255,"_156":256,"_158":250,"_159":137,"_160":177,"_161":162,"_104":257,"_99":32,"_164":217,"_166":258,"_167":22,"_168":-5,"_169":259,"_98":260},"2a61741a-b688-11f0-b092-0224a6c84d84","App.tsx","019a3b8c-4245-77b9-b54d-f1f137b52fb5",["D",1761935639017],"/** @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}",[],[243,249,255],{"_102":262,"_95":263,"_156":264,"_158":250,"_159":137,"_160":177,"_161":162,"_104":265,"_99":32,"_164":217,"_166":266,"_167":22,"_168":-5,"_169":267,"_98":268},"2a6175dc-b688-11f0-b092-0224a6c84d84","LoadingSpinner.tsx","019a3b8c-4245-77b9-b54d-f4df4f622ded",["D",1761935639017],"/** @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}",[],[243,249,263],{"_102":270,"_95":271,"_156":272,"_158":250,"_159":137,"_160":177,"_161":162,"_104":273,"_99":32,"_164":217,"_166":274,"_167":22,"_168":-5,"_169":275,"_98":276},"2a6177c6-b688-11f0-b092-0224a6c84d84","MessageForm.tsx","019a3b8c-4245-77b9-b54d-fb1d7e0230a6",["D",1761935639017],"/** @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}",[],[243,249,271],{"_102":278,"_95":279,"_156":280,"_158":250,"_159":137,"_160":177,"_161":162,"_104":281,"_99":32,"_164":217,"_166":282,"_167":22,"_168":-5,"_169":283,"_98":284},"2a617938-b688-11f0-b092-0224a6c84d84","MessageList.tsx","019a3b8c-4245-77b9-b54d-fe717d90081f",["D",1761935639017],"/** @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}",[],[243,249,279],{"_102":286,"_95":287,"_156":288,"_158":250,"_159":137,"_160":177,"_161":162,"_104":289,"_99":32,"_164":217,"_166":290,"_167":22,"_168":-5,"_169":291,"_98":292},"2a617ad2-b688-11f0-b092-0224a6c84d84","SearchForm.tsx","019a3b8c-4245-77b9-b54e-007af79aa789",["D",1761935639017],"/** @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}",[],[243,249,287],{"_102":294,"_95":295,"_156":296,"_158":250,"_159":137,"_160":177,"_161":162,"_104":297,"_99":32,"_164":217,"_166":298,"_167":22,"_168":-5,"_169":299,"_98":300},"2a617c58-b688-11f0-b092-0224a6c84d84","SearchResults.tsx","019a3b8c-4245-77b9-b54e-064cd970cf6b",["D",1761935639017],"/** @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}",[],[243,249,295],{"_102":302,"_95":303,"_156":304,"_158":250,"_159":137,"_160":177,"_161":162,"_104":305,"_99":32,"_164":217,"_166":306,"_167":22,"_168":-5,"_169":307,"_98":308},"2a61813a-b688-11f0-b092-0224a6c84d84","TopicDetail.tsx","019a3b8c-4245-77b9-b54e-0b0d7dfd008f",["D",1761935639017],"/** @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}",[],[243,249,303],{"_102":310,"_95":311,"_156":312,"_158":250,"_159":137,"_160":177,"_161":162,"_104":313,"_99":32,"_164":217,"_166":314,"_167":22,"_168":-5,"_169":315,"_98":316},"2a6183e2-b688-11f0-b092-0224a6c84d84","TopicList.tsx","019a3b8c-4245-77b9-b54e-0ddb085b694a",["D",1761935639017],"/** @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 === \"/\" && 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}",[],[243,249,311],[243,249],{"_102":319,"_95":320,"_156":321,"_158":244,"_159":137,"_160":177,"_161":162,"_104":322,"_99":32,"_164":178,"_166":323,"_167":22,"_168":-5,"_169":324,"_98":325},"2a6189f0-b688-11f0-b092-0224a6c84d84","index.html","019a3b8c-4245-77b9-b54e-148c3a2a71ef",["D",1761935639017],"\n\n \n \n \n Community Message Board\n \n \n \n \n \n

\n \n \n",[],[243,320],{"_102":327,"_95":328,"_156":329,"_158":244,"_159":137,"_160":330,"_161":162,"_104":331,"_99":194,"_164":217,"_166":332,"_167":22,"_168":-5,"_169":333,"_98":334},"0529f664-b6b9-11f0-9f50-0224a6c84d84","index.tsx","019a3b8c-4245-77b9-b54e-1a7aa62bcaea",54,["D",1761956622018],"/** @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\";\n\n\nconst {routes} = await import(\"../shared/routes.ts\")\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);",[],[243,328],[243],{"_102":337,"_95":338,"_156":339,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":340,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":341,"_98":441},"2a61a8c2-b688-11f0-b092-0224a6c84d84","routes","019a3b8c-4245-77b9-b54e-480bb416dcfc",["D",1761935639017],[342,351,360,369,378,387,396,405,414,423,432],{"_102":343,"_95":344,"_156":345,"_158":339,"_159":137,"_160":346,"_161":162,"_104":347,"_99":177,"_164":217,"_166":348,"_167":22,"_168":-5,"_169":349,"_98":350},"e4a2a71c-b6b6-11f0-a5dc-0224a6c84d84","_index.loader.ts","019a3b8c-4245-77b9-b54e-27e74159da7a",27,["D",1761955708432],"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}",[],[338,344],{"_102":352,"_95":353,"_156":354,"_158":339,"_159":137,"_160":355,"_161":162,"_104":356,"_99":177,"_164":217,"_166":357,"_167":22,"_168":-5,"_169":358,"_98":359},"e49bf4c6-b6b6-11f0-aa4c-0224a6c84d84","_index.tsx","019a3b8c-4245-77b9-b54e-289dab0eb48e",26,["D",1761955708407],"/** @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 === \"/\" && 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}",[],[338,353],{"_102":361,"_95":362,"_156":363,"_158":339,"_159":137,"_160":364,"_161":162,"_104":365,"_99":177,"_164":217,"_166":366,"_167":22,"_168":-5,"_169":367,"_98":368},"e5046b78-b6b6-11f0-8260-0224a6c84d84","route.action.ts","019a3b8c-4245-77b9-b54e-452279001fc0",32,["D",1761955708424],"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}",[],[338,362],{"_102":370,"_95":371,"_156":372,"_158":339,"_159":137,"_160":373,"_161":162,"_104":374,"_99":177,"_164":217,"_166":375,"_167":22,"_168":-5,"_169":376,"_98":377},"e4bd30fa-b6b6-11f0-a5b5-0224a6c84d84","route.tsx","019a3b8c-4245-77b9-b54e-20fa2f050813",29,["D",1761955708583],"/** @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}",[],[338,371],{"_102":379,"_95":380,"_156":381,"_158":339,"_159":137,"_160":382,"_161":162,"_104":383,"_99":177,"_164":217,"_166":384,"_167":22,"_168":-5,"_169":385,"_98":386},"e4d0caac-b6b6-11f0-923a-0224a6c84d84","search.loader.ts","019a3b8c-4245-77b9-b54e-2db5ecaea968",31,["D",1761955708425],"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}",[],[338,380],{"_102":388,"_95":389,"_156":390,"_158":339,"_159":137,"_160":391,"_161":162,"_104":392,"_99":177,"_164":217,"_166":393,"_167":22,"_168":-5,"_169":394,"_98":395},"e4b63c00-b6b6-11f0-822e-0224a6c84d84","search.tsx","019a3b8c-4245-77b9-b54e-317f2d785ba2",28,["D",1761955708421],"/** @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}",[],[338,389],{"_102":397,"_95":398,"_156":399,"_158":339,"_159":137,"_160":400,"_161":162,"_104":401,"_99":177,"_164":217,"_166":402,"_167":22,"_168":-5,"_169":403,"_98":404},"51731516-b6b7-11f0-84fb-0224a6c84d84","topics._topicId_.action.ts","019a3b8c-4245-77b9-b54e-37426f2ca418",39,["D",1761955890916],"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}",[],[338,398],{"_102":406,"_95":407,"_156":408,"_158":339,"_159":137,"_160":409,"_161":162,"_104":410,"_99":177,"_164":217,"_166":411,"_167":22,"_168":-5,"_169":412,"_98":413},"519b2aec-b6b7-11f0-b7de-0224a6c84d84","topics._topicId_.loader.ts","019a3b8c-4245-77b9-b54e-3863690fe9fc",41,["D",1761955890931],"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}",[],[338,407],{"_102":415,"_95":416,"_156":417,"_158":339,"_159":137,"_160":418,"_161":162,"_104":419,"_99":177,"_164":217,"_166":420,"_167":22,"_168":-5,"_169":421,"_98":422},"5163fea0-b6b7-11f0-88dd-0224a6c84d84","topics._topicId_.messages._messageId_.loader.ts","019a3b8c-4245-77b9-b54e-403b3713909b",37,["D",1761955890900],"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}",[],[338,416],{"_102":424,"_95":425,"_156":426,"_158":339,"_159":137,"_160":427,"_161":162,"_104":428,"_99":32,"_164":217,"_166":429,"_167":22,"_168":-5,"_169":430,"_98":431},"517a42fa-b6b7-11f0-9c98-0224a6c84d84","topics._topicId_.messages._messageId_.tsx","517a439a-b6b7-11f0-9c98-0224a6c84d84",40,["D",1761955890901],"/** @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 TopicMessage() {\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}\n",[],[338,425],{"_102":433,"_95":434,"_156":435,"_158":339,"_159":137,"_160":436,"_161":162,"_104":437,"_99":187,"_164":217,"_166":438,"_167":22,"_168":-5,"_169":439,"_98":440},"3c266c24-b6b9-11f0-be91-0224a6c84d84","topics._topicId_.tsx","019a3b8c-4245-77b9-b54e-3dcb0010fc5e",56,["D",1761956714254],"/** @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 loaderData = useLoaderData() as TopicDetailData | null;\n const { messageId } = useParams();\n\n if (!loaderData) {\n return

;\n }\n\n const { topic, messages } = loaderData;\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}",[],[338,434],[338],{"_102":443,"_95":444,"_156":445,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":446,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":447,"_98":484},"2a61adea-b688-11f0-b092-0224a6c84d84","shared","019a3b8c-4245-77b9-b54e-54ad58d082fa",["D",1761935639017],[448,458,467,476],{"_102":449,"_95":450,"_156":451,"_158":445,"_159":137,"_160":452,"_161":162,"_104":453,"_99":454,"_164":217,"_166":455,"_167":22,"_168":-5,"_169":456,"_98":457},"3310d9b2-b6c3-11f0-bdd6-0224a6c84d84","route-builder.ts","e4c2be30-b6b6-11f0-9f72-0224a6c84d84",70,["D",1761960993993],12,"/**\n * Custom File-Based Routing System for Val.Town\n *\n * Convention:\n * - route.tsx = root layout\n * - _index.tsx = index route\n * - _param_.tsx = dynamic segment (:param)\n * - path.to.route.tsx = nested paths (path/to/route)\n * - _pathless.layout.tsx = pathless layout route\n * - $.tsx = splat/catch-all route\n *\n * Loaders/Actions:\n * - filename.loader.ts = loader for filename.tsx\n * - filename.action.ts = action for filename.tsx\n */\n\nimport {\n type ActionFunctionArgs,\n type LoaderFunctionArgs,\n type RouteObject,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nlet isServer = typeof document === \"undefined\";\nlet isClient = !isServer;\n\n/**\n * Helper to create fullstack loader that works on both client and server\n */\nfunction createFullstackLoader(loaderSourceImportURL: string) {\n if (isClient) {\n // On client, make a fetch request to the server\n return async ({ request }: LoaderFunctionArgs) => {\n const response = await fetch(request, {\n headers: {\n \"Accept\": \"application/json\",\n },\n });\n const data = await response.json();\n\n // Backend returns context.loaderData which is a map like { \"0-1\": {...} }\n // Extract the actual data for this route\n if (data && typeof data === 'object') {\n const values = Object.values(data).filter(Boolean);\n if (values.length === 1) {\n return values[0];\n }\n // Multiple loaders, merge them\n return Object.assign({}, ...values.map((v: any) => v || {}));\n }\n\n return data;\n };\n } else {\n // On server, execute the loader directly\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\n/**\n * Helper to create fullstack action that works on both client and server\n */\nfunction createFullstackAction(actionSourceImportURL: string) {\n if (isClient) {\n // On client, make a fetch request to the server\n return async ({ request }: ActionFunctionArgs) => {\n const response = await fetch(request);\n if (response.status === 302 || response.redirected) {\n return response;\n }\n return response.json();\n };\n } else {\n // On server, execute the action directly\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\ninterface ParsedRoute {\n filepath: string;\n filename: string;\n segments: string[];\n isIndex: boolean;\n isLayout: boolean;\n isPathless: boolean;\n routePath: string | undefined;\n sortOrder: number;\n}\n\n/**\n * Parse a filename into route information\n * Examples:\n * - route.tsx -> { isLayout: true, routePath: undefined }\n * - _index.tsx -> { isIndex: true, routePath: undefined }\n * - search.tsx -> { routePath: \"search\" }\n * - topics._topicId_.tsx -> { routePath: \"topics/:topicId\" }\n * - topics._id_.messages._messageId_.tsx -> { routePath: \"topics/:id/messages/:messageId\" }\n * - _auth.layout.login.tsx -> { isPathless: true, routePath: \"login\" }\n * - $.tsx -> { routePath: \"*\" }\n */\nfunction parseFilename(filepath: string): ParsedRoute {\n const filename = filepath.split('/').pop()!.replace(/\\.(tsx|ts)$/, '');\n\n // Handle special cases first\n if (filename === 'route') {\n return {\n filepath,\n filename,\n segments: [],\n isIndex: false,\n isLayout: true,\n isPathless: false,\n routePath: undefined,\n sortOrder: 0,\n };\n }\n\n if (filename === '_index') {\n return {\n filepath,\n filename,\n segments: [],\n isIndex: true,\n isLayout: false,\n isPathless: false,\n routePath: undefined,\n sortOrder: 1,\n };\n }\n\n // Check for pathless layout (starts with _ and contains .layout.)\n const isPathless = filename.startsWith('_') && filename.includes('.layout.');\n const workingName = isPathless ? filename.slice(1) : filename;\n\n // Split by dots to get segments\n const rawSegments = workingName.split('.');\n const segments: string[] = [];\n let routePath = '';\n\n for (let segment of rawSegments) {\n // Skip 'layout' keyword for pathless layouts\n if (segment === 'layout') {\n continue;\n }\n\n // Handle dynamic segments _param_\n if (segment.startsWith('_') && segment.endsWith('_') && segment.length > 2) {\n const param = segment.slice(1, -1);\n segments.push(`:${param}`);\n routePath += (routePath ? '/' : '') + `:${param}`;\n }\n // Handle splat routes\n else if (segment === '$') {\n segments.push('*');\n routePath += (routePath ? '/' : '') + '*';\n }\n // Regular segment\n else {\n segments.push(segment);\n routePath += (routePath ? '/' : '') + segment;\n }\n }\n\n return {\n filepath,\n filename,\n segments,\n isIndex: false,\n isLayout: false,\n isPathless,\n routePath: routePath || undefined,\n sortOrder: 2,\n };\n}\n\n/**\n * Determine if a route should be nested under another route\n * Returns the parent route's filename if this route should be nested\n */\nfunction findParentRoute(route: ParsedRoute, allRoutes: ParsedRoute[]): ParsedRoute | null {\n if (route.isLayout) return null;\n\n // For pathless layouts, don't nest them - they are parents themselves\n if (route.isPathless) return null;\n\n // Look for matching parent based on path segments\n const parentCandidates = allRoutes.filter(r => {\n // Can't be parent of itself\n if (r.filename === route.filename) return false;\n\n // Root layout is parent of index routes and top-level routes\n if (r.isLayout) {\n // Index route should be child of root layout\n if (route.isIndex) return true;\n\n // Top-level routes (1 or 2 segments) should be children of root layout\n // unless they have a more specific parent\n return true;\n }\n\n // Pathless layouts can be parents\n if (r.isPathless) {\n // Pathless layout should match start of path\n const pathlessPath = r.segments.join('/');\n const routePathStart = route.segments.slice(0, r.segments.length).join('/');\n return pathlessPath === routePathStart;\n }\n\n // Regular routes can be parents if child's path starts with parent's path\n // Example: topics/:topicId is parent of topics/:topicId/messages/:messageId\n if (r.segments.length > 0 && route.segments.length > r.segments.length) {\n // Check if the first N segments of the route match the parent's segments\n const routePathStart = route.segments.slice(0, r.segments.length).join('/');\n const parentPath = r.segments.join('/');\n return routePathStart === parentPath;\n }\n\n return false;\n });\n\n // Return the most specific parent (longest matching path)\n if (parentCandidates.length === 0) return null;\n\n return parentCandidates.sort((a, b) =>\n b.segments.length - a.segments.length\n )[0];\n}\n\ninterface RouteFile {\n component?: string;\n loader?: string;\n action?: string;\n}\n\n/**\n * Discover route files in the routes directory\n * Scans for .tsx component files and their corresponding .loader.ts and .action.ts files\n */\nasync function discoverRouteFiles(routesDir: string): Promise> {\n const routes = new Map();\n\n // Only scan on server\n if (isClient) {\n console.log(\"Skipping route discovery on client\");\n return routes;\n }\n\n try {\n // Get base directory from import.meta.url\n const baseUrl = new URL(\".\", import.meta.url);\n const basePath = baseUrl.pathname;\n\n console.log(\"Base path from import.meta.url:\", basePath);\n console.log(\"Requested routesDir:\", routesDir);\n\n // Try Deno file system APIs first (for val.town)\n let files: string[];\n let absoluteRoutesDir: string;\n\n try {\n // Use Deno.readDirSync if available\n const path = await import(\"node:path\");\n absoluteRoutesDir = path.resolve(basePath, routesDir);\n\n console.log(\"Resolved absolute path:\", absoluteRoutesDir);\n console.log(\"Attempting to read directory with Deno.readDirSync...\");\n\n const entries = Array.from(Deno.readDirSync(absoluteRoutesDir));\n files = entries\n .filter((entry: any) => entry.isFile)\n .map((entry: any) => entry.name);\n\n console.log(`Found ${files.length} files in routes directory`);\n } catch (denoErr: any) {\n // Fallback to Node.js fs if Deno is not available\n console.log(\"Deno readDirSync failed:\", denoErr.message);\n console.log(\"Trying Node.js fs...\");\n const fs = await import(\"node:fs\");\n const path = await import(\"node:path\");\n absoluteRoutesDir = path.resolve(basePath, routesDir);\n console.log(\"Node.js fs attempting to read:\", absoluteRoutesDir);\n files = fs.readdirSync(absoluteRoutesDir);\n console.log(`Node.js fs found ${files.length} files`);\n }\n\n // Group files by base name\n const filesByBase = new Map();\n\n for (const file of files) {\n // Skip non-TypeScript files\n if (!file.endsWith(\".ts\") && !file.endsWith(\".tsx\")) continue;\n\n // Determine file type\n if (file.endsWith(\".loader.ts\")) {\n const baseName = file.replace(\".loader.ts\", \"\");\n if (!filesByBase.has(baseName)) {\n filesByBase.set(baseName, {});\n }\n filesByBase.get(baseName)!.loader = file;\n } else if (file.endsWith(\".action.ts\")) {\n const baseName = file.replace(\".action.ts\", \"\");\n if (!filesByBase.has(baseName)) {\n filesByBase.set(baseName, {});\n }\n filesByBase.get(baseName)!.action = file;\n } else if (file.endsWith(\".tsx\")) {\n const baseName = file.replace(\".tsx\", \"\");\n if (!filesByBase.has(baseName)) {\n filesByBase.set(baseName, {});\n }\n filesByBase.get(baseName)!.component = file;\n }\n }\n\n // Only include routes that have a component\n for (const [baseName, routeFile] of filesByBase.entries()) {\n if (routeFile.component) {\n routes.set(baseName, routeFile);\n }\n }\n\n console.log(`Discovered ${routes.size} route files`);\n return routes;\n } catch (err) {\n console.error(\"Error discovering route files:\", err);\n console.error(\"Error details:\", err.message, err.stack);\n return routes;\n }\n}\n\n/**\n * Build route configuration from file system\n */\nexport async function buildRoutes(routesDir: string = \"../routes\"): Promise {\n // Discover all route files\n const routeFiles = await discoverRouteFiles(routesDir);\n\n console.log(\"\\n=== 1. DISCOVERED ROUTE FILES ===\");\n console.log(`Found ${routeFiles.size} route(s):`);\n routeFiles.forEach((files, filename) => {\n console.log(` ${filename}:`);\n if (files.component) console.log(` - component: ${files.component}`);\n if (files.loader) console.log(` - loader: ${files.loader}`);\n if (files.action) console.log(` - action: ${files.action}`);\n });\n\n // Parse all route files\n const parsedRoutes: Map = new Map();\n const routeObjects: Map = new Map();\n\n console.log(\"\\n=== 2. PARSED ROUTE METADATA ===\");\n for (const [filename, files] of routeFiles.entries()) {\n if (!files.component) continue; // Skip if no component\n\n const parsed = parseFilename(filename);\n parsedRoutes.set(filename, parsed);\n\n console.log(` ${filename}:`);\n console.log(` - segments: [${parsed.segments.join(', ')}]`);\n console.log(` - routePath: ${parsed.routePath || '(none)'}`);\n console.log(` - isIndex: ${parsed.isIndex}, isLayout: ${parsed.isLayout}, isPathless: ${parsed.isPathless}`);\n\n // Create base route object\n const routeObj: RouteObject = {};\n\n // Import component\n const componentModule = await import(`${routesDir}/${files.component}`);\n routeObj.Component = componentModule.default || componentModule[Object.keys(componentModule)[0]];\n\n // Add loader if exists\n if (files.loader) {\n routeObj.loader = createFullstackLoader(`${routesDir}/${files.loader}`);\n }\n\n // Add action if exists\n if (files.action) {\n routeObj.action = createFullstackAction(`${routesDir}/${files.action}`);\n }\n\n // Set path/index\n if (parsed.isIndex) {\n routeObj.index = true;\n } else if (parsed.routePath) {\n routeObj.path = parsed.routePath;\n }\n\n routeObjects.set(filename, routeObj);\n }\n\n // Build nested structure\n const rootRoutes: RouteObject[] = [];\n const routesByParent: Map = new Map();\n\n for (const [filename, parsed] of parsedRoutes.entries()) {\n const routeObj = routeObjects.get(filename)!;\n const parent = findParentRoute(parsed, Array.from(parsedRoutes.values()));\n\n if (!parent) {\n rootRoutes.push(routeObj);\n } else {\n // Calculate relative path for nested routes\n if (routeObj.path && parent.segments.length > 0) {\n // Remove parent's path segments to make it relative\n const parentPath = parent.segments.join('/');\n const fullPath = routeObj.path;\n\n // If the path starts with parent path, make it relative\n if (fullPath.startsWith(parentPath + '/')) {\n routeObj.path = fullPath.substring(parentPath.length + 1);\n }\n }\n\n if (!routesByParent.has(parent.filename)) {\n routesByParent.set(parent.filename, []);\n }\n routesByParent.get(parent.filename)!.push(routeObj);\n }\n }\n\n // Attach children to parents\n for (const [filename, routeObj] of routeObjects.entries()) {\n const children = routesByParent.get(filename);\n if (children && children.length > 0) {\n routeObj.children = children.sort((a, b) => {\n // Index routes come first\n if (a.index) return -1;\n if (b.index) return 1;\n return 0;\n });\n }\n }\n\n const finalRoutes = rootRoutes.sort((a, b) => {\n // Layouts come first\n if (!a.path && b.path) return -1;\n if (a.path && !b.path) return 1;\n return 0;\n });\n\n console.log(\"\\n=== 3. FINAL ROUTE TREE ===\");\n function printRouteTree(routes: RouteObject[], indent = 0) {\n routes.forEach(route => {\n const path = route.path || (route.index ? '[INDEX]' : '[ROOT LAYOUT]');\n const hasLoader = !!route.loader ? '✓loader' : '';\n const hasAction = !!route.action ? '✓action' : '';\n const extras = [hasLoader, hasAction].filter(Boolean).join(' ');\n console.log(`${' '.repeat(indent)}${path}${extras ? ` (${extras})` : ''}`);\n if (route.children) {\n printRouteTree(route.children, indent + 1);\n }\n });\n }\n printRouteTree(finalRoutes);\n console.log(\"\\n\");\n\n return finalRoutes;\n}\n",[],[444,450],{"_102":459,"_95":460,"_156":461,"_158":445,"_159":137,"_160":462,"_161":162,"_104":463,"_99":32,"_164":217,"_166":464,"_167":22,"_168":-5,"_169":465,"_98":466},"c2d2d57e-b6c2-11f0-b8a0-0224a6c84d84","routes-manual.ts","c2d2d66e-b6c2-11f0-b8a0-0224a6c84d84",68,["D",1761960805669],"/**\n * Manual route configuration fallback\n * Used when automatic route discovery fails\n */\n\nimport {\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\";\n\nlet isServer = typeof document === \"undefined\";\nlet isClient = !isServer;\n\nfunction createFullstackLoader(loaderSourceImportURL: string) {\n if (isClient) {\n // On client, make a fetch request to the server\n return async ({ request }: LoaderFunctionArgs) => {\n const response = await fetch(request, {\n headers: {\n \"Accept\": \"application/json\",\n },\n });\n const data = await response.json();\n\n // Backend returns context.loaderData which is a map like { \"0-1\": {...} }\n // Extract the actual data for this route\n if (data && typeof data === 'object') {\n const values = Object.values(data).filter(Boolean);\n if (values.length === 1) {\n return values[0];\n }\n // Multiple loaders, merge them\n return Object.assign({}, ...values.map((v: any) => v || {}));\n }\n\n return data;\n };\n } else {\n // On server, execute the loader directly\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 // On client, make a fetch request to the server\n return async ({ request }: ActionFunctionArgs) => {\n const response = await fetch(request);\n if (response.status === 302 || response.redirected) {\n return response;\n }\n return response.json();\n };\n } else {\n // On server, execute the action directly\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\n// Import components\nimport { App } from \"../routes/route.tsx\";\nimport { Home } from \"../routes/_index.tsx\";\nimport { Search } from \"../routes/search.tsx\";\nimport { Topic } from \"../routes/topics._topicId_.tsx\";\nimport { TopicMessage } from \"../routes/topics._topicId_.messages._messageId_.tsx\";\n\nexport const routes = [\n {\n path: \"/\",\n Component: App,\n action: createFullstackAction(\"../routes/route.action.ts\"),\n children: [\n {\n index: true,\n Component: Home,\n loader: createFullstackLoader(\"../routes/_index.loader.ts\"),\n },\n {\n path: \"topics/:topicId\",\n Component: Topic,\n loader: createFullstackLoader(\"../routes/topics._topicId_.loader.ts\"),\n action: createFullstackAction(\"../routes/topics._topicId_.action.ts\"),\n },\n {\n path: \"topics/:topicId/messages/:messageId\",\n Component: TopicMessage,\n loader: createFullstackLoader(\"../routes/topics._topicId_.messages._messageId_.loader.ts\"),\n },\n {\n path: \"search\",\n Component: Search,\n loader: createFullstackLoader(\"../routes/search.loader.ts\"),\n },\n ],\n },\n];\n\nconsole.log(\"[routes-manual.ts] Manual routes configured:\", routes.length, \"route(s)\");\n",[],[444,460],{"_102":468,"_95":469,"_156":470,"_158":445,"_159":137,"_160":136,"_161":162,"_104":471,"_99":472,"_164":217,"_166":473,"_167":22,"_168":-5,"_169":474,"_98":475},"331850c0-b6c3-11f0-b2e1-0224a6c84d84","routes.ts","019a3b8c-4245-77b9-b54e-4dcc76c6e48d",["D",1761960994012],15,"/**\n * Custom File-Based Routing for Val.Town\n *\n * This file uses our custom route builder to automatically discover routes\n * from the /routes directory using our custom convention:\n *\n * Convention:\n * - route.tsx = root layout\n * - _index.tsx = index route\n * - _param_.tsx = dynamic segment (:param)\n * - path.to.route.tsx = nested paths\n * - _pathless.layout.tsx = pathless layout route\n * - $.tsx = splat/catch-all route\n *\n * Loaders/Actions:\n * - filename.loader.ts = loader for filename.tsx\n * - filename.action.ts = action for filename.tsx\n *\n * Current routes structure:\n * - route.tsx + route.action.ts = root layout with action\n * - _index.tsx + _index.loader.ts = home page\n * - topics._topicId_.tsx + loader + action = topic detail\n * - topics._topicId_.messages._messageId_.tsx + loader = message highlight\n * - search.tsx + search.loader.ts = search page\n */\n\nimport { buildRoutes } from \"./route-builder.ts\";\n\nconst isServer = typeof document === \"undefined\";\n\n// Build routes using automatic discovery\nlet routesCache: any = null;\n\nasync function getRoutes() {\n if (routesCache) {\n return routesCache;\n }\n\n // On client, return empty array (routes will be hydrated from server)\n if (!isServer) {\n console.log(\"[routes.ts] Client-side: routes will be hydrated from server\");\n return [];\n }\n\n // On server, build routes automatically\n console.log(\"[routes.ts] Server-side: building routes from filesystem...\");\n routesCache = await buildRoutes(\"../routes\");\n console.log(\"[routes.ts] Built routes:\", routesCache?.length || 0);\n\n if (!routesCache || routesCache.length === 0) {\n throw new Error(\"Route builder returned empty array - check console logs above for details\");\n }\n\n return routesCache;\n}\n\n// Export routes - will be built when this module is imported\nexport const routes = await getRoutes();\n",[],[444,469],{"_102":477,"_95":478,"_156":479,"_158":445,"_159":137,"_160":177,"_161":162,"_104":480,"_99":32,"_164":217,"_166":481,"_167":22,"_168":-5,"_169":482,"_98":483},"2a61ac14-b688-11f0-b092-0224a6c84d84","types.ts","019a3b8c-4245-77b9-b54e-50f29b1f9d32",["D",1761935639017],"/**\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}",[],[444,478],[444],{"_102":486,"_95":487,"_156":488,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":489,"_99":32,"_164":178,"_166":490,"_167":22,"_168":-5,"_169":491,"_98":492},"2a61af3e-b688-11f0-b092-0224a6c84d84","README.md","019a3b8c-4245-77b9-b54e-5b821e38f8c8",["D",1761935639017],"# Community Message Board\n\nA simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.\n\n## Features\n\n- **Server-Side Rendering**: All pages are server-rendered when accessed directly\n- **Client-Side Navigation**: After initial load, navigation happens client-side\n- **Topic Management**: Create and view discussion topics\n- **Messaging System**: Post messages in topics\n- **Direct Message Links**: Link directly to specific messages via timestamps\n- **Search Functionality**: Search topics and messages with URL parameters\n- **Loading Indicators**: Visual feedback during async operations\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ └── index.ts # Server entry point\n├── frontend/\n│ ├── components/\n│ │ ├── LoadingSpinner.tsx\n│ │ ├── MessageForm.tsx\n│ │ ├── MessageList.tsx\n│ │ └── SearchForm.tsx\n│ ├── index.html # HTML template\n│ └── index.tsx # Client entry point\n├── routes/\n│ ├── App.tsx # Main application component\n│ ├── Home.tsx # Home page component\n│ ├── Home.loader.ts # Home page data loader\n│ ├── Topic.tsx # Topic detail component\n│ ├── Topic.loader.ts # Topic data loader\n│ ├── Topic.action.ts # Topic message creation action\n│ ├── TopicMessage.loader.ts # Direct message link loader\n│ ├── Topics.action.ts # Topic creation action\n│ ├── Search.tsx # Search results component\n│ └── Search.loader.ts # Search data loader\n└── shared/\n ├── routes.ts # Route definitions\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n### Server-Side Rendering\n\nThe application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:\n\n1. The server receives the request\n2. It runs the appropriate loaders/actions for the matched route\n3. The page is rendered with the data and sent to the client\n4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`\n\n### Client-Side Navigation\n\nAfter the initial page load, navigation happens entirely on the client:\n\n1. React Router handles link clicks and form submissions\n2. Data is fetched asynchronously using loaders and actions\n3. A loading spinner is displayed during data fetching\n4. The UI updates without a full page reload\n\n### Data Flow\n\n1. **Topics**: Stored in SQLite with title and creation timestamp\n2. **Messages**: Linked to topics with content and creation timestamp\n3. **Search**: Queries both topics and messages, with results in the URL\n\n### URL Structure\n\n- `/` - Home page with list of topics\n- `/` - Create new topic\n- `/topics/:topicId` - View a topic and its messages\n- `/topics/:topicId/messages/:messageId` - Direct link to a message\n- `/search?q=query` - Search results\n\n## 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.",[],[487],{"_102":494,"_95":495,"_156":496,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":497,"_99":32,"_164":178,"_166":498,"_167":22,"_168":-5,"_169":499,"_98":500},"2a61b358-b688-11f0-b092-0224a6c84d84","TODO.md","019a3b8c-4245-77b9-b54e-5dd312924e4c",["D",1761935639017],"## Remix questions\n\n### Action redirects\n\nWhen you submit a new message board thing, it doesn't redirect to that newly created thing after it's done.\n\nI am returning a `redirect` in the action, but that is now returned as a full response. How do I just get the relevant redirect data on the client, so the client can do the redirect?\n\nOr is it better to send over the data from the server and skip another loader?\n\n### Clearing form state after submission\n\nAfter forms are submitted, the data is still there in their pages. What's the idiomatic way to clear that in react router?\n\n### Setting loader state for multiple loaders\n\nRight now each loader (ie if you have nested routes) makes a seperate `fetch` call and I combine all their keys.\n\nIdeally we should make a single loader call per navigation event, and set the internal router state, not that one loader's state.\n\n### Shoud I use `queryRoute` instead of `query` in my server?\n\nThe example uses `query` which seems to skip the SSR piece and only to the loader/action piece, which is exactly what I'd want... if it worked for me.\n\n### \n\n\n## Other todos\n\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- [ ] 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?",[],[495],"files",[153,171,183,190,200,206,212,221,230,241,247,253,261,269,277,285,293,301,309,318,326,336,342,351,360,369,378,387,396,405,414,423,432,442,448,458,467,476,485,493],"counts",{"_505":32,"_506":177,"_507":32,"_508":509},"pulls","branches","forks","envVars",{"_510":32,"_511":32},"count","emptyCount","contents",[514,517,520,523,526,529,532,535],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":142,"_161":162,"_104":515,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":516},["D",1761954152236],[155],{"_102":184,"_95":185,"_156":186,"_158":-5,"_159":137,"_160":187,"_161":162,"_104":518,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":519},["D",1761954049401],[185],{"_102":201,"_95":202,"_156":203,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":521,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":522},["D",1761935639017],[202],{"_102":242,"_95":243,"_156":244,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":524,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":525},["D",1761935639017],[243],{"_102":337,"_95":338,"_156":339,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":527,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":528},["D",1761935639017],[338],{"_102":443,"_95":444,"_156":445,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":530,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":531},["D",1761935639017],[444],{"_102":486,"_95":487,"_156":488,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":533,"_99":32,"_164":178,"_166":490,"_167":22,"_168":-5,"_98":534},["D",1761935639017],[487],{"_102":494,"_95":495,"_156":496,"_158":-5,"_159":137,"_160":177,"_161":162,"_104":536,"_99":32,"_164":178,"_166":498,"_167":22,"_168":-5,"_98":537},["D",1761935639017],[495],"upstreamProject",{"_102":145,"_95":540,"_110":-5,"_112":-5,"_108":109,"_23":541},"reactRouter7Example",{"_93":542,"_129":543},"tmcw","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJUbmdsaHJKczVGSDdSS1R5MGtjVVczVFRtTi5qcGVnIn0","upstreamBranch",{"_102":140,"_104":546,"_547":548,"_95":43,"_138":145,"_99":142,"_139":549,"_141":550,"_551":552,"_106":-5,"_150":22,"_108":109,"_149":542,"_16":147,"_148":540},["D",1744307751648],"updatedAt",["D",1744308474521],"f1a26f20-14cb-11f0-b108-569c3dd06744",114,"lockfileKey","1756542695257-esm.town_v_tmcw_reactRouter7Example@4-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":559,"_508":564},{"_102":103,"_95":96,"_104":560,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":561,"_131":562,"_134":563,"_150":22},["D",1761935639017],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":140,"_141":142,"_143":109,"_144":145,"_146":147,"_148":96,"_149":94},[],"actionData","errors"]

tylersayshi

reactRouter7FileRouting

Environment variables