/** @jsxImportSource https://esm.sh/react */ import { Hono } from "https://esm.sh/hono"; import React, { useEffect, useState } from "https://esm.sh/react"; import { hydrateRoot } from "https://esm.sh/react-dom/client"; import { renderToReadableStream } from "https://esm.sh/react-dom/server"; import { blob } from "https://esm.town/v/std/blob?v=10"; function App() { const [comments, setComments] = useState(); const [newComment, setNewComment] = useState(""); useEffect(() => { fetch("/comments") .then(response => response.json()) .then(data => setComments(data)); }, []); const handleSubmit = async (e) => { e.preventDefault(); if (newComment.trim() !== "") { const response = await fetch("/comments", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ comment: newComment }), }); const data = await response.json(); setComments(data); setNewComment(""); } }; const handleDelete = async (id) => { const response = await fetch(`/comments/${id}/delete`, { method: "POST", }); const data = await response.json(); setComments(data); }; return ( Comments

Comments

{comments ? comments.map((comment) => (

{comment.text}

)) : "Loading..."}

); } if (typeof document !== "undefined") { hydrateRoot(document, ); } const app = new Hono(); app.get("/", async (c) => { const comments = await blob.getJSON("comments") || []; const stream = await renderToReadableStream(, { bootstrapModules: [import.meta.url] }); return new Response(stream, { headers: { "content-type": "text/html" } }); }); app.get("/comments", async (c) => { const comments = await blob.getJSON("comments") || []; return c.json(comments); }); app.post("/comments", async (c) => { const { comment } = await c.req.json(); let comments = await blob.getJSON("comments") || []; comments.push({ text: comment, id: Math.floor(Math.random() * 1000).toString() }); await blob.setJSON("comments", comments); return c.json(comments); }); app.post("/comments/:id/delete", async (c) => { const id = c.req.param("id"); let comments = await blob.getJSON("comments") || []; comments = comments.filter(comment => comment.id !== id); await blob.setJSON("comments", comments); return c.json(comments); }); export default app.fetch;

blobCommentsReact