/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [query, setQuery] = useState(""); const [table, setTable] = useState("val_town_agent_specifications"); const [results, setResults] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const tables = [ "val_town_agent_specifications", "val_town_agent_tasks" ]; const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); setError(null); try { const response = await fetch(window.location.href, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ query, table }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`); } const result = await response.json(); setResults(result); setError(null); } catch (error) { console.error("Query failed:", error); setError(error.message || 'An unexpected error occurred'); } finally { setIsLoading(false); } }; return (

🔍 Val Town SQLite Explorer

{error && (

Error: {error}

)} {results && (

Query Results

{results.columns.map((col, idx) => ( ))} {results.rows.map((row, rowIdx) => ( {Object.values(row).map((cell, cellIdx) => ( ))} ))}

{col}
{typeof cell === 'object' ? JSON.stringify(cell) : String(cell)}

)}

); } window.initClient = function() { const rootElement = document.getElementById("root"); if (rootElement) { const root = createRoot(rootElement); root.render(); } }; if (typeof document !== "undefined") { window.initClient(); } export default async function server(request: Request): Promise { // Handle GET requests by serving the HTML if (request.method === 'GET') { return new Response(` Val Town SQLite Explorer

`, { headers: { 'Content-Type': 'text/html', 'Access-Control-Allow-Origin': '*' } }); } // CORS handling if (request.method === 'OPTIONS') { return new Response(null, { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Accept', 'Access-Control-Max-Age': '86400' } }); } // Ensure POST request if (request.method !== 'POST') { return new Response('Method Not Allowed', { status: 405, headers: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/plain' } }); } try { // Dynamic import for SQLite const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); // Parse request body const { query, table } = await request.json(); if (!query || !table) { throw new Error('Query and table are required'); } // Validate table name to prevent SQL injection const allowedTables = [ 'val_town_agent_specifications', 'val_town_agent_tasks' ]; if (!allowedTables.includes(table)) { throw new Error('Invalid table name'); } // Execute the query const result = await sqlite.execute(query); return new Response(JSON.stringify(result), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); } catch (error) { console.error("SQLite Query Error:", error); return new Response( JSON.stringify({ error: "SQLite Query Failed", details: error.toString(), stack: error.stack }), { status: 500, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } } ); } } const css = ` body { font-family: system-ui, sans-serif; line-height: 1.6; background-color: #f4f4f4; margin: 0; padding: 0; } #root { max-width: 800px; margin: 0 auto; padding: 20px; } input, select { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #45a049; } button:disabled { background-color: #cccccc; cursor: not-allowed; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } `;

sqliteExplorerApp