/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [items, setItems] = useState([]); const [newItem, setNewItem] = useState(""); useEffect(() => { fetchItems(); }, []); const fetchItems = async () => { const response = await fetch("/items"); const data = await response.json(); setItems(data); }; const addItem = async (e) => { e.preventDefault(); if (!newItem.trim()) return; await fetch("/add-item", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: newItem, quantity: 1 }), }); setNewItem(""); fetchItems(); }; const removeItem = async (id) => { await fetch(`/remove-item/${id}`, { method: "DELETE" }); fetchItems(); }; return (

🛒 Shopping List

{item.name}

View Source

); } 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; // Create table if not exists await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_shopping_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, quantity INTEGER DEFAULT 1, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Handle routes if (request.method === "GET" && new URL(request.url).pathname === "/items") { const result = await sqlite.execute(` SELECT * FROM ${KEY}_shopping_${SCHEMA_VERSION} ORDER BY created_at DESC `); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/add-item") { const { name, quantity } = await request.json(); await sqlite.execute( ` INSERT INTO ${KEY}_shopping_${SCHEMA_VERSION} (name, quantity) VALUES (?, ?) `, [name, quantity], ); return new Response("Item added", { status: 200 }); } if (request.method === "DELETE" && /^\/remove-item\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split("/").pop(); await sqlite.execute( ` DELETE FROM ${KEY}_shopping_${SCHEMA_VERSION} WHERE id = ? `, [id], ); return new Response("Item removed", { status: 200 }); } return new Response( ` Shopping List

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .shopping-app { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } input { width: 70%; padding: 10px; margin-right: 10px; } button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } ul { list-style-type: none; padding: 0; } li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } li button { background-color: transparent; color: red; } `;

shoppingApp

Version 5