/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(''); useEffect(() => { fetchMessages(); }, []); async function fetchMessages() { const response = await fetch('/messages'); const data = await response.json(); setMessages(data); } async function sendMessage(e) { e.preventDefault(); if (!newMessage.trim()) return; await fetch('/send', { method: 'POST', body: JSON.stringify({ content: newMessage }), headers: { 'Content-Type': 'application/json' } }); setNewMessage(''); fetchMessages(); } return (

🌟 Val Town Chat

{messages.map((msg, index) => (

{msg.content}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 1; await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === 'GET' && new URL(request.url).pathname === '/messages') { const result = await sqlite.execute(` SELECT content FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 50 `); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } if (request.method === 'POST' && new URL(request.url).pathname === '/send') { const { content } = await request.json(); await sqlite.execute(` INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content) VALUES (?) `, [content]); return new Response('Message sent', { status: 200 }); } return new Response(` Val Town Chat

`, { headers: { 'Content-Type': 'text/html' } }); } const styles = { container: { maxWidth: '600px', margin: '0 auto', fontFamily: 'system-ui, sans-serif', padding: '20px', }, messageList: { height: '400px', overflowY: 'auto', border: '1px solid #eee', marginBottom: '20px', padding: '10px', }, message: { marginBottom: '10px', padding: '8px', backgroundColor: '#f4f4f4', borderRadius: '4px', }, inputContainer: { display: 'flex', gap: '10px', }, input: { flex: 1, padding: '10px', borderRadius: '4px', border: '1px solid #ccc', }, sendButton: { padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', } };

chatApp