Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import type { VoiceNote } from "../../shared/types.ts";
4

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import Dashboard from "./Dashboard.tsx";
4import VoicePlayer from "./VoicePlayer.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import { MCPClient } from "../utils/MCPClient.ts";
5import { Message } from "./App.tsx";

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { type Message, MESSAGE_LIMIT } from "../../shared/utils.ts";
4import { MessageInput } from "./MessageInput.tsx";
9) {
10  const { data: messages = [], isLoading, error } = useMessages(initialMessages);
11  const messagesEndRef = React.useRef<HTMLDivElement>(null);
12
13  const scrollToBottom = () => {
15  };
16
17  React.useEffect(() => {
18    scrollToBottom();
19  }, [messages]);

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import {
4  RootRoute,
7  createRouter,
8  RouterProvider,
9} from "https://esm.sh/@tanstack/react-router@^1.121.0?deps=react@19";
10import {
11  QueryClient,
12  QueryClientProvider,
13} from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
14import { App } from "./components/App.tsx";
15
53
54// Register the router for TypeScript
55declare module "@tanstack/react-router" {
56  interface Register {
57    router: typeof router;

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { usePostMessage } from "../lib/queries.ts";
4
5export function MessageInput() {
6  const [message, setMessage] = React.useState("");
7  const postMessage = usePostMessage();
8  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
9
10  const adjustTextareaHeight = () => {
16  };
17
18  React.useEffect(() => {
19    adjustTextareaHeight();
20  }, [message]);
21
22  const handleSubmit = async (e: React.FormEvent) => {
23    e.preventDefault();
24    if (!message.trim()) return;
32  };
33
34  const handleKeyDown = (e: React.KeyboardEvent) => {
35    if (e.key === 'Enter' && !e.shiftKey) {
36      e.preventDefault();

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8    <link rel="preconnect" href="https://fonts.googleapis.com">

1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client?deps=react@19";
3import type { Message } from "../shared/utils.ts";
4import { RouterApp } from "./router.tsx";

1# React + TanStack + Hono Val Town Project
2
3Full-stack message board built for Val Town.
11
12### Frontend
13- React 19
14- TanStack Router (code-first routing)
15- TanStack Query (server state management)
31│   ├── database/     # Drizzle schema, migrations, and queries
32│   └── index.ts      # Main Hono application
33├── frontend/         # React app running in browser
34│   ├── components/   # React components
35│   ├── lib/          # Utilities and hooks
36│   └── router.tsx    # TanStack Router configuration
40## API Endpoints
41
42- `GET /` - Serves the React application with initial data
43- `GET /api/messages` - Fetch all messages (JSON)
44- `POST /api/messages` - Create a new message

1# Frontend
2
3This template is a classic client-side-only React app. 
4
5## `index.html`
9This HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.
10
11This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
12
13This HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)
14
15## `index.tsx`
16
17This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
18
19It also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the `<App />`.
25## `components/`
26
27This directory is where the React components are stored. They're pretty standard client-side React components.