[{"_1":2,"_125":-5,"_126":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","088f8e8a1542c81895839dd3ab1d8fdf4c41f01a","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.$handle.$name",{"_93":94,"_113":-7},"val",{"_95":96,"_97":98,"_99":100,"_101":102,"_103":-5,"_104":105,"_106":107,"_108":107,"_109":110,"_111":112,"_113":114,"_23":115,"_120":121,"_122":123,"_124":72},"name","blobCommentsReact","author","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","valNameId","9fa6a5aa-395d-11ef-879f-de64eea55b61","privacy","public","readme","valType","http","currentVersion","35e7ec30-3964-11ef-b228-de64eea55b61","id","code","/** @jsxImportSource https://esm.sh/react */\nimport { Hono } from \"https://esm.sh/hono\";\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { hydrateRoot } from \"https://esm.sh/react-dom/client\";\nimport { renderToReadableStream } from \"https://esm.sh/react-dom/server\";\nimport { blob } from \"https://esm.town/v/std/blob?v=10\";\n\nfunction App() {\n const [comments, setComments] = useState();\n const [newComment, setNewComment] = useState(\"\");\n\n useEffect(() => {\n fetch(\"/comments\")\n .then(response => response.json())\n .then(data => setComments(data));\n }, []);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (newComment.trim() !== \"\") {\n const response = await fetch(\"/comments\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ comment: newComment }),\n });\n const data = await response.json();\n setComments(data);\n setNewComment(\"\");\n }\n };\n\n const handleDelete = async (id) => {\n const response = await fetch(`/comments/${id}/delete`, {\n method: \"POST\",\n });\n const data = await response.json();\n setComments(data);\n };\n\n return (\n \n \n Comments\n \n \n \n

Comments

\n \n

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

\n {comment.text}\n \n handleDelete(comment.id)}\n className=\"text-red-500 ml-2\"\n >\n x\n \n

\n ))\n : \"Loading...\"}\n

\n \n \n );\n}\n\nif (typeof document !== \"undefined\") {\n hydrateRoot(document, );\n}\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const comments = await blob.getJSON(\"comments\") || [];\n const stream = await renderToReadableStream(, { bootstrapModules: [import.meta.url] });\n return new Response(stream, { headers: { \"content-type\": \"text/html\" } });\n});\n\napp.get(\"/comments\", async (c) => {\n const comments = await blob.getJSON(\"comments\") || [];\n return c.json(comments);\n});\n\napp.post(\"/comments\", async (c) => {\n const { comment } = await c.req.json();\n let comments = await blob.getJSON(\"comments\") || [];\n comments.push({ text: comment, id: Math.floor(Math.random() * 1000).toString() });\n await blob.setJSON(\"comments\", comments);\n return c.json(comments);\n});\n\napp.post(\"/comments/:id/delete\", async (c) => {\n const id = c.req.param(\"id\");\n let comments = await blob.getJSON(\"comments\") || [];\n comments = comments.filter(comment => comment.id !== id);\n await blob.setJSON(\"comments\", comments);\n return c.json(comments);\n});\n\nexport default app.fetch;","createdAt",["D",1720028803566],"version",14,{"_116":117,"_118":119},"handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","fileId","dc9cfc62-25f1-11f0-ad23-569c3dd06744","slug","stevekrouse/blobCommentsReact","description","actionData","errors"]